January 23, 2021
Hot Topics:

Backbone.js: Apply MVC to Your JavaScript-driven Applications

  • By W.J. Gilmore
  • Send Email »
  • More Articles »

I'm probably seriously dating myself with this question, but have you ever seen the movie "Can't Buy Me Love"? It's about a high school outcast named Ronald Miller who teams up with a cheerleader to raise his social prominence. JavaScript was in many ways the Ronald Miller of programming languages until Jesse James Garrett coined the term Ajax back in 2005. Suddenly, JavaScript had a new lease on life, and thanks to an extraordinary amount of attention over the past several years it has risen to become one of the most sought-after programming languages in the world.

In fact, many of today's hottest Web technologies are JavaScript-based, among them jQuery, CoffeeScript and Node.js. These technologies open up the possibility to build Web applications that are entirely JavaScript-driven (on both the client and server side)!

As JavaScript-driven applications become increasingly sophisticated, developers have been hard at work devising tools that help them to design rock-solid application architectures. One such tool is Backbone.js, which helps you to apply the MVC principle to your JavaScript applications. In doing so, you can greatly reduce the complexity otherwise involved in synchronizing changes between your application's view, logic, and database. In this article I'll introduce you to Backbone.js, highlighting some of the key features that make this library so appealing.

Installing Backbone.js

Despite its considerable capabilities, Backbone.js is packaged into a 3.9kb file. Head over to the Backbone.js site to download the latest production version. There you can also optionally download a commented version if you'd like to browse the source. You'll also need to download Underscore, a JavaScript utility library that offers dozens of useful helper functions. For the following examples we'll also use jQuery, which I'll reference via the Google CDN. Finally, we'll use a localStorage adapter in order to persist the notes on the client's machine. Be sure to reference the files in the correct order, as demonstrated here:

<script src="http://www.google.com/jsapi" type="text/javascript" target="_blank"></script>
  <script type="text/javascript" target="_blank"></script>
    <script src="underscore-min.js" target="_blank"></script>
  <script src="backbone-min.js" target="_blank"></script>
<script src="backbone.localStorage-min.js" target="_blank"></script>

Creating a JavaScript-driven Online Notebook with Backbone.js

The Backbone.js website includes a great Todo list example, however if you're just starting to explore the library even this simple example can be a bit overwhelming. So in this section I've created a simplified variation of the example, capable of merely updating the page to reflect new notes. The finished project is presented in Figure 1. Once you're able to grasp this simple example, definitely consider checking out the Todo list example, as it incorporates numerous other useful features.

The online notebook application consists of three distinct components: a model representing a note, a model representing a series (collection) of notes, and a model representing the notebook, or application.

A Persistent Web-based Notebook Built with Backbone.js
Figure 1. A Persistent Web-based Notebook Built with Backbone.js

The first step you should take is to create a model representative of a note. This model will define the note's properties and behaviors. We're going to keep this simple and define one single property:

window.Note = Backbone.Model.extend({
  snippet: null

Originally published on https://www.developer.com.

Page 1 of 2

This article was originally published on May 13, 2011

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date