jQuery Mobile vs Sencha Touch (ExtJS Mobile)

Harsha Bopuri

Rate me:

4.50/5 (8 votes)

18 Dec 2014CPOL8 min read

33K

Comparison between jQuery Mobile and Sencha Touch with a simple example

Introduction

This article is to compare the pros and cons of web mobile framewoks: jQuery Mobile and Sencha Touch. This simple excercise will help developers/architects to choose the right framework for their application needs. I wouldn't say one is good other is bad, but it will be up to the project requirements.

In this excercise, I will be making a simple slide out menu (facebook like menu) and compare the implementation on both jQuery Mobile and Sencha Touch.

Prerequisites

Anyone reading this article may need some basic understanding of HTML, JavaScript and Responsive Designing concepts

Tools

In order to practice this exercise, all you need is a text editor like NotePad++. I have used VisualStudio 2013 that will give me advantage of intellisense for jQuery/Javascript, however not for Sencha touch. But you are welcome to use any text editor.

Also these two examples don't need to be on any server (IIS or other).

Background

jQuery Mobile: jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Reference (http://jquerymobile.com/)

Download jQuery mobile Library: http://jquerymobile.com/download/
jQuery mobile Demos: http://demos.jquerymobile.com/1.1.0/
jQuery Mobile API documentation: http://api.jquerymobile.com/

Sencha Touch: A HTML5 Mobile Framework with over 50 built-in components, themes for every popular mobile platform and a built-in MVC system. Reference (http://www.sencha.com/products/touch/)

Download Sencha Touch Library: http://www.sencha.com/products/touch/download/
Sencha Touch Document: http://docs.sencha.com/touch/2.4/
Sencha Touch Demo: http://www.sencha.com/products/touch/demos/

Using the code

Using jQuery Mobile:

Touch-Optimized Web Framework
jQuery Mobile is built on the rock-solid jQuery and jQuery UI foundation, and offers Ajax navigation with page transitions, touch events, and various widgets. It's lightweight code is built with progressive enhancement and has a flexible, easily themeable design.

To know more about jQuery Mobile visit jQueryMobile.com

List of files we need:

index.html
mobile.js
site.css

on index.html under <head> section add jQuery Mobile cdn reference

HTML

    <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>

JQuery Mobile is an extended jQuery library targeting smart devices. In this article I am going to use CDN references to load jQuery Mobile library.

Now in my root directory of my project, I need a default HTML page that will be the firsrt page to render on the browser when a request is made.

Core HTML structure:

HTML

<head>
   // This is the section where we add the references to libraries, such as Javascript, Styles and any initial scripts
</head>
<body>
  // this is the place where we add the content that we sould like to show on the page to the requesting user.
</body>

Let's add the Menu markup to index.html and full markup will look like. As you can notice I have added jQuery mobile references and styles reference and my custom script reference.

HTML

<head>
    <title></title>
    <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>
    // My additional styles here
    <link href="site.css" rel="stylesheet" />
</head>
<body>
    <div data-role="page" id="home" data-theme="b">
        <div data-role="panel" id="navpanel" data-theme="a" data-display="overlay" data-position="right">
            <div data-role="controlgroup" data-corners="false">
                <a href="#" id="homeLink" data-role="button">Home</a>
                <a href="#" id="aboutLink" data-role="button">About</a>
                <a href="#" id="contactLink" data-role="button">Contact</a>
                <a href="#" id="termsLink" data-role="button">Terms</a>
            </div>
        </div>
        <div id="header" data-role="header" data-theme="b">
            <a id="bars-button" data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel">Menu</a>
        </div>
        <div id="pageContent" data-role="content">
            <p>Welcome to my page</p>
        </div>
    </div>
   //My additional scripts here
    <script src="Mobile.js"></script>
</body>

Also, if you notice I have added

HTML

<script src="Mobile.js"></script>

This is to handle user events on the menu, as user click on any link on the menu section, open certian content on the page or when user clicks on Menu icon slide in the menu and so on..

In my mobile.js I write th below lines of code to capture and process the user events.

JavaScript

// When my browser DOM is ready
$(function () { 

    // Add click event to the DOM element "Anchor tags" under a DOM node od ID "navpanel"
    $("#navpanel a").click(function () { 
        var $pageContent = $("#pageContent");
        var _id = $(this).attr("id");
    
   // add a switch case that can identify the each click type and process the appropriate action to that event
        switch (_id) {  
            case "homeLink":
                $pageContent.html("Welcome to hope page"); // simple content change on the page
                break;
            case "aboutLink":
                $pageContent.html("This is my about me page"); 
                break;
            case "contactLink":
                $pageContent.html("Contact me page");
                break;
            case "termsLink":
                $pageContent.html("Terms page");
                break;
            default:
                break;
        }

        handleSelectedMenu(this)
        toggleMenu();

    });

});

// This will push back the opned menu sction back to close after you load the appropriate content for user event.
   var toggleMenu = function (){
       $("#bars-button").trigger("click");
   }

// Give  a color differene to the selected item in the navigation menu using addClass() method in jQuery
// you may notice in the screen shots that will change the color to black when user selects a menu item.
   var handleSelectedMenu = function (me) {
       $("#navpanel a").removeClass("selectedLink");
       var clickedLink = $(me).attr("id");
       $("#" + clickedLink).addClass("selectedLink");
   }

I have some additional styles which I've added in site.css I haven't done much with styling as that is not what this article is about. In this I have added properties that can stretch the header to full screen and define the menu.

CSS

.ui-panel-inner {
    padding: 0px; /*make the buttons flush edge to edge*/
}

.ui-controlgroup {
    margin: 0; /*make the buttons flush to the top*/
}

#header {
    height: 54px;
}

#bars-button {
    margin: 7px;
}
.selectedLink{
    background:#000;
}

