Adventures in Mobile Development

My initial foray into mobile development was to create an iPhone app from scratch using XCode. I wrote a simple mortgage calculator in an evening, and then spent a ridiculously long time trying to figure out how to arrange my signing certificates and whatnot so as to let me actually run it on my iPhone. (I never did get it running on anyone else’s.) Given that I am only superficially familiar with Obj-C and Cocoa, this was not terribly painful. If I could write apps for iOS and Android using XCode and Interface Builder, I’d be very happy. (And, from my point of view, XCode 4 is looking like a huge step forward from XCode 3.)

More recently, I ported my Manta game to iOS.

(Actually, I just realized that my first foray into mobile development, back in 2001, was an attempt to build a Mobile Flash-based multimedia detailing tool for the Compaq iPaq, but I had successfully repressed that memory. You think Flash sucks on mobile devices today? Shudder.)

Lately, I’ve been trying to figure out a good strategy for rapidly prototyping, developing, deploying, and supporting mobile apps for a large enterprise, and it’s been … educational. (“Experience,” Randy Pausch noted, “is what you get when you didn’t get what you wanted.”)

The first step in this latest adventure was an excellent tutorial: How to Create an HTML5 iPhone App (Alex Kessinger). I didn’t bother with his Tetris clone, as I was trying to build a data-driven productivity app, so I simply used his tutorial as a shortcut to figuring out the basics of manifests and the stupid HTML incantations necessary to get a non-scrolling full-screen web app working. This persuaded me that pure HTML5 web apps are a perfectly viable way to go for most business stuff, but you’ll still need to build a minimal wrapper to deploy via an App Store.

I should state at this point that this does not qualify as a review so much as a disjoint set of observations based on generally shallow experience of a number of mobile development options. It is, in effect, a quick brain dump of my current impressions rather than any kind of careful analysis.

Mobile development options range between two extremes: mobile-friendly web pages and Native development using platform-specific SDKs. (It should be noted that if you want to provide a “real” app through an “app store” the platform-specific SDK is pretty much unavoidable, but you might be able to avoid writing all your code in an IDE you despise.)

Mobile-Friendly Web Development

The purest web option is, of course, to simply create a website. You don’t need to do anything except test to see that your website isn’t pathological on a mobile platform (e.g. do you use Flash for UI elements, are your article’s coerced into bizarre multi-column layouts or otherwise broken up in a way that makes them hard to zoom in on and read?).

You can be a bit more mobile-friendly by creating custom CSS to cater for mobile web browsers, including a mobile (or at least iOS) friendly favicon, and possibly even providing manifests and so forth to make some or all of your pages work offline (although working with manifests is an absolute nightmare during development). It’s possible to make web pages look arbitrarily similar to a native app just using a bit of CSS and Photoshop magic, but it’s very hard to create native behavior and responsiveness, and you won’t have access to platform-specific functionality (e.g. the camera or GPS).

Personally, I think that all websites should be mobile-friendly, but making mobile-specific websites is generally a Bad Idea. (Even when done well, e.g. ESPN.com, I think I’d rather just get the “real” site if the real site weren’t horribly heavy.)

PhoneGap + Your Favorite UI Library

PhoneGap allows you to build a “native” app out of HTML and JavaScript by essentially building a mini-site into a simple custom app framework that simply provides an interface between the JavaScript runtime and the underlying mobile OS. PhoneGap doesn’t attempt to solve the problem of providing native look and feel — that’s between you, Photoshop, and the JavaScript programming deities.

Luckily, the JavaScript programming deities have smiled on us and provided both free/open source and non-free solutions to the other side of the problem in the form of jQuery MobilejqTouch, and Sencha Touch. (Sencha being the folk who produce ExtJS, which is a superb JavaScript widget library.)

I should mention that while jQuery Mobile and jqTouch are implemented as jQuery extensions, Sencha Touch is perfectly compatible with jQuery (I actually first learned jQuery and ExtJS together, since I was working on a site that used both). This is hardly surprising since both jqTouch and Sencha Touch are from Sencha! From what I can see (and from this response on StackOverflow) jqTouch was an experiment that got open-sourced, Sencha Touch is what was built based on what the devs learned building jqTouch (and it’s bigger, more complex, and actively maintained library), and jQueryMobile is the official jQuery mobile platform (which may or may not have borrowed stuff from jqTouch, I don’t know). More importantly, working with Sencha Touch is more like pure coding, while jqTouch and jQueryMobile apps are, at the bottom, web pages.

