TOP 7 MOBILE APPLICATION HTML5 FRAMEWORKS

source: http://www.gajotres.net/top-7-mobile-application-html5-frameworks/

Last week I wrote an article where I discussed the difference between jQuery Mobile and Sencha Touch. While my previously mentioned article stands on it own I have neglected other available frameworks.

 

Before I continue let me give you a warning. This article will discuss HTML5 frameworks use for hybrid mobile applications. I am not going to talk about front-end frameworks like Bootstrap, this is not the point of this article.

 

Back to topic, admit it or not, jQuery Mobile and Sencha Touch are not center of the mobile world, the truth is far far from it. Mobile market is huge and so is the need for adequate HTML5 frameworks. The main reason for this article is that every single framework I am going to discuss has a completely different approach to architecture and development. Even more, some of them are created for a specific purpose and some are made to be all around Jack of all trades. Few of them don’t require special native wrapper software but most of them do.

 

Intro

 

For those who don’t know, Hybrid App is a combination of native app and mobile web app concepts. Typically the native code is provided by a wrapper framework (like Phonegap) which bridges a gap between native side and a JavaScript API so that the app’s JavaScript code can perform native functions such as taking a picture with the camera.

 

Unlike a classic mobile web app’s, which store source files on a server, hybrid mobile apps store HTML, JavaScript, and CSS files locally (while in same cases it can still be used from a server side) so no Internet access is required.

 

I will try to be as much objective as I can. Let me be transparent first, I am a jQuery Mobile and Sencha Touch developer. I have spent a lot of time playing with available frameworks before I chose those two. This doesn’t mean other frameworks are bad or inadequate, as you will see, my decision was hard and it took time. All of them are great but as Rolling Stones sang “You can’t always get what you want”.

 

Before I start take a look at a list of my chosen 7 in alphabetical order:

 

• Intel App Framework – ex jQMoby
• jQuery Mobile
• jQT – jQuery Touch
• Kendo UI
• Sencha Touch
• Titanium Appcelerator
• Zepto.js

 

1. Intel App Framework – ex jQMoby

 

 

This framework is a sleepy beauty. Extremely fast, just like Sencha Touch, this framework is optimized for Android and iOS platform.

 

Pro

 

• Fast and reliable, probably one of a fastest frameworks of this kind along, outperformed only by Sencha Touch
• Small and light
• HTML based, javascript is used to enhance HTML
• Excellent native wrapper solution, there’s no need to use Phonegap
• Has MVC support, external MVC framework that can be also used stand alone.

 

Con

 

• Horrible documentation, mostly compared to other frameworks
• Limited browser support, which is not that bad, but limits desktop usage.
• Not made on classic jQuery what ever it old name states. Personally I don’t like misinformation usage to attract developers. This framework is a rewrite Of the JQuery Framework. This may sound good until you find out that some things are missing or not done as expected.
• It could use better UI, but nothing prevents you from customization. Redesigned in version 2.0 with native themes.

 

Author notes

 

If they ever improved its documentation I would probably switch to this framework. I have already discuss this topic in my other ARTICLE. All in all this is a framework worth of a consideration.

 

Additional info

 

 

2. jQuery Mobile

 

 

This is most commonly used mobile application HTML5 framework. But don’t let this fool you. It doesn’t mean it is the best solution, most of its publicity comes from it older brother jQuery.

 

Pro

 

• Most commonly use, which means a lot of 3rd party information
• Extremely easy to use, HTML bases, just like App Framework
• Good official documentation, it could be better, according to some information jQM developers are working on making it better.
• Support every HTML5 browser you can think which makes it good for a desktop and mobile use
• Excellent theme support
• Large number of 3rd party plugins

 

Con

 

• Sluggish on mobile devices, it is not optimized like App Framework or Sencha Touch
• Average UI, as time passes I hate it more and more, but it can be easily fixed with custom CSS. Without customization every app looks like an clone. iOS GUI look which don’t look good on non iOS platforms.
• Official documentation is lacking some information, mainly how jQuery Mobile architecture works. While every single component is described in details you will need to brake you head to understood how all of that works together.
• No out of box MVC support. At the same time is supports Backbone.js and Knockout.js, with some limitations.
• Sluggish even more when combined with a Phonegap, you really need to have a good understanding of jQuery Mobile architecture to make it work correctly and fast. But if developers don’t change anything soon it will never be fast as App Framework or Sencha Touch.

 

Author notes

 

Currently my favorite framework, mostly because I am a sucker for a jQuery.

 

