What are the advantages of Backbone.js – BrowserStudios

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);

You may also like: WordPress with Backbone.js, Learn Backbone.js