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.
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.
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.
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.
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).
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.