Developing Backbone.js Applications

Chapter 5. Exercise 2: Book Library—Your First RESTful Backbone.js App

While our first application gave us a good taste of how Backbone.js applications are made, most real-world applications will want to communicate with a backend of some sort. Let’s reinforce what we have already learned with another example, but this time we will also create a RESTful API for our application to talk to.

In this exercise we will build a library application for managing digital books using Backbone. For each book we will store the title, author, date of release, and some keywords. We’ll also show a picture of the cover.

Setting Up

First we need to create a folder structure for our project. To keep the frontend and backend separate, we will create a folder called site for our client in the project root. Within it we will create css, img, and js directories.

As with the last example, we will split our JavaScript files by their function, so under the js directory create folders named lib, models, collections, and views. Your directory hierarchy should look like this:

site/
    css/
    img/
    js/
        collections/
        lib/
        models/
        views/

Download the Backbone, Underscore, and jQuery libraries and copy them to your js/lib folder. We need a placeholder image for the book covers. Save this image, shown in Figure 5-1, to your site/img folder.

Figure 5-1. Eloquent JavaScript—our placeholder image for book covers

Just like ...