Sencha Touch Vs Backbone.js [closed]

Question

What are the basic difference Sencha Touch and Backbone.js, actually have built a project in backbone.js but not aware of Sencha Touch. I have to built a PhoneGap application which one is better for that?

Answer 1

Sencha Touch (our product) is intended to be an all-in-one application framework that provides all the functionality you need to create great looking apps. Everything is designed to work all together on all the major mobile browsers. It's a cleanly architected object-oriented approach to developing apps.

As an "all-in-one" framework, it gives you a full set of resolution-independent UI widgets (carousels, lists, tabs, toolbars, etc. etc.) an MVC library, event management, utility libraries, animation, a theming system, object lifecycle management, a layout system, a drawing and charting library and more stuff than you can shake a stick at... Because it's all designed to work together, the initial learning is higher, but once you're there people swear it's light-years more productive than anything else.

vs.

Backbone.js, which is a simple MVC library. It's about 1,000 lines of code and gives you 5 classes:

• Model
• View
• Router
• Collection
• Events

It has a dependency on underscore.js for utility functions, so you'll need that too. You will also probably need to use a separate templating library as well as a DOM abstraction/manipulation library like jQuery or jQuery Mobile which also has some UI widgets and a bunch of other libraries to build a full app. But some people prefer to research and hand-curate their individual libraries.

Update: I wanted to add more detail to repond to Ben Bishop's answer below. Aaron Conran, who's our Sencha Architect lead and a Sencha lifer has helped me out with this addition.

There is a definite world view difference between Sencha and backbone. In general, Sencha tends to stay in the JS world and we expect that your JS will generate your HTML content. Backbone on the other hand is kind of a mishmash between an HTML and JS. There's no cut and dry reason to using one or the other, although we believe that data-driven apps of any complexity are better served by the Sencha approach. Ok on to details.

First off re: Classes, Ben's example of declaring a class in JS would put a copy of every property and method in every instance of the object. Typically working in raw JavaScript, you want to put these on the prototype so that they are shared across instances of the class MyClass. The Sencha class system does this automatically for you.

Additionally in raw JavaScript, users have to grok prototypical inheritance correctly in order to properly inherit from or mix in a particular class. Sencha takes care fo thsi without you having to worry.

As far as "magic strings" go (although I'd argue that's a rather negative characterization) you don't have to use them if you don't like them in 4.x , instead you can use Ext.extend with direct identifiers (although this is officially deprecated since 4.0.0 http://docs.sencha.com/touch/2-1/#!/api/Ext-method-extend).

Using magic strings is useful in a few ways.

First off we can worry less about dependency order and when any class is defined/extended from. This matters in complex apps

For example

Ext.define('Turtle', { extend: 'Animal' }); 
Ext.define('Animal', { });

Works because Sencha waits until the Animal class is defined before defining the Turtle class.

In contrast:

Turtle = Ext.extend(Animal, {
});
Animal = Ext.extend({}, {
});

Does'nt work because we can't find the variable reference Animal.

Second, using strings means we can support dynamic loading. For example if we have

Ext.define('MyApp.foo.MyClass', {
    extend: 'MyApp.foo.ParentClass'
});

If you follow a strict class name to JS folder convention, the class loader knows where to load the class namely:

• MyApp.foo.MyClass lives in app/foo/MyClass.js
• MyApp.foo.ParentClass lives in app/foo/ParentClass.js

This technique makes it easy for Sencha to do useful things: - The class manager will automatically create proper objects without you having to create & manage namespaces - Determine the classname of any class or instance Ext.ClassManager.getName(myInstance) -> "MyApp.foo.MyClass"

• Perform some action when a particular class is defined

  Ext.ClassManager.onCreated(function() { }, scope, 'MyApp.foo.MyClass');

• Support namespace rewriting, for example if you need to run two versions of the same set of classes concurrently in the same page... you can rewrite the namespace of Sencha Touch's "Ext" top level namespace to something else.

Ok, on to Templates. In the Sencha templating system, users can embed their templates within any HTML tag that won't muck with it: for example script tags with a custom type (or more typically in Sencha's case a textarea)

var myTpl = Ext.XTemplate.from('theIdOfMyTpl')

You can also store your templates in separate files and load them via an XHR. Though we generally recommend you write something on the server side to manage this for good performance.

re: IDE's Sencha Architect handles this stuff automatically out of the box (including any places it's referenced in the project, etc). I believe our Eclipse plugin also handles this, but I'd have to check.

Answer 2

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 &gt; 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.