Fastbook: Sencha Wants to Prove HTML5 Is “Ready”
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.
Comparing apples to oranges
I'd love to see the same comparison with Sencha's version running on an UIWebView.
And no, just using the app from the web is not an option, since you'd lose features such as notifications.
Re: Comparing apples to oranges
They needed to change their framework just to cope with poor hybrid app
At the same time they admin that the native Facebook app is not so "native". So I am absolutely positive that is you take an expert of same level in native app and create "good architected" native app it will tear apart any HTML5 competitor.
My team has used Sencha Touch for our last project. And our average developers had very serious problems with it. It was a paint to integrate web cam. They were not able to force keyboard to auto pop up when you go from one wizard step to the other. If we need Sencha architect and framework improvements to fix this - this is a great definition of "not ready".
Re: Comparing apples to oranges
Fastbook is not enough, we want 3D ;)
Here's a funky Facebook mockup with 3D wall scrolling. 3dbook.sc5.io - best enjoyed on an iOS device.
HTML5 FTW! ;)
Re: They needed to change their framework just to cope with poor hybrid app
It may have taken the sencha touch architect, and changes to their framework, but what that says to me is that it is possible, but hard, and what is lacking is knowledge and tools. As a toolmaker, I'm going to venture to guess they are trying to change that.
I would venture to say that depending on your needs, HTML5 is still not ready, but this may demonstrate that it is closer than you think.
John Krewson, Steve Ropa and Matt Badgley Nov 24, 2014