Sencha has created Fastbook, an HTML5 application closely mocking Facebook’s native application and displaying similar performance both on iOS and Android in an attempt to demonstrate that “HTML5 is ready.”
Mark Zuckerberg, CEO of Facebook, said a few months ago that “the biggest mistake that we made as a company is betting too much on HTML5 as opposed to native because it just wasn’t there,” and the company decided to create native applications for iOS and Android, the later being launched less than a week ago. The general comment was that HTML5 is not “ready”, it is not fast enough, and there are difficulties developing it due to lack of proper tooling.
Two developers from Sencha, a company known for creating an HTML5 framework and tools, decided to demonstrate that HTML5 is ready and created Fastbook in a few months in their spare time. Fastbook is an HTML5 application that mimics Facebook’s native application and does real FB data access by using Facebook’s API. (The application should be tried from a mobile device since it does not seem to work properly in a desktop browser.)
The short video below shows native Facebook being tested against Fastbook both on iOS/iPhone 4S and Android/Galaxy Nexus. Surprisingly, the HTML5 app performs as good as the FB native one when it comes to loading the news feed and scrolling through it, and it outperforms the FB app on several counts:
- the HTML5 app caches data when switching between different views. In contrast, FB native reloads the news feed
- Fastbook uses nested infinite lists for comments providing a better experience
- Fastbook has the additional landscape layout
- On Android/Galaxy Nexus the HTML5 apps loads data faster than the native Facebook app does.
The Fastbook creators believe that an HTML5 application displays poor behavior when it is architected using a “website development approach” and not using the “right tools for application development.”
They also discovered that Facebook’s native application has at least two major flaws:
- It is still a hybrid app: “The News Feed had moved to native as had the profile page, but many of the other application UIs were simply HTTP GET requests to m.facebook.com. Today's “native” Facebook application is a hybrid web / native application: there is content rendered on m.facebook.com and displayed in a UIWebView and native Objective C components mixed together.”
- It transfers much more data than it needs, about “15KB to 20KB of gzipped JSON data is transferred for every 10 items, much of that is not needed to render the actual views.” After cleaning the FB data on a proxy server, the Sencha team reduced the traffic by 90%.
To make this demo work, Sencha had to improve their Touch framework:
- Added a new Infinite List component for pages with an unknown number of items. This list contains a small number of DOM nodes being reused to render previous/next items. This helps by lowering the memory footprint and drastically reducing rendering time for large pages.
- Added a new Sandbox Container “which programmatically detaches complex views and renders them into their own iframes, and thus partitioning the DOM tree.“ The advantage: the news feed is fasters because the News Feed, Timeline and Story views can now use separate containers.
- Better integration with the existing Task Queue which “prevents the interleaving of read and write requests to the DOM, eliminating any unnecessary layouts. This, combined with the new sandboxing technique, significantly reduces costly layouts from complex views such as the Timeline and News Feed.”
- Added a new AnimationQueue class which postpones some of the consuming tasks for later when the CPU is idle. This helps with scrolling: when the user scrolls the news feed at high speed, image loading and rendering is suspended until the scrolling stops, when it is recommenced.
- Fastbook uses WebWorkers which allows retrieving data in a separate thread than the UI one letting the scrolling to be smoother.
If HTML5 was not up to the job last summer, the Sencha demo shows that now HTML5 can be as fast as a native application, proving that HTML5 is “ready” even for large web applications such as Facebook.
Sencha has also launched HTML5 Is Ready, an app contest offering $20,000 in cash and devices for developers “ready to show just how amazing apps can be when great developers are paired with great tools on top of HTML5.