4

I have heard a lot of news that backbone.js will be very useful when working with html5 and node.js. I've read the documentation but I still can't get the basic purpose of backbone.js.

Can someone please explain it to me in simple terms. Also if you can direct me to good tutorials.

Thanks

Edit: See this question What is the purpose of backbone.js?

Community
  • 1
  • 1
user1441945
  • 113
  • 1
  • 10
  • Just wanted to say that backbone don't really care about the backend, you can use backbone with anything out there that's using REST, eventhough expressjs + nodejs + backbone is a joy – skyw00lker Jun 27 '12 at 06:26

2 Answers2

11

Pretty much every rich-client web application out there has one or more lists of objects, and when you do something, one of those objects needs to change how it's displayed. Think of a TODO list, which is the canonical example for Backbone.js. Here are some ways you might do it:

  • When you make a change, use jQuery or something like that to change the text of the HTML div itself. But what about when you want to save it to the server? Do you read off the text of all the HTML divs, making that the authoritative place for the data? That just feels clunky! And what if you have other state that you don't want to display to the user? Or if you want to display the same object in two different places?

  • When you make a change, update a plain-old Javascript object somewhere, like window.todos = [{id:1, foo:'bar'},...]. But when you change it, you have to re-render everything that uses that object, and also tell the server about the changes. And if you have two or more different ways to change the state, such as a "mark all completed" feature for our TODOs app, then you'll end up repeating yourself quite a bit!

Backbone.js solves this problem by creating a Backbone.Model for each TODO object that holds the authoritative version of the data. Whenever you change an attribute on the model, no matter where you change it from, it notifies all the Views of that object to re-render. And you can sync an entire collection of models to a RESTful server with a single function call. Your app will be much more maintainable, and you'll be able to add arbitrary features much more easily.

btown
  • 2,273
  • 3
  • 27
  • 38
  • Adding on to my answer 2 years later... In the "re-render" I referred to above, Backbone.View literally throws out the DOM for any component that's listening to changes on the model that just changed, and reconstructs it from a template. If this seems inefficient to anyone reading this, I'd encourage you to look into React, which solves this problem by adding an additional diffing layer that only tells the browser to make the minimum changes necessary to the UI. Works very well when combined with Backbone.Model's! – btown Dec 17 '14 at 15:53
1

backbone.js is a MVC framework which helps you to organize your code properly and will be very helpful and easy when you are reusing it.

It is light weight.

you can find some good tutorial at http://thomasdavis.github.com/2011/02/01/backbone-introduction.html

sundeep
  • 601
  • 1
  • 8
  • 21