jQuery Goes Mobile
An early alpha of the jQuery Mobile library was released a little over a week ago. Given the popularity of the jQuery library for traditional desktop web development, I expect most web developers will be very excited about this release. But what exactly is jQuery Mobile, and what are the cases in which you’d consider using it?
What’s in a name?
Firstly, the name jQuery Mobile is a bit misleading: rather than being a mobile version of the core jQuery library, it’s a set of interface components that you can easily plug into your pages. It sits on top of the same jQuery library you’d be using in your regular pages. In effect, it’s more of a mobile version of the jQuery UI library.
Okay, so what’s in there?
jQuery Mobile is essentially a framework for handling pages. These “pages” may be whole HTML files, external pages, or even sections within a single HTML file. The library then takes care of linking them up via Ajax using some funky transition effects. Within pages, jQuery Mobile provides you with an array of consistently styled interface components: toolbars, buttons, every imaginable kind of list, and form controls. Check out the Docs and Demos page for a complete breakdown of everything that’s included.
Progressive Enhancement All the Way, Baby
<div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /></div>
data- attributes give jQuery Mobile the cues it needs to create a slider that looks like this:
jQuery Mobile’s slider control
jQuery Mobile takes a similar progressive enhancement approach to everything it does. The idea is that browsers that don’t recognize the HTML5 doctype or the
data- attributes will just receive a plain vanilla web page, which is an acceptable experience for those users. That’s the theory, anyway.
We did tell you it was an alpha release, right?
Right now the framework is still very buggy. I was unable to make a simple external link work on my desktop browser (Firefox 4), and none of the links worked at all on my Android 2.1 device if I’d scrolled the page before tapping them. Given that one of the library’s key missions is to provide an acceptable but degraded experience on any platform it doesn’t fully support, these kind of breakages on supposedly A-grade browsers are a little worrisome. Moreover, I ran some tests on a colleague’s iPhone, and the performance was a long way from ideal: scrolling was much rougher than on a regular web page, transitions and animations were a little choppy, and some links failed to work reliably.
If you want to read more from Louis, subscribe to our weekly tech geek newsletter, Tech Times.