Development

Backbone.js with a Spine – Part 1: The App Object

Joe Hirn — Tandem Alum

last updated June 12, 2013

I’m at the tail end of a project where we used a non-trivial amount of the lovely Backbone.js framework. While the documentation is really pretty good, I think you’re left with quite a bit of freedom on how to design your application. This may cause some struggles with regard to the architecture and consistency of your system.

Our resident JS expert Dayton Nolan and I have established a set of patterns that have proven to work well for us in both in practice and during our internal code reviews. They’re really nothing more than conventions that emerged over time, but they have proven valuable. Doubly so due to the distributed nature of this particular project. We’re also seeing these patterns work on a new client’s app so it’s not just our project that benefits from them. I’ve been thinking long and hard about how to distill these practices and it most certainly isn’t a single blog post. So I’ll ease into this and get the tap running by starting with how we bootstrap our project.

The App Object

In order to keep things organized we use a global object to serve as a namespace for all of the object definitions we’re going to be creating. We assign this to a variable App and initialize it prior to any other objects we define in the application. It looks like this

var App = {
  Models: {},
  Collections: {},
  Views: {},
  Dispatcher: _.clone(Backbone.Events),
};

As you can see, it creates an object with keys for Models, Collections, and Views. Each of these keys are initialized to an empty object and will serve as a reference to the Backbone objects we’re going to create. It looks like this.

App.Models.Activity = Backbone.Model.extend({
    ....
});

App.Collections.Activities = Backbone.Collection.extend({
    ....
});

App.Views.ActivityEditor = Backbone.View.extend({
    ....
});

Later on when we’re going to use these objects we can reference them from our global App object.

var activity = new App.Models.Activity({attribtues:...});

var activityEditor = new App.Views.ActivityEditor({
   model: activity
   el: "#dom-element"
});

This is a simple little pattern it really helps keeping things organized. I wanted to cover it before diving into more specific areas of Backbone, like exactly how we’re using App.Dispatcher that I so conveniently glossed over.

It should be noted this is in no way specific to Backbone and you can apply this pattern in any application you are writing. The initial keys are not limited to what you see here and you can also go arbitrarily deep, but keep in mind you have to use the fully qualified accessor so going more than three levels deep might wear out your keyboard unnecessarily fast.

I’m going to stop here for now. In the next post I’ll talk about Models and Collections, going over some extensions we’ve found helpful and some of the patterns that have emerged.

Tandem – custom software development services with practice areas in digital strategy, human-centered design, UI/UX, and mobile and web application development.

Joe Hirn