Comparing Mobile Web (HTML5) Frameworks: Sencha Touch, jQuery Mobile, jQTouch, Titanium

It’s been an exciting year for the mobile Web. Adoption of HTML5 and CSS3, improved performance in mobile browsers, and an explosion of mobile app frameworks mean it’s more feasible than ever to create rich, interactive Web experiences for mobile devices. Using a wrapper like PhoneGap, you can distribute them via the native app stores for iPhone, iPad, and Android —targeting multiple platforms with a single codebase.

Or can you?

I needed a platform for Pints — a mobile app that answers answer the question, “Which beer should I order?” As someone who works in Web technologies on a daily basis I saw HTML5 & friends as an alluring option.

Pints isn’t complicated: a home screen, a few lists screens, a few forms. Its greatest complexity lies at the data level: as an iPhone app destined for San Francisco bars it can’t possibly rely on an Internet connection, so it has to keep a local copy of the beer database and sync it with the server when that’s available. HTML5 has the necessary building blocks in the form of several offline storage options; it’s just a question of writing the synchronization code.

Mobile Web developers have a plethora of frameworks to do the heavy lifting for them: animated transitions, toolbars, buttons, list views, even offline storage. Most of these are new and the landscape is shifting rapidly. I started Pints in jQTouch, then migrated to jQuery Mobile, and finally rewrote the whole app (now in private beta) in Sencha Touch. Along the way I also investigated Appcelerator’s Titanium Mobile. Here’s what I found:

jQTouch

jQTouch is easy to use and relatively well-documented. It’s featured in the excellent Building iPhone Apps with HTML, CSS, and JavaScript. jQTouch takes a progressive-enhancement approach, building an iPhone-like experience on top of your appropriately-constructed HTML. It’s simple, providing a basic set of widgets and animations and just enough programmatic control to permit more dynamic behavior.

But even in my simple test app there were performance issues. Page transitions can be jumpy or missing, and there are periodic delays in responding to tap events. And while the project is technically active, the original author has moved on and development seems to have slowed.

jQTouch is available under the permissive MIT License, one of my favorite open source licenses.

jQuery Mobile

jQuery Mobile is the new kid on the block. Announced in August 2010, it’s quickly progressed to a very functional Alpha 2. It takes a similar – but more standards-compliant – approach to jQTouch and feels very much like that framework’s successor, with a broader array of UI controls and styles.

jQuery Mobile’s performance is variable (though better than that of jQTouch), particularly in responding to tap events rendering animations. It also lacks a small number of key programmatic hooks that would permit easy creation of more dynamic apps. For instance, there’s an event that triggers when a page is about to load (i.e. slide into view) but no way to tell the associated handler code what UI element resulted in the page switch, or to pass additional information to that handler. I was able to create workarounds but hope that future versions will take a cue from jQTouch and build out this functionality a little more.

jQuery Mobile’s documentation is a little scattered but improving; I’m hopeful that it will become as robust as that of the core jQuery library. (Note that jQuery Mobile is really a mobile counterpart for jQuery UI, not for jQuery itself, on which it builds.)

jQuery Mobile is available under either the MIT or the GPL2 license.

Sencha Touch

Sencha Touch is the mobile counterpart to the Ext JS framework. Its approach differs significantly from jQTouch and jQuery Mobile: instead of enhancing preexisting HTML, it generates its own DOM based on objects created in JavaScript. As such, working with Sencha feels a little less “webby” and a little more like building apps in other technologies like Java or Flex. (It’s also a bit more like YUI than like jQuery.) I personally prefer the progressive enhancement approach, but it really is a matter of preference.

Sencha is far more extensive than its competitors, with a vast array of UI components, explicit iPad support, storage and data binding facilities using JSON and HTML5 offline storage, and more. (It’s very cool to manipulate app data in one of Sencha’s data structures and watch the corresponding list update in real time.) It’s also the only Web framework I’ve seen with built-in support for objects that stay put (like a toolbar) while others scroll (like a list).

For all that apparent extra weight, Sencha performed noticeably better and more reliably than either jQTouch or jQuery Mobile in my tests, with the exception of initial load time.

When working with a library or framework, it’s usually counterproductive to “fight the framework” and do things your own way. Given how extensive Sencha Touch is, that means your app will probably end up doing just about everything the Sencha way. I’d originally used WebKit’s built-in SQLite database for offline storage but ultimately eliminated both complexity and bugs by moving that functionality into Sencha’s data stores.

