Backbone.js Wine Cellar tutorial – Part 1: Getting started

One of the challenges when building nontrivial web applications is that JavaScript’s non-directive nature can initially lead to a lack of structure in your code, or in other words, a lack of… backbone. JavaScript is often written as a litany of free-hanging and unrelated blocks of code, and it doesn’t take long before it becomes hard to make sense of the logic and organization of your own code.

Backbone.js is a lightweight framework that addresses this issue by adding structure to JavaScript-heavy web applications.

Self-contained building blocks

Backbone.js provides several classes (Model, Collection, View, Router) that you can extend to define the building blocks of your application. To build an application with Backbone.js, you first create the Models, Collections, and Views of your application. You then bring these components to life by defining a “Router” that provides the entry points of your application through a set of (deep-linkable) URLs.

With Backbone.js, you can organize your code in self-contained entities (Models, Collections, Views), in short—no more free-hanging and unrelated blocks of code.

Data binding

With Backbone.js, you bind Views to Models so that when a Model’s data changes, all the Views bound to that Model automatically re-render. There is no more need for complex UI synchronization code.

Elegant REST integration

Backbone.js also provides a natural, magical, and elegant integration with RESTful services. If you expose your back-end data through a pure RESTful API, the operations of retrieving (GET), creating (POST), updating (PUT), and deleting (DELETE) models are incredibly easy using the Backbone.js simple Model API.

In this three-part tutorial, you’ll create a Wine Cellar application that allows users to browse through a list of wines, as well as add, update, and delete wines.

• In this article, Backbone.js Wine Cellar tutorial — Part 1: Getting Started, you define the basic infrastructure. You create a “read-only” version of the application. You’ll be able to retrieve a list of wine and get the details of each wine.
• In Backbone.js Wine Cellar tutorial — Part 2: CRUD, you add functionality to the code to add, update, and delete wines. You leverage Backbone’s powerful REST integration.
• In Backbone.js Wine Cellar tutorial — Part 3: Deep linking and application states, you add complete support for history management and deep linking.

To see a working version of Part 1, the read-only version of the application, click here.

The code for backbone.js is as follows. I suggest that you download the code from my source control site to follow along. The link for this application is in the Requirements section of this tutorial.

Code highlights:

1. WineModel (line 2): Notice that to the code doesn’t explicitly define the attributes (name, country, year, and so forth). You could add validation, default values, and so forth. Learn more on that in Part 2: CRUD.
2. WineCollection (lines 4 to 7): The “model” indicates the nature of the collection. The “url” provides the endpoint for the RESTFul API. This is all that’s needed to retrieve, create, update, and delete wines with Backbone’s simple Model API.
3. WineListView (lines 10 to 25): The render() function iterates through the collection, instantiates a WineListItemView for each wine in the collection and adds it to the wineList.
4. WineListItemView (lines 27 to 38): The render() function merges the model data into the “wine-list-item” template (defined in index.html). By defining a separate View for list items, you will make it easy to update (re-render) a specific list item when the backing model changes without re-rendering the entire list. More on that in Part 2: CRUD.
5. WineView (lines 40 to 49): The view responsible for displaying the wine details in the Wine form. The render() function merges the model data (a specific wine) into the “wine-details” template retrieved from index.html.
6. AppRouter (lines 52 to 71): This code provides the entry points for the application through a set of (deep-linkable) URLs. Two routes are defined: The default route (“”) displays the list of wine. The “wines/:id” route displays the details of a specific wine in the wine form. Note that in Part 1, this route is not deep-linkable. You have to start the application with the default route and then select a specific wine. In Part 3: Deep linking and application states, you will make sure you can deep-link to a specific wine.

Next, read Part 2: CRUD, so that you can learn how to add more functionality to this application.