Get Started with Backbone.js

We can’t discuss JavaScript frameworks without featuring Backbone.js.

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Backbone certainly won’t give you any superpowers. It’s still JavaScript, so you can’t do anything with it that you couldn’t do with JavaScript. All it does give you is some convenience and a bit of structure so that when you’re working a project that involves a lot of data or a lot of processing you have a little bit more flexibility without having to spend hours trying to figure a way to put together, model, and render out a list item.

What are your thoughts on Backbone? There seem to be a lot of arguments for and against its uses – tell us how you feel!

 

JGB: I’m here with Louis Simoneau, who is a web developer at Flippa, and he’s going to tell us all about Backbone JavaScript today. Tell me, Louis, what exactly is Backbone.js?

Louis: Backbone is a JavaScript framework that’s commonly referred to as an MVC framework or model view controller, which will be familiar to anyone who does any kind of programming on the service side, but is a relatively new approach to doing JavaScript programming. So what it gives you is a little bit more structure to your JavaScript code if you’re doing something that’s a little bit more complex than what you traditionally do with, just, say, line scripting and jQuery.

So whereas, if you just wanted to select an item on the page and make it either disappear or appear or change some styles on it, some quick and dirty jQuery might be a great approach if you have a lot of things on your page that have sort of a data structure to them. In the typical canonical example of a to do list, each item on the to do is model. It has certain attributes that you can set and read.

You can group it into a collection, and you can associate it with views which allow you to sort of render it out into HTML, without necessarily having to go to the server and get it to return a little snippet of HTML that represents your to do. All of that is on the client-side, based on JSON data that you get from the server.

JGB: So when exactly would I use Backbone.js, then?

Louis: I’ve touched on this a little. The main use case for something like Backbone is when you find yourself hitting the limits of your ability to organize your code. If you find yourself writing a lot of boilerplate to sort of grab data out of JSON that you’re getting from the server and bootstrap it into HTML, if you’re doing a lot of concatenating strings together to make markup that represents an object.

So every time you want to add a to do list to the markup, if what you’re doing is getting the text of the to do to the person that is entered into a form and then sort of going to the steps of putting an LI element on either side of it, and doing this is garbage. You’re doing it kind of in a very ad hoc fashion. That’s sort of one of the cases where something like Backbone could come in handy, because it lets you just sort of say, this is a template that’s associated with the to do model.

All I have to do is create a new to do model, create a view that represents it, call render on the view, and then all this stuff that set up in the background just is ready to happen. So it sort of provides you with this all-purpose glue that you can use to tie together your data structure that comes in from your JSON to your output view via the sort of intermediate of having a really good programmatic representation of the data in the form of a model.

JGB: What are the benefits of Backbone.js?

Louis: The benefits will largely be code structure. You’ll find yourself writing sort of these reusable chunks of code that anyone, as I said, who’s familiar with writing code on the service side takes for granted, but that have not been really available to use on client side. Obviously, all of this has always been possible if you’re willing to roll your own framework in JavaScript. But it’s really nice to launch into a new project where you have certain conveniences already afforded to you by a framework that you can just pick up and use.

JGB: So what can you do with Backbone.js?

Louis: It doesn’t give you any superpowers. It’s still JavaScript, so you can’t do anything with it that you couldn’t do with JavaScript, rolling your own or building on top of jQuery or any other framework. All it does give you is some convenience and a bit of structure, so that when you’re working a project that does involve a lot of data or a lot of processing, you just have a little bit more flexibility without having to spend hours trying to figure a way to put together model and render out a list item.

JGB: Are there other alternatives to Backbone.js, then?

Louis: There’s one called Spine, which is very closely modeled on top of Backbone. So it was a guy who liked the idea of Backbone and took a lot of the things from it, but made some adjustments to things he thought could be better done. Backbone and Spine are both on the very lightweight side, so they give you the bare minimum required to bootstrap your way into a JavaScript application. Then there’s some more heavy duty options. Ember.js and Angular.js are two
that I’m familiar with that just are very much more feature-full.

But at the same time that comes with a lot of weights and a lot of functionality you might not need. So for most people, just getting started, if you want to learn a JavaScript framework, I think Backbone’s a good place to start. Because one, it’s very well-documented. Two, it’s very widely adopted. It’s probably the most used of the JavaScript frameworks, and that means there is a lot of support materials and forum discussions and question and answers that you can find online.

Then, in addition to that it’s a really small lightweight library that only provide the bare minimum, so you don’t have to learn a lot of stuff that you might not need, and you can actually read through the whole source code. The source was extremely well-commented and it’s very short. You could read the whole library in a few hours and that’s a great way to not only learn how to use it but also learn how to structure JavaScript code really well that is really well-built.

JGB: So what kind of background you need to use Background.js?

Louis: Backbone is a JavaScript library. You obviously need to be familiar with JavaScript because there are certain – you can’t get around not knowing the language. That being said, if you want to take backbone as an opportunity to learn JavaScript that’s not unreasonable either because it is really well-structured. You’ll probably learn good habits from getting your first JavaScript project in Backbone just because you’ll be following these sort of established structural conventions.

If you were to set off on your own probably you have all kinds of spaghetti code willy-nilly all over the place. So, yeah, you need some basics of programming knowledge beyond simple really elementary client side scripting.