Home Blog Sencha Touch vs jQuery Mobile

Sencha Touch vs jQuery Mobile

 
18 19292
A lot of people asking me this question, which framework is better Sencha Touch or jQuery Mobile.
 
Let me first tell you, talking about Sencha Touch and jQuery Mobile is like asking which one is better for server side web development, PHP or Java. While both of them can be used for same purposes in reality they are used for completely different purposes.
 
Where Sencha Touch is optimized and built to run exclusively on web-kit mobile browsers jQuery Mobile is built to globally work all around good on an available HTML browsers. This is more praise for Sencha Touch then jQuery Mobile, it may sound different but Sencha Touch’s optimization is probably this single best thing that makes it shine that much useful. Hybrid mobile applications made from Sencha Touch will run extremely fast and fluid almost native like.
 
At the same time jQuery Mobile covers completely different market segment. Unlike Sencha Touch which is built to work only on web kit browsers, jQuery Mobile will run on pretty much anything as long it supports HTML5 standard. It doesn’t matter are you running it on a Windows, Mac OS, Android, iOS it will run just fine and that makes it appealing to a broader specter of users.
 

Intro


 
 
This article is a part of a series where I am trying to explain differences between different HTML5 application frameworks. Original article is talking about broad differences between 7 most popular HTML5 mobile frameworks. Follow previous link if you want to find out more about them.
 

Sencha Touch vs jQuery Mobile


 
 
I will try to match them as best as I can, this will be told from my experience so don’t expect fully objective thoughts. Personally I do not prefer one over another – and I will never promote one over another. Next chapter will be covered in groups, and each group will have a winner.
 

Match 1 – Marketing and platform support

 
Both Sencha Touch and jQuery Mobile are HTML5 mobile frameworks and they promote themselves like that. Were jQuery Mobile humbly promotes itself as a system built for all popular mobile device platforms Sencha Touch goes over the top promoting itself as a only framework that enables developers to build powerful apps that work on iOS, Android, BlackBerry, Windows Phone, and more. Personally and subjectively I give them a negative point for puffery and false marketing. I really don’t see the point in overpraising something that is already that good, it is borderline narcissistic.
 
Sencha Touch
 
  • Usable only one web kit browsers (this should allegedly change in the future)
  • There are much more available mobile frameworks then Sencha Touch developers would want you to know
 
