Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

Review: Mobile Web development frameworks face off

Peter Wayner | Oct. 31, 2013
jQuery Mobile, Sencha Touch, Kendo UI, and Intel App Framework bring a native look and feel to Web apps for mobile devices

jQuery MobileIn a world where jQuery rules, it helps to wear the royal name: jQuery Mobile. The framework is more of a brand extension than a real extension to jQuery because the goal is to provide a good framework for creating Web apps for mobile browsers. While jQuery is required, most of the work is done in HTML and CSS.

This focus on HTML is by design. The jQuery Mobile developers clearly feel the content should be marked up in HTML -- which is what you'll spend much of your time doing. Creating a Web app with N pages is done by building one Web page with N DIVs. The links between the DIVs are just anchor tags with the ID marked with a hashtag. jQuery Mobile takes over and shuffles the DIVs on and off the screen using many of the transitions that are now standard. While the other approaches are largely writing code in JavaScript, jQuery Mobile is more HTML with occasional calls to JavaScript.

CSS is also a big part of the equation. If you're going to build out your user interface, you start adding DIVs and giving them CSS class names that, in turn, give the DIVs the style you choose. Using the built-in CSS definitions ensures a consistent look. Departing from them can get tricky if you don't understand how some of the floats work. The standard styles, though, are quite plain. I'm sure some will even call them boring.

There are all of the usual widgets, and they end up emulating most of what people can do with the native tools. The nice drawer feature that hides a panel of buttons behind everything is implemented and ready. All you need to do is create a DIV with the data display attribute set to "reveal." The code does the rest. A substantial amount of the code is created simply by adding these attributes. jQuery Mobile embraces the "data-" nomenclature from HTML5.

The adequate documentation is saved by a rich collection of examples. The trickiest part I found was figuring out how all the DIVs need to be nested. If you plunk a DIV down in the wrong place, it will start inheriting weird behavior thanks to the interplacement of the HTML and the CSS. While it doesn't take much knowledge of CSS to knock off some basic designs, you have to start thinking about it if you want to create something more elaborate. Most people don't think of CSS as a programming language per se, but I did after monkeying with these pages for a bit.

jQuery Mobile is an open source project with a generous MIT license.


Previous Page  1  2  3  4  5  6  Next Page 

Sign up for CIO Asia eNewsletters.