Developing Backbone.js Applications

Chapter 9. Exercise 3: Your First Modular Backbone and RequireJS App

In this chapter, we’ll look at our first practical Backbone and RequireJS project—how to build a modular Todo application. Similar to Exercise 1 in Chapter 4, the application will allow us to add new todos, edit new todos, and clear todo items that have been marked as completed. For a more advanced practical, see Chapter 12.

You can find the complete code for the application in the practicals/modular-todo-app folder of this repo (thanks to Thomas Davis and Jérôme Gravel-Niquet). Alternatively, grab a copy of my side project TodoMVC, which contains the sources to both AMD and non-AMD versions.

Overview

Writing a modular Backbone application can be a straightforward process. There are, however, some key conceptual differences to be aware of if you’re opting to use AMD as your module format of choice:

• As AMD isn’t a standard native to JavaScript or the browser, you must use a script loader (such as RequireJS or curl.js) in order to support defining components and modules using this module format. As we’ve already reviewed, there are a number of advantages to using the AMD as well as RequireJS to assist here.

• Models, views, controllers, and routers need to be encapsulated using the AMD format. This allows each component of our Backbone application to cleanly manage dependencies (for example, collections required by a view) in the same way that AMD allows non-Backbone modules to.

• Non-Backbone components/modules (such as utilities ...