Additional info

 

 

Reading Material

 

A lot of books are written on jQuery Mobile topic, unfortunately only few are worth mentioning. A In any point I will not recommend books I don’t own.

 

jQuery Mobile Web Development Essentials, Second EditionYet another book from the Packt Publishing, second installment of this series. Originally I have bought first installment of this book which was outdated so you should also be careful. This one is currently 2 months old (26.11.2013) so it should satisfy you in coming months. Second edition is excellent all around book, covering everything from API to working examples. It is also an excellent book if you want to learn everything that needs to be know about jQuery Mobile API (Chapter 10), something event official product web page is lacking.

 

3. jQuery Touch

 

 

A Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices. Basically it can be used with Zepto.js or jQuery Mobile. Also, it is important to mention, this is not a framework, it was built as a jQuery plugin, and while not it also supports Zepto it is still considered a plugin.

 

Pro

 

• Fast and easy
• Excellent theme support
• HTML based

 

Con

 

• Supports only web-kit browsers
• Not that much buzz around it
• Still in beta after 4 years of development, this does not sound good
• It is lacking content in compare to other frameworks

 

Author notes

 

While it’s indeed fast I don’t see it in the future.

 

Additional info

 

 

4. Kendo UI

 

 

I already wrote a detail Kendo UI review + examples, it can be found here:http://www.gajotres.net/html5-frameworks-kendo-ui-from-a-jquery-mobile-perspective/

 

Another jQuery based framework. Unlike previous 3 this one is beautiful, supports MVVM and has its own support for server side communication (.NET, PHP and JAVA). Unfortunately Kendo UI will cost you a few hundred dollars if you want to create a commercial application, it is free in any other case. Excellent template support, every and each template looks and feels like native OS.

 

Pro

 

• Complete package, framework, UI and MVC all in one.
• Fast with SVG support, plus fallback support for older browsers
• HTML based
• Great documentation (there’s room for the improvement)
• Native look depending on mobile platform
• Great template system, themes are native like, depending on platform (iOS, Android …)

 

 

Con

 

• Commercial license and support
• Lack of 3rd party support, mainly due commercial license, but you would still be surprised how many developers use this framework

 

Author notes

 

Money is the only reason why I am not using this framework. It is not that I am not willing to pay for it, I just don’t want to use 2 commercial frameworks. What ever happen this is going to be my third framework of choice.

 

Additional info

 

 

Reading Material

 

Several Kendo UI books can be found online, but only two of them, from my experience are worth reading. In any point I will not recommend books I don’t own.

 

Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web APIDo not be discouraged by the title of this book, only one chapter (Chapter 3) is really dedicated to ASP.NET, rest of the book is dedicated to Kendo UI alone, making it also usable to JAVA and PHP developers. It is intended for beguines and expert developers alike. Book covers everything from API, widgets up to working example in form of Movie Ticket Application.

Instant Kendo UI MobileUnlike the previous one this book is dedicated only to Kendo UI Mobile library and its various components for building mobile applications effectively. It is rather short (compared to the previous one). Still it will cover everything you need to know about Kendo UI widgets and page building. One other thing, its price (6.29$) makes it also a bargain.

 

5. Sencha Touch

 

 

This framework is almost an alien in this jQuery based frameworks sea. It is fast, good looking, supports MVC and has probably best documentation among frameworks mentioned here. Again, like Kendo UI, it has a commercial license + commercial IDE. Unlike jQuery based frameworks (like jQUery Mobile, Kendo UI and PhoneJS) this framework is pure javascript.

 

Pro

 

• Complete package, framework, UI and MVC all in one.
• Subjectively fastest mobile application framework there is
• Best SVG support you can find, usable for game development
• Perfect documentation
• Native look depending on mobile platform
• Excellent in-house native app wrapping / packaging system

 

Con

 

• Commercial license and support
• Commercial IDE, you can’t believe how bad it feels to develop in anything else then its IDE
• Hard to master, unlike previously mentioned frameworks this one is purely javascript based
• Lack of 3rd party support, mainly due commercial license

 

Author notes

 

My second framework of choice. It is complex but that is why I like it. It requires a lot of time to master, it has a steep learning curve. I wrote a much comprehensive ARTICLE on an topic: jQuery Mobile or Sencha Touch so feel free and take a look if you need more information.

 

Additional info

 

 

Reading Material

 

Several Sencha Touch books can be found online, but only two of them, from my experience are worth reading. In any point I will not recommend books I don’t own.

 

