Backbone of our web app

For our web application we used a javascript framework called Backbone, which helped us to keep our application logically structured. We’ve been able to split JavaScript into nice seperate chunks working together.

Backbone uses models to represent the data that can be created, validated, destroyed or saved. The models can be saved in local storage or on the server as simply as setting the apropriate url value (to a RESTful API) or local storage variable. Making it save in both places at once was a bit trickier but that was something that Neil was handling.

Models come with a set inherited methods and events that makes using models quite easy. Every time you change a value inside a model a change event is triggered. All you need to do is bind it properly to handle it any way you like. When saving you don’t have to worry about doing a PUT or POST or DELETE – the model knows it by itself and accordingly calls the right method.

You can pile up your models inside a backbone collection which comes with its own methods. You can also fetch all models from server with a single fetch call on a collection which is pretty useful. I do really like how simple it is to define the collection and work with it. Just give it a model and you’re ready. Define a url if you want to fetch it and that’s it.

(coffeescript)
class Answer extends Backbone.Model
      ....
class AnswerCollection extends Backbone.Collection
      model: Answer

View in backbone is not a view you would expect in MVC, which can be confusing at first. It actually acts more like a controller. It defines your application logic. It’s handy to define some page views like we did in our application. And views can have any number of sub-views which is pretty handy for displaying different things in different places and handling their inner events in a nice way.

Last major part of Backbone is the Router, which allows you to make it seem like your single-page application is actually multiple pages, with their own URLs by translating your browser URL to whatever you want your web app to do. This was something Luke tackled so I want go into that.

All in all backbone proved to be quite effective JavaScript framework. Not perfect – I won’t lie. We had some issues with binding events where they just didn’t want to bind and displaying things that did not want to display. But we found our solutions – some better, some a bit worse. But in the end we made it work and I think it’s much better then it would be had we not used it.