Sencha Touch vs jQuery Mobile: High Level Review

With the advent of the iPhone and later Android based phones, the need to build applications that conform to the profile of these devices has become a very popular and important job.  With the addition of the tablet based devices based on the operating systems in these leading platforms, this need has grown further.  The time and energy required to deliver a mobile application is multiplies for each device platform.  Mobile web applications can address this problem to some extent.

This research topic will be looking at Sencha Touch (ST) and jQuery Mobile (jQM).  The goal is to understand how the two stack up.  In the end hopefully it will be clear which is a more powerful framework based on tangibles and some intangibles.

Admittedly, I have a bias in having experience with Sencha frameworks, specifically ExtJS 3 and 4.  Their Touch framework is new to me.  I have only dabbled in jQuery in the past and the extent by which I used it was rather limited.  However, in terms of some of the enterprise level features, ExtJS has been a more powerful framework.

Sencha Touch Website - v2.0 Beta 1

jQuery Mobile Website - v1.0.1

Device support is important to some.  For my purposes, I am mostly concerned with targeting the iPhone and Android-based phones.  This will simplify the rest of the research, however it's important to note the device support today by each framework.

• jQM, lists support for iOS, Andriod, BlackBerry, bada, Windows Phone, palm webOS, symbian, MeeGo.  See the full report on Browser Support.
• ST v1.1.1 supports, iOS, Android and BlackBerry.  While v2.0 is in beta, the support for Android versions 3.x is labelled as "fundamentally broken, and do not plan to officially support it in Touch 2." [Raising The Bar].  Issues with transitions in the ICS browser have been raised with Android development and appear to have been resolved.

ST v2.0 Beta 1 Kitchen Sink

jQM v1.0.1 Pages & dialogs screen

These screenshots give a general feel for the default look and feel of the both frameworks.  ST tries to mimic the look of the iOS styling whereas jQM uses a theme similar, but varies drastically from the iOS look.  These themes apply the same on an Android based device (tested in an Android Emulator).

jQM is based off of the popular framework jQuery.  This is prevalent in the script loads as well.  Among the javascript files loaded, are jquery-1.6.4.min.js and jquery-mobile-1.0.1.min.js.  This results in a payload of 32111 and 24840 bytes respectively gzipped or 56.9 KB.  

ST on the other hand loads one file with ExtJS framework requirements in addition to the Touch framework.  The total payload 28658 bytes, or 28.6 KB.  A 28.3 KB larger smaller download.  This is a minimal factor as long as caches are utilized properly and occurs on a occasional basis per user.  In slow network situations this could leave a user less frustrated.

Both frameworks pay some lip service to PhoneGap.  A solution that may be a very valuable and easy way to deploy an application to a large customer base while having complete control over the user experience for deploying updates.  A huge drawback to native applications is the platform dependent implementation.  While these javascript-based frameworks are still very new and maturing they do provide relatively good experiences compared to the native based application.  For more information on PhoneGap, please review the documentation provided by the two frameworks or visit http://www.phonegap.com.

Anyone who has done a any amount of studying iOS application development will now that it follows the MVC pattern very religiously.  I won't discuss the details of MVC here but you can read up more on the pattern on Wikipedia.  One of the feature additions in ExtJS 4 was full scale MVC support.  The model was formalized and additional classes were built to support the concept of view and controller.  After doing some work with iOS, I found that I actually appreciated that concept very much.

With that, I would personally look to building new web-based applications following that pattern.  ST is based on ExtJS 4 and brings the MVC pattern to the table.  A cursory search on the google machine, I could not find a concise document on using jQ or jQM to implement MVC based applications.  I think this is knock on the framework and may for some be a deal breaker.

I was also more impressed with the transitions by ST.  I have an iPhone 3GS running iOS 5.0.1.  Anyone running this combination will feel the pain I do on occasion with regards to performance (small price to pay for some of the adds).  The transitions were seamless and very smooth.  With jQM, I found that transitions were not as good.  Here is a set of screenshots of what I am referring to.

The first screen shot appeared after clicking the "Page & dialog" option on the front demo page of jQM.  A page load occurred, the first screen shot appeared and then after enough time to capture the image the second screen shot appeared.  Now, I am not sure if this an intended feature.  What I will say, from a expectation level as User evaluating this demo, I did not expect this transition.  I suspect that the demo application is formed in a way to easily adapt into a tablet/large form factor and adjusts down to the resolution of my iPhone.  That is my uneducated guess.

With these very basic criteria, ST seems to be a better fit for greenfield web application development.  Developer experience with jQuery or ExtJS may be another deciding factor.  As stated earlier, I have more experience with ExtJS.  I feel that it would be a smaller learning curve to learn the ST framework, understand the documentation styles, and implement the application and features necessary to build an application.