Introduction

Introduction to Model View Patterns.

Model View Patterns allow JavaScript developers to organize their applications in logical components to bring clarity and structure into their programs.



Overview


Suppose you are in charge of a small team that starts development on a new web application. Your initial thoughts are that on the client side all you need is a DOM manipulation library, such as jQuery, and perhaps a couple utility-type plugins and UI controls. With that you start crafting your app.

However, a few weeks into the project you realize that many pages in the app are becoming rather unwieldy and unstructured with dozens of event handlers and long reams of DOM manipulating JavaScript. You feel that you could use some extra help in getting your programs better organized. This is exactly what a Model-View (MV) Framework can do: to bring additional structure to your project.

What exactly is an MV Framework? An MV Framework is a JavaScript library that allows developers to organize their application in logical components to bring clarity and structure into their programs. These components represent 3 areas of concern which are called: Model, View and Controller. Together they make up the MVC design pattern.

The MVC pattern one of a family of three related patterns which collectively are referred to as Model View (MV*) Patterns. The other two are refinements of MVC; they are MVP (Model View Presenter) and MVVM (Model View ViewModel). We will first review MVC, followed by MVP and MVVM. Finally, we provide a review of some popular open source MV Frameworks.



MVC