Model-View-Controller 91

This provides a first taste of what refactoring can do for us at a practical level. The cases that we’ve looked at so far have all been fairly simple, but even so, using refactoring to clarify the code has helped to remove several weak points that could otherwise come back to haunt us as the applications grow.

Along the way, we encountered a few design patterns. In the following section, we’ll look at a large-scale server-side pattern and see how we can refactor some initially tangled code toward a cleaner, more flexible state.

3.3 Model-View-Controller

The small patterns that we’ve looked at so far can usefully be applied to specific coding tasks. Patterns have also been developed for the organization of entire applications, sometimes referred to as architectural patterns. In this section, we’re going to look at an architectural pattern that can help us to organize our Ajax projects in several ways, making them easier to code and easier to maintain.

Model-View-Controller (MVC) is a way of describing a good separation between the part of a program that interacts with a user and the part that does the heavy lifting, number crunching, or other “business end” of the application.

MVC is typically applied at a large scale, covering entire layers of an application or even stretching between the layers. In this chapter, we introduce the pattern and show how to apply it to the web server when serving data to an Ajax application. In chapter 4, we’ll look at the rather more involved case of applying it to the JavaScript client application.

The MVC pattern identifies three roles that a component in the system can fulfill. The Model is the representation of the application’s problem domain, the thing that it is there to work with. A word processor would model a document; a mapping application would model points on a grid, contour lines, and so on.

The View is the part of the program that presents things to the user—input forms, pictures, text, or widgets. The View need not be graphical. In a voicedriven program, for example, the spoken prompts are the View.

The golden rule of MVC is that the View and the Model shouldn’t talk to each other. Taken at face value, that might sound like a pretty dysfunctional program, but this is where the Controller comes in. When the user presses a button or fills in a form, the View tells the Controller. The Controller then manipulates the Model and decides whether the changes in the Model require an update of the View. If so, it tells the View how to change itself (see figure 3.5).

The advantage of this is that the Model and View remain loosely coupled, that is, neither has a deep understanding of the other. Obviously they need to

92CHAPTER 3

Introducing order to Ajax

View

4. Update View

1. Interaction

Controller

3. Notify changes

2. Modify

Model

Figure 3.5

The main components of the Model-View- Controller pattern. The View and Model do not interact directly but always through the Controller. The Controller can be thought of as a thin boundary layer that allows the Model and View to communicate but enforces clear separation of the codebase, improving flexibility and maintainability of the code over time.

know enough to get the job done, but the View knows about the Model only in very general terms.

Let’s consider a program for managing inventories. The Controller might provide the View with a function that returns a list of all product lines matching a given category ID, but the View knows nothing about how that list was derived. It may be that version 1 of this program stored the data used to generate the list in an array in memory or read it from a flat text file. With the second version of the program, there was a requirement to handle much larger datasets, and a relational database server was added to the architecture. The implications of this change on the Model would be significant, and a lot of code would need to be rewritten. Provided that the Controller could still deliver a list of product lines matching a category, the impact on the View code would be nil.

Similarly, the engineers working on the View should be free to improve the usability of the application without worrying about breaking hidden assumptions in the Model, so long as they stick to a basic agreement on the interfaces with which the Controller provides them. By dividing the system into subsystems, MVC provides an insurance policy against minor changes rippling right across a codebase and allows the team behind each subsystem to respond quickly without treading on one another’s toes.

The MVC pattern is commonly applied to classic web application frameworks in a particular way, in order to serve up the succession of static pages that compose the interface. When an Ajax application is up and running and requesting data from the server, the mechanics of serving up the data are similar to those of a classic web app. Web server–style MVC can also benefit Ajax applications, and because it’s well understood, we’ll start here and move on to other more Ajax-specific ways of working with MVC later.

If you’re new to web frameworks, this section should provide you with the information you need to understand how they can make an Ajax application more