Steve Rydz

an introduction to backbone

JavaScript frameworks are everywhere. Some popular choices today are React, Ember, and Angular. All have their benefits, but in my experience they are all very opinionated, which is why I tend to lean towards Backbone when a framework is required.

what is backbone, and why use it?

Backbone is a framework that helps you add structure to your code. For many it serves as a great introduction to creating more modular front-end applications as its barrier to entry is significantly lower than many of its competitors.

Backbone makes it easy to bind data to your views using models or collections, which can then be passed into your templates. You can use as much (or little) of Backbone as you like, which is a good way of easing into understanding how it works.

backbone basics

Backbone has a few core concepts that it’s important to grasp when building an application, which are:

  • Models
  • Views
  • Routers

models

Models contain the data and surrounding logic for an application. For example you could use a model to represent a band member:

var BandMember = Backbone.Model.extend({});

var bandMember = new BandMember({
  name: 'Jimmy Page',
  role: 'Guitarist'
});

// Inspect model in the console
console.log(JSON.stringify(bandMember));

The initialize method is called each time a new model is instantiated:

var BandMember = Backbone.Model.extend({
  initialize: function () {
    console.log('This model has been initialized');
  }
});

// This will show the above message in the console
var bandMember = new BandMember();

You can also set default values for a model:

var BandMember = Backbone.Model.extend({
  defaults: {
    name: '',
    role: '',
    band: 'Led Zeppelin'
  }
});

You also have getters and setters to set or retrieve data from the model:

var BandMember = Backbone.Model.extend({
  defaults: {
    name: '',
    role: '',
    band: 'Led Zeppelin'
  }
});

var bandMember = new BandMember({
  name: 'Jimmy Page',
  role: 'Guitarist'
});

// This will log out the `name` property from the model
console.log(bandMember.get('name'));

// Sets new values for `name` and `role` properties in the model
bandMember.set({
  name: 'John Paul Jones',
  role: 'Bassist'
});

views

In Backbone, views contain the logic involved in presenting the models data to the user. In the MVC world this would be done by a controller. Backbone isn’t an MVC framework. In fact it’s closer to the MVP pattern.

From a code standpoint, views are structured in a similar way to models. They have an initialize method that is called on (you guessed it) initialization, an events object, and properties for the template such as the tag name you want to use, and what the template is:

var BandMemberView = Backbone.View.extend({
  tagName: 'div',
  template: _.template('A template'),

  initialize: function () {
    console.log('This view has been initialized');
  },

  events: {
    'click .button': 'doSomething'
  },

  doSomething: function () {
    console.log('Something has been done');
  }
});

var bandMemberView = new BandMemberView();

routers

A router is a way for you to link parts of your application to a URL, so the correct view will be loaded when visiting a specific URL and the URL will be updated if that view changes.

Here’s an example of a router:

var AppRouter = Backbone.Router.extend({
  routes: {
    '': 'root',
    'about', 'about',
    'contact', 'contact'
  }
});

var appRouter = new AppRouter();

appRouter.on('route:root', function () {
  homeView.render();
});

appRouter.on('route:about', function () {
  aboutView.render();
});

appRouter.on('route:contact', function () {
  contactView.render();
});

There is more to Backbone than this, but these core concepts should get you quite a way. If this has got you more interested in the framework I encourage you to take a look at the documentation and see for yourself what it can do.

If you enjoyed the read, drop us a comment below or share the article, follow us on Twitter or subscribe to our #MetaBeers newsletter. Before you go, grab a PDF of the article, and let us know if it’s time we worked together.

blog comments powered by Disqus