jQueryMobile has, unquestionably, the most impressive website of the three — go to the Docs and Demos pages and then try resizing your browser Window. (Here’s a link, but note that the url seems to be version-specific and may stop working.)

Visual Basic Reloaded

A little further along the spectrum there are Appcelerator Titanium and Ansca Mobile’s Corona SDK which essentially remove HTML from the equation and replace it with a native canvas (in essence, Appcelerator is “Visual JavaScript” and Corona is “Visual Lua”). Appcelerator Titanium seems to have quite a bit of traction (supporting JavaScript is probably a good marketing move) but Corona has probably produced more commercially successful results (Lua is generally more performant than JavaScript).

Corona is more 2d-game focused (your ability to use native widgets is pretty limited, and there are lots of iOS-centric examples of faux native controls) while Appcelerator is more enterprise-app focused (and makes a point of exposing platform-native controls). As a personal aside, Appcelerator is a huge pain in the ass to get going (it is Eclipse-based but requires an appropriate version of XCode to be installed for iOS development and the Android SDK to be installed “just right” for Android development) with while Corona SDK simply provides a very nice simulator that “just works” (it doesn’t do platform native stuff, but works fine for many purposes) that lets you use whatever development tools you like.

If you don’t need a lot of OS-level widgets (and don’t mind learning Lua) Corona is much easier to get up-and-running with. But if you want to create native productivity apps that run on both iOS and Android, Appcelerator is much more capable.

The 800lb 3D Gorilla

Unity differs from Appcelerator and Corona in three key ways. First, its runtime is 3d-game oriented rather than 2d or productivity oriented. Second, its runtime is both more capable in some ways than its competitors because it contains a chunk of Mono (i.e. .NET) functionality and less capable in others because not all native platform capabilities (e.g. browser panels and other UI widgets) are supported. Finally, it runs compiled code against its own APIs. This means that Unity is going to be useless for certain kinds of development (e.g. want Google Maps integration? Forget it) and vastly superior, perhaps even to native development, for others (i.e. 3d games and other realtime 3d stuff).

HTML PhoneGap+ Corona Appcelerator Unity
IDE n.a. XCode for iOS, Eclipse for Android n.a. Eclipse Unity
Native Widgets Kind Of Kind Of No Yes No
Best Feature You’re already done Free Lightweight Native Widgets Awesome Dev Tools
Worst Feature DIY Still kind of DIY Need to build app to see supported native widgets Fiddly to get going Not intended for non-games
Language JavaScript JavaScript Lua JavaScript JavaScript[1], C#, Boo[2]
Price free free $199 p.a.+ $49/month+ $400+
Personal Opinion manifests are a pain to deal with (because stuff gets cached on your iPhone and it’s hard to dislodge) haven’t gotten too far down this road, but Sencha Touch looks great very click, but productivity apps seem to be a poor relation absolute pain in the ass in every conceivable respect love unity but it’s kind of heavy and for productivity stuff you’re on your own

Notes: [1] Unity JavaScript is not quite the same as JavaScript, but it’s easy to get up-and-running if you know JavaScript. [2] Boo is a Python-like language with curly braces instead of parens, and just enough dynamism removed to allow it to compile.

I need a Mobile App tomorrow!

If all you want is a mobile-friendly landing page (and you’re willing to pay), Widgetbox has a tool for creating a mobile “web app” with point-and-click simplicity. I’ve played around with their tools enough to verify that the work, but I haven’t actually tried to deploy their tool so I don’t know how well it works offline (e.g. can you bookmark the site on your iPhone and have it work offline correctly?) It would be pretty neat to have a tool along those lines that actually let you build a proper app.

Going Native

Finally, there’s native development, which I won’t go into. (I like XCode and loath Eclipse so I’m pretty biased.) Aside from producing a truly native app, the iOS SDK has a bunch of functionality that none of these tools match (I don’t know enough about Android to know whether the Android SDK does too). E.g. that way iOS lets you handle screen orientation and user interface transitions is simply light years ahead of most of these tools (where you’re pretty much on your own) and solidly ahead of the best (which would be Sencha Touch).

