The first time I heard (well, read) about jQuery Mobile, I was lying on a beach. I lazily reached out to my Palm Smartphone – being careful not to spill a drop of the juicy drink I was sipping onto my beloved device – and connected to the Internet to check the latest news.
The fact that jQuery was undergoing a process of consistent improvement in order to make it work smoothly will surely trigger your curiosity as it triggered mine. In this chapter, we're going to approach the jQuery Mobile framework for the very first time, and understand how the whole thing works and can be implemented in our own web applications.
Using jQuery Mobile, we will be able to develop mobile solutions that work smoothly on the majority of mobile OS: the new-born library already supports Android, Blackberry OS6, Fennec (by Mozilla), HP WebOS (Palm handhelds), iOS (thus iPhone, iPod Touch, iPad), and Opera Mobile. Additionally, the roadmap includes, amongst others, MeeGo, Windows Mobile, and Symbian as platforms which are going to be supported in the near future.
In this chapter, we shall understand:
How jQuery Mobile was born
jQuery Mobile and other libraries
Why choose jQuery Mobile?
How to get jQuery Mobile
jQuery Mobile in action
jQuery Mobile was first announced as an independent project on August 11, 2010, and described on the jQuery blog as the work that we've been doing to bring jQuery to mobile devices. Not only is the core jQuery library being improved to work across all of the major mobile platforms, but we're also working to release a complete, unified, mobile UI framework.
The jQuery Project developers worked hard (and are still working hard) on making jQuery Core work well against the major web browsers, and bug fixes and improvements are released periodically in order to make sure that standards are kept high.
The jQuery Mobile project has caught on to the promising augment of mobile sites and interest in the mobile technology, and is now trying to extend its reach of jQuery to help build applications capable of running along with the so-called "desktop" Web.
For example, how good is jQuery Mobile compared to any of the following?
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).
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.
Sencha Touch looks simple, but refined. Its graphical user interface is very similar to the native UI of the devices on which the library runs, in order to create a feeling of consistency with the original interface.
This is how the buttons appear:
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
<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.
Even by reading iUI's own motto ("User Interface for WebApp development on iPhone-class devices"), we can get pretty much what the whole deal is about.
This framework will only support iPhone, iPod Touch, and possibly iPad. That's about it.
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.
Sample web applications submitted by iWebKit users are shown in the following screenshot:
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.
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":
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).
This task is accomplished thanks to graceful degradation, so the browsers that do not support the set of features provided by jQuery Mobiles.
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).
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.
There should be no problems at all obtaining a copy of jQuery Mobile, but anyway, here is a quick walkthrough to get all the mobile development enthusiasts out there started.
The fastest, easiest way to include jQuery Mobile into your website is by downloading one of the CDN-hosted versions that the jQuery Mobile project provides, which include images as well.
You can choose from two types of packages to download: one is uncompressed and for debugging purposes only (very large size); the other one is the minified and gzipped set of files which are ready to deploy.
jQuery Mobile 1.0 Alpha 2 requires jQuery 1.4.4, which can be download from http://docs.jquery.com/Downloading_jQuery.
jquery-mobile-1.0a2.js(Uncompressed, 102KB, useful for debugging) http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.js.
jquery-mobile-1.0a2.min.js(Minified and gzipped, 13KB, ready to deploy) http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js.
CDN-hosted CSS can be downloaded from:
jquery-mobile-1.0a2.css(Uncompressed, 49KB, useful for debugging) http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.css.
jquery-mobile-1.0a2.min.css(Minified and gzipped, 6KB, ready to deploy) http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css.
If you have chosen to make use of the CDN-hosted versions, the following couple of lines of code can be used to link to the libraries and the CSS stylesheet needed to set up jQuery Mobile:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
The whole jQuery Mobile documentation is built using jQuery Mobile itself, as you can see at http://jquerymobile.com/demos/1.0a3/.
Reading through the documentation pages should give you a clear understanding of how jQuery Mobile works and looks out of the box. There are, of course, ways to make it look different, change the color scheme and everything else, but its feel won't change.
Well, this is a slightly more advanced example of jQuery Mobile in action, and it might be worth spending a little time toying with it.
For example, you may already have noticed that all the pages belonging to the jQuery API browser share some details. The most obvious one is the top bar, which reports the page title and a back button.
Also, all pages are presented as a list of links and have a Switch theme button at the bottom:
These are some of the elements we will be able to incorporate into our web pages and which will be shown in the very same way in all mobile browsers.
The great thing about open source software is that anyone can take it, play with it for a while, and redistribute it.
Unfortunately, we still are to mess around with the first alpha release, and bugs will be with us for a while, no matter which platform we choose. But this gives us the chance to help out and get involved in the active development of jQuery Mobile!
For example, a very simple yet helpful task is to file bugs in the jQuery Mobile Bug Tracker (https://github.com/jquery/jquery-mobile/issues). As of now, there are over 200 issues reported and looking for someone to take care of them.
In fact, if you think you are competent enough at fixing bugs, adding some extra functionalities, or even just correcting non-working code, you can provide patches in the jQuery Mobile Source Repository through GitHub (https://github.com/jquery/jquery-mobile/) or discuss the code on the jQuery Mobile Development Forum (http://forum.jquery.com/developing-jquery-mobile).
A live code test is available at http://jquerymobile.com/test/, pulling directly from the latest commit in the source repository.
In this chapter, we have had a first taste of what jQuery Mobile is like.
Its features are great, indeed, even compared to some of the libraries that are available and under active development for quite some time now: cross-browser compatibility on mobile devices, small size, theming system, and increased simplicity are only a few of the enhancements the jQuery Mobile team made to the standard jQuery library in order to create a fully-functional mobile library.
The next chapter will deal with getting started with jQuery Mobile and finally we will see how to create our first few pages for everybody to see.