Introduction to Backbone. js – The Backbone of your Spaghetti JavaScript code

In this introductory session I will give a brief idea about what is the much hyped JavaScript library to-date. (Disclaimer : Having known the Backbone.js you might actually want ‘to date’ it )

Backbone.js is a JavaScript library which, while running in the browser, structures the client-side applications. It’s specifically meant to solve the problems of spaghetti JavaScript codes often encountered by the developers who frequent the realms of JavaScript for a smarter front end UI design.


For most of us working with JavaScript (or its cousin jQuery) the most depressing sight is the spaghetti JavaScript code evolved as an end result of hours of fiddling with complex jQuery selectors and DOM manipulators that tie up the data with the UI elements. This is mostly due to the dynamic changes/modifications introduced in the so-called “pre-planned” and “pre-designed” application. Ultimately, you might find yourself unsure about the different parts of your JavaScript code and about their utility, thus losing the general logical flow and producing thousands of lines of JavaScript in a single file.

At such times of distress, our very own star Backbone.js comes to play to save the day! The bottom line superpowers of Backbone.js is to structure and organise the JavaScript code by properly modularizing it into Models, Views, Collections and Routers (of course, with some additional tricks up its sleeve like the Utility functions, Events, etc. )

Backbone.js is basically a collection of reusable functions that helps one implement the much acclaimed MVC (Model-View-Controller) Pattern for any application by decoupling the application logic from the Front end stuff. While Backbone.js does not provide a separate “Controller” out of the Model, View and Controller of the MVC Pattern, it does provide “Router” that can perform similar tasks as a Controller.

First off, to get the facts straight, one should not confuse jQuery and Backbone since there could be no Backbone without jQuery. Thats right, jQuery is our hero’s mother-ship. i.e. Backbone is fully dependent on jQuery. Then what makes Backbone different from jQuery? Well, it’s the ability of Backbone to structure the code using the proven and tested design patterns to make the code more maintainable and cleaner to look at, that differentiates Backbone from rest of them all. However, one should not mistake Backbone to be the only one providing these functionalities. Also, Backbone.js has a hard-dependency on underscore.js too and uses many of its utility functions. underscore.js can be thought of as a collection of reusable functions that enable smooth functioning of many commonly encountered tasks like HTML Templating.

Some other JavaScript libraries that are comparable to Backbone are listed below :

However, having used Backbone.js, I have never felt the need to look beyond it for anything else.

Having said this, I end my informal introduction to Backbone.js

You can find more information about the intricates of Backbone from the official docs.

In the upcoming posts I will provide a more specific picture of the various parts of Backbone.js and its utility for any JavaScript based application.

Vidhi Zala

Comments 2

  1. Nice work Vidhi.

    You have put the technical stuff in simpler words. This will really be helpful for those who want to get started with backbone.js and want to be spared of formal technical language.

    Keep posting more! Looking forward to read it!

Leave a Reply