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

Are Simple Websites Better For Business?

As web design technologies raise the bar on what it is possible to achieve on a realistic budget, there’s a rising deba…

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …