Complex JS applications with Backbone

13 February, 2012 (13:42) | Blog, Technical | By Marwane Kalam-Alami

While working on EasySOA, we had the opportunity to use Backbone.JS, a well-thought MVC framework that has rapidly grown into one of the most popular JavaScript projects ever (reaching for instance the top 10 most watched projects on Github as of this writing). Here is some feedback on the library, after using it for our Service Discovery by Browsing prototype and a few other tools.

Pros: Solid MVC at low cost

While Backbone is a quite lightweight library (15kb when packed), it provides an interesting approach to quickly set up MVC-structured applications. Being very well documented, and having a few extensive examples, it allows to quickly benefit from some or all of its modular features. Indeed, Backbone packages several concepts that can be used more or less independently:

  • an intuitive events system
  • a concept of “views” (a mix to classic MVCs’ controllers & views) which mainly allows to use events with less verbose & in the context of a DOM element, and defines a few conventions, notably for the use of templating (through its dependency Underscore.js)
  • concepts of “models” & “collections“, that doesn’t provide that much by itself (most features come from Underscore’s), but become powerful when used to interact with the server, allowing once set up to make seamless CRUD operations, in a manner compatible with REST APIs or anything one wish to implement
  • client-side routing and history control, that ease the management of single-page applications

By providing all of this in a modular approach, Backbone acts more like an “MVC toolbox”, that provides a mix of take-it-or-leave-it features and good practices. After using it, it actually felt like the biggest added value lied in the combination of Backbone’s views & events: at the cost of a heavy coupling with the library, it can provide very easily some structure to any JavaScript application, turning the common packs of nested jQuery callbacks into clean, structured classes.

Pros/Cons: Tailored for REST & Rails

As the authors themselves explain, the framework has been at first extracted from an application built with Ruby on Rails. Thus, the framework works very well when it comes to interacting with the server through nicely designed, resource-oriented REST APIs, and fits perfectly in “simple” UIs where one piece of data matches one part of the UI.

However, we are left with poor information on how to handle more complex situations, for instance when nested views would be valuable. In these cases when the model-view relation is far from being straight-forward, trying too hard to fit in Backbone’s approach can potentially result in lots of code and a few headaches ; the framework is certainly very useful to streamline the development of web apps, but it doesn’t have answers for everything. While the official website claims itself that Backbone often provides several ways to handle problems and doesn’t impose any client-side pattern, using it is certainly much more straightforward when dealing with Rails-friendly applications.

Cons?: Not a boilerplate

Backbone claims to “give structure to web applications“, and it does so quite well. However, when reading this, we would often expect it to be a true entry point for building applications, a sort of boilerplate to build on. But this framework made the choice not to be that ambitious, and leaves users without answers when it comes to certain common problems, the most obvious one being how to organize the code ; indeed, there is nothing provided to manage modules. Like often in the JavaScript world, we are here left to investigate on the numerous other libraries, and choose what to integrate according to the needs. In the case of our module problem, should we turn to something like require.js? Being as big as Backbone itself, that solution would be overkill.

Fortunately a few tailor-made solutions recently arose, including a lightweight suggestion by Irene Ros and Tim Branyen to manage the code into modules. Their work eventually led to the set up of a boilerplate, initiated as late as January 2012. Thanks to this kind of contributions, which here covers the modules management, but also testing and distribution, Backbone can be considered at last a complete framework, making it an even more relevant choice among the plethora of MVC frameworks.

Feb. 28 update: See also the Chaplin project for another base to build large single-page Backbone apps.


Pingback from EasySOA » A single-page JS app on top of Nuxeo’s WebEngine
May 2, 2012 at 12:22 pm

[...] result is a basic document browsing site, with its client-side logic built with Backbone.js (see previous post), and some eye sugar brought by the Isotope library. In order to keep the code base clean, we also [...]

Write a comment

Couldn't connect to server: php_network_getaddresses: getaddrinfo failed: Name or service not known (0)