As a web designer and developer moving into mobile, the first thing I want to know is whether I can use my current skillset to build apps myself, not just design them. I know that while a web app won’t perform, look or behave as well as a native one, I can have my very own mobile app up and running relatively quickly without having to learn a native language. Let’s compare the most popular frameworks:

These broadly fall into two categories:

  1. Web development frameworks
    Develop in HTML/CSS/JavaScript.
    jQTouch, jQuery Mobile, PhoneGap.
  2. Custom API frameworks
    Develop in JavaScript and the framework’s custom API.
    Sencha Touch, Titanium.

Web development frameworks

Web development frameworks are perfect for creating simple mobile apps quickly.

jQTouch

jQTouch was created in 2009 by David Kaneda. It’s now being run by Jonathan Stark. Jonathan’s outlined a roadmap for the library’s future on the jQTouch blog. It has a dependency on the JQuery library (you’ll need both jQuery and jQTouch), and is solely for the iPhone and iPod Touch’s web browser (not iPad’s). David hints support is coming for Android and Palm Pre’s webOS WebKit browsers, but as of March 2011 that hasn’t materialised.

Nativeness
UI controls look iOS-ish, but are undeniably jQTouch UI controls. Supports gestures, animations and transitions.

Cross-browser support
None. iPhone and iPod Touch only.
Updated 29 March 2011: JQTouch is getting close to supporting Android. Michael Mullany, comment #2.
Updated 11 April 2011: You can download the Android-supported version of JQTouch on GitHub now: https://github.com/senchalabs/jQTouch jqtouch.com’s download link will be updated shortly.

Performance
Okay. It’s dependent on the jQuery library, a library built with the desktop browser in mind, and some question its efficiency. Some complain that animations aren’t smooth enough, although this is a complaint of web apps in general.

Ease of development
Probably the easiest way to build an iPhone app. Work directly with HTML, CSS and jQuery. If you’re developing something complex, you may find it limited.

Accessible device hardware
None. Possible by moving your project into the PhoneGap framework.

Price of admission
Open and free under an MIT license.

jQuery Mobile

jQuery Mobile, developed by jQuery, was announced mid 2010 and is still in its early stages (Alpha C released February 2011). It’s very easy to use, and supports more platforms than any other framework by a mile.

Nativeness
Not very. jQuery Mobile aims to look consistent regardless of platform. UI controls are themeable with ThemeRoller, but you won’t be able to create a proper native experience. Supports gestures, animations and transitions.

Cross-browser support
The best available. jQuery Mobile supports Android, bada, BlackBerry, iOS, MeeGo, Symbian, webOS, and Windows Phone. What you sacrifice in native experience you gain in coverage.

Performance
Average. Apps created with web app frameworks don’t perform as well as those created with custom API frameworks. Dave Feldman’s tests indicated Sencha Touch (custom API framework) performed noticeably better and more reliably than either jQTouch or jQuery Mobile, with the exception of initial load time.

Ease of development
The easiest after jQTouch. Work directly with HTML, CSS and jQuery. If you’re developing something complex, you may find it limited.

Accessible device hardware
None. Possible by moving your project into the PhoneGap framework.

Price of admission
Open and free under an MIT and GPL license.

PhoneGap

It’s currently the preferred way for wrapping jQTouch, jQuery Mobile and Sencha Touch web apps natively so they can be sold in app stores. It’s not just a wrapper though – you can create web apps from scratch in this framework writing HTML/CSS/JavaScript. PhoneGap allows you to access some device hardware features too, an advantage it has over jQTouch, jQuery Mobile and Sencha Touch.

Nativeness
PhoneGap’s API doesn’t let you access native UI elements like Titanium does, although plugins are available. It does provide (limited) access to a device’s hardware, unlike jQTouch and jQuery Mobile.

Cross-browser support
Very good. Android, BlackBerry, iOS, Symbian and webOS.

Performance
Average. Despite being wrapped native, web apps still perform like web apps. You’ll find better performance with Titanium.

Ease of development
Good. If you’re a web developer you’ll be comfortable working directly with HTML, CSS and JavaScript.

Accessible device hardware
GPS, Vibration, Camera, Microphone, (plus Accelerometer and Compass on some devices).

Price of admission
PhoneGap is free for all while in beta, and will remain that way always for open source projects.

Custom API Frameworks

Custom API frameworks are more powerful than web development frameworks. They claim to allow you to write once for multiple platforms, but in reality it’s not that simple. See here (search iPhone Android dual targeting) and here for examples showing there’s no such thing as a silver bullet.

Sencha Touch