The Story So Far…

At this point, I should mention two of my biases and get them out of the way. I don’t care for Eclipse, and I don’t like subscription-based models, and Appcelerator Titanium has both. Now, to be fair, my opinion of Appcelerator was perhaps unduly harshed by my having been using Mac OS X [redacted for NDA reasons] on my Macbook Pro which meant nothing much seemed to work (although I also spent a huge amount of time not getting it working on my Mac Pro, which is running 10.6.x). Basically, in order to work, Appcelerator seems to need all the stars to be in alignment and I have yet to get them so aligned. I like the idea of Appcelerator, but thus far I’ve found the execution leaves much to be desired.

Corona SDK on the other hand (which is not without OS X [redacted] issues of its own) was a joy. The download was small and I was able to get the simulator up and running in minutes, and complete the excellent tutorial with no problems. I immediately grokked how things worked and was able to dive into their API documentation and add extra functionality to my toy tutorial app immediately. (Despite not really knowing Lua.) I should add that this is the experience I’d hoped Appcelerator would deliver, but no. (I’d also add that the Appcelerator site has a bunch of getting started video tutorials that never actually seem to get to the point of doing anything interesting. In terms of “five minute demo” Corona SDK has Appcelerator beat.)

The problem with Corona (for me) is that if I’m going to use a game-centric development tool, I might as well use Unity. Corona does have the advantage of seeming lighter (and it’s certainly cheaper). I guess if the right project came along I’d probably consider Corona, but business productivity apps just doesn’t seem to be Corona’s strong suit.

Frustrated by Appcelerator’s lengthy and fiddly installation process (and being forced to use Eclipse) and Corona’s lack of support for native widgets, I started looking at the PhoneGap+ options once more, and I have to say that I’m very impressed by jQueryMobile and Sencha Touch. Simply based on the jQueryMobile doc site (and its “eat your own dogfood” approach), I’m leaning towards PhoneGap + jQueryMobile. That said, I finally managed to get Titanium Developer to launch the “Kitchen Sink” app in my iPhone Simulator, which means I might be able to code with Accelerator the way I was able to code in Corona (modulo a much more cumbersome build/debug cycle).

So, to sum up, I like Corona. It’s lightweight, really easy to pick up and use, and fun. Needing to learn a new and not especially widely used language is a bit annoying but it’s no big deal. But I really can’t use it — it’s not a general purpose app development platform but a 2d game platform (e.g. it has no selector widget, but it does provide a system for managing virtual currency).

I’ve not yet built a PhoneGap app but, assuming it all works as advertised (which is clearly a huge assumption for mobile development), it looks like this is a useful option, but it’s probably never going to be as refined as a truly native application (e.g. none of Sencha’s widgets look native on an iPhone, and a few of jQueryMobile’s widgets are downright ugly).

Unity continues to rule the roost for game development, but it’s virtually useless for what I’m currently trying to do.

And finally, there’s Appcelerator. In some respects it seems like the Holy Grail, but it’s been such a pain in the ass so far that I’ve just spent the last two days scouring Google for alternatives (culminating in this blog post). The fact that getting up and running was so painful isn’t promising, the documentation on the website has strange gaps (“hello world”, anyone?), I find the instructor in their video tutorials to be infuriatingly slow, and I’ve read nightmare stories about bugs in the platform that have brought projects to a screeching halt.

I also don’t see a single example of a “cool app” developed with Appcelerator. What I see is a bunch of giant corporations that are using Appcelerator for reasons that probably make no sense to end-users. (What App does NBC Universal ship and why do I care?)

So, right now, I’m probably going to experiment with PhoneGap and Sencha Touch or jQueryMobile. If not, I guess I’ll bit the bullet. At this point, if I could ignore other platforms and just code in Obj-C for iOS I would avoid Appcelerator altogether. Oh well.

Postscript

I came across this blog post (Martin Kou) in my meanderings. The main takeaway is that the writer finds jQueryMobile to be pretty flaky, and hasn’t tried Sencha Touch but says that it is “purportedly, much more mature and is faster”.