Tuesday, February 22, 2011

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.

9 comments:

Nick Carter said...

Just wanted to clarify based on my limited experience with it: Titanium for desktop provides other languages such as ruby, python etc, but Titanium mobile is JS only.

Also, Titanium Mobile doesn't actually cross-compile JS to ObjectIve C and then build the app. It provides a number of interfaces to native widgets (buttons, lists, toolbars) which you can access from your JS code, and anything special you need to display beyond that is handled via a WebView. So while you get great performance out of all the native widgets, any custom stuff should be similar between PhoneGap and Titanium.

Darren said...

Thanks for the clarification! I updated the post to reflect that. I haven't had time to dig into the Appcelerator Titanium docs. I used the following article as a quick overview of Titanium.

http://www.amlcode.com/2010/07/16/comparison-appinventor-rhomobile-phonegap-appcelerator-webview-and-aml/

Looking forward to checking out Titanium more...

Steven Romalewski said...

This is a very helpful review. I'm in the process of evaluating different approaches of porting my webOS apps (http://spatialityapps.com) to iPhone and perhaps Android, so I'm looking closely at Phonegap and either jQTouch or jQuery Mobile.

Did you have a chance to test how Phonegap exposes native components on any of the actual phone devices, in conjunction with either jQTouch or jQuery Mobile? Such as geolocation, alerts, contacts, that sort of thing?

Steven Romalewski said...

Or, I should add, any of the Phonegap plugins, especially MapKit. For example, the MapKit plugin allows you to incorporate Apple's MapKit map implementation, but the map object is separate from the page/div structure of the JavaScript frameworks.

I've started to test this with jQTouch, and it seems to work ok, but I'm wondering how jQuery Mobile (or Sencha Touch) deals with it.

Thanks!

Darren said...

Thanks Steve, unfortunately no, I haven't yet tested out the different native functions, so can't comment on them. I'm planning to do some more testing with Sencha / PhoneGap soon and will post results. On the other hand if you beat me to it, let us know how it goes.

ilhamsk said...

phonegap is wonderful, I can build my application for some smaprthone platform. And I don't need to study again, because I can mae it with web programming. Thanks for sharing!

project707 said...

I had the sort of experiences you mention using jQuery Mobile while building a mobile site that is fairly high profile, and unfortunately there's no going back. it's just not ready, and to create this definitely required fighting it.

I had time allotted to contribute to the project to suggest and add features or just fixes that would make it more "ready for production", but that only worked out so well due to the stage it's in. As it stands, I'm needing to launch this with a hacked version of jQuery mobile just hoping that my suggestions/pulls will be implemented, so that it can be easily upgraded.

That's what I get for going with an alpha framework...

Don't get me wrong; jQuery Mobile is going to be really cool once more customization hooks are implemented and some of the bugs are taken care of. However, until that day comes it really looks like Sencha Touch and Sencha with Phonegap seems to be the ultimate solution that is actually ready. That could have cut out some major steps, as I'm basically starting over to develop the native version now.

Darren said...

Hey Project707. Sorry for the delay... travel. Thanks for the comment; I hope to take a closer look at Sencha on my next project. A quick review of some of the apps built with Sencha Touch show that its definitely capable of production-quality results, but I'm not sure I could say the same for jQuery Mobile just yet.

Sam Mefford said...

Great little write-up, thanks for sharing. I can say from experience that Sencha Touch 1.x is also not ready for prime time. In particular, the Android scrolling issue is a killer until Sencha 2.0 is released: http://www.sencha.com/forum/archive/index.php/t-104155.html

Also, the holes and inaccuracies in the Sencha Touch documentation are not fun :(

Productivity and Note-taking

I told a friend of mine that I wasn't really happy with the amount of time that gets taken up by Slack and "communication and sched...