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

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.

They needed to change their framework just to cope with poor hybrid app
by
Seriy V

As video shows one of the developers is their Sencha Touch architect. So to who that you can create same app in HTML5 you need HTML 5 framework architect and you need to perform significant improvements to the HTML 5 framework itself. What you will have to do to create another app? Hire their architect and perform other set of improvements in the framework? For me this is a strong prove that it is not ready.

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: They needed to change their framework just to cope with poor hybrid app
by
Russell Leggett

I think your points are fair. It is still very hard to do slick html5 mobile apps that perform as well as native. It is not for the feint of heart. However, I think what this does show is that it is possible. I think the impression that facebook has given off is that even with all of their resources they still couldn't pull it off - therefore it's impossible.

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.

Is your profile up-to-date? Please take a moment to review and update.

Email Address

Note: If updating/changing your email, a validation request will be sent

Company name:

Keep current company name

Update Company name to:

Company role:

Keep current company role

Update company role to:

Company size:

Keep current company Size

Update company size to:

Country/Zone:

Keep current country/zone

Update country/zone to:

State/Province/Region:

Keep current state/province/region

Update state/province/region to:

Subscribe to our newsletter?

Subscribe to our architect newsletter?

Subscribe to our industry email notices?

You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.

We notice you're using an ad blocker

We understand why you use ad blockers. However to keep InfoQ free we need your support. InfoQ will not provide your data to third parties without individual opt-in consent. We only work with advertisers relevant to our readers. Please consider whitelisting us.