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

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…