The documentation, while extensive, has odd holes. Between those and the sheer size of the framework, I spent a lot of time fighting bugs that were difficult to trace and to understand. Responses to my questions in the developer forums were more frequent and helpful than with the other frameworks, but still ultimately insufficient. Sencha provides paid support starting at $300/year; I strongly considered purchasing it but oddly, their response to my sales support inquiries was incredibly underwhelming given my interest in sending them money.

Sencha Touch is available under the GPL3; under a somewhat confusing set of exceptions to the GPL that seem similar to the LGPL; or under a free commercial license.

Titanium Mobile

Much like Sencha Touch, Appcelerator’s Titanium Mobile allows you to write apps using a JavaScript API. But unlike Sencha, it compiles most of your code into a native iPhone or Android app. That means it isn’t really a Web framework, but a compatibility layer or compiler. (Note that its cousin Titanium Desktop is Web-based, allowing you to write HTML/JS applications that run inside a native wrapper on the desktop.)

So Titanium allows Web developers to produce high-performance, easily skinnable native apps using JavaScript and a little XML, i.e. without learning Objective-C or Cocoa Touch. My simple test app blew away the true Web frameworks in terms of performance, and wasn’t much harder to put together.

But that advantage is also its greatest disadvantage: you can only target the platforms Titanium supports, and you’re tied to their developer tools. As if to prove this point, my test app quickly got into a state where it wouldn’t launch on the iPhone. Titanium doesn’t include much of a debugger; Titanium projects can’t be run and debugged in XCode; and it ran fine in the simulator, leaving me with no real way to attack the problem.

Analysis

Rebuilding my app on three of these four frameworks was tedious but educational. I like jQTouch but have trouble believing it will evolve much from here. I’m rooting for jQuery Mobile for its simplicity and its very Web-centric approach to development…but it lacks a few key features and doesn’t perform as well as Sencha Touch.

It’s unfair to compare an Alpha 2 product with a 1.0 one, except in one respect: I need something now. Which brings me to Sencha Touch. I was initially impressed with its performance and breadth, but put off by its development style. As I’ve dug in, the holes in its documentation have been frustrating but the breadth has continued to impress me, and I’ve gotten more used to the coding style. The option for paid support is tempting, and I’d probably buy it if they’d answer my emails. But for now, Pints is a Sencha-based app.

Conclusion

I haven’t answered the big question: can a Web-based app really hold its own alongside native apps? And if so, are the challenges of getting it there worth the benefit of a single codebase?

Two weeks ago I was leaning toward no. Pints was in performance and bug hell, hanging for 10-15 seconds at a time; scrolling was choppy; and other animations were inconsistent.

But I’m hopeful again. In my next post I’ll discuss why, what I’ve learned, and my perspective on mobile Web apps today. I’ll also cover PhoneGap and other methods of distributing a Web app in a native wrapper. Stay tuned.

102 comments
b1tr0t
b1tr0t

If you're looking to build a mobile website/app based on your existing website that can also be wrapped in a native app using PhoneGap or another app platform, you might have a look at Mobify.js.  Mobify.js lets you make your existing site responsive for mobile and tablet, optimizes scripts and images and gives you complete control over the markup in the document for different devices.  It's also an open source project under the MIT license, you can find it on Github (search for Mobify) or get a step by step walkthrough on http://cloud.mobify.com/  

kwakubm
kwakubm

The recently open-sourced enyo (the javascript framework for webOS) may be worth a look as well:

 

http://enyojs.com/

NagyAttila
NagyAttila

Titanium Mobile is bugging like sh!t.

luckymethod
luckymethod

Hi Dave, I work for Sencha (so we get that out of the way). We took the criticism about documentation holes seriously and Sencha Touch 2 is a completely different beast. We're currently in RC2 and it would be interesting to see what you think about it. I'm sure you will be very pleasantly surprised, and if you have criticism please let us know, it makes us grow and get better.

tecsined
tecsined

Thank you for this article. I think is really good. I am trying to choose between Sencha and Kendo UI. I haven't found any good comparison on internet. Could somebody with experience in these tools help me? Thanks

tecsined
tecsined

Thank you for this article. I think is really good. I am trying to choose between Sencha and Kendo UI. I haven't found any good comparison on internet. Could somebody with experience in these tools help me? Thanks

SpikyOrange
SpikyOrange

