Comparing HTML5 Mobile UI Frameworks

http://html5hub.com/comparing-html5-mobile-ui-frameworks/?utm_source=html5weekly&utm_medium=email

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.

jQuery Mobile

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.

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.

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.

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.