Don’t make me think is mentioned by Steve Krug as the most important principle to design user interfaces. When you browse a list of movies for example, it is nice to look at pictures first, and to see details of a movie only upon request. In a web browser, the user experience of browsing movies results into capturing and processing events.
Backbone.js can be used for many different uses cases, but browsing items in a search result set is a common one. In this chapter, you get to meet Munich Cinema, an imaginary cinema, that wants to provide a new search page. The requirements of Munich Cinema are layout first. Before coding, it can be helpful to start with a sketch of an interfaces on paper. This can help you to structure your software later. A basic wireframe for interaction ideas will be provided, and you will learn how to model the interface with Backbone components.
We explore the basic contexts for Backbone.Views and Backbone.Models. We also touch the question of the Model-View-Controller (MVC) pattern in Backbone.js. Since Backbone.js has no controller, Backbone’s “MV*” pattern will be explained.
The examples in this chapter walk you through the basics of rendering a view, triggering state changes with events, and notifying views to re-render. We build on top of the CommonJS module format from the previous chapter.
The following topics will be discussed: