Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

What is difference between MVP, MVC, MVVM model?

user-image
Question added by mohd ikram , Software Engineer , VSK IT Services Pvt. Ltd.
Date Posted: 2015/04/21
AsifUllah khan
by AsifUllah khan , software engineer / web developer , The Consulting Network (TCN)

MVC Pattern

MVC stands for Model-View-Controller. It is a software design pattern which was introduced in1970s. Also, MVC pattern forces a separation of concerns, it means domain model and controller logic are decoupled from user interface (view). As a result maintenance and testing of the application become simpler and easier.

MVC design pattern splits an application into three main aspects: Model, View and Controller

  1. Model

    The Model represents a set of classes that describe the business logic i.e. business model as well as data access operations i.e. data model. It also defines business rules for data means how the data can be changed and manipulated.

  2. View

    The View represents the UI components like CSS, jQuery, html etc. It is only responsible for displaying the data that is received from the controller as the result. This also transforms the model(s) into UI.

  3. Controller

    The Controller is responsible to process incoming requests. It receives input from users via the View, then process the user's data with the help of Model and passing the results back to the View. Typically, it acts as the coordinator between the View and the Model.

MVP pattern

This pattern is similar to MVC pattern in which controller has been replaced by the presenter. This design pattern splits an application into three main aspects: Model, View and Presenter.

  1. Model

    The Model represents a set of classes that describes the business logic and data. It also defines business rules for data means how the data can be changed and manipulated.

  2. View

    The View represents the UI components like CSS, jQuery, html etc. It is only responsible for displaying the data that is received from the presenter as the result. This also transforms the model(s) into UI.

  3. Presenter

    The Presenter is responsible for handling all UI events on behalf of the view. This receive input from users via the View, then process the user's data with the help of Model and passing the results back to the View. Unlike view and controller, view and presenter are completely decoupled from each other’s and communicate to each other’s by an interface.

    Also, presenter does not manage the incoming request traffic as controller.

Key Points about MVP Pattern:

  1. User interacts with the View.

  2. There is one-to-one relationship between View and Presenter means one View is mapped to only one Presenter.

  3. View has a reference to Presenter but View has not reference to Model.

  4. Provides two way communication between View and Presenter.

MVVM pattern

MVVM stands for Model-View-View Model. This pattern supports two-way data binding between view and View model. This enables automatic propagation of changes, within the state of view model to the View. Typically, the view model uses the observer pattern to notify changes in the view model to model.

  1. Model

    The Model represents a set of classes that describes the business logic and data. It also defines business rules for data means how the data can be changed and manipulated.

  2. View

    The View represents the UI components like CSS, jQuery, html etc. It is only responsible for displaying the data that is received from the controller as the result. This also transforms the model(s) into UI..

  3. View Model

    The View Model is responsible for exposing methods, commands, and other properties that helps to maintain the state of the view, manipulate the model as the result of actions on the view, and trigger events in the view itself.

This pattern is commonly used by the WPF, Silverlight, Caliburn, nRoute etc.

Key Points about MVVM Pattern:

  1. User interacts with the View.

  2. There is many-to-one relationship between View and ViewModel means many View can be mapped to one ViewModel.

  3. View has a reference to ViewModel but View Model has no information about the View.

  4. Supports two-way data binding between View and ViewModel.

 

All the above users has given a good difference however i just want to give.

Different User Request flow between MVC, MVP and MVVM :

 

MVC

Request  > Controller > Model > View

 

MVP

Request  > View > Presenter > Model

 

MVVM

 

Request  > View > ViewModel > Model

 

Here you can find the detailed explanation of these three

 

http://www.dotnet-tricks.com/Tutorial/designpatterns/2FMM060314-Understanding-MVC,-MVP-and-MVVM-Design-Patterns.html

 

Muhammad Shoaib Siddiq
by Muhammad Shoaib Siddiq , Senior Software Engineer , XAVOR PAKISTAN (PVT) LTD - Lahore

n case of MVC it is controller. In case of MVP it is presenter. In case of MVVM it is view model.

If you look at the first two characters in all the above patterns, it remain same i.e. stands for model and view. All these patterns are different but have a common objective that is “Separation of Duties"

In order to understand the entire article, I request readers to first understand the above entity. A fair idea about these will help you to understand this article. If you ever worked on UI module, you can easily relate these entities with your application.

MVC (model view controller), MVP (model view presenter) and MVVM (model view view model) patterns allow us to develop applications with loss coupling and separation of concern which in turn improve testability, maintainability and extendibility with minimum effort.

MVVM pattern is a one of the best solutions to handle such problems for WPF and Silverlight application. During this article, I will compare MVC, MVP and MVVM at the definition level.

Muhammad Fahad Akram
by Muhammad Fahad Akram , Software Enginner , Nextbridge Pvt Ltd

In MVP view is silent and all interaction with model must pass through presentor but in MVC view is intelligent and able to deal directly with model. we can say MVP is strict form of MVC

Ismaila Nasir Ahmed
by Ismaila Nasir Ahmed , Assistant I.T Manager , Top Ten Mall

The difference between MVP, MVC, MVVM models are as follows 

MVP

Use in situations where binding via a data context is not possible. Windows Forms is a perfect example of this. In order to separate the view from the model, a presenter is needed. Since the view cannot directly bind to the presenter, information must be passed to it view an interface .

MVVM

