[MUSIC] Most of the web application frameworks that I've shown you make extensive use of the model-view-controller design pattern. Let's talk more about this very important design pattern in more detail. Many web application architectures make use of the model-view-controller design pattern. Now early web applications did not have much organization on the server side. This is something that I've already mentioned to you, but I'd like to reiterate it here. They were primarily fetching static webpages, and there was no separation of the data in that page from it's presentation in the client. So as applications became richer, once again the server-side scripts became very complicated and difficult to maintain. The model-view-controller design pattern provides a means for dealing with this complexity. It decouples the data, or the model, from the presentation, or the view, and there's a controller that handles requests and coordinates between these two. It made applications much more robust and easier to maintain. Prior to using the model-view-controller design pattern in web apps, user interface designs tended to lump the model, view, and controller all together. What the MVC does is it decouples them. So this MVC design pattern was previously used as a part of Windows based user interfaces in desktop computers. For example, the OS graphical user interfaces in Mac, or Windows, or Linux, they all used this design pattern. Recognizing that it would also work in this client server setting associated with web applications was a major step forward in the development of web application architectures. Let's see how it works. It consist of these components, there's a model, and a model is the domain specific representation of the data over which the application operates along with some domain specific knowledge that might add meaning to this raw data. For example, it might be the information relate to the purchases that a user's made along with the users own personal information, their account information. There's often a database that's used to store this information. The view is used to render the information associated with the model. And typically, this is done via some type of a user interface. Multiple views are often created for a single model, each serving a different purpose. For example, you might have one view to show all of the previous purchases that a user made. And you might have a different view for a user to be able to edit their personal information, their account information. Now, in the early days, these two directly communicated with one another. And they were, as I mentioned, kind of melded together. And this led to a lot of problems. It was very difficult if you tried to change the model you are often also changing the view code. And this is where the third piece came in. We got rid of this, and we create the third piece called the controller that was responsible for mediating between the model and the view. So the model would communicate with the view that controller was responsible for updating the model. And likewise, if the model was changed, the controller was responsible for updating the view. I'll show you next the specific flow control that happens between these three elements in the model-view-controller design pattern. The flow in the MVC design pattern is like this. First, the user interface is rendered and awaits user input. This is the view. Next, the user provides some input. For example, the user might click a button, and then the controller handles that event, that input event. It calls some action, this could be some kind of a handler code, or callback function that's understandable by the model. So the controller's responsible for doing that. The controller then notifies the model, and this may lead to a change of state in the model. For example, you might be updating account information about a person. And then finally, the controller notifies the view if that view needs to be updated. For example, if you updated the account then you may want to represent that updated account when the user goes to look at their account information, and then you go back to step 1. So, this is the flow control associated with the model-view-controller design pattern. Here's the canonical six tier web application architecture that I've described to you previously, and we'll see that the model-view-controller design pattern is implemented over the middle ware in this architecture. We'll discuss exactly how it's implemented in a future module that addresses the middle ware.
