Monday, January 3, 2011

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:
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.


twmills said...

Did you happen to check out Rhodes?

I haven't checked it out yet either, but it aims to do the same thing as PhoneGap except with ruby.

Mike Subelsky said...

no, but I'd be interested in trying it for a future app. I'd also recommend people look at Appcelerator, Titanium, and a few others.

Michael said...

What kind of audio player do you use in your app?

Im working on a project now with phonegap and jquery
But i don't find a good player yet.

Can you help me?
Thnx. Michael

Anonymous said...
This comment has been removed by the author.
Anonymous said...

I know your article is a year old, but it really helped me to understand a bit more about phonegap. What I really would like to know is if you can still recommend using it for creating my first app. I am very confirm with HTML, PHP, CSS, JavaScript, jQuery and don't wanna change to xCode or those SDKs.
Could you solve the speed issue?

Thank you in advance.

Mike Subelsky said...

Hi irfancue, I did not end up maintaining this app due to low usage, but since I wrote this Phonegap and jQuery Mobile have gone through many revisions including speedups. I would totally build my next mobile app this way.

Anonymous said...

Hi, thanks for your post. Did you finally found a nice player for your apps?

JB said...
This comment has been removed by the author.