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.

Models

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',
age:30,
}
});
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:

dave.set({age:31});

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.

Collections

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

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):

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

Routers

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({
routes:{
'user': 'userRoute'
},
userRoute: function() {
// the code to run when http://example.com/#user
}
});
Backbone.history.start();

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.

Conclusion

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

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…