Our Investigation on HTML5 Frameworks and Libraries

January 23, 2013

While experimenting with HTML5, we have conducted an investigation to figure out what could be the best solutions among existing HTML5 frameworks and libraries. You might ask – how? We created demos of one-screen app and compared performance modules in different applications. There is an abundance of HTML5 frameworks and libraries; however, we choose five, which seemed to be the most promising.

jQTouch is simplest and easiest to use among other frameworks, what’s more, it’s relatively well-documented. Test results: there were some regular performance issues with page transitions delays in responding to tap events, although it performed quite well with list-based features on iOS and Android .

jQuery Mobile’s performance is better. The poor side is animation performance. Also, there were not enough standard event triggers. We believe it could be a great solution for small apps, while it doesn’t work well with high-loaded apps. It’s being developed very fast. At the moment it’s one of the most improving framework in the mobile web industry.

Sencha Touch is far more sophisticated with a wide range of UI components, explicit iPad support, storage and data binding facilities using JSON & HTML5 offline storage, and more. It has built-in support for objects that stay put (like a toolbar) while others scroll (like a list).

Sencha performed noticeably better and more reliably than either jQTouch or jQuery Mobile in our tests, with the exception of initial load time. Also, we noticed that this framework generates too much additional code that influences the load time.

Appcelerator’s Titanium Mobile allows creating apps using a JavaScript API. It compiles most of your code into a native iPhone or Android app. However, it’s advantage is also its greatest disadvantage: you can only target the platforms Titanium supports, and you’re tied to their developer tools.

Zepto.js is a minimalist JavaScript framework for mobile WebKit browsers, with a jQuery-compatible syntax. Allows creating fast and lightweight applications.

It was easy to extend applications comparing with all other frameworks. It takes more time to create the visual elements, but they will be 100% reliable and extendable. The great example of using Zepto.js was the LinkedIn HTML5 based application.

For more information on HTML5 mobile frameworks check out this comparison mega chart with lots of details.

Conclusion

As you can see, choosing a framework really depends on your goals and a type of an app you are working on.vAs a result of our investigation, we decided that the visual part of the application would be developed with the help of Zepto.js. Even though it takes more time to develop, but the functionality is more stable and easy to support. The core logic of the application was developed using the Backbone.js and Underscore.js libraries, as they showed their great performance in the LinkedIn app.

Despite all of our efforts in creating cool experience on HTML5 (we also used a native wrapper – PhoneGap) in the long run, approximately in a course of a year, we switched from HTML5 to native mobile apps.