Welcome to Backbone
Backbone engages in no magic, is very readable, and doesn't try to do too much for you. You can learn everything there is to know about it in a couple of days.
Your model is where you store your data. If you have an app for tracking sharks in the ocean, you might have a Shark model which would store the location and name of a shark.
Models fire off events when they change. If your shark eats a swimmer and gains 10 notoriety points, it will fire an event to that effect.
A view in Backbone is a region on the page into which Backbone will output some data. A view might be a form, or a map of sharks in the sea. Your page will be built up of one or more views.
Views can listen to model events and redraw themselves when the model they are attached to changes.
A Backbone collection is an array of models. If you have 100 sharks, you would store those in a collection. If you tag a new shark, you might add it to the collection.
Collections can also fire events. A view can listen to a collection.
Backbone Vs JQuery -
A typical JQuery app has us wiring up buttons and forms, and then making DOM changes when the user interacts with them. This means that a JQery app is self referential.
JQuery is Self Referential
One of the big issues with writing complex apps using jQuery alone is that the view operates on itself. We write code that listens to the html page, perhaps button clicks, or hover events, and then, makes changes to the view.
Because the view modifies itself, we create cycles, like this. When the app moves beyond the trivial, these cycles turn into tangles, and we end up with a big mess:
Backbone is not self referential
Backbone gives us models and views to allow us to separate our view logic from our business logic.
Used properly, this can help to straighten out the tangles. We get models that hold our logic, and we get views to control the display. We can wire up a view, such that when we interact with it, a model is updated, then we can tell the view to watch the model, and change itself when the model is changed.
We can have as many models and views as we like. We keep our business logic in our models, and we keep our display logic in our views. In theory it then becomes simple to add additional views, we just wire them in.
Backbone has a hard dependency on Underscore (_), and a soft dependency on JQuery.
Download here: http://underscorejs.org/
Everyone's favourite DOM manipulation tool. It allows you to select portions of the page using CSS selectors, and then make arbitrary changes. Choose 1.x if you want to support legacy browsers. Choose 2.x if you want a smaller faster codebase.
Download here: http://jquery.com/
A super stripped down Backbone boilerplate for local development might look something like this:
<html><head><title></title></head><body><script src="underscore.js"></script><script src="jquery.js"></script><script src="backbone.js"></script><script src="app.js"></script></body></html>
Underscore and JQuery are included first, Then we pull in Backbone. Finally our code lives in app.js.