Get cracking with Backbone

Default avatar.
July 25, 2013
Get cracking with Backbone.

thumbnailFor years developers have been taking advantage of PHP frameworks like CakePHP, CodeIgniter and even Ruby frameworks based on the MVC pattern. But if you think about it, there haven't been a lot of JavaScript frameworks to help us out in the same way.

Perhaps it's because JavaScript is often looked down on by 'real' programmers, but JavaScript frameworks have always lagged behind a little. Backbone changed that, and as you'll see in this introduction, it uses the MVC pattern to separate JavaScript code and help us create structured applications. In effect, it delivers the MVC pattern to front-end development.

What is Backbone?

Backbone is a lightweight JavaScript library from the same creator as CoffeeScript. But don't let the fact that it's a library make you confuse it with jQuery, Backbone is leagues away from jQuery when it comes to functionality. Backbone doesn't handle DOM elements, which is why many developers use it hand in hand with jQuery; Backbone organizing structure and jQuery manipulating the DOM.

What Backbone does really well is supply structure to your JavaScript applications, and because it works with JSON it's simple to insert into almost any front-end templating system.

The MVC pattern in Backbone

MVC stands for Models, Views and Collections; and in Backbone, with also have Routers.


In Backbone a model represents and entity, so for example, if we are dealing with users, each user would be a Model; it's like a row in a database.

To create a simple model using Backbone we'd type:

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

That code is technically correct but that Model wouldn't have any functionality, so we need to add something for this Model to do when it is instantiated and to do that, we'd use slightly more complex code:

User = Backbone.Model.extend({
initialize: function(){
alert('Welcome to WebdesignerDepot');
defaults: {
name: 'John Doe',
var user = new User;

In the above code, the initialize function will be triggered everytime we create a new instance of this model, after initialize all we've done is add some defaults in case no data is passed in for the Model. With that done, to create an instance of the Model we'd use code like:

var dave = new User({name:'Dave Smith', age:25});

To retrieve an attribute of a certain instance, we'd use:

var name = dave.get('name');

And to change an attribute we'd use:


This is the basics of how Models work in Backbone, there's a lot more they can achieve but hopefully you can see the potential for structuring code already.


Remember I said that a model was like a user? Well, following that analogy a Collection is all the users we have. Collections are in essence sets of Models, and since we already have our user Model, we'll build a collection from there:

var Users = Backbone.Collection.extend({
model: User

Currently this Collection is empty, but it's simple to create some users and add them to the collection:

var barney = new User({ name: 'Barney Stinson', age: 30});
var ted = new User({ name: 'Ted Mosby', age:32});
var lily = new User({ name: 'Lily Aldrin', age: 29});

var himym = new Users([barney, ted, lily]);

Now, if we console.log himym.models we'll get the values from barney, ted and lily.


Views are associated with a part of the DOM, they are designed to be tied to the Models that are essentially the data of the application and they serve to present this data to the end user.

Creating a view is simple:

UserView = Backbone.View.extend({
tagName: 'div',
className: 'user',
render: function(){}

This is the basic structure of a view. The tagName is the element that will be used to wrap the view, the class is set using the className and lastly we add a render function, although in this last case the function was empty. It's the render function that we use to add to the stage, like so:

UserView = Backbone.View.extend({
tagName: 'div',
className: 'user',
render: function(){
this.el.innerHTML = this.model.get('age');

The el element in the render function refers to the wrapper we created and using the innerHTML function we placed the user's age inside the div.

This example hasn't used any templating system, but if you want to you can take advantage of Underscore.js that ships with Backbone.

We can also listen to events by attaching an event listener to our view and in this example we'll create a simple click listener for our div (this code goes immediately after our render function):

'click.user': 'divClicked'
divClicked: function(event){
alert('You clicked the div');


Backbone Routers are used for routing the URLs in the application when using hashtags (#). To define a router you should always add at least one route and at least a function that will run when the desired URL is reached, like so:

var appRouter = Backbone.Router.extend({
'user': 'userRoute'
userRoute: function() {
// the code to run when

This is an extremely simple router that will perform an action when the /#user hash is reached. The Backbone.history.start() method call asks Backbone to monitor the hashtags so that the various states of the site are bookmarkable and can be navigated with the browser.


This article only covers the very basics of Backbone, which can be used to build structured applications in JavaScript. I'd advise you to check out the templating system for use in conjunction with Backbone to see the full potential of this library. I hope that this brief introductions has shown you how useful MVC can be on the front-end.

Have you built applications with Backbone? What kinds of application would you like to build? Let us know in the comments.

Featured image/thumbnail, scaffolding image via Shutterstock.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…