Anders Grendstadbakk

Getting started with Backbone.js

I have wanted to look at JavaScript frameworks for some time now. I like the idea to only send JSON data from the server and let the client do the rest. But there is a jungle of frameworks, so it is hard to get information about which one you should choose.

I started on a small project for a client at work where they wanted to list courses and let people sign up. It was going to be a one-page application with courses listed on the left and the selected course on the right. This page is built with Drupal and my usual way of solving this would be to create all the markup with PHP and output it. Then i would use jQuery to switch between courses and do stuff. It was also important that you could link to a single course, so this would mean GET-variables or something.

I have been using sites like Wunderlist and Godt.no (Norwegian site) and i like how they work. Both use Backbone.js. So because of this i choose Backbone.js for my project. With Backbone.js i can have templates for the project and it has built-in router functionality with hash-urls (and pushState when older browsers no longer needs to be supported).

When i started with Backbone.js i took a look at the TodoMVC project. They have lots of example apps written with lots of frameworks. It’s a good resource for lots of JavaScript frameworks. My first thoughts when looking at Backbone code was that it was very cryptic and hard to understand. It took a while do dissect the code and understand the different parts.

I learned that the best way to understand it (for me) was to break down the examples, modify them and create small projects. For me this works way better than reading the documentation (but i think the documentation is important for reference).

I plan to write about the different parts of a Backbone application here on my blog. The first one will be about the “model”.

Further reading