Ajax combat: Applying MVC to the browser side

We have been focusing on the small details of the application in the front. You can now broaden your horizons to consider the full JavaScript application delivered on the browser at startup. This can also be structured according to the MVC pattern, which is greatly optimized by separating the concerns clearly.

At this level, the model consists of a business domain object, the view is the entire programmable page, and the controller is a combination of all the event-handling functions in the code that connects the UI to the domain object. Figure 4-2 shows the MVC operation at this level. This is probably the most important MVC usage for AJAX developers, because it naturally adapts to Ajax rich customer applications. We will examine the details of this usage of the MVC pattern and see what we can learn from the remainder of this chapter.

Figure 4-2 Model-View-controller is applied to AJAX client applications as a whole. This level of controller is the code that connects the UI to the JavaScript business object

If you think about the traditional web MVC that is discussed in chapter 3rd, you know that there are at least 3 layers in a typical AJAX application, and each layer plays a different role in the lifecycle of the application, and they all help to develop clear, well-organized code. Figure 4-3 illustrates how these different scale MVC patterns are nested within the application architecture.

So what does this mean for us when developing code? In the following sections, we look at the structure of using MVC to define JavaScript applications in a more practical way, how does it affect how the code is written, and what are the benefits? Let's start looking at the view.

Figure 4-3 in the nested MVC architecture, patterns repeat themselves on different scales. At the outermost level, we can see that the pattern as a whole defines the workflow of the application, and the model is on the Web server side. On a smaller scale, patterns are duplicated in client applications; On a smaller scale, patterns are duplicated within a single UI component that the client applies