Thanks for the post, I've been looking at this from the perspective of either creating a new JavaScript API for my employers product, or writing a C# API and use mono to get a native app on Android, iOS, Windows phone 7 and Blackberry. As we do not have the API yet, we could go either route, but, if I stick with a web stack, we could re-use a majority of the code as a web app, mobile app and native(ish) app (Sencha+phonegap for example). It's a tough choice, but, for this particular application there will be a lot of dynamic UI interactions, so it's possible that after a short while the web frameworks will not scale, therefore a native app with threading and customised rendering for optimal performance might be the ultimate solution. The API itself doesn't need to concern itself with UI, it will collect data, store it in a generic model, then fire events to listeners (one of those would be a Sencha Touch view), this should keep the core API independent of view code (and datasources). I really didn't like what I saw with JQuery Mobile - just because it was very declarative, I couldn't understand how I could dynamically create content (perhaps via an API). So, right now, my choice would be... Webby: Javascript for the core API, perhaps utilising KnockoutJS for firing events when the data model changes. SenchaTouch for a majority of the user interface (receiving data from the knockout event). PhoneGap to wrap it as an 'app' if required. Native-like: Titanium mobile, re-using the javascript API detailed above, but now the UI will hook in to real native UI components. Native: Using C# and mono touch / mono-for-android, windows phone 7 and blackberry. Of course, there's always the choice of going true native (objective C on iPhone), but I'm going for code-reuse over performance as a sensible tradeoff.

SpikyOrange
SpikyOrange

Thanks for the post, I've been looking at this from the perspective of either creating a new JavaScript API for my employers product, or writing a C# API and use mono to get a native app on Android, iOS, Windows phone 7 and Blackberry. As we do not have the API yet, we could go either route, but, if I stick with a web stack, we could re-use a majority of the code as a web app, mobile app and native(ish) app (Sencha+phonegap for example). It's a tough choice, but, for this particular application there will be a lot of dynamic UI interactions, so it's possible that after a short while the web frameworks will not scale, therefore a native app with threading and customised rendering for optimal performance might be the ultimate solution. The API itself doesn't need to concern itself with UI, it will collect data, store it in a generic model, then fire events to listeners (one of those would be a Sencha Touch view), this should keep the core API independent of view code (and datasources). I really didn't like what I saw with JQuery Mobile - just because it was very declarative, I couldn't understand how I could dynamically create content (perhaps via an API). So, right now, my choice would be... Webby: Javascript for the core API, perhaps utilising KnockoutJS for firing events when the data model changes. SenchaTouch for a majority of the user interface (receiving data from the knockout event). PhoneGap to wrap it as an 'app' if required. Native-like: Titanium mobile, re-using the javascript API detailed above, but now the UI will hook in to real native UI components. Native: Using C# and mono touch / mono-for-android, windows phone 7 and blackberry. Of course, there's always the choice of going true native (objective C on iPhone), but I'm going for code-reuse over performance as a sensible tradeoff.

Jehu99
Jehu99

Thank you for this great article. Thanks too to the commenteers who have linked some further greate frameworks. I've developed some one-page web apps this year: One huge app in ExtJS and some other apps by using knockout.js [1] and angular.js [2]. I love them both, but something more angular.js because it is designed for complete applications (including MVC and Routing). Now i develop my first real mobile application and i've chosen jQuery mobile instead of SenchaTouch. Reason was, i don't love ExtJS and it's "Web distant" approach, so SenchaTouch was not so pleasant to me. Also for this mobile app (will be "baked" with phonegap to a hybrid-app later on) i've used angular.js too, which make it easy to write responsible apps with a few lines of code. It was very straightforward to develop with this toolset. Sure, SenchaTouch has a lot of useful widgets. This could be a reason to chose it in some cases. But in my experience developement with sencha products costs a lot of time for seemingly simple tasks too. And here's another candidate for mobile web applications i've found: http://www.kendoui.com/ [1] http://knockoutjs.com [2] http://angularjs.org

Jehu99
Jehu99

