Blog

  COMPARING HTML5 MOBILE UI FRAMEWORKS



In response to the growing market for mobile apps several HTML5 Mobile UI Frameworks are now available to help developers create attractive and responsive apps.  These libraries enable Web developers to create great user experiences for their apps using technology and skills that they are familiar with.  The best of these UI/UX frameworks include App Framework, Twitter Bootstrap 3, jQuery Mobile, Sencha Touch, Kendo UI, and TopCoat.  Each one provides a unique set of features to help Web developers make great apps.

What are UI Frameworks?

HTML5 Mobile User Interface Frameworks are libraries that will enable developers to easily create a professional grade user experience for their HTML5-powered app.  These libraries are included as one or more files written using JavaScript and CSS.  They are meant to be used by including them in an HTML file.  They are appropriate for a variety of uses.  All these platforms are appropriate for mobile Web apps as well as for native hybrid applications where a native wrapper allows the entire user experience be driven by HTML5.  These hybrid applications are built using a wrapping technology like Cordova to give HTML5 applications access to native features of the device such as the camera through a JavaScript bridge API.

Why would I want to use one for mobile?

There are a lot of great reasons why Web developers would choose to use an HTML5 Mobile UI Framework for their next app.  Developers who learn how to use frameworks save a lot of time and effort styling and animating their app experiences.  All the frameworks listed in this article provide the tools to create a great app for both tablet and phone form-factors, but some even adapt to add support for desktop browsers.  HTML5 Mobile UI frameworks can give developers’ apps a unified look and feel to make the software much more “professional” than a home-grown solution can.  Some HTML5 Mobile UI frameworks even adapt depending on the platform they are running on to present users with an experience customized for the operating system they are running the software on.

How are they all alike?

These frameworks have a lot in common to help developers make great mobile apps.

All these frameworks are also designed to work on a variety of platforms.  There is a panoply of mobile devices in the market, and these frameworks aim to support as many of them as possible.  They do that by using the technique of Responsive Design or a combination of Responsive Design and Reactive Design.  For those keeping score at home, Responsive Design is a process of laying out Web UI elements so that the UI can be resized at will with a minimum of redrawing on all form factors while Reactive Design is a process where UI elements are turned on or off depending on the platform the application is running on.

Most of these frameworks are based on jQuery or a jQuery style query selector JavaScript engine.  A query selector is a JavaScript library that allows the framework to select elements make changes to the Document Object Model or DOM. Without a query selector those frameworks that require a query selector won’t work appropriately or not work at all.

With a few exceptions, these frameworks provide JavaScript support for scrolling through HTML elements as well as animated transitions between pages.  Additionally, each of these frameworks gives developers a way to display basic navigational elements and controls to create an application using Web development skills like HTML5, CSS3, and JavaScript.

These frameworks all include methods for loading data from the Web dynamically using asynchronous techniques to grab data in XML or JSON format.  By providing access to resources on the Internet, these frameworks accelerate development and extend the capability of what is possible with HTML5 Mobile Apps.

There are a variety of HTML5 user interface elements that all these libraries provide.  Buttons, menus, forms, lists, toolbars, tabs, modal overlays, and a variety of other controls are available from these frameworks.  Most of these UI frameworks use font files to deliver icon images to the screen.  Font files are a superior solution to flat files for icons because they consume less bandwidth and are naturally resizable.

All these frameworks take advantage of touch events as well as click events, allowing them to be used by mobile devices as well as desktop mouse-driven devices.  Many frameworks make sure HTML elements are sized appropriately for touch activation as well.

Many of these frameworks include a method of adding functionality through plugins, or additional CSS or JavaScript library files.  Developers only include what is necessary and nothing else. This progressive enhancement conserves as much speed and responsiveness, while providing options to add extra functionality as necessary.

How are they different?

Although the examples of HTML5 Mobile UI Frameworks mentioned earlier are very similar in a lot of ways, there are still significant differences as well.  Here is a brief comparison of the strengths of App Framework, Twitter Bootstrap 3, jQuery Mobile, Sencha Touch, Kendo UI, and TopCoat.

App Framework

Intel’s App Framework is a reliable and responsive HTML5 Mobile UI Framework that is ideal for creating hybrid mobile apps.  It is optimized for mobile, and so it lacks a lot of the “moving parts” that would allow the framework to adapt to the desktop.  However, that simplicity can be a boon for newer developers.  An app can be written with simple HTML5 markup alone, so even basic users mostly unfamiliar with JavaScript can use the framework.  It gives developers the ability to write a single codebase, and have their application adapt a native-style look and feel depending on the device the app runs on.  For example, the Mobile HTML5 app would look like an iOS app on an iPhone, a native Android app on a Galaxy, and so on.  App Framework is used extensively in the Intel XDK which includes a great app prototyping tool named App Starter.

Twitter Bootstrap 3

