Platinum Partner
css,html5,javascript,jquery,tools & methods,html & xhtml,sencha touch,jquery mobile,comparison guide

Cage Match! Sencha Touch vs. jQuery Mobile

Have you gotten the mandate from the higher-ups to write a cross-platform mobile app and you just don't have time to learn the skills for building native apps?  Many developers have run in to this scenario, and they commonly turn to frameworks that give you a decent level of abstraction in these cases.  They also tend to go for a web app approach since that makes the app (mostly) cross-platform as long as it works with the most commonly used browsers.

If this sounds like you, I'm sure a lot of your peers have told you to try jQuery Mobile or Sencha Touch.  Sometimes there's a good deal of disagreement over which framework a developer ought to use, but I recently got the full rundown of pros and cons from a user group meetup that I attended (a .NET user group but that didn't have much effect on the broad relevance of the comparison).  Chip Burris was the referee and judge for this epic cage match and he, along with other attendees, gave their perspectives of these two frameworks from their experience in the trenches.

So, enough talking.  Let's get to the fight!

Oh, but one more thing…

Although I'm hyping this as a 'fight to the death', you should just know that this comparison guide is more focused on helping you pick the right solution for your team and your particular project.  For some of you, Sencha Touch will be the winner in your mind, but for others, jQuery Mobile may be the clear choice.  If you're really in a rush (TL;DR) then you can skip to the last section.  But I recommend you look through the whole article and see why Chip and the gang came to those conclusions.  Now, on to the fight for real!


Round 1

Maturity, History, and License

JQuery Mobile

  • First Alpha released in Oct. 2010
  • jQuery Mobile 1.2.1 was released this month
  • Based on jQuery, so it's popular, widespread, and easy to learn with strong community support
  • GPL or MIT License

Sencha Touch

  • First Beta released July 2010
  • Version 2.0 came out 6 March 2012 and is much easier to use.
  • Based on ext.js 4, which has had some major disagreements among the community regarding the direction and state of the platform
  • ext.js and Sencha Touch are both open source but they also have Sencha as a commercial driver
  • Has a GPL or a free to use commercial license.
  • There is a paid SDK License

So this is the part where we pick the winner of the round.  I agreed with Chip, who ruled that no platform had a clear advantage in general.  "Tie" was the ruling, but maybe you have different needs and you thought differently, so keep track of your own rulings.

Judge Rules: TIE


Round 2

UI Features/Capabilities

jQuery Mobile

  • Mostly Form-Driven  (works with elements not graphics)
  • Wraps most HTML elements
  • Looks like a field,button, bar with a slider thrown in app
  • DEMO
  • GALLERY

Sencha Touch

  • Graphics-Driven (great for games, charts)
  • Supports Raphael, an awesome SVG library
  • Uses JavaScript instead of HTML for layout, so it can be a bit more flexible
  • SOLITAIRE DEMO
  • EXAMPLES

Right away in round two we begin to see the fundamental differences between these two frameworks.  Does this mean it's an apples to oranges comparison? Sure you can say that, but essentially they are both tools used for the same general purpose - to create mobile web apps with web languages.

Sencha Touch is the clear choice if you're creating an app that's more intricate than a form-based app.  So Chip and the judges chose Sencha based on the fact that it can do more, but if you are doing a form-driven app, jQuery would be your winner because it will create that UI with much simpler, understandable code.  

Judge Rules: Sencha Touch Wins

Speaking of the code...


Round 3

The Code

jQuery Mobile

<!DOCTYPE html>
<html>
    <head xmlns="http://www.w3.org/1999/xhtml">
        <meta charset="UTF-8"></meta>
        <link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css">
</link>
        <script type="text/javascript"
        src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js">
        </script>
        <title></title>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header" data-position="inline">
                <h1>Hello World</h1>
            </div>
            <div data-role="content">It's works!</div>
        </div>
    </body>
</html>
Source

  • It's a very simple form in HTML(almost no JavaScript)
  • Better if you don't know JavaScript that well

Sencha Touch

Ext.define('MyApp.view.user.List', {
    extend: 'Ext.Panel',
    alias: 'widget.userlist',
 
    config: {
        layout: 'fit',
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'My User App'
            },
            {
                xtype: 'list',
                itemId: 'lstUser',
                allowDeselect: false,
                store: 'Users',
                itemTpl: [
                    '<div class="user-item">',
                    '<h2>{FirstName} {LastName}</h2>',
                    '<small>{Bio}</small>',
                    '</div>'
                ]
            },
            {
                xtype: 'toolbar',
                docked: 'bottom',
                layout: {
                    pack: 'center'
                },
                items: [
                    {
                        text: 'Settings',
                        itemId: 'btnSettings'
                    }
                ]
            }
        ]
    }
});
Source

  • It's all JavaScript, which may be more complex than necessary in some instances.

