Wednesday, July 13, 2011

PhoneGap and jQuery Mobile

I recently started working on a project with phonegap and jquery mobile, and I'll tell you how it went.

When I first started off, I did not know about jQuery Mobile, and I decided I would just write the app in plain ol' Javascript and HTML5. I wrote part of the app, but, I kept getting the lingering feeling that it did not look on par with some of the mobile apps I have seen. I am basically terrible at design, so, I tried to find a way to solve this problem. Then, I found this. I got jQuery mobile, wrote a sample app, and I was amazed.

The declarative interface is no short of AWESOME. This is how concise it is.

With 15 lines of code, here's what we have. Firstly, gradients. I hate doing gradients, I hate all the webkit and moz stuff, and jquery mobile conveniently deals with it. Next up, we have rounded corners. I also hate rounded corners, I've never gotten them right. Yet again, they're here by default. We also have sliding transitions between the pages, and the pages are all defined in one file, instead of being plastered all over the place. Icons are also present, and a large collection of them, too. And, it looks like a mobile app. That's the most important part, if I had written this without any help from jQuery, it would look like a very ugly web app. jQuery mobile is almost like a friggin' design team! The themes provided are also excellent, and, of course, if you would like something extra, you can always customize everything.

Now, onto jQuery mobile's documentation. Of course, despite everything, I did run into a problem. The problem was that I was populating a ListView with AJAX, and, for some weird reason, jQuery mobile would refuse to style it for me. So, I took a quick look at Google, within 10 minutes, I figured out the solution to my problem with jQuery mobile's excellent documentation (its this in case you're interested, scroll down to the updating lists part).

Now, I still have a question I have been unable to solve, its posted here. Can any of you help? Comments or answers on StackOverflow would be great.

Lets go onto PhoneGap. Me, being lazy, did not want to install the SDK's for Android, Blackberry, and iPhone, so, I tried out the PhoneGap Build. It was overall very good, still some rough edges, like, on some days, Blackberry builds did not work, but, their developers are very good at responding to bug reports.
PhoneGap did not get in the way, and let me work in pretty much transparent Javascript. LocalStorage and WebSQL facilities are very good.

One thing I would like to see is good IDE support for Jquery Mobile, and Javascript overall.

But, aside from that, it was a very pleasurable experience, and I would definitely develop with the toolset again.