The history of software is replete with fierce competition among technologies and products. People argue vehemently about which technology will eventually overtake the other. In 20 years of business, I've seen this scenario play out quite a few times. These days, a popular debate is raging about whether mobile websites are preferable to native mobile applications.
For a mobile website, you write your code once using JavaScript, HTML, and maybe HTML5. Unlike a mobile application, your graphics options for a mobile website are severely limited, and the hardware used to access the site is out of your control. The overall user experience with a mobile site, and in some cases the site's performance, will likely be different than if the content were in the form of a native mobile application. Unless the mobile browser supports HTML5 and you code against local storage capabilities, a mobile website requires more bandwidth and more frequent round trips. On the other hand, the downside of mobile apps is that you must create a native application for each mobile platform you intend to support. Thus, your effort and cost are multiplied by the number of platforms for which you create native apps. This debate is definitely not easy to settle, and I heartily recommend making a decision strictly on a per-project basis.
In this article, I'll explore the position of the mobile-website camp and introduce the current preliminary version of a library that promises to make mobile site development easier and more productive.
jQuery Mobile
As obvious as it may sound, the jQuery library changed a few things in web development. Foremost is its contribution to making AJAX and JavaScript an integral part of the web experience. Today, when we think of a web interface, we think holistically of client-side and server-side functionality, as well as of out-of-band service calls. The creators of jQuery didn't invent JavaScript or AJAX, but their library made these languages so easy to use that everybody assimilated the library and its programming model. To measure the success of jQuery, just think of what the folks at Microsoft did with it: They stopped development on their own ASP.NET AJAX extensions and embraced jQuery.
jQuery Mobile and its parent library, jQuery, are so closely related that the expression "chip off the old block" perfectly summarizes the affiliation between the two. jQuery Mobile just inherits from the parent jQuery library and adapts this library to the world of mobile development. Therefore, in order to use jQuery Mobile, you must also reference the jQuery library.
The main purpose of the jQuery Mobile library is to enable cross-platform, cross-device, and cross-browser programming of mobile websites. The library shares the same architecture and programming model as full jQuery. (Note that this article is based on an Alpha version of jQuery Mobile. It is likely that more features will be available and that a larger group of browsers will be fully supported by the time this article goes to print.)
Current Browser Compatibility
Any JavaScript library relies on browser capabilities to offer its services to developers. Primarily, a JavaScript library shields developers from the differences in the underlying browsers. If you think the number of desktop browsers is fairly large, the number of browsers in the mobile world is quite staggering, and the differences in functionality among them are significant. Developers learn a unified API that works across a large number of browsers. For example, a significant part of the jQuery code base deals only with browser compatibilities and performs tricks to ensure that users get nearly the same experience regardless of the browser. JavaScript libraries are not magic, so you should not expect them to make the same content in different browsers look exactly alike. However, most libraries are quite successful in providing a similar experience.
The jQuery Mobile library has one basic requirement: Browsers must support media queries. A media query is the feature that a page author uses to limit the scope of a style sheet. In this way, the look and feel of the page content can be adapted to devices based on their specific capabilities. A media query is expressed through the media attribute in the <link> element, as in the following example:
<link rel="stylesheet" media="screen and (max-device-width: 768px)" href="expoware-mobile.css" />
<link rel="stylesheet" media="all" href="expoware.css" />