Full Stack Web Development with Backbone.js

Chapter 2. Kick-Starting Application Development

Don’t make me think is mentioned by Steve Krug as the most important principle in designing user interfaces. When you browse a list of movies, for example, it is nice to initially see just the film posters and for the movie details to be visible only upon request. In a web browser, the user experience of browsing movies results involves processing events that result from input devices such as a mouse or keyboard.

Backbone.js can be used for many different use cases, but browsing items in a search result set is a common one. This chapter introduces Munich Cinema, an imaginary cinema that wants to provide a new search page. The requirements of Munich Cinema are layout first. Before coding, it is advisable to start with a sketch of an interface on paper. This can help you to structure your software later. We’ll use a basic wireframe for interaction ideas, and we’ll learn how to model the interface with Backbone components.

We explore the basic contexts for Backbone views and Backbone models. We also touch on the topic of the model-view-controller (MVC) pattern in Backbone.js. Because 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:

• Exploring a UI concept ...