Before getting involved and learning about jQuery Mobile, a legitimate question to ask would concern the comparison with other more or less established and used JavaScript libraries, which claim to have the same goals.
For example, how good is jQuery Mobile compared to any of the following?
jQTouch
Sencha Touch
iUI
iWebKit
Let's find out!
While jQuery Mobile is a relatively recent entry in the mobile world, jQTouch dates back to 2009, when David Kaneda created an open source jQuery plugin for mobile development on the iPhone.
Due to its close relationship (and dependency) with jQuery, the plugin files themselves are quite heavy.
Although aware of the problem, jQTouch developers decided not to remove the dependency from the jQuery core.
Some people have said they'd like to see the jQuery dependency removed from jQTouch to decrease the download size. The reasoning is that jQuery has a lot of code dedicated to legacy desktop browsers (that is, older, discontinued versions), and is therefore dead-weight on mobile devices.
The jQTouch development team has decided to keep the project strictly focused on WebKit-enabled devices (that is, iPhone, iPod Touch, Palm WebOS, and Android), all of which have a relatively small screen. It provides native animations, automatic navigation, and a customizable theming system for WebKit browsers.
According to their blog, we understand that, even though jQTouch runs fine on larger-screen devices, it's not its intended use, and therefore the UI will not take advantage of the additional space.
Applications developed with jQTouch will certainly run fine on iPads and other tablet devices, but we aren't going to automatically convert to a more tablet-friendly UI that takes advantage of the additional real estate.
Because of the type of plugin and its overall structure, jQTouch is a package geared primarily towards web designers and novice web-application developers. jQTouch developers themselves recommend more expert software programmers to use their other standalone project Sencha Touch.
A sample image that shows jQTouch's look and feel is shown in the following screenshot representing the user interface of the clock demo. It can be found at the jQTouch website (http://jqtouch.com).
As it's easily noticeable, jQTouch shows some kind of consistency with other UI that resemble a native-like iPhone application.
Shortly after the release of his jQTouch, David Kaneda decided to release a completely different package, with more or less the same goals, but not dependent on jQuery anymore.
Sencha Touch was born, and it is still seen as an alternative to jQTouch when speaking of tablets and other devices of the same kind. The interesting thing about this is the complete separation of the two projects; one (jQTouch) is a plugin for jQuery, and depends on the popular library, while the other (Sencha Touch) is a framework and provides a number of functionalities the former could not develop (that is, API).
Being developed as a standalone framework, Sencha Touch is also more lightweight than its sister project, JQTouch, which needs the whole jQuery framework to work correctly.
Even being an alternative for jQTouch, Sencha Touch targets the same set of devices, but adds support for tablets:
If you are in need of a JavaScript library that magically updates your UI for everything from small screens, to tablets, to desktops, check out Sencha Touch.
Sencha Touch offers a pure JavaScript API for building powerful applications which, ideally, are developed by software and mobile developers looking forward to create a product with advanced layouts, functionality, and interfaces.
First and foremost, let's get this one right; iUI is not a JavaScript library. Not in the traditional way, at least.
The iUI project (as we know it today) is actually the outcome of a simple hack by Joe Hewitt to create iPhone applications, called iphonenav; we can modify its behavior and default configuration by changing the markup. No JavaScript scripting is generally needed.
Going directly to the introductory post by the author himself, iUI is explained as follows:
Its goal is simply to turn ordinary standards-based HTML into a polished, usable interface that meets the high standards set by Apple's own native iPhone apps. As much as possible, iUI maps common HTML idioms to iPhone interface conventions. For example, the <ul>
and <li> tags are used to create hierarchical side-scrolling navigation. Ordinary
<a> links load with a sliding animation while keeping you on the original page instead of loading an entirely new one. A simple set of CSS classes can be used to designate things like modal dialogs, preference panels, and on/off switches.
iUI is now maintained in Google Code, and aims at making mobile developers feel like HTML is the native UI language for the iPhone, as there is no need to write any JavaScript code to see the magic happen.
The description of the framework we can find tells us almost anything we need to know about the package.
iWebKit is a file package designed to help you create your own iPhone, iPod Touch, and iPad compatible website or webapp. The kit is accessible to anyone, even people without any HTML knowledge, and is simple to understand, thanks to the included tutorials. In a couple of minutes, you will have created a full and professional looking website. iWebKit is a great tool because it is very easy to use, extremely fast, compatible, and extendable.
iWebKit is aimed those non-developers who need to create a professional looking website or a interesting mobile web application from scratch.
The framework officially supports the iPhone family of devices, thus including iPod Touch and iPad, or any other platform running a WebKit-based browser.
After a quick overview of four (jQTouch, Sencha Touch, iUI, and iWebKit) packages with a goal similar to jQuery Mobile's, we can finally make a real comparison and understand which tool suits our needs better.
Even though some of the above-mentioned frameworks have already been available for quite a long time and jQuery Mobile is a new-born solution, the latter looks like the one which will get the biggest share of the market, also thanks to the (financial) support gathered from its sponsors. And these are somewhat big sponsors: Mozilla, Nokia, Blackberry, Palm, and so on.
It's true, however, that jQuery Mobile is still in its early stages, with their first stable release only dating back to the beginning of November 2010 . The project has a great backing, though; a good share of the jQuery community is more than interested in the future developments of the project and is following closely the bug fixing and maintenance activities required in order to offer a valuable product which can stand the test of time.
Let's start off by saying that, in terms of weight, Sencha Touch is out of the game already. Due to its nature (a standalone package), it cannot compete with any other product, being over 120kb, considering the weight and poor optimization of JQuery for mobile devices; John Resig and the development team were motivated to create a mobile version that spots the issues with jQTouch.
The excellent performances and reduced file size of jQuery Mobile is mainly due to the joint efforts of the jQuery developers to create a mobile version of the popular JavaScript library, already lightweight and extremely customizable and expandable.
As for appearance, the only way iUI can be modified is by editing the CSS code (even though the latest version can be customized with themes). The other three frameworks taken into account have a more or less advanced theming system that can be, in most cases, compared to jQuery Mobile's though the integration and overall consistency of the latter is just a better comparison of supported devices
Needless to say, jQuery Mobile is a long way ahead of the others.
However, it should be noted that some of the libraries presented in the previous section have been developed with the sole purpose of enabling iPhone developers to build powerful web application for iPhone-like devices. This is the case with iUI, for example, whose website clearly states that the project aims to make iUI a sort of default UI language for iPhone-class devices.
On the other hand, jQuery Mobile has a table (Mobile Graded Browser Support, located at http://jquerymobile.com/gbs/) which lists a series of mobile platforms and mobile browsers.
To each combination is assigned a grade (A, B, or C), which is "a combination of the browser quality combined with the browser's relevance in the larger mobile market":
jQuery Mobile is working to support all A grade browsers. This means that we will be actively testing against those browsers and ensuring that they work as best as they possibly can. The browsers will receive the full jQuery Mobile CSS and JavaScript (although the ultimate layout may be a gracefully degraded version of the full capabilities, depending upon the browser).
Grades can be broken down in this manner:
A – High Quality: A browser that's capable of, at minimum, utilizing media queries (a requirement for jQuery Mobile). These browsers will be actively tested against, but may not receive the full capabilities of jQuery Mobile.
B – Medium Quality: A capable browser that doesn't have enough market share to warrant day-to-day testing. Bug fixes will still be applied to help these browsers.
C – Low Quality: A browser that is not capable of utilizing media queries. They won't be provided any jQuery Mobile scripting or CSS (falling back to plain HTML and simple CSS).
Developers are now able to create applications that will run on a number of different platforms, not only those considered top-notch (that is, iOS and Android). jQuery Mobile is built around the principle of progressive enhancement, meaning any jQuery Mobile application will work in many browsers, even those that don't support JavaScript (that is, Windows Mobile), thanks to graceful degradation techniques.
This task is accomplished thanks to graceful degradation, so the browsers that do not support the set of features provided by jQuery Mobiles.
Accessibility and simplicity also play a key role in the development of both the jQuery Mobile library and applications built with its aid, the framework being completely mark-up driven (it requires no JavaScript configuration) and ARIA accessible. This is to say, basically, that jQuery Mobile is easy to get started with and makes it possible to navigate the pages using a keyboard – when working on a desktop computer.
Importantly, not to be forgotten is the small file size, specifically considered for mobile usage: as of the end of 2010, the Alpha version of jQuery Mobile weighs around 12KB and makes little use of images, preferring icons and heavy usage of CSS (6KB).
The modularity of the library also allows for a comprehensive theming system, very effective, for which a Themeroller tool is scheduled for the final 1.0 release.
In the end, it all comes down to our requirements and needs.
If we were to prefer a minimalist approach and we only needed to provide support for a handful of mobile platforms (iPhone), we'd likely be happy using any of the frameworks mentioned earlier.
But if – and this is the case – we care for cross-platform compatibility, ease-of-use, and some sort of consistency for a top-notch browsing experience, we're more likely to choose jQuery Mobile as our tool of choice in any mobile application we're going to develop.