The MVC and MVVM Software Architectural Patterns

The MVC and MVVM  Software Architectural Patterns

MVC (Model, View, Controller)

The MVC pattern dates back to the 1980s and early graphical UIs. The goal of MVC is to factor the code into three separate responsibilities, shown in Figure 7. Here’s what they do:

• The model represents the domain data and business logic.
• The view displays the model.
• The controller receives user input and updates the model.

Figure 7 The MVC Pattern



MVVM (Model, View, ViewModel)

A more recent variant of MVC is the MVVM pattern (see Figure 8). In MVVM:
Commonly called Model-View-Binder in non .net platfoms

• The model still represents the domain data.
• The view model is an abstract representation of the view.,
  the view model is responsible for exposing (converting) the data objects from the model in such a way that objects are easily managed and presented
• The view displays the view model and sends user input to the view model.

Figure 8 The MVVM Pattern

In a JavaScript MVVM framework, the view is markup and the view model is code.
MVC has many variants, and the literature on MVC is often confusing and contradictory. Perhaps that’s not surprising for a design pattern that started with Smalltalk-76 and is still being used in modern Web apps. So even though it’s good to know the theory, the main thing is to understand the particular MVC framework you’re using.