Forward Advance Learning

Welcome to Backbone

Backbone is a the grand-daddy of all the JavaScript MVC frameworks. It's the progenitor of frameworks like Ember, Angular, even Meteor. It's a sensibly put together library full of tools to help you organise your web application into models and views, a toolkit for tidy JavaScript.

You can use it to enhance your existing site: to add interactivity to a form for example; or you can go all out and create a single page app (SPA), where the entire site is generated client-side using JavaScript.

Backbone comes packaged as a single JavaScript file which you link in the header of your page. It lives in the browser, and says very little about your server. Your server should ideally expose a restful JSON API, but this is not a requirement.

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.

Architecture (MV*)

Backbone provides you with a Model View (MV*) architecture. Unlike other JavaScript frameworks, there are no controllers. The view works a little like a controller.

Models

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.

Views

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.

Collections

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.

Router

The Backbone Router uses JavaScript pushstate to change the URL in the address bar, allowing you to create an entire website clientside without hitting the server.

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.

Getting started

Backbone has a hard dependency on Underscore (_), and a soft dependency on JQuery.

Underscore is

...an excellent little library of useful JavaScript utility methods, including functional style array and object manipulation, plus genuinely useful utility methods.

Many of these methods (such as map and filter) are gradually being incorporated into core JavaScript.

Download here: http://underscorejs.org/

JQuery

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/

Boilerplate

A super stripped down Backbone boilerplate for local development might look something like this:

<!DOCTYPE html>
<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.