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
Getting involved
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.
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.
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.
Note
jQuery Mobile 1.0 Alpha 2 requires jQuery 1.4.4, which can be download from http://docs.jquery.com/Downloading_jQuery.
CDN-hosted JavaScript can be obtained from:
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.
A Zip file is also available for those willing to host the files themselves. The Zip file contains both versions of the JavaScript library (uncompressed and minified), all the required images, and CSS instructions, and can be downloaded from the following URL:
jquery-mobile-1.0a2.zip(Zip file: JavaScript, CSS, and images) http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.zip.
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.
Now, scroll to the very bottom of the page. Can you see the jQuery API browser link under the Demos section?
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.
However, our objective here is far from copying the whole jQuery library, change a couple of lines, and pass it off as our own – but rather, we have the opportunity to contribute to the jQuery Mobile source and help improve the functioning of our beloved JavaScript file.
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.
