Backbone Basics

My Backbone notes from Hack Reactor and self-study. This expects that you already have basic knowledge of MVC frameworks.

Backbone attempts to remain agnostic and leaves many of the patterns up to the implementors to figure out. It is very flexible (and can also be a bit of a headache).

What Backbone offers

Models & Collections | separate interfaces for managing data on the client side
Custom Events | easy way to deal with changing data in the app
Sync | single point of entry for all AJAX requests
Views | for event delegation
Developer Ergonomics | it's easier to test the code

Prototypal inheritance and extension

Big picture item that's important to understand when using Backbone is prototypal inheritance and extension. Backbone constructors are often called classes despite the lack of a class keyword in JavaScript (though ES6 will remedy this). Backbone sets this up for you.

To create a class in Backbone, you set it to the Backbone class and extend it.

var MovieModel = Backbone.MovieModel.extend({...});
var movie = new MovieModel({
	title: 'Shawshank Redemption',
    year: '1994',
    director: 'Frank Darabont'

var ComedyModel = MovieModel.extend({...});
var SuspenseModel = MovieModel.extend({...});

Here I created a MovieModel class that can be duplicated. But you can also spin off other 'classes' of the MovieModel (ComedyModel, SuspenseModel) that will inherit whatever properties off of MovieModel but also have properties unique to themselves. This continues the prototype extension chain all down the line.

Constructors vs instances

Constructors are basically the core Backbone classes--they are your blueprint to your application. The ingredients of your app before they are used. You can extend off of them to create new instances of those constructors.

Instances are when you create instances of those constructors using the new keyword. It contains the statefulness of your application. If you have a model, it's the thing that makes those AJAX calls and stores it down in your server.


These are initial values of the attributes set on a Backbone class.
You can override both the constructor and the initialize methods.

var View = Backbone.View.extend({
	initialize: function() {
    	console.log('hello world');

var view = new View();
// => 'hello world'

When an instance is created with the new keyword, the code gets run on initialization because a function is written on the initialize method. In other words, initialize is called inside the structure's constructor function and will be invoked when the model is created. It is for after Backbone sets everything up.

var MovieModel = Backbone.Model.extend({
	constructor: function() {
    	this.director = new DirectorModel();
        Backbone.Model.apply(this, arguments);

Backbone already has constructor functions that are defined and doing things--the internal constructors set up the Backbone plumbing.

In a model, there are several things that happen within the internal constructor that are very important. You can override these constructors, like when you need to create sub-models inside of a model, but you have to be careful with these since it will interfere with the actual running of Backbone. The last line of the constructor is pretty important--we are calling the parent constructor (equivalent to super).

Event system

The event system is present on all Backbone objects--anything invoked with the new keyword or with extend has it.

The events are synchronous. When events are triggered, they will be invoked before the next line happens.

You have to bind event handlers for the event before the event occurs. It's a little different than events like document.ready in jQuery. If you don't have the event handler set-up in Backbone, that code won't run until the next time the event is triggered.

object.on("alert", function(msg) {
  alert("Triggered " + msg);

object.trigger("alert", "an event");


Obviously, the Backbone docs

Constructor vs. Initialize -- Stack Overflow