Getting your head around Backbone.js

Truth is that I’m still a beginner on this and I’m still learning, but since I have found some resources and did a bit of study, here is what I could gather so far.

To be able to understand fully how backbone.js worked I have decided to do a small compare with CakePHP MVC structure, so I have started an example with the following directory structure:

  • app
    • controllers
      • // extend Backbone.Router
    • models
      • // extend Backbone.Model
      • collections
        • // extend Backbone.Collection
    • views
      • // extend Backbone.View
    • libs
      • js
        • jquery files
        • backbone.js
        • underscore.js
        • bootstrap js files -> these weren’t loaded on the main index.php file because of conflict, couldn’t figure out why so far, but I will look into it
      •  css
        • bootstrap css files
      • img
        • bootstrap img files
    • index.php

The index file was a simple file that loaded all required scripts and the only requirement is to load the underscore.js file prior to the backbone.js and, off course, loading your controllers, views, models, collections, after these.

The controllers are called “routers” on backbone js. At some given point they were called controllers, but the naming convention were changed because some confusion. In one of the links that I will paste bellow have more info about this.

The views can work just like the CakePHP views, the only real big difference is that the part that render the “view” is under this view file. In another words, the Backbone.View.extend is both a view and a controller renderer.

The models are a bit bigger concept than CakePHP. The models are split in Models and Collections. To explain this better consider that User is a model and Users is a collection of User, so when you do a Users.get it would return all objects from the User model that is stored.

I have just started to scratch the surface from Backbone.js, so don’t take anything for granted, but here are all links that I’m using at the moment as reference. They are helping me, so they might help you as well:


A few weeks after I have 1st written this post I have got an excellent tutorial of how to handle Backbone.js. It is all in Portuguese (Brazil), but with a little Google Translation the tutorial should work perfectly for you.

Here is the link:



About mcloide

Making things simpler, just check: View all posts by mcloide

One response to “Getting your head around Backbone.js

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: