What I Learned from a JQuery Mobile Project - Pros and Cons

Wednesday

May 4

2011

I used JQuery Mobile in a 4-week project building a basic mobile web app on Node.js. Here's what I learned about it, what I liked and didn't like.

JQuery Mobile is a mobile interface system based on the JQuery UI and JQuery javascript libraries. It's main goals are:

Device and Browser Independence - allow you to write one app that will run on any smartphone or tablet
Provide Touch Interaction - layer touch interaction on top of your app without hassle
CSS/HTML Markup Oriented - you can build powerful mobile web apps by modifying your HTML and CSS only with little Javasript coding required - if more flexibility is required, the underlying JQuery library makes for familiar Javascript customization.

I found JQuery Mobile very easy to learn. Getting started with a basic page is easy using a boilerplate template. The demos/docs section gives you an easy index to figuring out how to work with links, buttons, forms, etc.

JQuery Mobile gave us a number of wins in this project:

The default page template gave us a decent-looking shell layout for the app
The out-of-the-box forms, links, and buttons were easy to set up, have a standard iPhone-inspired aesthetic, and are easily customized
Touch interaction worked out-of-the-box with no work required

During the course of the project, I developed a serious concern about the JQuery Mobile navigation and linking scheme. The default in JQuery Mobile is that it will take over navigation and apply its own Ajax navigation to all links unless you do something like use a rel=external attribute in the link tag. Though this configuration is easy to do, in order to use JQuery Mobile as intended, you may have to rethink your navigation scheme and introduce a new organizational aspect involving how pages are grouped together for multi-page loads.

At times I noticed unpredictable behavior in using the browser back button and in manually (by entering url in address bar) navigating to other pages on the site. While writing this, I visited a half-dozen pages in the demos section and then tried to get back to the root using the back button and manually entering the url using Chrome 11. Neither method worked. Either the root page redirected to the demos page, or the browser tried unsuccessfully to load the root page via an AJAX call. I had to switch over to Safari to access the root page and get into the forum to submit a post about this problem. I'd recommend taking a close look at the navigation and linking model for any site involving more that a couple of pages. My experience suggests that the model can cause some unexpected dependencies between pages that can make navigation problematic if not handled carefully.