Visualization projects are usually implemented as single page applications. Single page applications usually load their code when the browser loads the page and make requests to retrieve additional data when the user interacts with the page, avoiding full page reloads. The application can be used while the request is fulfilled, thereby improving the user experience.
Single page applications generally have a single payload that retrieves the scripts, styles, and markup required to create the interface. When the user interacts with UI components and additional data is required, the client-side code makes asynchronous requests to the server in the background and updates the corresponding elements when the data is ready, allowing the user to continue using the application during the request.
This increase in the complexity of client-side applications has led frontend developers to improve the architecture of client-side components. One of the most successful designs to face these challenges is the MVC pattern and its many variations.
In this chapter, we will cover the basics of the Backbone library and use D3 with Backbone to create a stock explorer with several components interacting between them, maintaining a consistent visualization state. We will also learn how to update the application URL to reflect a particular state in the application, allowing users to create bookmarks, navigate, and share the application state.
Backbone is a JavaScript library that helps us structure applications by implementing a version of the MV* pattern, which helps us separate different application concerns. The main Backbone components include models, collections, views, and routers; all these components communicate among themselves by triggering and listening to events.
The only hard dependency of Backbone is Underscore, which is a small utility library that provides functional programming support for collections, arrays, functions, and objects. It also provides additional utilities, such as a small template engine, which we will use later. To use the Backbone router and manipulate the DOM, jQuery or Zepto must also be included.
The Events module can be used to extend an object, giving it the ability to listen and trigger custom events, such as listening for key presses, or sending an event when a variable changes. Backbone models, views, collections, and routers have event support. When we include Backbone in a page, the Backbone object will be available, and it can be used to listen or trigger events.
In Backbone, a model is a data container. Model instances can be created, validated, and persisted to a server endpoint. When an attribute of the model is set, the model triggers a change event. The granularity of the change events allows observers to listen for a change in a particular attribute or any attribute in the model.
Besides being data containers, models can validate or convert data from its original format. Models are ignorant of views or external objects observing its changes; a model only communicates when its attributes are changed.
Collections are ordered sets of models, which are useful in order to manage model instances as a set. If a model instance in the collection is modified (added or removed), the collection will trigger a change event (triggering the add and remove events in each case).
Collections also have a series of enumerable methods that are useful to iterate, find, group, and compute aggregate functions on the collection elements. Of course, collections can be also extended to add new methods. Collections can be synced to the server in order to retrieve records and create new model instances from them and to push model instances created within the application.
The views are components that render one or more attributes of a model in the page. Each view has one DOM element bound to it and a corresponding model (or collection) instance. Usually, the views listen for changes in one or more attributes of a model. Views can be updated from each other independently when a model (or some attributes of a model) changes, updating the view without redrawing the entire page. Note that when using Backbone models and views, the DOM elements in a view don't have references to the corresponding data elements; the view stores references to the DOM elements and the model. In D3, the DOM element contains a reference to the data bound to it.
Views also listen for DOM elements inside the container element. We can bind DOM events in a child element to a view method. For instance, if a view contains a button, we can bind the click event of the button with the custom toggleClicked method of the view. This is commonly used to update a model attribute.
In most Backbone applications, the views are rendered using templates. In most of the views, we will use D3 to render them instead of templates, but we will also include an example of a view that has been rendered using Underscore templates.
The Backbone router allows you to connect URLs to the application, allowing the application states to have URLs. This allows the user to navigate between visited application states using the browser's back and forth buttons, save a bookmark, and share specific application states.
Backbone is a subject on its own and we can't cover all its features in one chapter. It's a good idea to invest some time learning Backbone or one of its alternatives.
Tip
There are a great number of resources available to help you learn Backbone. The most complete references are the following:
- Backbone Fundamentals (http://addyosmani.github.io/backbone-fundamentals): This book, written by Addy Osmani, describes the Backbone components in depth and has two complete examples of Backbone-based applications.
- Backbone (http://backbonejs.org): The official website contains the documentation of the library. The source code of Backbone is also extensively commented on.
- TodoMVC (http://todomvc.com): As the number of JavaScript MV* frameworks and libraries that allow you to structure an application can be overwhelming, the TodoMVC project contains the same Todo application that was implemented in the most popular MV* JavaScript frameworks available.