Choosing mobile frameworks

Developers typically have their own template libraries, built from scratch or commercial, to jump-start their projects. In this section, we will see a short overview of some useful HTML/CSS/JavaScript frameworks you can evaluate as your blueprint, libraries, and frameworks that you can integrate within your projects.

Note

A framework or a library is essentially a set of functions that you can call, these days usually organized into classes or files. A framework embodies some abstract design with more behavior built-in. Martin Fowler discusses further the difference between a library and a framework in his article available at http://martinfowler.com/bliki/InversionOfControl.html.

Using HTML5 Mobile Boilerplate

This is a very clean, mobile-friendly HTML template that includes an optimized Google Analytics snippet, placeholders for touch-based device icons, the library Zepto (a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API), and the Modernizr feature detection library (a library that uses object detection techniques to discover whether a feature is available before you use it, allowing for graceful degradation or progressive enhancement of web pages).

You can download the HTML5 Mobile Boilerplate template from the official website at http://html5boilerplate.com/mobile/; for updates or to get involved, follow the project on GitHub at https://github.com/h5bp/mobile-boilerplate.

If you want to download a customized version of HTML5 Mobile Boilerplate, which enables you to select which templates to use, the JavaScript libraries to include, and so on, go to http://www.initializr.com/.

Using Zurb Foundation

You've probably already heard about responsive design, which is a website design that responds to the device constraints of the person viewing it. It's a hot topic right now and the Foundation framework's most important feature is the responsiveness of its layout mechanics.

Furthermore, Foundation provides a good selection of templates to use for the most common sections of your app; you can choose the templates you want when downloading the framework from http://foundation.zurb.com/download.php.

The strengths of Foundation are as follows:

• A 12-column, percentage-based grid with an arbitrary maximum width
• Image styles that disregard pixels—foundation images are scaled by the grid to different widths
• UI and layout elements, including common pieces such as typography and forms, as well as tabs, pagination, N-up grids, and more
• Mobile visibility classes—Foundation lets you very quickly hide and show elements on desktops, tablets, and phones

To keep up with Foundation and get the latest builds, follow the GitHub project available at https://github.com/zurb/foundation.

Using Twitter Bootstrap

Twitter Bootstrap is a free collection of tools used to create websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, charts, navigation, and other interface components, as well as optional JavaScript extensions.

This project is one of the most popular on GitHub; it's very well organized and seems born to build apps. In fact, it includes basic CSS and HTML to create grids, layouts, typography, tables, forms, navigation, alerts, popovers, and so on.

It's pretty easy to start working with Bootstrap because it uses jQuery. To download Bootstrap, you can refer to the project download and customize page available at http://twitter.github.com/bootstrap/customize.html; if you want to download a template for Bootstrap, you can refer to the already mentioned http://www.initializr.com/ website. But note that Bootstrap is specially designed for mobile web and not for hybrid mobile applications.

Ionic framework

Ionic framework is a powerful HTML5 hybrid app development framework that helps you build native-feeling mobile apps, all with web technologies such HTML, CSS, and JavaScript. It's made keeping hybrid mobile apps in mind. As Ionic is based on AngularJS and built on top of PhoneGap/Cordova CLI, you can see more CLI command syntax similar to it. It has a deep learning curve but it's worth learning. AngularJS is not a hybrid mobile framework by itself but Ionic gives everything that a hybrid mobile framework would need. The framework is actively maintained. Moreover, the framework handles UI rendering based on the platform to provide a native feel to the users. Note that it has official support only for Android and iOS. You can find more information from http://ionicframework.com/.

ExtJS

ExtJS is a JavaScript framework with good-looking UI widgets to build interactive websites, and Sencha Touch based on ExtJS can be used to build hybrid mobile applications. It has various features and it's hard to list them all. Also, overall, you will have all that you need to develop a feature-rich application. It has both open source license and enterprise license available and you can know more about it at https://www.sencha.com/products/extjs/ and https://www.sencha.com/products/touch.

AngularJS

AngularJS is a JavaScript framework from Google and it's now the star of enterprise development. AngularJS and Cordova/PhoneGap gel very well as it's a framework based on JavaScript. AngularJS has steep learning curves, such as ExtJS, but once you go through that phase, you will feel wonderful. To build hybrid applications, AngularJS has a special mobile counterpart called Mobile AngularJS UI. You can learn more about AngularJS and Mobile AngularJS UI at http://angularjs.org and http://mobileangularui.com, respectively.

jQuery Mobile

The jQuery Mobile framework is a user interface system that works across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its codebase is built with progressive enhancement and has a flexible, easily themeable design.

jQuery Mobile has broad support for all the major modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of the progressive enhancement approach (for details, go to http://jquerymobile.com/gbs/).

The main features of jQuery Mobile can be summarized as follows:

• Cross-platform, cross-device, and cross-browser
• UI optimized for touch devices
• Themeable and customizable design
• Usage of non-intrusive semantic HTML5 code only
• AJAX calls automatically load dynamic content
• Lightweight (12 KB compressed)
• Progressive enhancement
• Accessible

To download the last stable version and to keep up-to-date with the project, refer to the official website available at http://jquerymobile.com, where you can find useful examples and a tool to create your own themes at http://jquerymobile.com/themeroller/.