Code for Concinnity

Most people compare Sencha Touch to jQuery Mobile. My general impression from reading the Web is that Sencha is more heavy-duty, faster than jQuery. My actual experience, however, reveals that they are actually vastly different.

I recently started using PhoneGap to do mobile development. The idea of using Web technology to write cross platform apps is just so great!

The natural thing to do with PhoneGap would be to use a framework. There are many, just to name a few that I tried:

• xui: Lightweight and fast, just as what you’d expect — jQuery on diet. I am not sure I am unlocking its real potential since examples/demos are non-existent at the time I write this. But this gets the job done.
• Senca Touch: Claims to be “the best HTML5 mobile Web app framework”. The demos are polished and attractive.
• jQuery Mobile: Good old familiar jQuery. The demos feel a little sluggish but overall still look good. It has less “widgets” than Sencha.

So let me get to the point of this post: I tried Sencha first and then tried jQuery. I will tell you that Sencha has slightly better performance but it’s approach really disappointed me.

Let me quote a snippet of Sencha Touch code from the PhoneGap tutorial on its Web site. This is how a typical Sencha Touch “class” look like:

app.views.ContactDetail = Ext.extend(Ext.Panel, {
  dockedItems: [{
    xtype: 'toolbar',
    title: 'View contact',
    items: [
      {
        text: 'Back',
        ui: 'back',
        listeners: {
          'tap': function () {
            //Ext.dispatch({
            //  controller: app.controllers.contacts,
            //  action: 'index',
            //  animation: {type:'slide', direction:'right'}
            //});
          }
        }
      },
      {xtype:'spacer'},
      {
        id: 'edit',
        text: 'Edit',
        ui: 'action',
        listeners: {
          'tap': function () {
            //Ext.dispatch({
            //  controller: app.controllers.contacts,
            //  action: 'edit',
            //  id: this.record.getId()
            //});
          }
        }
      }
    ]
  }],
  styleHtmlContent:true,
  scroll: 'vertical',
  items: []
});

Whew, that’s quite a lot of stuffs. Let me compare that with a selected part of a jQuery Mobile tutorial:

$('#buttonOK').click(function() {
  hideContentDialog();
  showMain();
  return false;      
});
 
 
$('#form1').submit(function() {
    var err = false;
    // Hide the Main content
    hideMain();
 
    // Reset the previously highlighted form elements
    stateLabelVar.removeClass(MISSING);
    whatLabelVar.removeClass(MISSING);              
    inputMapVar.each(function(index){              
      $(this).prev().removeClass(MISSING);
    });
 
    // Perform form validation
    inputMapVar.each(function(index){  
    if($(this).val()==null || $(this).val()==EMPTY){  
        $(this).prev().addClass(MISSING);            
        err = true;
      }          
    });  
    if(stateVar.val()==NO_STATE){          
      stateLabelVar.addClass(MISSING);                    
      err = true;
    }            
    if(whatVar.val()==null||whatVar.val()==EMPTY){  
      whatLabelVar.addClass(MISSING);  
      err = true;
    }
 
    // If validation fails, show Dialog content
    if(err == true){            
      showContentDialog();
      return false;
    }        
 
    // If validation passes, show Transition content
    showContentTransition();
 
    // Submit the form
    $.post("/forms/requestProcessor.php", form1Var.serialize(), function(data){
      confirmationVar.text(data);
      hideContentTransition();
      showConfirmation();
    });
    return false;      
});

This looks so familiar. It’s just our good old jQuery. And the page was formatted with standard, vanilla HTML5.

The difference should now be apparent — jQuery Mobile is a real “moving the Web development experience to mobile platforms”, whereas Sencha is “moving ExtJS to the mobile platform”.

If you look at the code, you’ll find that the typical Sencha Touch application bears no resemblance to how a Web app looks like — it feels like writing Java view classes. Unless you were already an ExtJS expert, it’s like going to learn a whole different ecosystem. Maybe it’s just me, but I find that way more difficult to adjust the layout than HTML or using XIB GUI editor. Writing layouts in “plain text” feels like something from the 90’s, seriously. Every other GUI toolkit I know of has a GUI editor, and plain HTML has the advantage of being ubiqutous. I can already imagine tearing the manual while writing GUI in Sencha Touch — not particularly attractive.

Using jQuery Mobile, links are automatically “hijaxed” into AJAX-y links, without you having to define these ‘tap’ actions whatsoever. The other good thing about it is that it works in a desktop browser by default, whereas Sencha Touch’s tutorial app just gives me a blank page when viewed from Firefox.

My general feeling is that if I am going to use yet another framework, I may as well go native or use Titanium which gives me native performance. For the moment I am going to stick with jQuery Mobile. f