Initial Impressions of JQuery Mobile
I’ve been using JQuery Mobile since roughly a week after its initial alpha 1 release back in October. I really like what I see so far and I wanted to share my initial impressions on both the alpha 1 and alpha 2 releases. Also keep in mind that some of the gripes I list could be due to my own lack of understanding while reading parts of the documentation since it’s such a new framework and besides the official forum there is not much information about JQuery Mobile on the web.
I tried JQuery Mobile because I was developing a web application for a Droid or iPhone browser. Many of the JQuery UI widgets did not work properly with mobile browsers. I looked for an alternative to either coding my own widgets or creating native Android and iOS applications.
It was easy to convert my custom mobile web application to the alpha 1 release, particularly because I was already using JQuery (although I did have to upgrade from the 1.4.3 release to 1.4.4). If you’re using YUI, Dojo, or ExtJS for your Javascript framework, you will have to decide whether to go purely the JQuery route or take a hybrid JQuery plus other framework route. For a mobile application the latter option is not advisable due to the additional overhead from two Javascript libraries.
While converting my application to JQuery Mobile alpha 1, I noticed that the standard user interface was polished with an appealing light blue color to most of the buttons. The standard theme can also be easily changed by specifying attributes on HTML elements.
While there were several missing widgets like the date picker and time picker, the buttons, list, slider, on/off switch, checkboxes, and text input fields gave me plenty to play with. It took about 4 hours including learning time to convert my roughly 20 page custom application to the alpha 1 release although I had to change my HTML page structure. The alpha 2 release still does not have the date picker and time picker, which is a deal breaker for many applications. If the January release contains these two widgets, it will help JQuery Mobile become a “production-worthy” Javascript user interface framework.
In the alpha 1 release, it was very difficult to create multiple page applications with separate HTML files. The paradigm was that your whole application should go in a single HTML file, which didn’t really work for me since I was using Django as my web application framework. While there were ways to separate HTML files, it felt like a hack in the negative sense. Alpha 2 fixed the problem by making it much easier to pull in separate pages. My application is now spread across a few dozen HTML files and I’ve had no further issues with loading separate files.
One of the biggest gripes I have with both the alpha 1 and alpha 2 release is the “step” attribute on the range slider is ignored. I really need a slider that goes from 5 to 20 in .1 increments but that’s not currently possible. So I’ve had to design the user interface to use text input instead. If the next release fixes the step increment issue, I will use the slider in the user interface.
Another issue I’ve come across is dynamically loading elements on the page. If you simply bring in an HTML element, it will not be styled properly until you explicitly call a refresh-like function on it. The lack of styling was particularly apparent when I tried to create a dynamic unordered list of elements. I ended up modifying the way I pulled in the elements with Django to obtain them with the initial page load instead of an AJAX call. The alpha 2 release addressed this issue but I kept the implementation the same so I do not know how well the new way works yet.
Despite these gripes, I overall really like JQuery Mobile and I’m looking forward to the next release scheduled for January. If you’re already comfortable with JQuery you will be very productive with JQuery Mobile after only a few hours of learning. I will update in the future with further impressions as I get to continue working on my custom mobile browser application.