Twitter Bootstrap 3 is the latest in a series of HTML5 UI Frameworks for desktop browsers that has added support for mobile as well.  It is based on manipulating HTML5 elements by giving them specific CSS styles to compose an application.  Customized style and JavaScript components may be added from the Twitter Bootstrap Website to extend the functionality.  Twitter Bootstrap has a distinctive “Web 2.0” look which is very crisp and modern, but its approach to mobile is an afterthought since it doesn’t support JavaScript scrolling or animated transitions.  It is a great option for an application that is meant for the desktop as well as a mobile platform, but that reusability makes it a poor choice for a mobile-only experience.

Ionic Framework

 

Ionic Framework

 

Ionic framework enables development of hybrid native mobile applications (currently only Android and iOS devices are supported, Windows Phone and FirefoxOS support is on a future roadmap), using HTML, JavaScript, and CSS, basically just like any other mobile framework. What makes it unique is AngularJS JavaScript framework core and support for SASS (Syntactically Awesome Style Sheets) CSS extension. Don’t you believe me? Try doing something in jQuery Mobile, it’s a really easy framework (I have already reviewed ti as a part of this article chain) to learn but try doing something more complex and you will spend time pulling your hair.

 

Its goal is to simplify both development and testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich internet applications. It’s pretty darn fast, it uses an extremely simple syntax (at least compared to Backbone or Knockout) and like jQuery, has a large number of 3rd party plugins and extensions. Angular comes with jqLite if you need to access the DOM, or you can always load jQuery (I would advise sticking to jqLite, it has a much smaller memory footprint than full-fledged jQuery).

 
 

Detailed Review

 

Link

 

GitHub

 
 

Good

 
  • Open-source and free (under a permissive MIT license)
  • Built around Angular (Ember and Backbone not supported)
  • iOS and Android support (currently only WebKit supported devices)
  • Heavily optimized for touch devices (Ionic is focused on building native/hybrid mobile apps rather than mobile websites.)
  • Great command line utility support (Cordova users will recognize the benefit)
  • Optional Sass support
  • Supports Cordova, PhoneGap, or Trigger.io
  • Over 500 custom designed font icons MIT licensed
 

Bad

 
  • Unlike jQuery Mobile or Kendo UI, Ionic mobile framework is meant to be used only for a hybrid mobile application development
  • If you like HTML5 markup based frameworks then this is not a framework for you.
  • Not for you if you prefer Ember, Backbone or Knockout
 

Working example

 
 

Demo

 
 
Ionic Tab Pattern

 

Author notes

 

This is a framework you will want to use (same goes for OnsenUI).

More Information

 
Ionic in Action: Hybrid Mobile Apps with Ionic and AngularJS (Paperback)
by Jeremy Wilken
Price: $36.66
1 used & new available from $36.66
(0 customer reviews)
 

Kendo UI

 

Kendo UI

 

Kendo UI is a commercial venture based on jQuery, which helps support the outstanding documentation and tools that are available for developers who use the tool.  For example, Kendo UI’s theme builder can help developers cook up a custom color scheme for their UI quickly.  Kendo UI’s Mobile HTML5 library uses HTML with class tags to run “widgets” that provide a set block of functionality.  It is able to change its UI based on the platform to emulate the native aesthetic of an iOS, Android, Blackberry, or Windows Phone 8 device depending on which platform it runs on.  Kendo UI us used by the Hybrid App builder Icenium.

 

Kendo UI is a framework for modern HTML UI, by Telerik. Following the latest HTML5, CSS3, and JavaScript standards, it delivers everything needed for client-side, jQuery-powered development in one integrated, compact package, complete with AngularJS integration and Bootstrap support. It is comprised of an open source Core edition, and a commercial set of enterprise-grade features. You can think of it as jQuery Mobile on steroids.

 

Because this is a commercial product it comes in two separate packages. First one is called Kendo UI Core and it’s open source, another one is called Kendo UI Professional and you will need to pay for it. I will talk about Core edition because this is a version you are going to start with.

 

Core edition contains 40 web widgets, all of the mobile widgets as well as the mobile application framework, and the core functionality of Kendo UI framework, including the DataSource component, templates, drag-and-drop, and themeable widgets with integrated animations as well as AngularJS directives.

 
 

Detailed Review

 

Link

 

GitHub

 
 

Good

 
  • Complete package, framework, UI and MVC all in one (AngularJS support).
  • 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 a platform (iOS, Android …)
  • Usable for mobile and classic web development
  • 40 widgets included into core edition
  • Very fast customer support
 

Bad

 
  • Commercial license and support (Kendo UI is not longer a fully commercial product. Since last year (2013) it is available as two separate editions: Core and Professional. Core is open source while Professional will cost you $699 per single license.)
  • 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. I could use a free version, but I don’t think its worth without customer support (only for paid customers).

 
Learning Kendo UI Web Development (Paperback)
by John Adams
Price: $40.49
25 used & new available from $40.49
2.8 out of 5 stars (5 customer reviews)

jQuery Mobile

 

jQuery Mobile Logo

 

The first and perhaps most commonly used HTML5 Mobile UI Framework is jQuery Mobile.  Although jQuery UI was originally not created for the mobile space, jQuery Mobile has done an admirable job at providing a mobile user interface that reflects the same aesthetic and usability of its desktop product.  The jQuery Mobile HTML5 Mobile UI Framework is very easy to use, and is programmed using HTML elements like the previous two frameworks.  It has good documentation for a free product, and has a large installed base that can provide help and sample code for new projects.

 

