How WhatsApp shows discussions so fast? - performance

I am working on a chat app, and when I click on a discussion with more than 20 messages, it always take a little while to show the discussion.
On WhatsApp, there is NO timeout, even if the discussion is 5 years old, even if I have 500 discussions in my app. It seems that all discussions are preloaded... but I don't think it's the case, because it would burn too much memory, wouldn't it ?
So, beside choosing to show the last 20-30 messages, and beside having all the data in local storage (because I tried to, doesn't help), what is the technique WhatsApp uses to be able to load discussions so fast ?
Note: I am building my app in React Native.

The way they do it is by using data adapters, database cursors, reusing views and keeping only required data in memory.
This allows application to only fetch and display limited amount of elements and data on the screen. When you scroll next page, items are loaded like a viewpager. When you scroll up it does the same in opppsite direction.
It's worth mentioning that these apps are natively implemented and have all the system level apis available to their disposal. You can do same with proper type bindings and call underlying apis at slight lower performance than pure native apis as javascript wrapper would call the api on behalf. There are some libraries to checkout which does the same.
That said reading docs would also help you further optimize rendering
Optimizing lists configuration: React Native
Also checkout androids own ListView docs and techniques to optimise them and adapt them to your use case.

Related

Suggestions for data mash-up development platform

If a question seeking product recommendations is not deemed 'right', please feel free to lock/delete this post. I will seek other avenues.
The presentation layer of enterprise applications has hardly ever been my focus area. However now, I am required to look for a development platform that allows quick and easy development of dashboards with widgets. Where, development is no more than drag-drop and few clickys here and there. This is because the audience is more of business oriented folks than development staff.
After much browsing around, I think, I have short-listed the requirements of a development platform suitable for us.
Custom display elements. I should be able to import display elements (line chart, bar graph, etc.) or develop on my own.
Event-based refresh. All the display elements should have an option to refresh itself based on events than on a refresh time period.
Responsive. The display elements should render correctly on different browsers on devices of different aspect ratio e.g. laptop, desktop, 42" LED TV, etc.
Internationalization support. All display text and locale elements (date, money, etc.) should be rendered via a 'bundle' or at least be programmable for me.
Hand-held friendly. The platform maybe provides a SDK that allows handling of device gestures for rendering display. For example, pinch to zoom, swipe, etc.
Ideally, an open source product backed by commercial support would be great.
Most options that I have seen, do not have an easy drag-drop feature. For example, d3.js has some really amazing visualizations but, probably requires non-trivial development effort. I checked out Freeboard too, but, I am not sure if it can extend to custom data sources and widgets. Splunk looks good but I am not sure how extensible it is.
So, what are your suggestions?
I would highly recommend Splunk for your case. I have been working with it for quite a while now and have seen numerous capabilities. It is not true that it is not responsive; most companies demonstrate Splunk dashboards on wide screens, projectors, mobile phones, etc.
Using custom display elements couldn't be easier. There is a variety of options of charts,graphs,stats tables and others,plus you can work with various programming language from simple xml and html to javascript (d3 libraries are supported for D3 visualizations) for more complex applications. You can add drilldowns to your panels, time pickers, search boxes, all by using its GUI interface.
You can easily configure it to "auto-run" when new events are available by choosing one of the real time options , e.g. 1-minute-window, 5-minute-window,etc.
You will be impressed how easy is to "form" your data, as Splunk recognises and extracts timestamps and time zone data automatically (of course you can apply your own settings in any case). It is also capable of recognising different data sources (like json, syslog, database logs, etc) providing the proper configurations for line breaking, fields extractions, and other options, allowing regex replacement too.
Imho it is the easiest and most robust way to visualise your data quickly allowing a lot of space for customizations.

Why are modern apps using so much RSS even with few data?

On mac for instance:
Why do text editors use 30MB RSS just for a text pane, less than 1K chars, open/save, find/replace and a few other basic functions ? They were using way less a few years before, while their functionality did not change.
Why is Firefox using 500~1000MB rss when you browse a few webpages of a few hundreds KB each ? Why does it uses 300~500MB just to startup, even with no addon ?
Why does Safari acts the same, even if it is supposed to be using cocoa libraries which should be shared and in VSZ and not RSS ?
There are many answers to this and I'm procrastinating, so here it goes :)
For better or for worse, the system requirements of software increase because those developing it feel that more hardware resources are available to the typical user of their software. This means:
Less development resources can be spent on fine-tuning (e.g. using higher-level programming frameworks, spending less developer time on optimizing resource usage vs implementing new features and fixing behavior bugs).
New features can be added to the software (I don't know about text editors, but you'd probably be surprised if someone counted the number of new web platform features browsers added support for during the last few years.)
Different memory/performance tradeoffs can be made (i.e. caching more stuff in memory)
Memory usage of simple apps on Mac - see Why do Cocoa apps use so much memory? . Basically, your understanding of Resident set size is quite simplistic.
Browsers' memory usage
Memory usage mainly depends on the content the browsers have to display. You might think you have a "few hundred kb" page loaded, when in fact a typical web page is an application with code for handling or tracking your clicks, a few sub-applications (one for each "like" and "+1" button, or for ads), with another application for the flash applet embedded on the page, etc.
Software is hard, and browsers are very complex in particular (e.g. Firefox has more than 9M lines of code according to ohloh). So an easy optimization can cost a lot more than you might think. A recent example I've seen (681201): when you restart Firefox and it's set to not load the pages in tabs before you switch to a tab, each "empty" tab still uses several hundreds of KB. This is because every "empty" tab actually has a blank HTML document loaded into it and a full-featured JavaScript environment set up, ready to execute code.
Seems easy to fix (just don't create a blank document for empty tabs!), but changing this requires auditing much of the browser code that works with tabs to properly handle the "empty tab" case, and worse, requires changes to add-ons that depend on every tab having a document. So while gradual improvements are being made (down to 160K per tab from more than a megabyte), it's not as easy as it sounds.

Is real time collaboration possible using a text area?

I am developing an application which requires real time collaboration. I am planning to use a cshtml text area to allow the users to type. Is real time collaboration achievable using a text area?
Also, I have read a little about operational transformation. Can it be achieved using .net framework?
I am just a beginner and do not have much knowledge about algorithms that will help me achieve real time collaboration. Any help will be appreciated.
Thanking you in advance.
ShareJS is free, uses node.js to achieve what you are looking for, and implement a OT2 algorithm
For .Net there is no Operational Transformation out-of-the-box, however you can take a look to BeWeeBee SDK, (though is commercial software)
I am developing an application which requires real time collaboration. I am planning to use a cshtml text area to allow the users to type. Is real time collaboration achievable using a text area?
This really depends on the user experience you want to deliver. If you want to lock the textarea for one user whilst the other is editing then that might not be the nicest user experience but it's most definitely relatively easy to do.
If you want two or more users to be able to simultaneously edit the same text area then sending data_changed events between the users is reasonably easy using a realtime web technology but you'll need to handle the synchronisation of the textarea content between the users and handle collision detections. The user experience for this is also much more complex.
Also, I have read a little about operational transformation. Can it be achieved using .net framework?
I had to look up operational transformation and it partially answers the question about the user experience - it's non-blocking. Having skim-read the wiki doc I'd ask the question: why would it not be possible? You can communicate instantly between all users/application to notify them of changes (as stated: using a realtime-web technology) so you just need to implement and manage all the clever algorithmic stuff :) (I don't know if there's a component that will manage that for you)
For self hosted .NET realtime web technologies you might want to look at SignalR, XSockets, SuperWebSocket or WebSync.
If you want to get up and running a bit faster you might look at a hosted realtime web technology
This is an old question but there is some additional information that might be helpful. As previous answers mention, there are several options out there for text based data synchronization. Many of them based on Operational Transformation or CRDTs. These approaches are implemented in SDKs in many languages. (Full disclosure, I happen to be one of the authors of the Convergence).
However, you also need to take into account some of the other features required to implement collaborative editing. For example:
Presence: Who is there editing with you?
Collaboration Awareness: Things like shared cursors and selections?
Local vs. Group Undo: What happens when a user hits control-z? Are they undoing the last action they did, or the last action the other remote users did?
History: Knowing who did what is more complicated when multiple people are editing at the same time. When one user hits save (if there is a save) they may be saving actions performed by another user.
These are just a few examples of things to consider in collaborative editing beyond just data synchronization. When these questions come up, most answers focus solely on the data synchronization framework. At Convergence Labs, we help people work design collaborative editing applications and have implemented dozens of such apps. We have seen many times over that if all you put in is data synchronization, the user experience turns out to be pretty poor and users will not like the application.
So, in selecting a framework, look for something that helps you implement some of the other facets of real time editing, or at the least be prepared to implement them yourself on top of whatever tools you select.

AJAX vs ActiveX/Flash for browser-based game

I have been following the usage of JavaScript for the past few years, and with the release of extremely fast scripting engines (V8, SquirrelFish Extrene, TraceMonkey, etc.) the possibilities of JavaScript have increased dramatically. However, the usage share of Internet Explorer coupled with it's total lack of support for recent standards makes me want to drop a bomb on Microsoft's HQ, as it creates a huge amount of problems for any website.
The game will need to be pretty dynamic client-side, with animations and other eye-candy things, but not a full-blown game like those that run directly in the OS using DirectX or OpenGL. However, this might be a little stretch for JavaScript and will certainly feel extremely slow in Internet Explorer (given that the current IE engine can be hundreds of times slower than SFX; gotta see what IE9 will bring), would it be better to just do the whole thing in Flash? I know this means requiring the plug-in AND I have no experience whatsoever with Flash (other than browsing YouTube :P). It also means I can't just output directly from PHP, I would have to use XML or some other format to pass data to it (JSON is directly integrated in JS and PHP can deal with it easily).
Another idea would be to provide an alternative interface just for IE, though I don't know how (ActiveX maybe? or with Flash, then why not just provide it to all browsers) or totally not supporting it and requiring the use of other browsers, although this is plain stupid from a business perspective.
So here am I, wondering what approach to take and thus asking for your advice. How should I build the client-side? AJAX in all browsers, Flash in all browsers or a mix (AJAX for "modern" browsers and something else for the "grandpa": IE).
I recommend a plug-in platform (Flash, Silverlight, or Java) over AJAX. Having a clean layer of abstraction between your game and the client's browser is a big advantage. In any non-trivial AJAX game look forward to endless corner-cases where browsers differ in performance or implementation.
Personally, I think Flash is easy to learn if you are coming from AJAX experience. Flash is currently the most widely installed and proven plug-in for browser games. However, Silverlight and Java are both building momentum. Also, the Unity engine has become a popular choice for commercial browser games.
I think you shouldn't leave Java out of the equation. It's a powerful, fast language, and with Java applets, you can do almost anything. If you want hardware-accelerated graphics via OpenGL, JOGL can do it, even in an applet.
On the other hand, it might not be right for you. But at this early stage, I think you should evaluate all of your options, and since you have no experience with Flash but sound like you've got a bit of programming experience, you might feel more at-home with Java.
I believe the current answer is Flash game.
Alternatives:
Java Applet: getting less and less common those days and it is not commonly installed as a plugin on many computers.
SilverLight: too new and might vary and change in time. not commonly installed on many computers and it's Microsoft (whom tends to change technology every 2 years ...)
JavaScript / AJAX: Still a new kid on the block, it's on the rise it is true with many nice features, but still lack of good cross browser for IE even IE8, can not play sounds internally, still slower than the others, and you don't know where will it evolves.
Eventually probably the best solution for now is Flash development:
Cross platform. Works fast. Long time already alive and have a lot of support.
I hope this answer will change in the next year. Happy Peasach.
Check out Jmonkey. The "plugin" loads if you have Java on your machine. Once it's cached, the next time the visitor goes to the page, it your game loads very quick. Check out their website for demos and see what I mean: http://www.jmonkeyengine.com/
Oh, I forgot to say, it's a 3D scenegraph Java engine. I just tried it again, and it loaded in linux. Looks they've put in some good work.
Don't do it with javascript in the browser. And Flash really can be a pain just because it's closed source and you don't know if you've made a mistake or found a bug - speaking from experience. I'd never want to make another Flash game again.
How about using RaphaelJs , it is a Javascript library that make dinamyc images using SVG, and for IE, it try to make those images using the IE alternative: VML. Im using it on my own WebGame, but i dont really make complex graphics in it. The most complex thing done on RapahelJs was a heath map (20 * 20 tiles ) with a dinamyc opacity slider. An it work with jquery without any problem or configuration!

What are the (technical) pros and cons of Flash vs AJAX/JS?

We provide a web application with a frontend completely developed in Adobe Flash. When we chose Flash 6 years ago, we did so for its large number of features for user interaction, like dragging stuff, opening and closing menus, tree navigation elements, popup dialogs etc.
Today it's obvious that AJAX/JS offers roughly the same possibilities and because of the number of frameworks that are readily available, it's very feasible to implement them.
Is there a technical reason one should choose either technology over the other? By "technical", I mean performance, security, portability/compatibility and the like. I don't mean aspects such as the very non-programmer way development is done in Flash or whether it makes sense to switch an app from one to the other.
As I just explained in another question, it seems to me that JS is way ahead in terms of market share and I'm wondering whether we are missing some important point if we stick to Flash.
In addition to what others have said, Flash is constrained in the "rectangle" and cannot be added to a normal html page in an un-obtrusive manner.
#Gulzar I think when more browsers will support the video tag like mozilla 3.1 does we'll see even more adoption of ajax/js over flash.
Adobe Actionscript is a statically typed language, Javascript is dynamically typed. Depending on your point of view, this may be a good thing or a bad thing.
With Javascript/HTML/CSS you're going to be heading into cross-browser compatibility hell, especially if you want to support older browsers. This can be mitigated by the libraries that are available, but it's still a big headache. With Flash, you write the code once and it just works in all browsers.
Even with the libraries available, Flash user controls are simply more advanced than anything you can find in the world of Javascript/HTML. In Javascript, you are not going to find anything that comes close to the simplicity and power of a databound user control that Flash provides.
I don't see how Javascript has more of a "market share" than Flash. Pretty much anyone with a web browser has a Flash plugin installed. I'd be curious to know how many people disable Javascript but have a Flash plugin.
Also keep in mind that you're going to be in for a huge learning curve and lots of development time if you decide to switch your technology base so you'd really better have a good business reason to do it.
This decision also has a lot to do with what your application does and who your install base is.
Edit: I see people have mentioned that the iPhone doesn't have Flash support. I would expect this to change with the install base of the iPhone - Adobe would be crazy not to support it.
Correctly designed AJAX apps are more googleable than Flash
Correctly designed AJAX apps are more easily deep linkable than Flash
AJAX doesn't require a plugin (Flash is pretty ubiquitous, so it's not really a big deal)*
AJAX isn't controlled by a single company the way Flash is
Edited to add:
* Except for the iPhone, as Abdu points out.
JS and Flash both have great presence on the web with overlapping capabilities. One area JS is still lacking is in rendering video.
Flash, used well, allows easy localization and internationalization.
Furthermore, it is much easier to use Flash in an accessible manner; you can feed screen readers the right text, instead of having them iterate over all of the possible form elements.
I think Flash should be limited to online games, videos and animation. Otherwise use html and Ajax. It's a web standard and supported by almost all devices.
AFAIK, the iPhone doesn't support Flash. That's a fast growing segment you're blocking out already. Keep it simple and efficient.
Although flash is pretty ubiquitous on desktop browsers, mobile support is very limited (flash lite? yeah, right). I get really frustrated looking up a restaurant on my phone only to find the entire site is flash based and I can't even get a phone number or address!
One benefit of Flash is that it has a few facilities to help do cross domain type operations safely, which can be helpful. Flash also has (limited) support for some hardware, which is not possible with Javascript.
Personally, I'd try to use as much Ajax as possible before turning to something like Flash. From the UI perspective, it is better in that the controls and basic authoring is a little more developed. The Sound Manager project is a good example of effectively using a small amount of Flash while keeping the remainder in Javascript.
I suspect one of the reasons javascript is becoming more popular is that it's more easy to retrofit into an existing application.
As I can't accept two answers, I'm going to merge Christ Upchurch's and 17 of 26's answers in my own post. I think, these two together pretty much sum up what I wanted to know. Thanks guys!
If you're dealing a lot with polygons, then Flash is still easier to program and debug. With AJAX there are a lot of libraries to handle polygons, but the more libraries your app uses, the slower it gets.

Resources