Blog

Beginner's mistakes with Backbone.js

by Tom
16 Apr, 2012

For a recent project we decided to use Backbone.js to provide structure to the client side of our RESTful Web application. Backbone.js is very much the vogue right now and since we already had an internal toy project that used Backbone.js we expected no big problems.
But of course we faced problems. No matter how good the example material is, it’s no substitute for actual experience. We gained this experience through our mistakes, and while there are already a number of articles online about the strengths, weaknesses and pitfalls of Backbone.js that I will include below, another article hopefully means good advice to those new to Backbone.js and a nudge in the right direction.

If you are new to Backbone.js (and the underlying Underscore.js), then Addy Osmani’s book-in-progress is a great place to start.

Don’t work outside your model

Probably the most important thing to remember is that Backbone.js is client-side MVC/MVP framework and you should use it as such.  This means that everything your application does is done through Backbone.js. A popular view on Backbone.js is that its applications should be event-driven. Views should not alter themselves or reference other views. Instead, all actions should have appropriate events that alter the state of the model, which then takes care of updating the view(s). Communication between views can be done using an event aggregator.
If you don’t stay in this backbone-centric mindset you might start to include small pieces of page-specific script in your templates that your model does not know about. This might put your model and view in an inconsistent state, and why should you execute scripts from your template when you can bind events to any object with Backbone.js?

Don’t manipulate the router

The Router has two main functions in Backbone.js. One is allowing a URL to be directly accessible from outside your site. The other is to add url’s to your browser’s history for better navigation. If for some reason you need to manually direct the router to another url this should only be because there is a need to have this url in your browser’s history, and almost never just to simulate a user’s action taken by clicking. The intended flow of control should go from the views event handler to the model and back to the view via the views event listener. This excellent article by Derick Bailey helped to understand Backbone’s function.

Keep Backbone.js in mind when designing your REST interface

As documented in its .sync function and in this post, Backbone.js works well with REST, especially when the interface is designed properly around the use of nouns, id’s and the standard CRUD operations used on them.
If your REST design does not quite match, then a combination of the model’s .url function and/or routes can do the trick, but you’re better off sticking to Backbone’s suggestion (and good REST design in general).

Conclusion

Backbone.js is a great framework to use when your client-side JavaScript is reaching that icky-spaghetti-with-mudball-sauce-point. While it can be argued that its documentation isn’t always clear enough about the intended uses of the models, router and views, there is plenty of information available to help you along the right path for your application. I, for one, can’t wait to use Backbone.js again and put these experiences to practise.

by Tom
Tom Bestebreurtje joined Xebia on November 7, 2011 as an Apprentice Consultant. This means he will spend time learning about the many technologies employed at Xebia, as well as finding new and interesting ones to use. He studied at the VU University Amsterdam where he received a Masters degree in computer science with a specialization in multimedia. Prior to joining Xebia, he co-founded his own business where he developed an online shopping blog. Tom is interested in mobile computing, augmented reality and the visualization of information. His spare time is most likely spent on games, music, guitars and travel. Destination unknown and open to suggestions on all accounts.
guest
0 Comments
Inline Feedbacks
View all comments

Explore related posts