Thank you for this great article. Thanks too to the commenteers who have linked some further greate frameworks. I've developed some one-page web apps this year: One huge app in ExtJS and some other apps by using knockout.js [1] and angular.js [2]. I love them both, but something more angular.js because it is designed for complete applications (including MVC and Routing). Now i develop my first real mobile application and i've chosen jQuery mobile instead of SenchaTouch. Reason was, i don't love ExtJS and it's "Web distant" approach, so SenchaTouch was not so pleasant to me. Also for this mobile app (will be "baked" with phonegap to a hybrid-app later on) i've used angular.js too, which make it easy to write responsible apps with a few lines of code. It was very straightforward to develop with this toolset. Sure, SenchaTouch has a lot of useful widgets. This could be a reason to chose it in some cases. But in my experience developement with sencha products costs a lot of time for seemingly simple tasks too. And here's another candidate for mobile web applications i've found: http://www.kendoui.com/ [1] http://knockoutjs.com [2] http://angularjs.org

Joe_Estes
Joe_Estes

Great comparison. I think you are one of the first people to have developed across those 4 platforms. I have used JQuery Mobile and am mostly disappointed so far. As you mentioned it jumps around and feels flaky. Sencha has a learning curve that has me thinking I should stick with native development.

Joe_Estes
Joe_Estes

Great comparison. I think you are one of the first people to have developed across those 4 platforms. I have used JQuery Mobile and am mostly disappointed so far. As you mentioned it jumps around and feels flaky. Sencha has a learning curve that has me thinking I should stick with native development.

maxwolke
maxwolke

Hey all you funk soul brothers. Check out Application Craft http://applicationcraft.com jQuerymobile has announced AC as a JQM dev platform, here: http://jquerymobile.com/resources/ And here's a case study that Phonegap did on them : http://phonegap.com/case_study/phonegap-application-craft-pain-free-mobile-app-development/ In summary, it is a cloud-based dev platform that does mobile (all important platforms) and desktop on an equal footing. It's got an IDE that does drag-and-drop / wysiwyg UI building as well as code editing. I guess you could describe it as Visual Basic in the Cloud, but Javascript not Basic. Widget based like VB was, extensible. Open Source with free platform offering. x

maxwolke
maxwolke

Hey all you funk soul brothers. Check out Application Craft http://applicationcraft.com jQuerymobile has announced AC as a JQM dev platform, here: http://jquerymobile.com/resources/ And here's a case study that Phonegap did on them : http://phonegap.com/case_study/phonegap-application-craft-pain-free-mobile-app-development/ In summary, it is a cloud-based dev platform that does mobile (all important platforms) and desktop on an equal footing. It's got an IDE that does drag-and-drop / wysiwyg UI building as well as code editing. I guess you could describe it as Visual Basic in the Cloud, but Javascript not Basic. Widget based like VB was, extensible. Open Source with free platform offering. x

cyberstreets
cyberstreets

Thank you for this helpful overview. Now I will start with jQuery Mobile & not pull my hair out like I would undoubtedly do with Sencha. Thanks for defining them in terms of programming ease for newbies & not just functionality.

cyberstreets
cyberstreets

Thank you for this helpful overview. Now I will start with jQuery Mobile & not pull my hair out like I would undoubtedly do with Sencha. Thanks for defining them in terms of programming ease for newbies & not just functionality.

aboukone
aboukone

Very interesting conversation. I have decided myself to go with Sencha Touch but it was more of a matter of familiarity with the Sencha way being that I worked with ExtJS. My main issue right now if figuring out Authentication on the server side. idxdot

jhall
jhall

I did my static-data demo with JQuery Mobile, which looked great on the devices. But now I'm considering jumping over to Sencha Touch for the actual, database-driven application. Secha, with their data stores, seems like a better fit. This from an old C++/MacApp framework guy! The breadth of Sencha-Touch can definitely give one pause after the simplicity of JQMobile. I can see how the Sencha coding style will take some time to get used to. But for somebody like me, who's more used to C++ than HTML/CSS, should not take too long.

jhall
jhall

I did my static-data demo with JQuery Mobile, which looked great on the devices. But now I'm considering jumping over to Sencha Touch for the actual, database-driven application. Secha, with their data stores, seems like a better fit. This from an old C++/MacApp framework guy! The breadth of Sencha-Touch can definitely give one pause after the simplicity of JQMobile. I can see how the Sencha coding style will take some time to get used to. But for somebody like me, who's more used to C++ than HTML/CSS, should not take too long.

hwande
hwande

I just got Dreamweaver 5.5 at work and Adobe's integrated JQuery Mobile and Phone Gap into it. I've been leaning towards Sencha Touch but DW drag-and-drop is pretty sweet and makes it easier to learn.

hwande
hwande

