Sencha Remakes Facebook HTML5 App Using API

Remember when Mark Zuckerberg blamed the problematic old Facebook mobile app--dubbed "freakishly slow" by some--on "betting too much on HTML 5?" So does backend-as-a-service (BAAS) provider Sencha, and to rebut Zuckerberg's assertion that using HTML5 was "one of [Facebook's] biggest mistakes," Sencha built its own mobile webapp, Fastbook, to demonstrate that HTML5 is ready for prime time.

To be fair, Zuckerberg didn't trash HTML5 outright; he explained that many Facebook users actually use the mobile web site through a smartphone browser, and it was the specific HTML5 implementation of the Facebook mobile app which failed to meet expectations and led the company to develop native iOS and Android apps. Sencha was determined to do better, and in seeking to build an improved HTML5 interface to Facebook, it also discovered some surprising things under the hood of the official Facebook app:

"We connected an iPhone to a web debugging proxy, and started to look at the HTTP traffic the [Facebook] application pushed over the network. Our biggest shock: much of the application was still raw HTML pages. 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 Today's “native” Facebook application is a hybrid web / native application: there is content rendered on and displayed in a UIWebView and native Objective C components mixed together."

Further investigation revealed that "the API calls returns[sic] huge amounts of raw data to the client. A typical example is API calls made to to render News Feed items. In average, 15KB to 20KB of gzipped JSON data is transferred for every 10 items, much of that is not needed to render the actual views." To improve performance, Sencha built a custom proxy server to clean up the raw data from the Facebook FQL API, and was able to reduce the amount of data transferred by up to 90%. Get the whole story in Sencha's blog post "The Making of Fastbook: An HTML5 Love Story."

Fastbook is not a replacement for Facebook; the current webapp only includes full-featured Profile and News Feed views. Sencha calls Fastbook "a technology demo that shows what developers can do with HTML5 if they take the right approach, and use the right frameworks and tools." To underscore that point, Sencha is sponsoring an HTML5 is Ready App Contest, offering over $20,000 in prizes to developers who make "innovative and amazing" mobile apps using a Sencha Framework.

Be sure to read the next Best Practices article: Interview: Zendesk's Meditations on API Strategy