Seiryuu is correct. Comparing Sencha Touch vs Backbone.js is like comparing apples and oranges. However, I do want to highlight some differences you will see in developing with either of them.
Before I start, I want to clarify what Backbone is exactly....
Backbone.js is a framework to compliment other libraries like jQuery and/or Zepto. jQuery strengths lie in DOM manipulation not as a macro architecture. Hence why pure jQuery apps tend to be a mess. Backbone provides to traditional web developers the bare bones MVC structure to better organize an app.
To start of my comparison I'm going to start with defining classes...
For example, this is how you declare a class in Javascript:
function MyClass(){
this.myProp1 = 'my value 1';
this.myProp2 = 'my value 2';
this.myMethod = function(myParam){
//do something
}
};
var myInstance = new MyClass();
In Sencha, you declare a class like this:
Ext.define('MyClass', {});
Ext.create('MyClass', {});
Note the heavy reliance on magic strings. However, you could possibly create a make shift enum class with constants that you can use as the class names. Regardless, if you use magic strings for your class names you are going to have a hard time renaming your class 3 or 4 months down the road.
For differences in using HTML...
Traditionally, we declare a form like this:
<form action="/myAction.php">
<label for="username"/>
<input type="text" name="username"/>
<label for="password"/>
<input type="password" name="password"/>
<input type="submit"/>
</form>
In Sencha, you declare a form like this:
{
title: 'Basic',
xtype: 'form',
id: 'basicform',
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Personal Info',
defaults: {
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name',
placeHolder: 'Enter Name'
}, {
xtype: 'passwordfield',
name: 'password',
label: 'Password',
placeHolder: 'Enter Password'
}
}]
}]
}
When it comes to templating, in Sencha you define a template like this:
var template = new Ext.XTemplate(
'<p>Name: {name}'</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1".',
'<p>{name}</p>',
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
template.overwrite(panel.body, data);
With Backbone you have options...
Mustache:
{{items}}
<div>{{name}}</div>
{{/items}}
Or if you need more power jQuery:
<script type="text/template" id="item-template">
<div class="todo <%= done ? 'done' : '' %>">
<div class="display">
<input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
<div class="todo-text"></div>
<span class="todo-destroy"></span>
</div>
<div class="edit">
<input class="todo-input" type="text" value="" />
</div>
</div>
</script>
With Backbone apps you can either define the templates as inline HTML or load them from external files. I would think you could do the same with Sencha, but I haven't seen any official prescribed methods. Just JS generated HTML strings.
These are just some basic differences between the two at the UI level. With Backbone you can better leverage your existing web skills and knowledge. With Sencha you are learning a complete new ecosystem with its own conventions and quirks.
With the heavy reliance on magic strings (see Sencha form example,) your IDE of choice will probably be limited in what it can do in terms of code completion. Which could possibly lead to slower dev time and a harder time finding bugs created by typos. However, Sencha does offer a Ext Builder app that is supposed to help you build the UI.
When it comes to application infrastructure (Models, Controllers, Services...) Backbone and Sencha are on par with each other. Sencha even has an advantage of sorts with its proxy layer that gives you more flexibility in regards to the integration of your server API, (Backbone is REST heavy.)
When it comes to PhoneGap I suggest you check out XUI. It's jQuery-like library built by the PhoneGap team that is optimized for mobile browsers. If your app is small enough it may not require a full blown app framework.
Hope this helps.