Chip had better examples in the presentation comparing Sencha Touch and jQuery Mobile code side-by-side used in a login form, but these look similar to his examples.  As you can see, if it's something simple, Sencha Touch makes it look a little more complicated than it probably needs to be.  That's because Sencha is going to try and do more in JavaScript.  So the judges decided in a similar use case, jQuery Mobile has the simpler code.

Judge Rules: jQuery Mobile Wins


Round 4

Documentation

jQuery Mobile

jQuery Mobile Documentation

  • Fixed some things so you don't have to 'view source' in the documentation to figure out the code to create the elements
  • Fairly decent forums
  • Great community information and help available from a variety of sites and books.

Sencha Touch

Sencha Touch Documentation

  • Documentation is much more organized than jQuery with tons of videos and examples (and search functionality!)
  • Active forums, but a lot more questions than answers
  • Some third party support options out there
  • Commercial support options

Chip rated the new and improved jQuery Mobile docs as "slightly above suck," but at least the community support for jQuery Mobile is strong like the main jQuery community.  The Sencha Touch docs, by comparison, are immaculate.  That's probably the result of having a commercial backer.

Judge Rules: Sencha Touch Wins


Round 5 

Speed!

jQuery Mobile

  • Getting faster with each iteration, but still stuttery on some animations.
  • The Android browser can still cause stutters on page changes. This is probably related more to the browser itself as there are other known issues
  • Less problems in Chrome for Android
  • It takes time to bring in the jQuery library

Sencha Touch

  • App loading can be a bit slow
  • Once loaded it's fast, load times can get longer
  • Sometimes it even seems faster than native apps
  • Things like sliders and other animations are much smoother than jQuery in a lot of cases

I've heard a couple complaints around the web about jQuery's stuttery handling of scrolling and sliders, but I've also heard reports that it can handle long scrolls just fine, so maybe it depends on the skill of the programmer.  Anyway…

Judge Rules: Sencha Touch Wins


Round 6

Device Support

jQuery Mobile

  • Large browser compatibility profile that includes win phone, bada and others that we frankly don't care about
  • It even works in the Windows 8 UI

Sencha Touch

  • Only works with WebKit (no Windows Phone)
  • Planning support for windows phone down the road, but it could mean a major overhaul


Sencha Touch is in a bit of a bind having tied themselves to WebKit, but honestly, as long as they are functioning on the iPhone, Blackberry, and Android, that's the bulk of the consumer market right there. Still…

Judge Rules: jQuery Mobile Wins



Round 7

Extensibility, Plugins, Community Libraries
 

jQuery Mobile

  • Lots of 3rd party extensions - as you'd expect from the jQuery community
  • Extensions are easy to make
  • Can be used with a responsive grid system like 960.gs or even twitter bootstrap

Sencha Touch

  • Pretty closed right now, convoluted to integrate (Raphael is one exceptional integration)


Again, it seemed like the winner here was clear…

