locked
MVVM? RRS feed

  • Question

  • User1142003421 posted

    Can anyone tell me what is MVVM? When I read the definition, it sounds a lot like MVC. Why MVVM? Wht is the distinction?

    Friday, August 2, 2013 3:43 PM

Answers

  • User281315223 posted

    MVVM refers to the "Model-View-ViewModel" design pattern which is quite similar to the "Model-View-Controller" MVC pattern with a few differences and minor distinctions that set it apart. (You'll typically see MVVM used more often within the WPF environment as opposed to ASP.NET)

    To quote Russell East's discussion

    The main difference with MVVM to MVC is that the ViewModel is built to serve the view and provide the view with the data and commands it needs. The viewModel is not a general object that could serve different views but is bespoke for each view. For the TDD’ers out there its easy to define the behaviour of a viewmodel and test using a test first approach. The ViewModel is a model for the view. And the real power comes in when you bind your ViewModel to your view in WPF.

    I would highly recommend reading this very detailed Stack Overflow discussion on the distinctions and differences between the two and some of the resources provided within it.

    Additional Resources and Discussions

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 2, 2013 4:00 PM
  • User-474980206 posted

    the main difference of MVVM from MVC, is the model talks to the view model  (which is often implemented with the observer pattern and can fire events and update the main model).

    the MVVM pattern is often used when a client app wants a proxy to a remote model, or wants to do extensive re-mapping of the model. 

    for example:

    a varient of MVVM with just MVC server code, is using an automapper to build view models from entity models. 

    <div>another varient is a  server side model and a client side view model defined in javascript (usually with the observer pattern). the client code updates the view model, which fire events (usually ajax events that call MVC actions) to update the server model. in turn these events can update the client side view model and trigger an update to the view.</div>

    if you are using a SPA app, then it gets a little more complicated. a MVC pattern is used client side to implement routing/controllers (usually via hashtag navigation) and views (usuallly via templates). the controller updates the view model, the view display the view model, but because it is observable, changes to the view model fire events back to the server. so the view model is a proxy for the server model/models.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 2, 2013 8:21 PM
  • User-1620313041 posted

    In the MVVM pattern you have no controller! in MVVM Model is attached automatically to the View by the framework, with standard rules, typically one uses the observer pattern, where any modification to the Model automatically triggers changes in the View because of dependencies that are attached to the model (mainly one uses property setters to update the UI when model changes, and events to update the model when the UI changes). In Mvc the job of selecting the view and exchanging values between Model and View is done by the controller.

    Web applications use the Mvc pattern, thus they put a controller between View and Model for this main reason:

    The View live on the client side while the Model live on the server side, so there is the need for a "controller" that takes care of the interaction between server and client. 

    In more details since the Http prtocol is memory-less, Once the client send a response to the server containing changes applied to the View, a Model must be created, and before creating the model one must select the right web resource that can do this job.

    In general there is the problem of selecting the right resource that may fulfill a web request, and this must be done through the url supplied, according to the Rest Web paradigm. Moreover, since the model is not "live" and "ready" to respond to View changes, there is the need for some stuff that coordinate the whole information exchange between client and server.

    The above are the reasons why web application take advantage of using a controller, and move slightly away from the MVVM pattern.

    However, Web applications may use ALSO an MVVm pattern, if they sendo both view and model to the client. In this case Model and View, on the client may interact according to the MVVM paradigm, and may communicate with the server mainly by calling json webservices. This is what Single Page Application do. The disadvantege of this approach is the extensive use of Javascript to create the Html, that makes the application, almost "invisible" to search engine.

    Moreover, SPA moves a lot of logics to the client, and this creates somne problems:

    1. Javascript code is more difficult to mantain, and test .Moreover  writing javascript code costs more programming effort, and the resulting code is less reliable, since javascript is not strongly typed, and has not all advanced features of the modern object oriented languages.
    2.  Business rules cannot be enforced on the client, because a malicious user might manipulate the javascript code of the page, Thus one is foced to duplicate some validation rules both in javascript and on the client side.

    The main advantage of the MVVM pattern used by SPA is the user responsivness, and in generla a better user experience.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 3, 2013 3:49 AM
  • User-1673382244 posted

    In MVC, the ViewModel provides all the information necessary for a View to be rendered. The data it contains is created using data defined in the Model. The View reads the ViewModel and renders the output. Input from the View is passed to the Controller, which manipulates the Model, constructs an appropriate ViewModel, and passes this to the View for rendering.

    In MVVM, the ViewModel serves the same function as it does in MVC, but it also replaces part of the MVC Controller by providing commands which allow the View to manipulate the Model. WPF databinding manages the updating of the View according to changes in the ViewModel (and this effectively replaces the remaining function of the MVC Controller).

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 3, 2013 4:32 AM
  • User-1620313041 posted

    What are some of the uses for MVVM? Multi-player Game programming?

    Not necesarely, all application with a rich web interface. Games ussually need other technologies more, such as either plugins like flash/silverligh or Html5 Canvas. The observable pattern typically used in MvvM, normally is not adequate for videogames, since in videogames the UI cannot be updated as soon as a model property changes, but the whole UI is updated in a specific part of what is so called Game Cycle, after all user input has been processed and after Game physics rules have been applied to change the state of the game.

    In any case all games have a model representing the whole gane state, so they use a kind of MvvM, but the UI is updated in what is called the rendering stage.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 3, 2013 5:12 AM
  • User71929859 posted

    Hello,

    What are some of the uses for MVVM?

    WPF and Silverlight uses MVVM pattern in Databinding.

    In Web applications developments KnockoutJS uses MVVM patten.

    Also, MVVM can be used for unit testing. Check the below article

    http://www.unit-testing.net/CurrentArticle/How-To-Write-Unit-Testable-Code-With-Model-View-View-Model.html

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 3, 2013 7:48 AM

All replies

  • User281315223 posted

    MVVM refers to the "Model-View-ViewModel" design pattern which is quite similar to the "Model-View-Controller" MVC pattern with a few differences and minor distinctions that set it apart. (You'll typically see MVVM used more often within the WPF environment as opposed to ASP.NET)

    To quote Russell East's discussion

    The main difference with MVVM to MVC is that the ViewModel is built to serve the view and provide the view with the data and commands it needs. The viewModel is not a general object that could serve different views but is bespoke for each view. For the TDD’ers out there its easy to define the behaviour of a viewmodel and test using a test first approach. The ViewModel is a model for the view. And the real power comes in when you bind your ViewModel to your view in WPF.

    I would highly recommend reading this very detailed Stack Overflow discussion on the distinctions and differences between the two and some of the resources provided within it.

    Additional Resources and Discussions

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 2, 2013 4:00 PM
  • User1142003421 posted

    Thanks for the input. I watched some of the video but I did not see a lot of philosophical differences in programming methods.

    Friday, August 2, 2013 4:43 PM
  • User281315223 posted
    As mentioned previously and I am sure you can tell by the discussions, the two patterns are very closely related to each other and the line of distinction between the two is very thin and often debated.
    Friday, August 2, 2013 5:19 PM
  • User-474980206 posted

    the main difference of MVVM from MVC, is the model talks to the view model  (which is often implemented with the observer pattern and can fire events and update the main model).

    the MVVM pattern is often used when a client app wants a proxy to a remote model, or wants to do extensive re-mapping of the model. 

    for example:

    a varient of MVVM with just MVC server code, is using an automapper to build view models from entity models. 

    <div>another varient is a  server side model and a client side view model defined in javascript (usually with the observer pattern). the client code updates the view model, which fire events (usually ajax events that call MVC actions) to update the server model. in turn these events can update the client side view model and trigger an update to the view.</div>

    if you are using a SPA app, then it gets a little more complicated. a MVC pattern is used client side to implement routing/controllers (usually via hashtag navigation) and views (usuallly via templates). the controller updates the view model, the view display the view model, but because it is observable, changes to the view model fire events back to the server. so the view model is a proxy for the server model/models.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 2, 2013 8:21 PM
  • User-1620313041 posted

    In the MVVM pattern you have no controller! in MVVM Model is attached automatically to the View by the framework, with standard rules, typically one uses the observer pattern, where any modification to the Model automatically triggers changes in the View because of dependencies that are attached to the model (mainly one uses property setters to update the UI when model changes, and events to update the model when the UI changes). In Mvc the job of selecting the view and exchanging values between Model and View is done by the controller.

    Web applications use the Mvc pattern, thus they put a controller between View and Model for this main reason:

    The View live on the client side while the Model live on the server side, so there is the need for a "controller" that takes care of the interaction between server and client. 

    In more details since the Http prtocol is memory-less, Once the client send a response to the server containing changes applied to the View, a Model must be created, and before creating the model one must select the right web resource that can do this job.

    In general there is the problem of selecting the right resource that may fulfill a web request, and this must be done through the url supplied, according to the Rest Web paradigm. Moreover, since the model is not "live" and "ready" to respond to View changes, there is the need for some stuff that coordinate the whole information exchange between client and server.

    The above are the reasons why web application take advantage of using a controller, and move slightly away from the MVVM pattern.

    However, Web applications may use ALSO an MVVm pattern, if they sendo both view and model to the client. In this case Model and View, on the client may interact according to the MVVM paradigm, and may communicate with the server mainly by calling json webservices. This is what Single Page Application do. The disadvantege of this approach is the extensive use of Javascript to create the Html, that makes the application, almost "invisible" to search engine.

    Moreover, SPA moves a lot of logics to the client, and this creates somne problems:

    1. Javascript code is more difficult to mantain, and test .Moreover  writing javascript code costs more programming effort, and the resulting code is less reliable, since javascript is not strongly typed, and has not all advanced features of the modern object oriented languages.
    2.  Business rules cannot be enforced on the client, because a malicious user might manipulate the javascript code of the page, Thus one is foced to duplicate some validation rules both in javascript and on the client side.

    The main advantage of the MVVM pattern used by SPA is the user responsivness, and in generla a better user experience.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 3, 2013 3:49 AM
  • User1142003421 posted

    What are some of the uses for MVVM? Multi-player Game programming?

    Saturday, August 3, 2013 4:25 AM
  • User-1673382244 posted

    In MVC, the ViewModel provides all the information necessary for a View to be rendered. The data it contains is created using data defined in the Model. The View reads the ViewModel and renders the output. Input from the View is passed to the Controller, which manipulates the Model, constructs an appropriate ViewModel, and passes this to the View for rendering.

    In MVVM, the ViewModel serves the same function as it does in MVC, but it also replaces part of the MVC Controller by providing commands which allow the View to manipulate the Model. WPF databinding manages the updating of the View according to changes in the ViewModel (and this effectively replaces the remaining function of the MVC Controller).

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 3, 2013 4:32 AM
  • User-1620313041 posted

    What are some of the uses for MVVM? Multi-player Game programming?

    Not necesarely, all application with a rich web interface. Games ussually need other technologies more, such as either plugins like flash/silverligh or Html5 Canvas. The observable pattern typically used in MvvM, normally is not adequate for videogames, since in videogames the UI cannot be updated as soon as a model property changes, but the whole UI is updated in a specific part of what is so called Game Cycle, after all user input has been processed and after Game physics rules have been applied to change the state of the game.

    In any case all games have a model representing the whole gane state, so they use a kind of MvvM, but the UI is updated in what is called the rendering stage.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 3, 2013 5:12 AM
  • User71929859 posted

    Hello,

    What are some of the uses for MVVM?

    WPF and Silverlight uses MVVM pattern in Databinding.

    In Web applications developments KnockoutJS uses MVVM patten.

    Also, MVVM can be used for unit testing. Check the below article

    http://www.unit-testing.net/CurrentArticle/How-To-Write-Unit-Testable-Code-With-Model-View-View-Model.html

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 3, 2013 7:48 AM