Cage Match! Sencha Touch vs. jQuery Mobile

Mitch Pronschinske

Oct. 12, 12 · Interview

Like (0)

Save

80.33K Views

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.

JQuery Mobile Sencha Touch mobile app JQuery

Opinions expressed by DZone contributors are their own.

Comments

Trending

Trending

Cage Match! Sencha Touch vs. jQuery Mobile

Round 1

JQuery Mobile

Sencha Touch

Round 2

jQuery Mobile

Sencha Touch

Round 3

jQuery Mobile

Sencha Touch

Round 4

jQuery Mobile

Sencha Touch

Round 5

jQuery Mobile

Sencha Touch

Round 6

jQuery Mobile

Sencha Touch

Round 7

jQuery Mobile

Sencha Touch

Round 8

jQuery Mobile

Sencha Touch

Round 9

jQuery Mobile

Sencha Touch

Round 10

jQuery Mobile

Sencha Touch

Round 11

Both Frameworks

jQuery Mobile

Sencha Touch

The Final Decision (the payoff section)

jQuery Mobile

The Good

The Bad

Is a Solid Win if You Are...

Sencha Touch

The Good

The Bad

Is a Solid Win if You Are...

Trending

Partner Resources