I just got Dreamweaver 5.5 at work and Adobe's integrated JQuery Mobile and Phone Gap into it. I've been leaning towards Sencha Touch but DW drag-and-drop is pretty sweet and makes it easier to learn.

giulio
giulio

Great overview.. It confirms my suspicions that mobile development (still) has no utopia, and that the discrepancies between platforms and protocols are cavernous. i am working on a project that involves Sencha Touch, and it seems to be the most mature for HTML5. Having said that, iPhone compatibility and stability is great, Android has alot of issues.... Reminds me of the battle of the browsers back in the late 90's

giulio
giulio

Great overview.. It confirms my suspicions that mobile development (still) has no utopia, and that the discrepancies between platforms and protocols are cavernous. i am working on a project that involves Sencha Touch, and it seems to be the most mature for HTML5. Having said that, iPhone compatibility and stability is great, Android has alot of issues.... Reminds me of the battle of the browsers back in the late 90's

TedW.Bendixson
TedW.Bendixson

Hey there, I just wanted to say thanks for writing this. I've been questioning my decision to go with Sencha for sometime now, and it's good to see why you've chosen to stick with it. I do have one question. Did you ever find a way to fix the initial load time problem? My app doesn't take THAT long to load, but the loading time is definitely noticeable. It would be awesome to get rid of that problem so the app has a smoother feel to it. Your help is much appreciated, -Ted Bendixson

dfeldman
dfeldman moderator

 @paul.lazarev I don't know much about DHTMLX. Their online demos are a little glitchy on my iPhone 4S. And, I personally wouldn't consider them because if you don't want to distribute the source code to your app, it's $466 USD per app to license their framework.

dfeldman
dfeldman moderator

 @luckymethod That's great to hear! Both for my benefit and that of others reading here, what's the best way to get up to speed on (1) Sencha Touch development in general, (2) the changes since v1, and (3) the details of the data model, since that's where I got hung up in the docs last time?

Latest blog post: Welcome to Phi

jasonm23
jasonm23

I'm very interested in how you got along with that comparison, I'm right on the same dilema now.

jasonm23
jasonm23

Thanks for this info, one year on how has your workflow changed? Is Angular and JQMobile your tools of choice? 

paul.lazarev
paul.lazarev

 @dfeldman The touch framework is actually free:

"The DHTMLX Touch library is distributed for FREE under both GNU GPL and commercial Licenses. You can use it in your open source or commercial apps at no charge."

Chris Saari
Chris Saari

 @dfeldman Since Sencha v1 they've improved scroll speed, initial load time, rotation response time, etc. v2 is nice. Can't speak well to your particular documentation holes.

Trackbacks

  1. [...] This post was mentioned on Twitter by christian crumlish and OpenAppMkt, David Feldman. David Feldman said: Blog post: Adventures in HTML5: Mobile Web Frameworks http://t.co/b3510Iq [...]

  2. [...] my last post I compared frameworks for building app-like mobile experiences with Web technologies: Sencha [...]

  3. [...] Apps created with web app frameworks don’t perform as well as custom API frameworks. Dave Feldman’s tests indicated Sencha Touch (custom API framework) performed noticeably better and more reliably than [...]

  4. [...] Mobile gets a mention in Dave Feldman’s Comparison of Mobile Web Frameworks along with Sencha Touch, jQuery Mobile and jQTouch. Titanium Mobile is the only one that builds [...]

  5. [...] multimedia are just some of the many features it offers us. Such is its appeal that it is even capable of creating mobile and, more surprisingly, desktop apps. So, if you haven’t already started using it for your [...]

  6. [...] Interface This: An excellent comparison of the different frameworks based on actual experience by Dave. A Must Read. Share this:FacebookTwitterLinkedInDiggRedditStumbleUponEmailPrintLike this:LikeBe the first to like this post. [...]

  7. [...] 3. Sencha Touch – the mobile counterpart to the Ext JS framework. Its approach differs significantly from jQTouch and jQuery Mobile: instead of enhancing preexisting HTML, it generates its own DOM based on objects created in JavaScript. As such, working with Sencha feels a little less “webby” and a little more like building apps in other technologies like Java or Flex. (It’s also a bit more like YUI than like jQuery.) (courtesy of Dave Feldman) [...]

  8. [...] Sencha Touch, jQuery Mobile, jQTouch, Titanium 비교소감 [...]

  9. [...] There are plenty of comparisons online, including on SO, and this fellow actually tried to use several platforms, code included. [...]