jQuery Goes Mobile

Tweet

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

jQuery Mobile has taken an interesting and novel approach to the framework: all the work you need to do to use it will take place in your markup. Most interface components can be activated and made live without writing a single line of JavaScript. This is made possible by HTML5 data attributes. So, for example, to make use of the slider component, all you need to do is put the following in your markup:

<div data-role="fieldcontain">  <label for="slider">Input slider:</label>  <input type="range" name="slider" id="slider" value="0" min="0" max="100"  /></div>

Those 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.

Going native?

While jQuery Mobile is certainly an impressive effort, I can’t help but feel that its applicability will be fairly narrow. Most mobile web apps will perform better without it by relying on the browser for much of their functionality, and apps on iOS will both perform better and look more native if they actually are native. Based on design decisions like the default inclusion of a back button at the top of every page, I’m guessing that the primary intent behind the project is to develop apps for eventual native deployment. If it was intended for web apps, surely it would be better to rely on the browser’s (or the device’s) back button, right?If you want to develop native-feeling apps for iOS that are also portable to other platforms using a framework like PhoneGap, then jQuery Mobile could be an interesting solution once the kinks are ironed out. That’s if you’re okay with your non-iOS users being served an interface that’s essentially built to mimic the default iOS behavior.However, if you intend for your app to run in the browser, it feels to me like jQuery Mobile gives you a lot of unnecessary whiz-bang effects, and might have an adverse effect on some of your users’ experience. There’s nothing wrong with a link that opens a new page when clicked; that’s what your users have come to expect. Adding in a sliding (or popping, or fading) Ajax load—just for the sake of “feeling native”—seems a little wrong. The same goes for replacing native browser form controls with JavaScripted custom versions; most users will be more comfortable with the form controls provided by their OS or browser. Why does your web app need an iOS-style on-off toggle, when you could just use a checkbox and save the cost of downloading all that JavaScript? (Of course, I do believe there’s a use for custom form controls not implemented in the current versions of most web browsers, like the slider above.)But maybe that’s just me. If you’ve already had a play with jQuery Mobile, what are your thoughts?

note:Want more?

If you want to read more from Louis, subscribe to our weekly tech geek newsletter, Tech Times.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • dakine

    I found that the demo’s on both my desktop chrome and my android 2.2 were actually really good, there was a small amount of lag but it was pretty close in responsiveness to the native apps I have installed. Btw I’m using a T-Mobile HTC Leo HD2 (1ghz, 1gb ram, 4.3″ screen etc)

  • Dangerous Pixels

    Great summary, I had a quick look the other day and had similar feelings. Great to see a strong focus from the library on cross-platform as this is surely one of the main advantages of building a web-based mobile app. Agree with your views on transitions, etc and would personally be happy to see less bells & whistles for greater consistency and stability between devices.

  • Ritu Dhall

    Demo is working fine in chrome and Firefox but not in IE8. It’s not showing any button image. Isnt it compatible with IE?

  • http://www.yacare.fr McBenny

    I think you missed the goal of jQuery Mobile. I think the idea of ‘mobile’ is not mobile phone but mobile app : if you choose to rely on the browser or the system interface, you don’t provide the same look and feel to all your users as they use different browsers and OS. If you go with jQuery Mobile, you provide a standard interface, whatever browser or OS your users are accessing with.
    Am I wrong ?

    • Louis Simoneau

      I understand that that’s what they’re trying to do. I’m just not sure it’s a good idea :)

      For one thing, I think that messing with users’ browsers, controls, etc. is generally as bad an idea on the mobile Web as it was in traditional desktop web dev. If the browser implements a checkbox, going out of your way to reimplement a whole new checkbox is both a waste of the bandwidth it takes to send the relevant css and js, and also a potential point of confusion with users who’re accustomed to their OS controls.

      Why is it so important to provide the exact same look and feel to all your users? If they get a fast, responsive application with the interface controls they’re accustomed to from their browser/OS, I think they’ll be happy. Actually, it’s more than just that they’re accustomed to those controls: they CHOSE those controls when they bought their device! And now you want to say: “actually, no, I think you’d prefer a checkbox that looks like this. you’re welcome”.

      • http://www.yacare.fr McBenny

        That’s editor’s view VS customer’view. Both have pros and cons. I won’t say who’s right ;-)
        Maybe there are some situations…

  • CharlieLaw

    I would liked to have seen a version of independent version of jquery mobile that didn’t need you to include the full Jquery library too. It will be quite a big download for mobile devices that cant handle the gzipped version.

  • http://smithsrus.com douglsmith

    Does anyone here have experience with jQTouch (http://www.jqtouch.com/) and can speak to how this compares?