Sencha Touch in ActionSencha Touch in Action is the definitive guide to developing applications with Sencha Touch. This book covers everything you need to know about building Sencha Touch mobile applications. It is intended for experienced developers but it can be also used for initial learning (if your javascript knowledge is satisfactory). There’s another great thing about this book, you can fully preview it / access it online.

 

 

Sencha Touch Cookbook, Second EditionSecond book is intended for beginners and advanced developers. This book is a practical, hands-on guide with easy to follow recipes that provide you with clear, step-by-step instructions. My first real intro into a Sencha Touch world was through this book first edition. It is less about API more about step-by-step instructions, great for developers who lack advanced javascript knowledge.

 

6. Titanium Appcelerator

 

Another alien here, also this one is not HTML5 framework. It uses similar pure javascript approach like Sencha Touch, but unlike Sencha Touch this one converts javascript to native code.

 

Pro

 

• Final native code makes it natively fast
• Can be used for fast prototyping
• Cross-platform, one code can be used to create iOS, Android and other mobile platform applications

 

Con

 

• Not that good documentation, can be confusing sometimes
• Not that much flexible
• It requires knowledge of native Android / iOS development if you want to get most of it
• Cross-platform is also has a negative side, complex GUI will require different code for Android, iOS …

 

Author notes

 

Excellent framework made for fast application prototyping. It can become problematic if you need to create a complex cross-platform application. Not to mention it require some knowledge of native Android / iOS development.

 

Additional info

 

 

Reading Material

 

Not that many books were written on topic of Titanium Appcelerator, some time ago, one of framework developers pointed me to a book he called a “Great entry to the Titanium Appcelerator”. A In any point I will not recommend books I don’t own.

 

Appcelerator Titanium Business Application Development CookbookFrom my experience this is best Titanium Appcelerator book if you want to cover everything from the framework API , MVC, REST, Security …. It can be used by beginners and experts alike. Don’t expect a “For dummy’s” book here, Packt Publishing have high standards.

 

7. Zepto.js

 

One of a first pioneers in this field. Designed to be smaller and faster then jQuery but still similar in its architecture. Unfortunately it is not that much faster then jQuery, I would even go further to say that their performances are similar. Don’t confuse this with jQuery Mobile, while it is not faster then jQuery it is faster the jQuery combined with jQuery Mobile.

 

Pro

 

• One of a first so lets gave it a point for that
• Lightweight
• Smoother and faster then jQuery Mobile but still not fast as other jQuery derivative frameworks
• If you know jQuery you will know Zepto

 

Con

 

• Just like App Framework this one lacks some jQuery functionality
• Slower in a DOM manipulation
• Doesn’t have a large support for HTML5 browsers like jQuery Mobile, this changed with time but it still don’t support IE

 

Author notes

 

Ok’ish framework but personally it don’t have anything that would give me a reason to switch from jQuery Mobile. It was one of inspirations from App Framework (jqMoby at that point).

 

8. Seven more frameworks

Click on the image, it will lead you to the second part of this article, or find it here.

 

Framework usage statistic

 

Currently official usage statistic data that will compare these frameworks don’t exist and I don’t think it will ever exist.

 

There’s one indirect way this data can be gathered. As many of you probably know, Stackoverflow (my account) is the flagship site of the Stack Exchange Network, made to be a more open alternative to a forum question sites. Every mentioned framework has a group dedicated to it, each group has a list of question, and each list can be calculated. Idea is to use that data to represent framework usage data.

 

Of course, we need to take this with a grain of salt, a lot of questions can also indicate a complex or buggy framework. All in all this will give as best available statistic of framework usage.

 

• 1. jQuery Mobile – 13,705
• 2. Kendo UI – 3024
• 3. Titanium – 2,397
• 4. Sencha Touch – 2235 *
• 5. Zepto – 232
• 6. jQTouch – 465
• 7. App Framework – 68 **

 

* – This calculation is based on a sum of two groups: Sencha Touch and Sencha Touch 2. It is only fair to calculate everything. This number would be higher if extjs is included but then we would also need to add a jQuery to jQuery Mobile which brakes the point of this statistic. ** – App Framework statistic is calculated as a sum of a group App Framework and its predecessor jqMoby.

 

Final words

There are several more mobile application HTML5 frameworks worth mentioning but this article came to its end, there was simply no more time to mention them all. Leave me a comment if you think I have forgot to mention something, you don’t agree with something (or strongly agree) of would like to hear about some other framework.