jQuery and Sencha (formerly named Ext JS) have both existed in the web development community as a tried and true solution for a very long time. Both frameworks released their mobile flavors back in 2010, jQuery Mobile and Sencha Touch, to enable the rapid development of touch-based mobile web applications.
After two years of refinement and several release versions, both products have reached a stage of maturity. Our company recently had the chance to experiment with these two frameworks for our new mobile portal. Here is a personal view on why our team eventually chose one over the other.
Even though jQuery was written as a JavaScript framework, jQuery Mobile does not actually require any prior knowledge of scripting to start with. Of course, such knowledge would come in handy when you want to create a more interactive user experience, but you can certainly get by without it. In jQuery Mobile, you code in HTML5, which in every way resembles the good old HTML language, except for some brand-new data-* attributes. Based on these attributes, jQuery will decorate your HTML tags with additional styling, elements, and functionality. All the plumbing is done in the background without you writing a single line of scripting code.
In contrast, Sencha Touch employs a pure JavaScript-based approach. All the page content is generated through JavaScript classes. In fact, a typical Sencha Touch application comprises only one single blank HTML page that acts as a universal container. It is the numerous JavaScript classes that work their magic by injecting HTML tags into this container. In addition, Sencha Touch utilizes the MVC pattern and organizes the classes as such. If you are an MVC guru, you will have a much shorter learning curve.
Device Compatibility
- jQuery Mobile compatible devices
- Sencha Touch compatible devices (The list is located towards the bottom of the page.)
Language Syntax and Documentation
When it comes to learning a new framework, documentation plays a major role. jQuery Mobile’s online documentation is well organized and easy to understand, with simple examples to get you started. If you are a savvy web developer, you already know HTML like the back of your hand. All you need to learn are the new data-* attributes and how they affect the behavior of the HTML tags. I feel jQuery Mobile’s documentation site provides just enough information to get you started, without distracting you by million API details.
In contrast, there is no sense of familiarity for me in Sencha Touch’s online documentation. From the get-go, there are lots of new terminologies to deal with. Even for a JavaScript veteran that is familiar with JSON, there are still many Sencha-specific classes, properties, and methods to learn. The documentation is extensive, and rightly so. You have to do some serious reading to understand what is going on in a Sencha Touch application. I spent many nights pulling my hair out trying to kick start my first project. I hope you will have better luck.
Development Environment
jQuery Mobile
Because jQuery Mobile is based on HTML tags with data-* attributes, any free or commercial HTML-authoring software will suffice as your development environment. If you come from the Microsoft camp, you can use any version of Visual Studio (including the free Express edition) or Microsoft Expression Web to hand-code your mobile app. You are coding in an environment that you are familiar and productive with, and that’s a big plus when you are pressed for time. It also has the advantage of working well with ASP.NET or any server-side technologies that you are currently using, which I will detail in the “Server-Side Integration” section.
Sencha Touch
With Sencha Touch being a JavaScript-based framework with lots of JSON objects being passed in and out, it will be very error-prone to hand-code your app in a text editor or traditional HTML-authoring software, because you have to deal with all the deeply nested curly brackets, square brackets, semicolons and commas in JSON syntax, and cross your fingers hoping everything has been typed incorrectly. Otherwise, be prepared to stare at a blank page wondering what went wrong.
Realizing the entry barrier of hand-coding JavaScript, Sencha has kindly produced an IDE called Sencha Architect, which allows you to drag and drop components into your project to minimize hand-coding. The IDE is comprehensive and beautiful, and it looks like Sencha has put a lot of manpower into it.
But here comes the same problem again — the Sencha Architect documentation is too complex to guide a starting developer through the life cycle of a project. For example, look at this “Build Your First Mobile App” chapter and see how much you can make out of it. Remember, this is supposed to be your “first” mobile app. I am really sorry to say that Sencha’s documentation team, obviously very hard-working, actually did a disfavor to the product itself. Hopefully, once a developer gets over the initial learning curve in Sencha Architect, he/she will become productive quickly.
Last but not least, I need to point out that there is no IntelliSense in Sencha Architect. Working with a class-driven framework with no IntelliSense in the IDE is time-consuming and error-prone. For some people, it could be a deal-breaker. If you switch to Visual Studio 2010 and reference the right Sencha Touch script files, you can enable some JavaScript IntelliSense for your Sencha project, but then you lose the ability to drag and drop components as you could in Sencha Architect.
Server-Side Integration
Since most of the mobile web apps are there to connect business data with customers, the ability for a mobile framework to interact with a web server is crucial. In addition to serving physical files to the web browser, the server has more important roles in a web application, such as serving business data and executing business logic within the confines of user permissions.
JQuery Mobile, because of its pure HTML approach, plays well with any server-side technologies like PHP, ASP.NET Web Form, ASP.NET MVC, etc. These server-side languages can appear anywhere in your HTML files in the form of server-side tags or controls. For example, to dynamically show or hide an anchor tag based on a user’s permissions, you can do this in ASP.NET Web Form:
<% if (IsUserAllowedToAccessThis()) { %>
<a href="/very/secret/hyperlink/" data-role="button"
data-icon="arrow-l" data-inline="true">Do Something Important</a>
<% } %>
If you are using ASP.NET MVC and Razor view engine, you can do this:
@if (IsUserAllowedToAccessThis())
{
<a href="/very/secret/hyperlink/" data-role="button"
data-icon="arrow-l" data-inline="true">Do Something Important</a>
}
If you like the good old server-side controls in ASP.NET Web Form, you can use the <asp:HyperLink> control or just turn the anchor tag into a HTML server control. And then, you can toggle the visibility of this server control in your code-behind file.
<a id="ImportantAction" runat="server" data-role="button" data-icon="arrow-l" data-inline="true">Do Something Important</a>
You can also use PHP, ColdFusion, or any server language to render your hyperlink. Once it is transmitted to the mobile browser, jQuery Mobile will take over from there. But before that happens, everything is executed on the server is under your control. You will never leak this important URL to anyone that is not supposed to know it.
Sencha Touch, because it is purely based on client-side JavaScript classes, relies on AJAX calls as the only interaction it has with the webserver. Once a piece of business data or logic is pulled from the web server, it will be processed and transformed into HTML and presented to the user. This mechanism will potentially make some of your important business or UI logic exposed to prying eyes. Take the above scenario for example, how would you dynamically hide a link based on user permissions in JavaScript?
Of course, you can set style.display = “none” to make the link invisible, but as soon as the user opens your HTML source or JavaScript files, he can discover the URL and happily copy-and-paste it into another browser window to access your protected resource. This issue is not only with Sencha Touch, but with any JavaScript framework that does the entire UI processing on the client-side. No matter how hard you try to minify or obfuscate your scripts, determined users always have a way to read them.
There are ways to protect UI elements in Sencha Touch, of course. It just requires more planning to make sure restricted elements are never sent across the AJAX calls in the first place. But with the increasing number and complexity of UI elements that you need to protect, you may find it more and more difficult to maintain your JavaScript code.
Code Re-usability
Sencha Touch is written from the ground up for the MVC pattern, so it is easy to reuse a JavaScript component. The Sencha Architect IDE actually makes it a very simple process. Just drag-and-drop an object into another location and select the “link” option when prompted, and then Sencha Touch will convert the object into a reusable class, and reference that class in the original script file. Kudos for the nice work, Sencha!
On the other hand, jQuery Mobile is not really designed for code reuse. Actually, the concept of code reuse is irrelevant to jQuery Mobile, which simply decorates whatever HTML tags you throw at it. That leaves all the responsibility of code reuse to you.
Because you can use any server-side language here, feel free to be creative in your strategy — server-side controls, user controls, special UI classes, master pages, layout files… you name it. But the consensus is that the best server-side partner for jQuery Mobile in the Microsoft camp is ASP.NET MVC, which separates your server-side code into different functional modules (separation of concerns) and allows each module to be reused flexibly.
Conclusion
Our team initially selected Sencha Touch for our mobile app development. We spent two weeks working with Sencha Architect and only got 30% of the projected functionality done. We then switched to jQuery Mobile and developed the same project from scratch in Visual Studio 2010. In two weeks’ time, we completed about 70% of the project, and another week later, we got everything finished.
The difference in productivity is substantial. Of course, your mileage may vary. If your team has prior experience with Ext JS or any Sencha product, you might not think twice about developing in Sencha Touch. For the rest of us mortals, you will get up to speed more quickly with jQuery Mobile.
Either framework allows you to work with the MVC pattern for separation of concerns and code re-use. As a bonus, jQuery Mobile also works well with conventional ASP.NET Web Form, PHP or any kind of server-side technology that generates HTML code, if you are not yet ready to leap into the MVC world.
