What is the purpose of backbone.js?

sushil bharwani picture sushil bharwani · Mar 24, 2011 · Viewed 153.9k times · Source

I tried to understand the utility of backbone.js from its site http://documentcloud.github.com/backbone, but I still couldn't figure out much.

Can anybody help me by explaining how it works and how could it be helpful in writing better JavaScript?

Answer

Vlad Gurovich picture Vlad Gurovich · Mar 26, 2011

Backbone.js is basically an uber-light framework that allows you to structure your Javascript code in an MVC (Model, View, Controller) fashion where...

Model is part of your code that retrieves and populates the data,

View is the HTML representation of this model (views change as models change, etc.)

and optional Controller that in this case allows you to save the state of your Javascript application via a hashbang URL, for example: http://twitter.com/#search?q=backbone.js

Some pros that I discovered with Backbone:

  • No more Javascript Spaghetti: code is organized and broken down into semantically meaningful .js files which are later combined using JAMMIT

  • No more jQuery.data(bla, bla): no need to store data in DOM, store data in models instead

  • event binding just works

  • extremely useful Underscore utility library

  • backbone.js code is well documented and a great read. Opened my eyes to a number of JS code techniques.

Cons:

  • Took me a while to wrap my head around it and figure out how to apply it to my code, but I'm a Javascript newbie.

Here is a set of great tutorials on using Backbone with Rails as the back-end:

CloudEdit: A Backbone.js Tutorial with Rails:

http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/

http://www.jamesyu.org/2011/02/09/backbone.js-tutorial-with-rails-part-2/

p.s. There is also this wonderful Collection class that lets you deal with collections of models and mimic nested models, but I don't want to confuse you from the start.