Judge Rules: jQuery Mobile Wins



Round 8

Architecture

jQuery Mobile

  • No established architecture (unless you consider pages an architecture)
  • As we saw before unlike Sencha, jQuery Mobile is Layout based. This allows you the freedom to do whatever you want.

Sencha Touch

  • Version 2 has a strong MVC pattern.
  • Code is in Multiple .js files with an HTML page as a loader


This was not a great comparison point, so Chip just decided that Sencha was the winner here because jQuery doesn't really have an architecture.  But the freedom of jQuery Mobile is nice, so if you disagree, it's understandable.

Judge Rules: Sencha Touch Wins



Round 9

Tools and Native Wrappers

jQuery Mobile

  • More generators for jQuery Mobile and a theme roller
  • PhoneGap friendly but it doesn't feel native yet

Sencha Touch

  • Sencha makes a product called Sencha Architect
  • PhoneGap Friendly
  • 2.0 has native wrappers for iOS and Android
  • Themes can be built with SASS or Compass


The winner here really depends on whether you're looking for the more PhoneGap friendly solution or if you're looking for more generators.

Judge Rules: TIE



Round 10

Integration into the MS MVC stack (Skip this section if you're not a .NET developer)

jQuery Mobile

  • It's just HTML with some data attributes
  • Microsoft seems to really like it

Sencha Touch

  • Can embed Sencha Touch code in a CSHTML page, but it gets ugly fast
  • Works fine with Web API
  • You could write Razor code to generate the JavaScript (yucky)


Remember this was a .NET user group?  Well this was a pretty important comparison to them, so if you're also a .NET user, this hopefully answers some questions about how these frameworks work with ASP.NET and such.

Judge Rules: jQuery Mobile Wins



Round 11

Differentiating jQuery Mobile and Sencha Touch

Both Frameworks

  • Strong AJAX/JSON Support
  • Mature and Well Supported
  • PhoneGap Compatible

jQuery Mobile

  • Mostly HTML Tag based. Can be used with very little JavaScript knowledge.
  • Not much leeway in look and feel
  • Swipe and gestures are not baked in. Can be added but feel awkward.

Sencha Touch

  • Heavy JS, doesn't use HTML tags
  • can go crazy with the UI
  • Swipe and gestures work

 

The Final Decision (the payoff section)

 

jQuery Mobile


The Good

  • Likes Knockout.js
  • Good plugin tools support
  • Easy to debug
  • If you know HTML, you can do it

 

The Bad

  • Can be slow
  • Gesture support can be complicated to implement
  • Docs can be spotty and wrong
  • Pretty locked into form/button look and feel

 

Is a Solid Win if You Are...

  • Making a normal line-of-business app
  • Need tight integration with MVC/Razor, WebForms, or the non-.NET equivalent
  • Using it for an intranet or extranet app
  • Not very skilled at JavaScript

 

Sencha Touch


The Good

  • Give much better native experience
  • Fast
  • Good touch and gesture support
  • Very flexible
  • Amazingly good documentation
  • Nice charting package available (so obviously, it's great for charts)

 

The Bad

  • Complicated code if you aren't good with JavaScript
  • Commercial Entity controls it (But this is potentially a comfort to some)
  • Hard to integrate into the MS stack (may not be an issue for non-.NET devs)

 

Is a Solid Win if You Are...

  • Planning on writing a non-standard UX
  • Using it a Hybrid app, calling remote services using JSON
  • An excellent JavaScript developer


Phew!  Hope you have digested all of that information and have a better idea of which one of these you should use if the need arises.  In case you're curious, jQuery Mobile was the winner according to Chip and the consensus of the Triangle .NET User Group, but they also conceded that there could be many scenarios where Sencha Touch is the way to go. 

Many thanks to Chip Burris for his awesome job evaluating these two tools and setting up the meeting to inform us.  You can see his slides for the presentation, which were made via jQuery Mobile. 

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}