Windows

First impressions of the jQuery Mobile framework

Kyle Miller calls jQuery Mobile an excellent framework for quickly creating a basic mobile website with minimal effort and styling. jQuery Mobile's pros and cons are outlined.

I planned to test-drive the Windows Phone 7 SDK and put together a sample application so I could compare the overall development experience with Android. However, that's where Microsoft burned me, or did they burn themselves?

I refuse to upgrade from Windows XP. I wanted absolutely nothing to do with Windows Vista when it launched, and I could probably be talked into upgrading to Windows 7 for free, but I'm certainly not going to pay for it when there's nothing wrong with Windows XP that warrants an upgrade, in my opinion. Microsoft must feel differently, because the Windows Phone 7 SDK is not supported on Windows XP.

I don't know the percentage of developers still using Windows XP, but logic tells me there are enough of them who would be willing to try Windows Phone 7 that it would have some bearing on the overall number of active Windows Phone 7 developers, and thus applications in the Windows Marketplace. And at a time when Windows Phone 7 is trying to get its feet off the ground and beef up its app marketplace as quickly as possible, not supporting Windows XP just seems like Microsoft is cutting off its nose to spite its face (yes, I do believe this is to force more upgrades to Windows Vista/Windows7).

So, I decided to go in a different direction and play around with the jQuery Mobile framework. I use jQuery in every web development project I've done for the past several years, so the thought of using a jQuery-powered mobile framework was appealing. Here are my impressions of this framework.

Pros

The jQuery Project team makes it extremely easy to learn their framework. Their documentation is very straight-forward, and they even provide many code samples. After 15 minutes of walking through their documentation, I knew the basics well enough to create a sample site.

I really liked that without using any JavaScript you can quickly slap together a professional-looking mobile website complete with spinning dialogs and slick page transitions. I much prefer this model over other platforms like Sencha Touch that require you to build your UI through JavaScript, because I find building UIs in HTML much more intuitive.

If you aren't terribly worried about customizing the look of your site, the out-of-the-box themes are easy on the eye and very simple. However, if you prefer high levels of customization, the jQuery Mobile framework does allow for it.

jQuery Mobile provides you the flexibility to choose whether you want to create nested "pages" within one HTML document or link to individual pages. This can be especially nice when you have a series of screens in your UI that don't have any dynamic data and can easily be housed in the same file.

Cons

While the page transition animations are mostly pretty smooth, they do occasionally have their hiccups. On my Honeycomb tablet, the page transition animations are horrible and barely work. This was surprising, because jQuery Mobile is marketed as being compatible with phones and tablets; then again, the software is still in Beta.

One downside to the nested pages I mentioned earlier occurs when linking between a single page that was loaded via AJAX to a document with nested pages. Per the documentation, you must add either the rel="external" or data-ajax="false" attributes to your anchor tag; this will clear out the AJAX hash in the URL to avoid conflicts between the URL hash the internally linked pages use. This results in the loss of page transition animation between the screens, which causes an inconsistent UX.

I discovered a minor issue when I tried to apply an onclick handler to one of the vertically grouped radio buttons. The first struggle was discovering that the event had to be tied to the radio button's label rather than the radio button itself. The second issue was that, while it worked great in Chrome where I was doing my testing, the onclick events were difficult to fire from a mobile device or tablet. After some toying around, I discovered that the mousedown event was more reliable and eventually got everything working.

Conclusion

jQuery Mobile is an excellent framework, especially if you want to quickly throw together a basic mobile website with minimal effort and styling. There are a couple of quirks I'd like to see worked out in the next release, but I like the team's momentum, and I will certainly be keeping an eye on the project to see how it develops.

About

Kyle is a senior software engineer specializing in web/Android development living in Austin TX. He's a self-professed "gadget freak" whose passion for mobile devices drove him to jump into the mobile industry in 2010. He enjoys the fast-paced nature ...

2 comments
westdccs
westdccs

I would say that the iOS developer platform is just as limited as WP7 -- you must own a Mac to be able to develop and test iOS applications. I'm just as frustrated that I have to buy a Mac to develop applications for iPad / iPhone. I would argue that the rant concerning the lack of support for Windows XP is unwarranted -- the operating system is out-dated and at some point Microsoft has to cut the cord. However, I completely agree with your observations of jQuery mobile. It is a great place to start, but it will need to a mature a bit before any serious applications can be created for the framework (yes, it is still very much a beta). If you are creating a simple "about me" site or a site that can dynamically generate the HTML server side, jQuery mobile works very well. I've found the framework to be very quirky on Windows Phone 7, perhaps this will improve with the Mango release.

authorwjf
authorwjf

since the point of your post is the JQUERY SDK and not the WP7 development tool chain. However, like you I am surprised at the narrow focus of the WP7 development environment. One of the most frequently touted reasons MS has amassed an army of developers is that they get the tools and APIs into the hands of a large number of developers. That doesn't seem to be the case with WP7, where the tools are not just limited to single MS family of operating systems, but to a single version of the operating system and compiler. From the outside looking in, this doesn't seem like the best approach for a company starting in the phone game so late to begin with. On the subject of the mobile J-QUERY libraries, I'm curious if these can be used / tested on the Android emulator with any reasonable semblance of runtime speeds? I use the emulator frequently for both demos and QA purposes.