jQueryMobile - More in the FIXME list

A few week ago, I had a chance to work with jQueryMobile (JQM), a framework that I have known for long and looked forward to a chance to use for some practical development. (I was using Beta 2 when I wrote this post)

Well, after the first good impression (especially when compared to its ancestor, jQTouch), I started to find out a number of thorns here and there that prevented it from being use widely in the industry.


Most of the time when I write mobile web app, I use desktop browsers to test and develop the app and only move to the device to test major changes. I can tell that the page transition of JQM on my FF 5.01 and Chrome 13.0 is pretty flaky even when compared to the old jQTouch. The reason is because JQM is using keyframe animation and depends on how supportive the browser is, some frames might be dropped and causes the transition to be a bit rough. There is plan to switch to CSS3 transition, which guarantees better performance and support from major browsers, lets see how thing will go.


Currently, JQM provides developers with single-page (pages where only one div has data-role="page") and multi-page (single HTML document with multiple div with data-role="page"). And just like jQTouch, JQM uses hash-based URL for navigation.
So if I have a single-page document and want to "slide" to the next, my url is like

single_1 -> single_1#single_2

Similarly, urls of a multi-page document look like

multiple#foo and multiple#bar

I expected the two types as two great indigents for one-page apps. But no, different from my expectation, cooperation of the two types is half-baked. If I load a multiple-page document through AJAX, all navigation within the page are broken

single -> single#multiple -> single#foo (it should have been something like single#multiple#foo)

Also, the URL of an AJAX-loaded document is lengthy and ugly as it uses the format old_url#new_url, you can find this right on JQM's demo site

http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/pages/page-anatomy.html

NOTICE: at the moment I was writing this post, jQM team has taken steps towards above problems with the launch of pushState, which clearly makes the url far neater and hopefully in the same manner handle single/multiple-page correctly.


And the last item in my list would be the bad "back" button. JQM provides default "back" button for pages loaded via AJAX. The problem with this default button is that it disappear when you refresh the page or load it from bookmark, which is a big FAIL for me. Developer can implement the "back" button manually too, but then the transition sucks. It wasnt possible for me to manipulate the transition effect and direction (in my case, it goes slide-right, where a normal "back" should go slide-left, but perhaps that's just me).

I would complain about the behavior of the button as well. JQM's "back" button functions as literal history of pages. This approach is similar to iOS' and Android's back button and works great for native apps. But web app is different. The user can interfere the URL, and when that comes, a history of pages leads to all kind of funny redirect as the "back" might structurally mess up the app workflow. I would love to see the button acts like a breadcrumb trail and therefore respect the app structure.


Just my two cents. I remain a big fan of jQueryMobile and its team, eagerly looking forward to the 1.0