Use in situations where binding via a data context is possible. Why? The various I View interfaces for each view are removed which means less code to maintain. Some examples where MVVM is possible include WPF and java script projects using Knock out.

MVC

Use in situations where the connection between the view and the rest of the program is not always available (and you can’t effectively employ MVVM or MVP). This clearly describes the situation where a web API is separated from the data sent to the client browsers. Microsoft’s ASP.NET MVC is a great tool for managing such situations and provides a very clear MVC framework.

 

Muhammad talal
by Muhammad talal , UI/Web designer and Web developer , Fiverr.com

MVC- You assume that the logic, model and UI of the application is EQUAL in complexity and SUFFICIENTLY decoupled. This pattern will lead you to make a lot of tiny pages ideal for product catalogs and wizards. Angular.js supports MVC.

MVP - The model is sufficiently independent but the Logic and UI are not.  Or it could mean that the UI language is so weak that it requires a Presenter - a class whose only job is to support the view.  A sample usage is Android Development, the best way to know if you're using a presenter is that you are coding a lot of life cycle handlers. In javascript, this means coding the page life cycle (onload, onclick, etc.). This will lead you to have big pages that does a lot. This is good for games, productivity and business apps where you are not dealing with single-record but mutiple-record CRUD most of the time. This, however, will lead you to make dialogs and menus-- a lot of them. Jquery mostly supports this.

MVVM - The same with MVP except that a single data record in the model can be represented in many ways. For example age can be displayed in both text and slider where there is a two way sync (change slider would also chagne text). This is good big pages whose panels appear and disappear accordingly. This will lead you to make small-looking but big pages. Angular data binding supports this pattern well. It's good for SPAs and generally intended for editing tools like Photoshop ripoffs.

Mahmoud Manaa
by Mahmoud Manaa , Network Engineer , Zain - Kuwait

All past answer is right , clear enough but i just wanna give simple excerpt

the3 design patterns separates design to a3 logical unites interacts with each other without interference

This link is explains all those concepts : CodeProject - Design Patterns 

hope this help ...

Khalid Mustafa Hilal Ahmed
by Khalid Mustafa Hilal Ahmed , قسم تقانة المعلومات , وزارة التجارة الخارجية

image

MVC – Model View Controller

Let’s look at MVC first. You’ll notice a few things about the diagram:

The input is directed at the Controller first, not the view. That input might be coming from a user interacting with a page, but it could also be from simply entering a specific url into a browser. In either case, its a Controller that is interfaced with to kick off some functionality.

There is a many-to-one relationship between the Controller and the View. That’s because a single controller may select different views to be rendered based on the operation being executed.

Note the one way arrow from Controller to View. This is because the View doesn’t have any knowledge of or reference to the controller.

The Controller does pass back the Model, so there is knowledge between the View and the expected Model being passed into it, but not the Controller serving it up.

MVP – Model View Presenter

Now let’s look at the MVP pattern. It looks very similar to MVC, except for some key distinctions:

The input begins with the View, not the Presenter.

There is a one-to-one mapping between the View and the associated Presenter.

The View holds a reference to the Presenter. The Presenter is also reacting to events being triggered from the View, so its aware of the View its associated with.

The Presenter updates the View based on the requested actions it performs on the Model, but the View is not Model aware.

MVVM – Model View View Model

So with the MVC and MVP patterns in front of us, let’s look at the MVVM pattern and see what differences it holds:

The input begins with the View, not the View Model.

While the View holds a reference to the View Model, the View Model has no information about the View. This is why its possible to have a one-to-many mapping between various Views and one View Model…even across technologies. For example, a WPF View and a Silverlight View *could* share the same View Model. However, my own feeling is that this is a bad practice and creates Franken-ViewModels that have too many responsibilities. It’s better to keep it as a one-to-one mapping instead.

You’ll also notice that the View has no idea about the Model in the MVVM pattern. This is because, as far as the View knows, its “Model” IS the View Model (hence its name). Because of how data-binding and other features like commanding work in WPF and Silverlight, there is rich communication between the View and View Model, isolating the View from having to know anything about what’s really happening behind the scenes.

AJITH KB
by AJITH KB , Software Development Engineer , Exponent Technology Services

mvp

 

1)1)MVP consists of three layers Model, View, and Presenter. 

2)In MVP, View and Model are more loosely coupled, providing a clearer separation of concerns. 

mvc

 

1)MVC consists of three layers Model, View, and Controller. 

2) It provides better support for test-driven development (TDD) .

 

mvvm

 

The MVVM pattern includes three key parts:

1)Model (Business rule, data access, model classes) 

2)View (User interface (XAML)) 

3)ViewModel (Agent or middle man between view and model) 

Jahanzaib Ahmad
by Jahanzaib Ahmad , Sr. Software Engineer , Probase Application

MVPThe Presenter contains the UI business logic for the View. All invocations from the View delegate directly to Presenter. The Presenter is also decoupled directly from the View and talks to it through an interface.MVC The Controller is responsible for determining which View is displayed in response to any action including when the application loads. This differs from MVP where actions route through the View to the Presenter.

MVVM

  • The view and the viewmodel communicate via data-binding, method calls, properties, events, and messages
  • The viewmodel exposes not only models, but other properties (such as state information, like the "is busy" indicator) and commands
  • The view handles its own UI events, then maps them to the viewmodel via commands
  • The models and properties on the viewmodel are updated from the view via two-way databinding

More Questions Like This

Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.