Tuesday, April 24, 2012

Which Mobile JavaScript framework is the best: jQuery Mobile, Sencha Touch, jQtouch, or Kendo UI? (Part 2)

As you might have seen in our previous post here. We have started a campaign to find out which one of the available JavaScript mobile frameworks performs the best.

In this post we are going to have a quick look at the frameworks that are selected for the first round of comparison. The comparison in this post is only about the look and feel of the UI and the complete score table will be published in the next post. We will start with these frameworks, but will add more frameworks to our test results.

All of the tests are done on iOS 5.1, Android 2.3.3, and Windows Phone 7 using MoSync Reload, so they follow the hybrid app approach.


Sencha Touch

Sencha touch is a feature rich JavaScript framework, designed to provide a user interface experience as close as possible to a native UI. Sencha has support for touch events, animations and provides a wide range of web widgets to be used in designing web-based apps. In their new release (Sencha Touch 2.0) they provide ways to package your app to be published in app stores.


Many people like to create their UIs dynamically in JavaScript code instead of having a declarative UI definition. If you are one those developers, Sencha Touch is suitable for you. I personally prefer declarative definitions and CSS hacking, such as provided by the next item in the list (jQuery Mobile).


Anyway, here is how you you can create tabs in Sencha Touch (picked from the official documentation):



Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});
Many people prefer jQuery Mobile to Sencha Touch due to licensing issues and that's one of the major criticisms I have seen regrading Sencha Touch.


Secnha Touch 2.0
Running on Android


Sencha Touch 2.0
 running on iPhone

The example app behaves in a similar fashion on both iOS and Android but it does not work on Windows Phone at all. Therefore, we don't have any screenshots from Sencha Touch 2.0 running on Windows Phone 7. 


jQuery Mobile

jQuery is a very popular JavaScript framework for web applications. Mostly because if its wide range of available plugins, ease of use, and open source licensing.

jQuery Mobile is an extension to jQuery, optimized for use on touch devices. It is built on top of jQuery, adding new UI elements and CSS classes which are intended to make your applications look and feel like native mobile applications.

jQuery Mobile's approach to creating UI is to have declarative definitions for different pages. It usually uses CSS and html data attributes to create the desired look and feel. You can have different pages defined in the same page by marking your div tags as pages. Here is an example of creating a navbar in jQuery Mobile (picked from official documentation).

<div data-role="navbar">
 <ul>
  <li><a href="a.html" class="ui-btn-active">One</a></li>
  <li><a href="b.html">Two</a></li>
 </ul>
</div><!-- /navbar -->

jQuery mobile has been criticized for its performance and behavior on different platforms. For example, I was at a talk about jQuery mobile in which the speaker said they had to disable all of the animations on Android because they pretty much didn't work.
jQuery Mobile provides a uniform experience across all platforms.


jQuery Mobile running on Android
jQuery Mobile
running on Android
jQuery Mobile
running on iPhone


jQuery Mobile
running on Windows Phone
As you can see, jQuery Mobile's result looks fairly good on both iOS and Android, and runs on Windows Phone, even if the layout and styles are a bit broken.

jQTouch

jQTouch is a jQuery plugin that aims to be very easy to use and provide a fast user experience very close to the native mobile experience. jQtouch is not as active as the others but it is the simplest of them all and works very well on iOS.

Coding in jQtouch is very similar to jQuery mobile since they are both built on top of jQuery. the only major difference is that in jQtouch you should wrap everything inside a div tag with id "jQT" and initialize the library using the following code(picked from the original documentation):
$.jQTouch({
    icon: 'jqtouch.png',
    statusBar: 'black-translucent',
    preloadImages: []
});

We used jQTouch in quite a few different apps, and here are some screenshots of it running on different platforms. 

jQtouch running on Android
jQtouch running on
Android

jQtouch running on Windows Phone
jQtouch running on
Windows Phone

jQtouch running on iOS
jQtouch running on iOS

Interfaces created using jQtouch look pretty fine on all three platforms - note that we have used dynamic css loading for the app to look different on different platforms. There are some speed issues on Android and Windows Phone, which we will cover in the score table that comes in our next post.


Kendo UI Mobile

Kendo UI is a jQuery based UI framework that aims to provide the native experience on every device. It provides lots of UI components and widgets to choose from. I should also say that in my simple tests it performed very well in generating native-like UI on Android and iOS, but not on Windows Phone, where it attempted (somewhat successfully) to provide the same look and feel as for iOS. Here is how you create the tab bar in Kendo UI (picked from the official documentation):

<div id="tabStrip">
    <ul>
        <li>First tab</li>
        <li>Second tab</li>
    </ul>
    <div>First tab content</div>
    <div>Second tab content</div>
</div>


The only problem I have with Kendo UI is its licensing model and the fact that you have to pay to be able to debug your app. The other problem is its huge size. Here is how it looks on our test platforms:

Kendo UI running on
Windows Phone

Kendo UI running on Android

Kendo UI running on iOS


Now that the initial evaluation is done, it is time to see how each framework does in our score table. I will try to post the scores in a new post as soon as possible, so if you know any frameworks that should be compared with these, please post a comment and we will add it to the list. 

10 comments:

  1. In all the above i used kendo and sencha both are good for me and the google api too...

    ReplyDelete
  2. Very interesting comparison. How about DHTMLX Touch (http://www.dhtmlx.com/touch/) ? Have you tried it?

    ReplyDelete
    Replies
    1. Well I haven't but looks interesting, will add it to the comparison as soon as possible.

      Delete
  3. Thanks again for including Kendo UI in your review!

    To clarify a point, you can definitely debug an application created with Kendo UI Mobile. You simply cannot debug *in to the Kendo UI minified source.* In most cases this shouldn't be a problem, and the solution, of course, is as simple as obtaining a proper license (that includes all source).

    For size, you can also greatly reduce the library weight by creating a custom build with only the pieces of Kendo UI you plan to use (available to licensed customers). Kendo UI is highly modular and easy to optimize!

    Hope that helps.

    -Todd
    (Kendo UI Team)

    ReplyDelete
    Replies
    1. Thanks for the information, When we tested the frameworks we couldn't find the open source license. So it might be a god idea to make it more visible in the website.

      Delete
  4. As a senior engineer and unbiased commentator, sencha touch is the way to go if you intend to make a serious mobile app or if your app may someday become serious. Sencha touch 2 (ST2) provides serious underpinnings in extjs, which turn JavaScript into a real programming language with classes and structure. The fluid layouts are amazing. If you want to move a few shiny lights around the screen, or superficially review frameworks for the purposes of blogging (*ahem*), then the others might provide a lesser learning curve. If you want to build serious JS mobile apps, then ST2 is the ticket. That's my opinion :)

    ReplyDelete
  5. Great overview, thank you so much! One question: how did you get Kendo UI running on WP7?

    ReplyDelete
    Replies
    1. Well We packed it inside MoSync and turned up like that. I can put the project somewhere for you to test.

      Delete
  6. How about HTML5? I heard that the recent improvements have optimized it for mobile web sites.

    web design company sydney
    Peter

    ReplyDelete
    Replies
    1. These frameworks all utilize HTML to create mobile web apps (which can then be packaged into native ones) From what I've seen they utilize HTML5 and CSS3 capabilities fairly well since they primarily target the relatively advanced webkit mobile browsers on iOS, Android, etc.

      Delete