jQuery Mobile is an HTML5-based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices. Unlike Sencha Touch which is built to work only on web kit browsers (this is no longer true), jQuery Mobile will run on pretty much anything as long it supports HTML5 standard. It doesn’t matter are you running it on a Windows, Mac OS, Android or iOS, it will run just fine and that makes it appealing to a broader specter of users. This is also the oldest framework reviewed here, initially it was released during 2000.

 

jQuery Mobile is HTML5 markup based framework (not like Ionic Framework or Sencha Touch), whereas much job is done through HTML5 markup (mostly through data attributes). Background JavaScript is handled with jQuery though MVC (or MVVC) is not supported out of the box (Backbone can be used after some major tweaking).

 
 

Detailed Review

 

Link

 

GitHub

 
 

Good

 
  • 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
 

Bad

 
  • 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 a 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 break you head to understood how all of that works together.
  • No out of box MVC support. At the same time, it supports BackboneJS and KnockoutJS, 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.
 

Working example

 
 

Demo

 
 
jQuery Mobile example

 

More Information

 
Creating Mobile Apps with jQuery Mobile – Second Edition (Paperback)
by Andy Matthews, Shane Gliser
Price: $40.99
17 used & new available from $40.99
4.5 out of 5 stars (6 customer reviews)

Titanium Appcelerator

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.

 
 

Link

 

GitHub

 
 

Good

 
  • 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
 

Bad

 
  • 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 requires some knowledge of native Android / iOS development.

 

More Information

 
Build Native Cross-Platform Apps with Appcelerator: A beginner’s guide for Web Developers (Paperback)
by Ricardo Alcocer
Price: $39.99
2 used & new available from $39.99
5.0 out of 5 stars (5 customer reviews)

Sencha Touch

Sencha Touch

 

Sencha Touch offers a unique take on HTML5 Mobile UI Frameworks because it requires that all UI code is written in JavaScript.  That makes for a more precise experience, but it requires developers to have considerable JavaScript chops to get things done.  It is a commercial venture, so it has some great documentation, tools, and support.  However, it is free as long as it isn’t part of a product that ships more than 5,000 units.  Sencha Touch is able to create some great graphical charts, it supports the Yahoo Query Language, and it has themes to support every popular mobile platform.

 

This framework is almost an alien in this jQuery based frameworks sea. It is fast, good looking, supports MVC and has probably the 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.

 

It is also one of the oldest mobile frameworks, if not the oldest one (it can be if you take into an account that it was build on the jQTouch foundation). Where, at that time, another mobile frameworks usually went with jQuery (at that time AngularJS didn’t exist and BackboneJS was still under development), Sencha Touch went the other way using ExtJs as a JavaScript foundation and jQTouch as UI framework (with the help of RaphaëlJS).

 
 

Detailed Review

 

Link

 
 

Good

 
  • 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
 

Bad

 
  • 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.

 

More Information

 
Sencha Touch Cookbook, Second Edition (Paperback)
by Ajit Kumar
Price: $45.99
22 used & new available from $36.99
4.5 out of 5 stars (11 customer reviews)

OnsenUI

OnsenUI

 

One of the 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.

 
 

Detailed Review

 

Link

 

GitHub

 
 

Good

 
  • Free and Open Source
  • Simple to Use
  • Built around AngularJS, Topcoat, and HammerJS
  • Lates changes makes it possible to work with jQuery
  • Built-in Theme Roller
  • Supports Cordova, PhoneGap, or native app packaging with Monaca IDE
  • Usable for mobile and classic web development
  • Multi-screen Support
  • Font Awesome support
 

Bad

 
  • Onsen UI suffers from the same problem like jQuery Mobile. It can be used for classic web development but, it looks out of the place when viewed on larger screens.
  • If you like HTML5 markup based frameworks then this is not a framework for you.
  • Custom routing, you can’t use AngularJS routing, at least not that easy (I like it, but some of you may think different)
 

Working example

 
 

Demo

 
 
OnsenUI Tab Bar Pattern

 

Author notes

 

This is a framework you would want to use (just like Ionic Framework). This is a best choice if you’re a previous jQuery Mobile users. Almost the same routing system plus page events.

TopCoat

TopCoat is a free HTML5 Mobile UI framework build by Adobe.  It is unique from the others in this list for several reasons.  First, it relies on CSS libraries over JavaScript to provide everything developers need.  That makes it easy to build using HTML5 elements only and gives the framework an edge in speed.  Secondly, TopCoat’s look and feel sets it apart from the others.  It is very much a stylish product, and if you are a fan of Adobe’s aesthetics you won’t be disappointed by TopCoat.  Finally, it is designed primarily for desktop browsers but includes a mobile stylesheet that features larger touch targets for controls.

Where can I find all these great HTML5 Mobile Frameworks?

If all this technology sounds great, developers can try them out for themselves by following these links.



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.