Getting Started with jQuery Mobile

Yesterday I had a chance to get my feet wet with the Alpha 1 release of jQuery Mobile for one of my clients. Prior to yesterday I had been working with jqTouch for mobile UI.

Overall I really like the way it's built, you can simply use the data-role attribute to turn markup into mobile widgets. For example want to turn a link into a button, just use:

<a href="#section" data-role="button">Do Stuff</a>

Want to turn a ul into a list control, use data-role="listview".

I like that there is built in markup for creating the controlls, and I wish jQueryUI had some of that. For example if you want to create a button in jQueryUI you need to add some javascript $('.button').button();

With jQuery Mobile you could actually build a fully mobile app without writing any JavaScript if you wanted. So you don't really need to know jQuery to start using jQuery Mobile.

Easy to Learn

jQuery Mobile is very easy to learn, and because of that I think it is going to be a very successful project. I was able to rewrite a jqTouch app into jQuery Mobile in a couple hours, using a majority of the features.

Still an Alpha

I did find a few issues in the Alpha release that I had to work around, they all center around not being able to dynamically change the markup. For example I was populating my listview from an AJAX request, and it was not being styled properly. They have provided a way to refresh styling in the latest version of jQuery Mobile from github, you can now simply call:

$('ul').listview("refresh");

You will also run into the same type of thing with the form controls, such as the select list control, and the checkbox control if you populate their values from javascript.

So which is better jQuery Mobile or jqTouch?

Right now jqTouch is a bit more stable, but I much prefer working with jQuery mobile, and I'm confident they will iron out all the issues. I was actually able to work around all issues I had, and for an Alpha release it's actually pretty well done!

More on jQuery Mobile

Look for some more blog entries on jQuery Mobile in the coming weeks. I am going to be giving a presentation on using it with PhoneGap at my local ColdFusion User Group meeting in December, so I'll be sure to post my slides here.