Output:

Using Sencha Touch:

List of files we need:

root/app.js
root/app/controller/AppController.js
root/view/MainView.js
root/view/AboutView.js
root/view/ContactView.js
root/view/TermsView.js
root/app/style.css

Sencha supports both MVC and MVVM application architectures. Both of these architectural approaches share certain concepts and focus on dividing application code along logical lines. Each approach has its strengths based on how it chooses to divide up the pieces of an application.

What is MVC?

In an MVC architecture, most classes are either Models, Views or Controllers. The user interacts with Views, which display data held in Models. Those interactions are monitored by a Controller, which then responds to the interactions by updating the View and Model, as necessary.
The View and the Model are generally unaware of each other because the Controller has the sole responsibility of directing updates. Generally speaking, Controllers will contain most of the application logic within an MVC application. Views ideally have little (if any) business logic. Models are primarily an interface to data and contain business logic to manage changes to said data.
The goal of MVC is to clearly define the responsibilities for each class in the application. Because every class has clearly defined responsibilities, they implicitly become decoupled from the larger environment. This makes the app easier to test and maintain, and its code more reusable.

What is MVVM?

The key difference between MVC and MVVM is that MVVM features an abstraction of a View called the ViewModel. The ViewModel coordinates the changes between a Model’s data and the View’s presentation of that data using a technique called “data binding”.
The result is that the Model and framework perform as much work as possible, minimizing or eliminating application logic that directly manipulates the View.

You can get more details about Sencha Architecture from Sencha Docs

The heart of Sencha is app.js in root directory. The application gets launched from the app.js

For our example, here is the code for root/app.js launch function

JavaScript

// Adding reference to the sencha library and name the App
Ext.Loader.setPath({
    'Ext': 'Lib/touch-2.4.1/src',
    'HaBoMobile': 'app'
});

We are following MVC pattern

So initialize the controllers, views and models (we dont need models in our example)

