jQuery mobile experiences

Mobile optimized website projects seem to becoming increasingly common so I thought I would summarize some of the advantages & disadvantages we have experienced with using the JQM framework (jQuery mobile http://jquerymobile.com/).

But why would you use such a framework in the first place?

Well you certainly don’t have to (and in many cases probably shouldn’t) but JQM:

  • Tries to take care of various niggly display issues across multiple types of devices
  • Provides an abstraction over various events e.g. rotating a device, swipes etc
  • Takes care of history management
  • Gives you various controls similar to what exists in an iphone (because in my experience most clients seem to think a mobile site should look like an iphone app – websites are different from apps grrr – anyway moving on..)

Good things:

  • Our app on the whole displays pretty well across multiple device types with little effort e.g. iphone, ipad, various android devices & win phone 7
  • Was very quick to get up and running with JQM
  • Our brief was to copy existing iphone app and we were able to do so pretty easily
  • JQM has good documentation and examples

However we also encountered a number of issues with the framework.

Bad things:

  • JQM mobile leaves other pages in the dom (even multiple copies of the same page) which means you need to be careful with giving all selectors a context. There doesn’t seem to be a way to disable this apart from turning the ajax loading off which removes one of JQM’s biggest benefits of hijax loading
  • JQM interferes with the event model and a couple of “standard” jquery type methods such as event.preventDefault don’t work properly
  • At times JQM feels sluggish (apparently this is due to delays in place to handle taps for various device types)
  • JQM interferes with markup and adds its own styling & elements. Most of the time this is fine but we had a couple of pages that crashed ipod touch devices and iphones. This seemed to be related to number of dom elements on page
  • JQM seems to queue touch events so if you rapidly click the clicks seem to be queued up when you return to a particular page
  • Its v1 so there are a number of bugs in it

I am not sure if I would use JQM again because of some of these issues – towards the end of the project I felt we were fighting the framework. Much of the functionality e.g. transitions wouldn’t be too tricky to develop yourself. It is however excellent for small projects particularly if most of your pages are static content.

3 thoughts on “jQuery mobile experiences

  1. Thanks for the post. I am feeling some of the same pains. How did you deal with “JQM mobile leaves other pages in the dom (even multiple copies of the same page)”…. my particular issue is that when I transition from Page2 to Page3… Page2 is always left in the dom and I can see buts of Page2 overlian on Page3. If I navigate between Page1 & Page2 all is fine.

  2. Hi Cedric – you shouldnt be actually seeing bits of the other pages overlaid unless you have some strange styling stuff going on which I think is probably your issue.

    jQuery mobile will apply various classes (ui-page-active overides .ui-page) to hide and show the different pages.

    You can obtain the current active page with jQuery mobile with $.mobile.activePage (be careful as this isnt available at all points in the event model).

    The very last thing you could do is turn the ajax loading off with $.mobile.ajaxEnabled=false; but this will negate many of JQMs benefits.

    1. Thanks for the advice. In my case, I found that when I do not use the “flow” transition, things work fine, the dom is updated properly between page transitions, and things are good. I am testing in in chrome v17.x.

      Another thing throwing a wrench into my gears is the fact that jqMobile and jQuery.unobtrusive-ajax, both use data-ajax attribute for forms. I had an anchor that was supposed to make an ajax call to the server to do a partial page update, but was being intercepted by the jqMobile navigation framework. I got around this issue by setting the action attribute to “javascript:void(0)”.

      In any case, thanks again for your posts on this topic they are indeed helpful.

Comments are closed.