Full Stack Web Development with Backbone.js

Chapter 7. Synchronizing State

The previous chapters offered a preliminary glance of state in the browser. We covered the basics of Backbone views, models, and collections to manage state. But to build a real app, you must connect your collections and models to an API. These are the enhancements of Backbone collections that we haven’t yet discussed.

One of the main purposes of a Backbone collection is to fetch new information (or state) over a network. To understand the basic ideas here, you need to understand a bit of RESTful principles for APIs and how Backbone maps these internally to the API of collections and models.

In the case of the Munich Cinema example, when a collection manages tens or hundreds of movies, new questions on filtering and sorting them arise. Dealing with more data also takes an important role in our customer’s project: Munich Cinema wants to allow its customers to search for movies by release date and genres. To help customers decide which movies to watch, Munich Cinema prepared ratings of movies that might further distill a movie search.

So we must expand our application with a number of features. In this chapter, we’ll cover the following:

• Setting up a mock of a RESTful API
• Enabling fetching of remote data from an API
• Dealing with time effects around fetching
• Understanding the basics of hosted API services

Fetching Remote Movies

So far, the examples were based on a few movies directly linked with the initial page load. Munich Cinema’s movie program is much ...