What jQuery Mobile Means for Developers

This weekend, at the Boston jQuery conference, the alpha release of jQuery Mobile went live. As the name implies, the project is a user interface framework for mobile devices built on top of jQuery, the most popular JavaScript library used today. With jQuery Mobile, developers can write applications for a number of mobile devices, including smartphones and tablets.

Although still very experimental in its current state, the new technology may have a major impact on mobile Web development going forward.

Sponsor

The current alpha version of jQuery Mobile supports iOS (iPhone, iPad, iPod Touch), Android, Blackberry OS6, HP’s webOS, Mozilla’s Fennec and Opera Mobile. In the future, other platforms will be added including Windows Mobile, Symbian, MeeGo and more.

One of the goals of the project is to extend the reach of jQuery to aid in building sites for the mobile Web, in addition to the so-called “desktop” Web, where it’s already heavily-used. With jQuery Mobile, developers will be able to reach mobile Web users on a variety of mobile operating systems – not just those whose mobile Web browser is considered “top-tier,” like the WebKit-based browsers on the iPhone and Android.

To support the various browsers now available, jQuery Mobile provides dynamic interfaces that adapt to the different OS’s, “degrading gracefully” where features are not supported by the browser in question. Top browsers are categorized as “A” or “B” grade, while low quality browsers are given a “C” grade and barely functional browsers get an “F.” You can see the grades on this chart here. The alpha release of jQuery Mobile focuses on just A-grade browsers.

According to jQuery Mobile’s site, the full feature set includes the following:

• Progressive Enhancement: jQuery Mobile is build around the principle of progressive enhancement, “taking a fully functional HTML web page, layering on additional JavaScript functionality, and giving capable browsers a top-of-the-line experience.” This means a jQuery Mobile app will work in more browsers, guaranteed, even those that don’t support JavaScript.
• Graceful Degradation: Less capable browsers will still receive the best possible experience that their platform can handle.
• Accessibility: All jQuery Mobile components are ARIA accessible. They are keyboard navigable (on a desktop computer) and can be navigated using a screen reader.
• Simplicity: jQuery Mobile is completely markup-driven requiring no JavaScript configuration, making it easy to get started.
• Small File Size: The JavaScript for the alpha release is only 12KB and the CSS is a mere 6KB. Very few images are used in the design of the framework (mostly icons) – instead making heavy use of CSS.
• Theming: jQuery Mobile has a comprehensive theming structure built from the ground up. The final 1.0 relase will include a “Themeroller” tool.

Potential for Mobile Web Dev is Huge

Clearly, with a tool like this, the potential for mobile Web development is incredible. Within 36 hours of the project’s release, an app was already built using the technology, according to a tweet from John Resig, the creator of jQuery. The new app is called WarSquare and it’s a geo-aware mobile Web game built on top of Foursquare. At first glance, it looks just as polished as many an iOS app does today, despite jQuery Mobile’s current alpha state.

For developers, a technology like this could help usher in the (much-needed) era of “write once, deploy anywhere.” This somewhat utopian goal is already being addressed in a number of ways, including through the use of cross-device mobile application platforms like Appcelerator, PhoneGap’s HTML and JavaScript-based mobile app creator, Adobe’s Flash & AIR platforms which aim to support most modern smartphone players (expect Apple, of course), BONDI’s OneAPI technology now a part of WAC, and other initiatives.

For supporters of the open Web, this launch is great news. It provides a solid foundation for building a plethora of mobile apps that work on more than one device. As Adobe recently discovered, not all categories of applications work as native mobile apps. For the “products & shopping” and “media & entertainment” categories, 66% of consumers prefer the mobile Web, Adobe found. And yet, 38% of respondents said they hadn’t purchased anything from the “products & shopping” category using their mobile phones in the last six months, indicating an unfilled niche where modern mobile applications were lacking.

Now developers have another tool at their disposal to address this market with jQuery Mobile. Developers can download the new release from here: jquerymobile.com.

Discuss