Tuesday, 21 October 2014

UI Design Patterns: MVC,MVP,MVVM

UI Design Patterns


  • MVC
  • MVP
  • MVVM
MVC Pattern

MVC Stands for

  • Model
  • View
  • Controller

















Here Model and View are different components. They have very less coupling.
When Client send a Request to the application, it first reaches the Controller component. The Controller is the responsible to hand this request.

Struts, Spring etc Frameworks follow this MVC pattern.

The Controller will take other components help to find the next View and also its data with Model. 

The Controller will bind this Model data into View and send this View as a Response to the Client.

MVP Pattern

MVP Stands for

  • Model
  • View
  • Presenter




















Here Model and View have tightly coupling.

In case of MVP, View Component binds to the Model directly through Data Binding. In this case, it's the Presenter's job to pass off the Model to the View so that it can bind to it. 
The Presenter will also contain logic for pressing a button, navigation. It means that we have to write some code in View in order register to the Presenter.

MVVM Pattern

MVVM Stands for

  • Model
  • View
  • ViewModel
Model and View acts similarly as in MVC Design Pattern.
Model contains data. View is used to represent UI to the user.
ViewModel sits between View and Model components to separate Model data binding to the View components  and take care of all UI Actions.

One of popular Java Script Frameworks i.e. Angular JS follows this MVVM pattern.


















Advantages of MVVM Pattern:

As we are separating binding of Model data to View component to a separate component and single place, we will get the following benefits
  • Easy to develop
  • Easy to test
  • Easy to extend
  • Easy to maintain