Overview
David Kaneda handed over maintenance of jQTouch to Jonathan Stark so he could focus on Sencha Touch. Sencha Touch is geared more towards software developers than web developers, with a pure JavaScript API.

Sencha Touch’s custom API framework offers more power and flexibility than web dev frameworks like jQuery Mobile or PhoneGap. A popular approach is to build an app with Sencha, then wrap it as a native app with PhoneGap.

Nativeness
Better than jQTouch or jQuery Mobile, but if you want your app to look native, it’s unlikely you’ll fool anyone.

Cross-browser support
Android, iOS, and BlackBerry (from Sencha 1.1).
Updated 29 March 2011: Intention to support Meego and IE9 mobile for Nokia once phones ship with them. Michael Mullany, comment #2.

Performance
Better than jQTouch and jQuery Mobile, not as good as Titanium.

Ease of development
Steep learning curve. You’ll be working with Sencha’s API and JavaScript, with little to no HTML/CSS. Dave Feldman says the framework feels huge compared to jQuery Mobile, and while the documentation is extensive there are “odd holes”. See Dave’s article Comparing Mobile Web Frameworks from February 2011.

Accessible device hardware
Apparently none, but PhoneGap could be used as a bridge to access device hardware.

Price of admission
The commercial license for Sencha Touch is free. A paid support option is also offered for US$300 per annum.

Titanium

Since its 1.0 release, Titanium shifted from producing apps that were native-wrapped web views (like PhoneGap’s), to being more natively integrated. Titanium’s JavaScript API acts as a bridge between you and the platform’s API, resulting in apps that perform better and feel more native. Incidentally you can also use Titanium to deploy desktop apps too (Windows/Mac/Linux).

Nativeness
Good. More than any other framework it comes closest to providing a native experience. Titanium has a comprehensive UI API that can control all kinds of native UI controls.

Cross-browser support
Weak. Limited to iOS (including iPad) and Android for now. BlackBerry may be in the works. A single development environment for both platforms, but getting your app working on both requires work, and can be a headache.

Performance
As good as it gets without being native. Dave Feldman writes his app’s performance under Titanium blew away the web app frameworks in comparison.

Ease of development
Steep learning curve. High proficiency in JavaScript and willingness to learn Titanium’s API required. Lack of ability to debug properly is cited as a problem.

Accessible device hardware
GPS, Vibration, Accelerometer, Compass, Camera, Microphone.

Price of admission
The fully supported Titanium option costs US $199 a month per developer.

There’s also a Ruby-based framework, Rhodes

If you’re into Ruby, you may want to consider Rhodes. See Mauro Dalu’s article on Titanium versus Rhodes.

Conclusion

As it stands today, no framework is clearly better than its competition, and we’re left to weigh up which one is best on a project by project basis. If your JavaScript proficiency is basic your options are limited to jQTouch, jQuery Mobile and PhoneGap. If your JavaScript proficiency is high, Sencha Touch, Titanium and other custom JavaScript API frameworks allow you to build powerful apps that come close to the performance and feel of native apps. Titanium’s ability to deploy apps natively, performance and access to device hardware make it a stronger option that Sencha Touch, but its lack of device coverage and reported clunkyness in writing once for iOS and Android would make me seriously consider outsourcing native development as an alternative.

Emulating a native experience
Best: Titanium
Worst: jQuery Mobile

Device support
Best: jQuery Mobile
Worst: jQTouch and Titanium

Flexibility and power
Best: Titanium
Worst: jQTouch and jQuery Mobile

Futher reading

This article was written from the perspective of someone setting out to create a mobile app and trying to make sense of the various approaches to doing it. There was no comprehensive comparison online for hands-on experience with frameworks that I could find, which is why I wrote this. I’ve done the best I could to make sure information is accurate, but for the benefit of others who will read this article, please let me know if any information is incorrect. All sources are listed below:

jQTouch blog
jQuery Mobile blog
jQuery Mobile’s Strategy
JQuery Mobile Framework Announced on Hacker News.
Sencha Touch blog
jQTouch and Sencha Touch: Which is right for you? by David Kaneda
Appcelerator Titanium
PhoneGap blog
Rhodes blog
Comparison between Corona, PhoneGap and Titanium
at Stack Overflow.
For specific information on PhoneGap vs Titanium in the link above, search Now, are they any different?
iWebKit vs jQTouch vs iUI at Stack Overflow.
Comparing Mobile Web Frameworks by Dave Feldman.
Titanium versus Rhodes by Mauro Dalu.
Comparing the difference between JavaScript libraries and frameworks at Quora.
Mobile Developer’s Guide 7th edition at enough.de

About these ads