I just came across a comparision of Spine.js and Backbone.js by Hjörtur Hilmarsson. They truly sound similar but have slight differences. Hjörtur Hilmarsson is doing a very good job explaining those concepts.

Spine and Backbone are two Javascript MVC frameworks that look very similar on the surface but under the hood there are key differences.

July 31, 2013Backbone.jsBackbone.jsadmin

I’m teaching myself to use Backbone because after having done quite a lot of JavaScript in work lately, it has become obvious to me that I need a framework.

Because Backbone allows you to clearly and modularly organize your JavaScript into highly reusable views, models, etc., it tends to foster more elegant solutions.

Backbone’s structure is both clear and flexible, avoiding rigid guidelines, while at the same time providing sensible places for each part of your application to live. Combine this with the beautiful event system that ties it all together and a straightforward way to deal with the DOM on a per view level, and you’ve got a JavaScript dream come true.

Event-driven communication

It’s easy to create small and slick web applications with frameworks like jQuery. When a project grows, however, the jQuery declarations and callbacks get more and more complex and are distributed all over the place. The code becomes more and more cluttered and hard to read.

Backbone.js alleviates this by providing an event-driven communication between views and models (and other elements which we ignore for now for the sake of simplicity). You can attach event listeners to any attribute of a model, which gives you very nuanced control over what you change in the view.

The backbone.js events build on top of regular DOM events, which makes the mechanism very versatile and extensible. With one line of code, for example, you can introduce a publish/subscribe pattern to backbone that ties all of your views together (this is described in full detail in an excellent blogpost by Derick Bailey: http://lostechies.com/derickbail…)

Syncing with a back-end

The models in Backbone.js can be easily tied to a back-end. Out-of-the box the framework provides excellent support for RESTful APIs in that models can map to a RESTful endpoint. If the API is designed correctly, backbone is already configured to access these directly for read, write, and delete operations (via GET, POST, and DELETE).

If a backend other than a RESTful API is used, backbone.js is still flexible enough to accommodate for that.

Maintainability by following conventions

Conventions are a great way to introduce a common coding style without the need of coming up with an extensive set of coding standards. The secret sauce here is laziness. The more you stick to (the few) backbone conventions the less you have to code, and in turn the more standardized and readable the code becomes.

Here is a quick Hello World example

(function($){

¶

ListView class: Our main app view.
        

  var ListView = Backbone.View.extend({
    el: $('body'), // attaches `this.el` to an existing element.

¶

initialize(): Automatically called upon instantiation. Where you make all types of bindings, excluding UI events, such as clicks, etc.
        

    initialize: function(){
      _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods

       this.render(); // not all views are self-rendering. This one is.
    },

¶

render(): Function in charge of rendering the entire view in this.el. Needs to be manually called by the user.
        

    render: function(){
      $(this.el).append("
  • hello world
");
    }
  });

¶

listView instance: Instantiate main app view.
        

  var listView = new ListView();
})(jQuery);

July 31, 2013Backbone.jsBackbone.js, Free Backbone.js Resourcesadmin

Backbone.js

Backbone.js is known for its excellent documentation. I would suggest going through their examples first. The tutorials range from beginner to intermediate. The ToDo application is easy enough to understand and I believe and excellent resource to help you grasp backbone.js.

Besides the official documentation I recommend you check out this screencast from Joey http://joeybeninghove.com/2011/0…
Another resource for beginners would be the tutorials found here: http://backbonetutorials.com/

I don’t think that one book or tutorial would be enough to learn Backbone.js. Here’s a list of all the resources I used to learn it:

Official Documentation

The Backbone.js and Underscore.js docs are extremely well written and organized. I like to keep them open in a tab when developing.

Collections of Tips, Techniques, etc.

eBooks

Blog Posts

Other Collections of Resources