Creating a mobile web frontend: jQuery Mobile vs. Sencha Touch 2
If you’re planning to write a mobile web front-end for your SAP application, jQuery Mobile and Sencha Touch 2 are two of the best frameworks you can choose for the client-side development. This post will take a quick look at some of the differences between them that may help you decide which one to adopt for your project.
Overview
jQuery Mobile (current stable version 1.0.1) is built on the extremely popular jQuery and jQuery UI foundation. It’s based on a progressive enhancement philosophy, meaning you will write an HTML5 document and add special attributes to the mark-up that define the role of the elements in the mobile UI. jQuery Mobile will then enhance your page by applying stylesheets and markup, and will use ajax to load internal links, animate the transition between pages and keep the browser history updated. This way you can even write small applications without typing a single Javascript line, and you can share HTML code between a desktop web site and a mobile one.
Sencha Touch 2 is the framework for the mobile web from Sencha, of ExtJs (and Core) fame. It has a radically different approach, expecting you to write an application in pure Javascript using a Model-View-Controller paradigm without coding any HTML except for small inline fragments. Sencha Touch 2 will generate the appropriate HTML from your model class. Events fired from the UI are handled by the controller class and models/stores are used when needed to store data requested from the server using AJAX.
Both jQuery Mobile and Sencha Touch 2 will help you achieve the look and feel of a native mobile application without the need to be a graphic designer or code your own stylesheets. They also provide a wide range of UI widgets or components such as lists, form elements, buttons, icons, that you can use to build your interface. If you’re familiar with ExtJs you know that this is one of its main strengths. I admit I didn’t explore Sencha Touch 2 UI library too deeply, but my first impression is that ExtJs offers more over plain jQuery/UI than Sench Touch 2 over jQuery Mobile. You can get an idea of the default look for both frameworks from the screenshot below.
Sencha Touch 2 provides an extensive class library that you can extend to customize or create your own components. On the other hand, due to the different nature of both framework, some of the tasks that, in Sencha Touch 2, you need to perform through that class API are typically done in jQuery Moble by simply writing some HTML. For example the Navigation View class allows to “easily push (add) and pop (remove) views and animate the new title into the toolbar. It will also animate a back button into the toolbar so you can return (or pop) to the previous view”. In jQuery Mobile, you write two html elements with data-role=”page” containing a toolbar and add a link between them. In Sencha Touch 2, browser history handling and mapping URLs to views is done, if necessary, by coding a routing table in your controller, while in jQuery Mobile you’ll be mostly relying on its automated mechanism.
Documentation for jQuery mobile has been improving since the alpha versions, and since writing a basic mobile web site with it is pretty straight-forward, there’s no need to spend hours reading tutorials. But you might find it lacking if you need to tackle a more advanced problem. For example I couldn’t find information on how to code a widget in the official documentation and had to go through blog posts and examples on the web. Sencha Touch 2, on the other hand, has a comprehensive API documentation and several example applications, although I missed a clear primer for dummies on the recommended way to organize the application using their MVC approach.
Both are also open source, so you can always take a look at the code underneath to help understand what’s going on.
Browser support
The list of devices and platforms supported by jQuery Mobile is huge while Sencha Touch 2 is for Webkit only. So if you need to support other browsers like IE, Firefox or Opera, this might be a blocker, even though it’s true that Webkit should cover the vast majority of iOS and Android users for the moment.
Native packaging
Sencha Touch 2 has its own native solution, which I couldn’t test because there was no Linux SDK available. On alternative, you can use Phonegap to package your jQuery Mobile or Sencha Touch 2 application into a native mobile application and access the native device API and hardware.
License
jQuery Mobile is dual licensed under the MIT or GPL licenses. Sencha Touch 2 is distributed under a GPL license or a commercial licence (also free unless you’re targeting embedded or building your own sdk).
My Conclusion
The goal of this post wasn’t to provide a detailed comparison of both frameworks, but only an overview of their different approaches towards building a mobile interface.
Developers used to jQuery, and with an HTML development background, might find jQuery Mobile’s way of doing things more natural and experience a steeper learning curve with Sencha Touch 2. Those who need their mobile site to work on anything other than Webkit will have definitely to discard the Sencha option.
Developers with an ExtJs background, or who prefer to structure their Javascript application using a MVC pattern and leave the HTML markup generation for the framework’s layout engine, might be more comfortable choosing Sencha Touch 2.