Ext.application({
    name: 'HaBoMobile',
    controllers: ['AppController'],

    icon:
        {
            '57': 'resources/icons/Icon.png',
            '72': 'resources/icons/Icon~ipad.png',
            '114': 'resources/icons/Icon@2x.png',
            '144': 'resources/icons/Icon~ipad@2x.png'
        },
    isIconPrecomposed: true,
    startupImage:
        {
            '320x460': 'resources/startup/320x460.jpg',
            '640x920': 'resources/startup/640x920.png',
            '768x1004': 'resources/startup/768x1004.png',
            '748x1024': 'resources/startup/748x1024.png',
            '1536x2008': 'resources/startup/1536x2008.png',
            '1496x2048': 'resources/startup/1496x2048.png'
        },

    launch: function () {

        Ext.fly('appLoadingIndicator').destroy();

// Create my Menu items 

        var menu = Ext.create('Ext.Menu', {
            items: [{
                text: 'Close',
                ui: 'decline'
            }, {
                action: 'nav_option',
                itemId: 'homeLink',
                title: 'Home',
                iconCls: 'home',
                text:'Home'
                
            }, {
                action: 'nav_option',
                itemId: 'aboutLink',
                title: 'About Me',
                iconCls: 'info',
                text: 'About'
            }, {
                action: 'nav_option',
                itemId: 'contactLink',
                title: 'Contact',
                iconCls: 'locate',
                text: 'Contact'
            }, {
                action: 'nav_option',
                itemId: 'termsLink',
                title: 'Terms',
                iconCls: 'action',
                text: 'Terms'
            }]
        });

// Set the menu to my page
        Ext.Viewport.setMenu(menu, {
            side: 'left',
            reveal: true
        });
    }
});

now let's write our controller : root/app/controller/AppController.js

Controller is where the events/implementations are handled.

JavaScript

// Name the controller
Ext.define('HaBoMobile.controller.AppController', {
// extend the Sencha namespace
    extend: 'Ext.app.Controller',
// reference the Views those will be needed in this controller to process any events.
    config: {
        views: ['MainView', 'AboutView'],
        refs: {
            main: {
                selector: 'mainViewType',
                xtype: 'mainViewType',
                autoCreate: true
            },
            about: {
                selector: 'aboutViewType',
                xtype: 'aboutViewType',
                autoCreate: true
            }
        },
        control: {
            'button[action=nav]': {
                tap: 'showNav'
            },
            'button[ui=decline]': {
                tap: 'hideNav'
            },
            'button[action=nav_option]': {
                tap: 'handleNavigation'
            }
        }
    },

// define functions those will be used in the application flow.

    init: function () {
        Ext.Viewport.add(this.getMain());
    },

    showNav: function () {
        Ext.Viewport.showMenu('left');
    },

    hideNav: function () {
        Ext.Viewport.hideMenu('left');
    },

    handleNavigation: function (btn) {

// switch condition to handle the click events of different menu items

        switch (btn.getItemId()) {
            case 'aboutLink':
                var aboutView = Ext.Viewport.child('aboutViewType');
                if (!aboutView) {
                    aboutView = this.getAbout();
                    Ext.Viewport.add(aboutView);
                }
                Ext.Viewport.setActiveItem(aboutView);
                break;
            default:
                var mainView = Ext.Viewport.child('mainViewType');
                if (!mainView) {
                    mainView = this.getMain();
                    Ext.Viewport.add(mainView);
                }
                Ext.Viewport.setActiveItem(mainView);
        }
        this.hideNav();
    }
});

Now let's write our landing page script: root/view/MainView.js

JavaScript

// Name the View
 Ext.define('HaBoMobile.view.MainView', {
// extend the Sencha Touch Namespace
    extend: 'Ext.Container',
    xtype: 'mainViewType',
    html:'welcome page',
styleHtmlContent: true,

// set if the page is scrollable

    scrollable : {
        direction     : 'vertical',
        directionLock : true
    },
    overflowY: 'auto',
    autoScroll: true,
    config: {
        fullscreen: true,
        items: [{
            docked: 'top',
            xtype: 'titlebar',
            title: 'Harsha Bopuri',
            items: [{
                text: 'Menu',
                action: 'nav',
                iconCls: 'list'
            }]
        }]
    }
});

Now let's write our about view

JavaScript

Ext.define('HaBoMobile.view.AboutView', {
    extend: 'Ext.Container',
    xtype: 'aboutViewType',
    html: 'Learn more about me',
    styleHtmlContent: true,
    scrollable: {
        direction: 'vertical',
        directionLock: true
    },
    config: {
        fullscreen: true,
        items: [{
            docked: 'top',
            xtype: 'titlebar',
            items: [{
                text: 'Menu',
                action: 'nav',
                iconCls: 'list'
            }]
        }]
    }
});

