Phonegap and jQuery Mobile First Impressions

This past long weekend I decided to spend some time getting familiar with PhoneGap and jQuery Mobile.  After a couple of afternoons spent in coffee shops, walking through the learning curve and experimenting, I had a working app installed on my iPhone.  Not the most polished piece of boilerplate, but enough to show off to some friends, who were duly impressed.

These are my first impressions after muddling around with it for a while.

Why PhoneGap?

PhoneGap is one of several platforms that aim to make developing cross-platform mobile apps possible, and easy. It does this by wrapping a mobile web app in a stand-alone application that provides wrappers for the phone's native APIs, including accelerometer, sound, vibration, media, geolocation, camera and local storage. PhoneGap targets a large number of mobile platforms including Android, iPhone, Blackberry, Palm, Symbian and WebOS. It uses straightforward markup, script and stylesheets to build the application. Some of the native look and feel is sacrificed for the benefit of an application that runs the same on all these different devices.
 
PhoneGap doesn't provide a JS framework

Although PhoneGap gives you a convenient way to bundle a web app as a native app, and hooks into the devices native APIs, you are totally on your own with respect to what web-app framework you use, if any.  I started out writing raw HTML, CSS and JavaScript and soon realized that I wanted a framework.  I tried out both jqtouch and jQuery Mobile with mixed results.

Start with your web app

I could have saved a lot of time if I had started out just writing my app as a straight web app, and then transitioned it into PhoneGap after the main boilerplate was done.  Bearing in mind that PhoneGap is akin to a browser reading files off local disk, its necessary to structure the code accordingly. For example, jQuery Mobile converts hyperlinks to AJAX requests with callbacks that are handled by with animated page transitions. This works great if the link is another page served over HTTP, but it didn't work for reading files off the local disk.  As a result, all the markup for my app resides in a single file.  This is just a constraint of using jQuery Mobile on PhoneGap, at least for the time being.

jQuery Mobile Impression

jQuery Mobile is currently an alpha release, so its not fair to be too critical of it yet. But it is fair to say that it's not production-ready.  It tries to be clever with its navigation and often ends up getting lost. Errors are not handled graciously. Some advertised features, like fixed toolbars, simply don't work reliably enough to use.  That being said, if you take a look at the excellent jQuery Mobile demo page, and see everything you need to build your app and can stay within those limits, it should work well.

jqtouch impression

jqtouch has a bit less in the way of features compared to jQuery Mobile, but it seems more polished. The look and feel (both the default "dark" theme and the alternate "apple" theme) show a great level of attention to detail.  Seeing as it comes from Sencha Labs, this is not too surprising.

Sencha Touch
Sencha Touch is both polished and feature-rich.  Based on my experience with jQuery Mobile and jqtouch, Sencha will probably be my choice next time.  Check out some of the demo apps at sencha.com and you get an idea of just how far the mobile web-stack has come.

Don't fight the framework

With both jqtouch and jQuery Mobile, I tried to go beyond what you can see in the demo page, and quickly found myself fighting with the framework more than it was actually helping me.  I started to make progress when I gave up on my fixed idea of how I wanted things to work and let the framework dictate my design.  For example, I had to use a navigation bar at the top of the page, because a fixed navigation bar at the bottom of the page was too buggy. This is a problem that Sencha Touch seems to have fixed, and one of the reasons I'd probably choose it next time.

PhoneGap Simulator

For testing while developing,  I just opened my app in Safari. It can render all the page transformations and gives you a pretty close approximation of what you'll see on the iPhone.  There is also a PhoneGap Simulator, an Adobe AIR application that runs on Windows, Mac and 32-bit Linux.  I had problems with an early version downloaded from the author's blog, but there's an updated version known as the Sony Ericsson PhoneGap Simulator (v.1.3.0), downloadable from Softpedia.com.  It comes with skins for several different smartphones and goes beyond other simulators by providing a 3D model that you can manipulate to test the accelerometer, although it doesn't allow you to test all the native features wrapped by PhoneGap like the camera and local media.

Other Options

Appcelerator is a recent addition to the cross-platform mobile framework field, and although it only supports iPhone and Android at this time, it looks promising.  The unique advantage it offers is that provides access to the native user interface, so your application can be written in JavaScript and still run native widgets on the device, together with content rendered by the Webkit engine.  At first glance it seems extremely well put together and comes highly recommended from some pretty happenin' web dev folks.