Skip to main content

Backbone.js: In the Beginning, There Was JavaScript

Posted by manning_pubs on June 6, 2013 at 11:14 PM PDT

Backbone.js: In the Beginning, There Was JavaScript

by Samuel M. Breed, author of Backbone.js in Action

Backbone is a library for structuring web applications. Since the dawn of the Internet, forward thinking developers have known that it is more than just a means of serving static HTML documents, but rather a platform made for applications. JavaScript has evolved into an ecosystem that's awash with libraries and frameworks for helping you write rich, interactive front-end experiences; a modern web developer has many tools to choose from. The trouble is that there are actually too many choices to make, and it is easy to end up with a messy, unstructured application on your hands. In this article, based on chapter 1 of Backbone.js in Action, author Samuel Breed explains how Backbone helps to solve this problem in a way that is lightweight and flexible. Save 40% on Backbone.js in Action with Promotional Code bbjsjn, only at

Even after almost two decades of consistent usage, there's still a lot that JavaScript can't do. There's even more that's not terribly obvious when you set out building applications with it, especially when it comes to assembling an interactive, single page user experience. Backbone gives you generic tools for helping organize and structure front-end applications. By focusing on mechanisms for managing your data and structuring interfaces around a synchronous event system, Backbone provides structure in a world that encourages you to created tangled piles of anonymous callbacks and jQuery selectors.

This article explores the concepts that Backbone uses to build a foundation for applications. In order to really know a person or a discipline or library, you first must know where it came from.

When it was first conceived at Netscape in 1995, JavaScript was meant to give developers a way to interact with web pages in the browser. Its primary programming interface is the Document Object Model (DOM), a standardized set objects, functions and properties that represent the state of the HTML document in the browser. Commonly referred to as the DOM, this set of APIs is what allows JavaScript access to manipulate a page's content and to respond to user interaction. The DOM is a mess for several reasons, and this sentiment inspired libraries like jQuery to simplify how you interact with web pages. But with great power comes great responsibility: many developers have fallen into the trap of tying up the state of their front-end application in the DOM by embedding information in markup, using inline AJAX calls in a procedural fashion or otherwise making a bit of a mess when wiring up interactive, dynamic applications.

For many years, JavaScript was viewed as a toy language that was not well suited for doing much more than creating pop-ups, occasionally validating a form, or making some text animate across the page. When not being conflated with Java, JavaScript took a backseat role until, as if from nowhere, large, mature JavaScript applications began to pop up everywhere. Dynamic, single page applications like Gmail and Google Maps showed that rich user experiences were not only possible to implement in JavaScript, but that those experiences could offer clean and boundary pushing user experiences that made traditional multipageload apps look impossibly clunky by comparison.

Recently, the pace at which JavaScript evolved as a language had increased dramatically. Fueled by competition between browser vendors, JavaScript performance was pushed forward in leaps and bounds, widening the doors of what is considered possible and practical to do in JavaScript. New standards and specifications like HTML5, CSS3, and ECMAScript 5 have led to a new generation of applications that are characterized by fast, well-designed user experiences that have come to define some of the most trafficked sites on the Internet. Simultaneously, the number of libraries, frameworks, and tools for writing JavaScript underwent a similar renaissance. Open source projects like jQuery and Underscore created layers of abstraction on top of the DOM and the