HTML5 Zone is brought to you in partnership with:

Mitch Pronschinske is the Lead Research Analyst at DZone. Researching and compiling content for DZone's research guides is his primary job. He likes to make his own ringtones, watches cartoons/anime, enjoys card and board games, and plays the accordion. Mitch is a DZone Zone Leader and has posted 2576 posts at DZone. You can read more from them at their website. View Full User Profile

Cage Match! Sencha Touch vs. jQuery Mobile

10.12.2012
| 71205 views |
  • submit to reddit
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. 

Comments

Mitch Pronschinske replied on Sun, 2012/10/14 - 9:01am

Just an update for everyone.  The CEO of Sencha, Michael Mullany, kindly sent me a positive comment about this post yesterday and I wanted to share it with the readers of this post:

"I want to say thanks for your dzone review of Sencha Touch vs. Jquery Mobile - it seemed pretty balanced to me.

Just two things I wanted to add - Sencha Touch does have a bunch of plugins & extensions, although we haven't made them particularly easy to find at market.sencha.com.

Also, we do have very nice integration with ASP.NET backends via ext.direct which is a server method remoting library: http://www.sencha.com/forum/showthread.php?67992-Ext.Direct-Server-side-Stacks .

Finally, our forums have a 90%+ answer rate after 1 week, which we think is pretty great compared to other sites (even pretty good compared to stackoverflow).

Thanks again for the review.

all the best

-- Michael"

Alex replied on Mon, 2012/10/15 - 3:58am

My story:

I have switched from Sencha touch (2) to jQuery Mobile, because of the following problems:

1) The online documentation is superb in terms of user friendliness in their javadoc-like-but-more-powerful site, but found the informations in it not very clear and at times simpliy wrong. User comments however is a great addition in that case (where user can report that the doc is wrong, so you can stop trying to figure out what you did wrong)

2) There are no books covering it yet (sencha touch 1 is, but the programming model is completely different)

3) Had very big difficulties in self-learning. I watched the screencasts and read the documentation, but still don't know how to do anything besides what is reported in the manual. That's because the documentation is something like "to do this, do that", and is not explaining well what is behind and where to find references in the doc.

 

JQM on the other side is lacking many good features (like databinding of forms, and an official programming model) but on the other side, the doc is very good and not misleading. The only thing i've not been mastering in the firts half hour of learning was the page framework. Missing features can be recostructed with other frameworks (like knockout.js) or rebuilt from scratch. A pain, but gives the dev much more control

Everything, IMHO and from an average javscript prgammer.

Robert Brown replied on Thu, 2012/10/18 - 4:18pm

Good article, just a note though about the code section.  

The two examples produce very different things.  

the JQMobile just puts a simple hello world page up with a titlebar and no jqmobile functionality (output is the same with or without jqmobile.

The sencha example creates a reusable component with a titlebar, scrolling selectable list with a firstname, lastname and short bio in each section where at least one item is selected, and a bottom toolbar with a settings button in the middle of it.  To make it work however, you would have to add a store definition to tell it where the data is. 

The equivalent sencha code for the jqmobile example is 

Ext.create('Ext.Panel', {
        fullscreen:true,
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Hello World'
            },
            {
                 html:"It's works!",  }
	]
    }
}); 

It would be interesting to see the equivalent JQMobile code for the Sencha 
 
Thanks 

Bryan Copeland replied on Wed, 2012/10/24 - 3:11pm

I think you mean 960.gs not 360.gs in Round 7.

http://960.gs/

 

Maybe I missed the boat but haven't heard of 360 unless its a mobile-specific version of 960

Chip Burris replied on Thu, 2012/10/25 - 2:51am

First Off To Bryan Copeland  

OOOOPPPPPSSSSSS  Totally my bad. yes I meant 960.GS. Maybe i was looking at an XBox when I wrote that in the original presentation. I will fix it online and have it shored up for the next presentation.

 Mitch:

Thanks for writing this up. Ya did good man. I appreciate it.

So a few notes. In round 8 Architecure I  thought Sencha was the winner. However the audience judges overruled me. 

Robert makes a good point about the code comparisons. Actually what Mitch published is my fault. I got info to him late. I used login screens in my presentation.

I will also add the info that Mr. Mullany provided.  

I will post a link to an online version of the ppresenation as soon as I get it updated. 

 

Thanks All

Chip Burris

@chipburris 

 

 

Robert Brown replied on Thu, 2012/10/25 - 9:42am

I'd just like to comment on my reasonings for using the different tools.  

I think for general web page type designs and development jqmobile is a really good platform.  If you really are dealing with a more page based system where state is not as important and it can be kept on the server, then jqmobile works well.  

The reasons we chose Sencha is that is really is an application platform.  It allows for a very robust object oriented programming paradigm, that is extremely easy to extend and modify in ways that are explicit and well defined.  Obviously you can do the same things with basic javascript objects, but having an explicit idea and syntax for extending an object is, IMHO more readable and maintainable than the javascript prototype mechanisms.  

I think the two platforms are not easy to compare directly because it depends on your project, for web sites with a connected page design jqmobile is probably the best way to go.  For more stateful applications where you are performing a lot of computation, Sencha is probably the best way to go.  

My 2 cents anyway.

 

Shay Shmeltzer replied on Thu, 2012/10/25 - 3:51pm

It would be interesting to add the new Oracle ADF Mobile to this comparison.

It also lets you develop cross device mobile apps without learning OS specific language/environment

Like JQuery Mobile it is more focused on enterprise application rather than animation/games

It is based on MVC (has a full controller implementation)

It uses Java as the development language (on iOS too)

It wraps up phonegap integration in a simpler interface

It runs on iOS and Android

It has a complete developer guide book

Its components render faster the JQuery mobile

It has a visual development environment (Oracle JDeveloper)

It provides simpler solution for binding to Web services data sources

It comes with a built-in encrypted SQLite DB

What's your take on this?

Loiane Groner replied on Tue, 2012/10/30 - 8:18am

I liked your post with all the comparisons.

But in overall, I think Sencha Touch and JQuery Mobile are very different. Sencha Touch is a framework with a lot of capabilities, much more complex and complete than JQuery mobile. 

 And you forgot to mention one thing that can  be a tiebreaker: Sencha Touch has native package. You don't need phonegap or any other wrapper to produce a native app.

 

Thanks! 

Geoffrey Emery replied on Thu, 2013/01/03 - 3:48am

I feel like the only way to do a true comparison it to match JQM with http://backbonejs.org/ or another mvvm/mvc framework and do the comparison. You talk about rendering and page loads but most of this has to do with how you structure your application dom and your web service returns and how you load them aync or not. 

Online Buying replied on Sat, 2013/04/27 - 2:02am in response to: Mitch Pronschinske

Rolling Stone. This magazine is edited for young adults who have a special interest in popular culture. Its regular features include state-of-the-art audio and electronics columns, record reviews, reader correspondence, interviews and photojournalism features.buy or sell any thing you want online sell. 

Kamran Shafqat replied on Sat, 2013/06/08 - 3:21am

 I think Sencha Touch and JQuery Mobile are very different. Sencha Touch is a framework with a lot of capabilities, much more complex and complete than JQuery mobile.  And you forgot to mention one thing that can be a tiebreaker: Sencha Touch has native package. You don't need phonegap or any other wrapper to produce a native app.

<a href="http://aaigg.net/">Aaigg Bookmark</a>

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.