Sencha Shows Facebook How To Do HTML5
Sencha has released a technology demonstration called Fastbook, which implements some of the most challenging parts of the Facebook app in HTML5 while outperforming the native app.
When Facebook's Mark Zuckerberg talked about why the company had backed away from its initial use of HTML5 for its iOS and Android apps, he caused a lot of waves. Zuckerberg said of the company's early use of the web technology: "I think 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." The tech press jumped on and amplified the "biggest mistake" comment.
Sencha, which makes its living providing tools and frameworks for HTML5 developers, took umbrage at that "just wasn't there" remark. The company set out to prove in a graphic way that HTM5 is indeed ready for any challenge modern apps can throw at it. They developed a subset of Facebook's app for mobile devices and called it Fastbook. The demonstration concentrated on the hardest parts of what Facebook's app needs to do: in particular the "infinite" scrolling of the Timeline and News Feed.
Doing it wrong
The Sencha engineers has suspicions, based on their HTML5 experience, as to the mistakes Facebook had made in implementing their HTML5 app.
When a team has problems with HTML5, it usually stems from the fact that they take a "website" development approach to building an app, and often don't use the right tools and architectures for application development... The way that [the Facebook HTML5 app] performed -- slow loading, choppy user experience in the News Feed, low frame-rate -- exhibited the usual symptoms.
Sencha began by instrumenting Facebook's newly implemented native app running on iOS. What they discovered was that Facebook's engineers still seemed to be taking a website approach. "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," wrote Sencha's Jamie Avins and Jacky Nguyen.
Here is a video comparing Facebook's "native" (hybrid) app with Sencha's Fastbook. Performance is everywhere at least comparable, and in some cases dramatically better on Fastbook. The UI is more consistent.
Doing it better
To keep the DOM tree from growing without limit, Sencha implemented a new technique in its core framework, called the Sandbox Container. This object "programmatically detaches complex views and renders them into their own iframes, and thus partitioning the DOM tree," according to Sencha's blog post.
A new Infinite List Container tamed the Facebook News Feed by keeping overhead low as new items were fetched and others scrolled out of sight. And the fetching was made asynchronous:
To help ensure [that getting more data to feed the list] doesn't slow down scrolling, we use Web Workers. These allow us to move XHR/RPC communications away from the UI thread. Saving network request cost and JSON encoding/decoding using Web Workers makes great use of today's multi-core devices.
Lessons
Sencha's work demonstrates pretty convincingly that HTML5 provides the tools to write apps that are comparable to native ones in performance. It also demonstrates that developers trained in the old ways of web pages may not automatically have the knowledge to make best use of HTML5 for the mobile medium. One argument in favor of HTML5 has been the wider availability of developers with relevant experience; we may need to temper this view somewhat.
Sencha's demonstration could give ammunition to those who view Facebook as an old-style desktop web company ill-equipped to thrive in the emerging mobile world. The stakes for the newly public Facebook could hardly be higher.
Related links