I am not pasting the rest of the code for all links. I guess the above code gives you an idea of how it looks. You can download the code and get more understanding of this exercise.

Outcome:

Points of Interest

So far we saw the implementation of the slide out menu. Now let's compare:

Let's see the DOM of Sencha Touch. It loads a ton of references at runtime and a dynamically generated markup to the page which looks very heavily nested and not so eye-pleasing to read. If you are a person who likes to write HTML, you may hate this. On a positive note, you have not written any of this, Sencha will write all this markup for you (though it is not eye-pleasing)

Let's monitor the Network tab on Google Chrome developer tools. Obviously Sencha loads tons of JS references. In this example if you notice it downloaded 1010KB of DOM content. You may be interested to analyse other details like Number of requests, load time and more.

This can be compressed with minification of scripts later. But by default, this is how it behaves.

Let's see the DOM of jQuery Mobile. It will only load what you have added in your index.html page. There will be a few DOM changes based on data-roles defined in the markup, but not huge.

Again, this is a typical HTML standard that will please developers who are fans of reading or writing HTML.

Let's observe the Network response for the page request.

As you see, there is only one xhr request unlike Sencha. (In this example, it is already minified. But even Non-minified version cannot be compared to Sencha references)

Total downloaded DOM content is 2.7KB that is way too less compared to Sencha Touch

Pros & Cons

jQuery Mobile

Advantage: Less DOM code results in light load on mobile devices
Advantage: Quick to learn
Advantage: Large community support
Disadvantage: Extra work on styling

Sencha Touch

Advantage: Rich UI
Disadvantage: Lots of DOM content
Disadvantage: Weakly typed HTML
Disadvantage: Huge learning curve
Disadvantage: Less community support (only Sencha forum)
Disadvantage: Week in security

Summarizing the differences:

jQuery Mobile is light-weighted compared to Sencha touch.
jQuery Mobile Framework is easy to integrate with 3rd party / other technologies.
jQuery Mobile is easy to use as Sencha Touch is completely Javascript. Application is based on fully js files, where as jQueryMobile is markup-driven. Sencha Touch doesn't follow W3 standards.
jQuery Mobile and Sencha touch both provide great UI features, but Sencha touch wins here.
jQuery Mobile supports more number of mobile platforms as compared to Sencha Touch.
jQuery Mobile is easy to learn but for Sencha touch it comes with heavy learning curve. Documentation of Sencha touch is not comprehensive when compared to jQuery Mobile documentation.
Sencha Touch supports MVC style application design.
jQuery Mobile is free & Sencha Touch has free license for development and paid license for SDK; more info from http://www.sencha.com/legal/

Conclusion:

This Article will give you comprehensive details of two implementations which will help the Developers/Architects to choose the right technology for their application needs.

Since both frameworks are targeting smart devices, I personally feel jQuery Mobile is better than Sencha Touch because

It is better performed when less DOM content is pushed on to the device.
It doesn't restrict you to a single framework/pattern
Wider compatability
Quick to learn
Better scope of securing the content and UI as DOM is mainly generated by application unlike Sencha Touch required to generate via client side script.
The only advantage of Sencha Touch over jQuery Mobile is rich UI out-of-the-box. But how far you give importance to out-of-the-box UI verses security, performance and feasibility to integrate with other technologies? UI is something that can always be improved with additional layer of CSS.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Harsha Bopuri

Architect

United States

I am a Microsoft Certified Solution Developer, working as a “Senior .NET Solutions Architect” and hold a Doctorate in Information Technology. With an overall experience of 9+ Years in related fields. I have a tremendous desire to exceed in whatever I undertake. I am an excellent team player - I like to listen, and am open to what everyone has to offer. I am confident; not shy of taking up responsibilities. I am sincere, and give myself to the job on hand. I have the advantage of possessing good communication skills, and this gives me the confidence to deal with people. I am very artistic and creative - and I have the capability to express this in my work.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

jQuery Mobile vs Sencha Touch (ExtJS Mobile)

Introduction

Prerequisites

Tools

Background

Using the code

Points of Interest

Pros & Cons

License

Comments and Discussions