iOS webapp frameworks roundup

With a workable beta version of my first ever iPhone application sent out to the few brave souls who volunteered to test it, I thought I'd quickly go over my technology choices for this app.

The core of the application is basically a mobile webapp, wrapped in PhoneGap to make it a native application. I could just as easily distribute it across the normal interwebs, but I specifically wanted to distribute it as a 'native' application. A native application lets me more easily sell it for cash money, and distribution via the App Store makes it slightly easier to find than via any clumsy attempts at online marketing I were to try.

It also gives me some experience in the iOS app build process, which is always good to have.

The application is, from a technical perspective, quite simple. It's a front-end to another simple JSON web service I'm running (on Heroku, as an experiment in trying Heroku, and using MongoDB as an experiment in figuring out how you actually use 'NoSQL' databases). I actually wrote 90% of it three times using three different mobile webapp frameworks.

Attempt one: Sencha Touch

I'd been wanting to try Sencha Touch since I saw Drew Neil, the voice behind the superb Vimcasts, had done a series of screencasts on this framework. The Sencha Touch version was the more developed of my two false starts, and actually more-or-less worked. I gave up on it after losing a day to trying to make the 'enter'/'go' button on the iPhone keyboard submit a form, as I realised that Sencha's entire approach was wrong for the small and simple application I was making.

Sencha Touch works by doing everything as a huge blob of JavaScript functions that are only minimally related to the DOM. Your objects don't directly match the DOM objects, and it all got confusing and frustrating for me. It has the look of something that's really powerful for larger and more complex applications, but it just got in my way and annoyed me. I think I'd go back and try it again if I was developing an iPad app, but I don't think I'd use it for an iPhone app.

Attempt two: DashCode

Almost no one seems to talk about DashCode online, ignoring it to talk about Sencha Touch, jQTouch, and jQuery Mobile. But it's actually pretty neat, providing an IDE that's specifically designed for small and mobile web applications. It provides a ton of UI widgets that, being made by Apple, look really good.

I only gave it a very quick try this time - I realised that I didn't have time to learn the IDE and conventions of DashCode since I'd already lost so much time on Sencha Touch - but it was fun to fiddle with. I reckon that it could actually be a killer tool for rapidly knocking up a rough/not-functioning prototype before passing it over to a 'proper' iOS developer to do in ObjectiveC and InterfaceBuilder.

Final choice: jQTouch

In the end, I came back to the framework I've used before. jQTouch's last release was quite a long time ago, but the maintainer is still working on it and I used HEAD from GitHub and was (mostly) fine, with just a little tweaking to get the 'apple' theme working properly.

jQTouch's HTML approach has less mental overhead for me than Sencha Touch and I was able to get it working in much less time. The framework is showing its age: there's no 'retina' resolution graphics and it's really not suitable for iPad applications, but for what I was doing this time the simple direct approach was the best.

But! jQuery Mobile!

The elephant in this blog post would be jQuery Mobile, the new mobile webapp framework from the jQuery team themselves. All the other frameworks are aimed specifically at mobile webkit browsers, and the most attention is given to iOS and Android. jQuery Mobile's supported platforms is truly impressive, and if I was making an application intended for more than just iOS, I'd seriously consider it.

But I'm not - I'm making a 'native' app, and having native-feeling widgets is really important. jQuery Mobile is also still in the 'alpha' process, and probably shouldn't be considered ready for production.

My 'backlog' of side projects includes one that I'm hoping to try jQuery Mobile with, and I think they'll be close to 'version 1' releases by the time I'm ready to start on that project. That particular project is number four in my mental list, and as a teaser, here's what the four projects represent to me, technologically:

  1. Making a 'native' App Store app using web technologies.
  2. Client-side screen-scraping using JavaScript.
  3. iOS notifications, and the first piece of a project I've wanted to put together for a very long time.
  4. Accessing native hardware components in a PhoneGap application.

I'm not giving myself any deadlines on these projects, and I'll probably come up with other stupid ideas in the meantime, but I'm hoping I'll get all four of those out in the world this year.

The details on number one will follow, once it's ready for release!