jQuery Mobile
 
  • Large number of available platforms, but framework is not optimized for specific platforms (allegedly should be better optimized from version 1.4
 
Verdict: jQuery Mobile wins
 

Match 2 – UI and visual impression

 
Look and feel. As you will see Sencha Touch and jQuery Mobile are simply different frameworks from UI point of view. First one is purely javascript driver while at the same time second one is HTML driven. Both of them have a great UI feeling, but Sencha offer more native like feeling (in case you are creating a hybrid mobile application). Unfortunately both of them will perform miserably if to large and complex UI is used, jQuery Mobile more then Sencha Touch.
 
Sencha Touch
 
  • Extremely fast and fluid on mobile devices, all in all much better feel then jQuery Mobile
  • It follows MVC philosophy, basically you don’t write any HTML, everything is done through javascript
  • Currently it offers more UI elements/widgets, for example carousel implementation
  • SVG support – making it great for games
  • This is not directly related to UI but Sench Touch IDE is paid application
 
jQuery Mobile
 
  • Unlike Sencha Touch, jQuery Mobile UI works much like classic web UI
  • Everything is done through HTML where final UI is wrapped with a custom jQuery Mobile styles, just like jQuery UI
  • UI is easily extendable and morph-able, with a little bit of CSS you can change any existing widget, even create new ones.From version 1.4 UI should be extendable to jQuery UI.
  • Ajax driver which can be confusing to some developers + page transitions and animations don’t feel ‘native’ enough and can be sluggish sometimes
  • CSS usage that makes it great also makes it looking like a clone, one application looks just like another, it requires a lot of time to make it look unique. Excellent example is mobile version of SongMeanings.com.
  • Unlike Sencha Touch here you need to worry about page architecture, it can be problematic sometimes. Everything is tied together, which is good and bad at the same time. Version 1.4 should remedy a lot of this concerns.
 
Verdict:Sencha Touch wins
 

Match 3 – Availability, ease of use

 
Again this is completely different story. jQuery Mobile is markup driven and its dependency on jQuery makes it extremely easy to master unless you prefer MVC architecture where Sencha Touch simply shines, of course that comes with a price of alien syntax, at least alien to those who have distanced them self from a vanilla javascript. In the end this ease of use will decide this match.
 
Sencha Touch
 
  • It is all javascript, can be confusing for new developers
  • Very hard to impossible to debug and fix errors in the framework
  • Steep learning curve – at the same time worth of every hour spent on it
 
jQuery Mobile
 
  • If you like jQuery (like a lot of people do) you will also like jQuery Mobile
  • Easy syntax
  • Unfortunately out of box MVC, it can be fixed with Backbone.js or Knockout.js
  • Great theme roller support + everything can be easily manipulated through CSS
  • Basically any IDE can be used to develop jQuery Mobile application.
 
Verdict: jQuery Mobile wins
 

Match 4 – Documentation

 
This is the point where even a great products can fall and become forgotten. Both frameworks have more or less good documentation background. Where Sencha Touch has probably bigger and better official documentation and jQuery Mobile has an excellent 3rd party information coverage. But, in the end, excellent Sencha Touch official documentation wins over jQuery Mobile.
 
Sencha Touch
 
  • Simply better official documentation the jQuery Mobile, large and not confusing, unless its syntax is not confusing all along to you
  • Not that much 3rd party support or forums
  • Official support is not free, not to mention official IDE platform
 
jQuery Mobile
 
  • Good official documentation but not on a level of Sencha Touch
  • Excellent 3rd party support, blogs, articles, forums, Stackoverflow….
  • Better book coverage
 
Verdict: Sencha Touch wins
 

Match 5 – Tools, Plugins, 3rd party support

 
This is also an important topic. What kind of tools or plugins can be used to make my developer life easier.
 
Sencha Touch
 
  • In house native app wrapper support
  • Support for themes
  • Unfortunately IDE is a paid application
 
jQuery Mobile
 
  • Phonegap is used as a native app wrapper, also while Phonegap is an excellent tool it can behave weirdly when used with jQuery Mobile
  • Support for themes, unfortunately this is not a full support because some core elements CSS can not be changed like this, for example active element glow
  • Large number of 3rd party plugins is available, not to mention compatibility with jQuery plugins
  • Can be extended much more easily then Sencha touch
 
Verdict: Tie, still this round slightly favors jQuery Mobile
 

Final thoughts


 
 

 jQuery Mobile 

 
Good
 
  • Easy to develop
  • Excellent 3rd party support, what through knowledge what through plugins
  • Easy to debug
  • Stackoverflow
 
 
Bad
 
  • Slower then Sencha Touch, build to work all around
  • Dull look unless you are capable UI designer, basically all applications look the same
  • Official documentation is lacking in some segments, too few information about jQuery Mobile architecture and too much information about UI
 
Should be used
 
  • For mobile sites
  • Light hybrid applications
 
Code example
 
<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>
            
            <div data-role="content">
                
            </div>
        </div>    
    </body>
</html>   
 

Reading material


 
jQuery Mobile Web Development Essentials, Second Edition Yet another book from the Packt Publishing, second installment of this series. Originally I have bought first installment of this book which was outdated so you should also be careful. This one is currently 2 months old (26.11.2013) so it should satisfy you in coming months. Second edition is excellent all around book, covering everything from API to working examples. It is also an excellent book if you want to learn everything that needs to be know about jQuery Mobile API (Chapter 10), something event official product web page is lacking.
 

 Sencha Touch 

 
Good
 
  • Faaaaast + better native feeling
  • MVC architecture
  • Excellent documentation
 
Bad
 
  • Complicated, cant stress how much, not for inexperienced developers
  • Bad 3rd party support, not that much information outside official site
  • Only web kit support makes it useless for practically anything except hybrid applications
  • Paid support and IDE
 
Should be used
 
  • Complex hybrid applications – basically anything that should look and feel like a native app
 
Code example
 
new Ext.Application({
    name: 'MyApp',

    launch: function() {
        this.viewport = new Ext.Panel({
            fullscreen: true,

            id    : 'mainPanel',
            layout: 'card',
            items : [
                {
                    html: 'Welcome to My App!'
                }
            ]
        });
    }
}); 
 

Reading material


 
Sencha Touch in Action Sencha Touch in Action is the definitive guide to developing applications with Sencha Touch. This book covers everything you need to know about building Sencha Touch mobile applications. It is intended for experienced developers but it can be also used for initial learning (if your javascript knowledge is satisfactory). There’s another great thing about this book, you can fully preview it / access it online.
 
Sencha Touch Cookbook, Second Edition Second book is intended for beginners and advanced developers. This book is a practical, hands-on guide with easy to follow recipes that provide you with clear, step-by-step instructions. My first real intro into a Sencha Touch world was through this book first edition. It is less about API more about step-by-step instructions, great for developers who lack advanced javascript knowledge.
 

Final words


 
 
All in all both frameworks are mature products and can stand on their own. jQuery Mobile is easier to master and will work great all around, but if you need something optimized for your hybrid mobile applications don’t look any further then about Sencha Touch.
 
Other HTML5 mobile frameworks worth mentioning can be found in my other ARTICLE.
 
 

18 COMMENTS

  1. Sencha Touch has been supporting IE devices since at least April 2013. We have our app running on desktops, iPhones, iPads, Android Phones+Tablets, Blackberry 10, Windows Phone, and Windows Surface! The only thing it doesn’t do is Firefox and pre-IE10 browsers. People who have OOP backgrounds (like Java) feel VERY much at home with javascript MVC (writing methods and subclassing) and have no trouble moving into it. They actually find it MUCH harder to learn HTML tag editing like JQuery.

Leave a Reply


− two = six