Building a Native iPhone App with Phonegap, jQuery Mobile, HTML5, and CloudFront

I recently shipped my first iPhone app, a humble affair that lets you play stories recorded at the storytelling series that my wife runs.  It's humble in the sense that we did not spend a huge amount of time designing it, not being sure what the demand for the app would be like.  I was inspired by the very excellent This American Life mobile app.

It was a great opportunity to experiment with a project I've been eyeing for a while:

• PhoneGap
• jQuery Mobile
• HTML5 Media Elements
• HTTP Streaming
• CloudFront

Not all of these technologies are fully-baked, or at least they haven't been around long enough to play together completely seamlessly, and I think it shows in the final app (it has some glitches).  I'm sure with more time I could have made it tighter, but it seems to work pretty well.

Phonegap lets you build native smartphone applications using browser-based technologies like HTML, CSS, and JavaScript.  That means the same app (more or less) that you build for the iPhone will work across platforms, and you don't have to mess with Java or Objective-C unless you're doing something more hard-core.

I found PhoneGap pretty easy to work with, except I hadn't used Xcode before, so I spent a while learning Xcode conventions before I could get totally up and running.  The latest release of PhoneGap seems to be easier to setup.

My only complaint: the app is noticeably slower when built natively with PhoneGap when compared to running my code inside of mobile safari, in a regular browser window.  I'm not sure what that's about - you'd think the opposite would be true.  I'm sure this will get better over time.

PhoneGap just gives you a browser window; unless you want to build up your own UI elements you need some kind of framework.  I originally used JQTouch (JQT) after watching this excellent PeepCode screencast, but the latest version of JQT was not working with the latest version of Mobile Safari in iOS 4, so I switched to a recently-announced project still in alpha testing, jQuery Mobile.

jQuery Mobile builds (naturally) on jQuery and gives you a bunch of nice UI behaviors that you'd expect from a mobile app, like page transitions, lists, swiping, etc.  There's a pretty awesome demo.  This was the bedrock of The Stoop app and saved me a ton of work.

HTML5 Media Elements make it much easier to deliver audio to the browser.  The Stoop app uses the audio tag, and I found the JavaScript API, including events, very useful.

HTTP Streaming: The first version of the app was rejected by Apple because some audio files were longer than ten minutes.  iPhone app store guidelines say you have to use Apple's HTTP streaming protocol in this case.  It turned out to be really straightforward to use the provided Apple-provided mediafilesegmenter to split our MP3s into 10-second chunks.  A few files were over 64kbps so I downsampled them with ffmpeg and LAME (the guidelines also require you to offer at least one stream at that bitrate).

CloudFront: I'm trying as much as possible to get out of the business of running servers when there are cloud services that can do it better.  There's no good reason for an app like this to need its own custom server dishing out static audio files, so I uploaded all the segmented files to Amazon S3, then setup a CloudFront CDN distribution.  Whenever you listen to a Stoop story, it's coming from an Amazon CDN node.  This was very easy to setup. I'm experimenting with s3stat as a way to get listening statistics.

My iPhone app screens

I got stuck for 90 minutes at the dentist office, so I decided to organize all my iPhone apps. First screen (left) is essentials, stuff I use every day. Second screen (right) is references and tools.

Third screen is "communications and entertainment". Fourth screen is the graveyard, for things I don't use regularly or can't get rid of.

I can think of worse ways to kill 90 minutes.