Menu
Home
People
Places
Arts
History
Plants & Animals
Science
Life & Culture
Technology
Reference.org
Model–view–viewmodel
open-in-new
<h2 id="components-of-mvvm-pattern">Components of MVVM pattern</h2> Model <i>Model</i> refers either to a <a href="/facts/Domain_model/rSxm7s5a">domain model</a>, which represents real state content (an object-oriented approach), or to the <a href="/facts/Data_access_layer/gFkhdxkU">data access layer</a>, which represents content (a data-centric approach). View As in the <a href="/facts/Model%25E2%2580%2593view%25E2%2580%2593controller/vRbMXjMm">model–view–controller</a> (MVC) and <a href="/facts/Model%25E2%2580%2593view%25E2%2580%2593presenter/8xvY6VKY">model–view–presenter</a> (MVP) patterns, the <i>view</i> is the structure, layout, and appearance of what a user sees on the screen.<a class="footnote-ref" id="fnref:11" href="#fn:11"><sup>11</sup></a> It displays a representation of the model and receives the user's interaction with the view (mouse clicks, keyboard input, screen tap gestures, etc.), and it forwards the handling of these to the view model via the <a href="/facts/Data_binding/qp1TkWzk">data binding</a> (properties, event callbacks, etc.) that is defined to link the view and view model. View model The <i>view model</i> is an abstraction of the view exposing public properties and commands. Instead of the controller of the MVC pattern, or the presenter of the MVP pattern, MVVM has a <i>binder</i>, which automates communication between the view and its bound properties in the view model. The view model has been described as a state of the data in the model.<a class="footnote-ref" id="fnref:12" href="#fn:12"><sup>12</sup></a> The main difference between the view model and the Presenter in the MVP pattern is that the presenter has a reference to a view, whereas the view model does not. Instead, a view directly binds to properties on the view model to send and receive updates. To function efficiently, this requires a binding technology or generating <a href="/facts/Boilerplate_code/xbYAfVbW">boilerplate code</a> to do the binding.<a class="footnote-ref" id="fnref:13" href="#fn:13"><sup>13</sup></a> Under <a href="/facts/Object-oriented_programming/TxNMEcao">object-oriented programming</a>, the view model can sometimes be referred to as a <a href="/facts/Data_transfer_object/K7sRSD4n">data transfer object</a>.<a class="footnote-ref" id="fnref:14" href="#fn:14"><sup>14</sup></a> Binder Declarative data and command-binding are implicit in the MVVM pattern. In the Microsoft <a href="/facts/Solution_stack/rPE5Vp8c">solution stack</a>, the binder is a <a href="/facts/Markup_language/WwhlNVIu">markup language</a> called <a href="/facts/XAML/L17VFyz2">XAML</a>.<a class="footnote-ref" id="fnref:15" href="#fn:15"><sup>15</sup></a> The binder frees the developer from being obliged to write boiler-plate logic to synchronize the view model and view. When implemented outside of the Microsoft stack, the presence of a declarative data binding technology is what makes this pattern possible,<a class="footnote-ref" id="fnref:16" href="#fn:16"><sup>16</sup></a><a class="footnote-ref" id="fnref:17" href="#fn:17"><sup>17</sup></a> and without a binder, one would typically use MVP or MVC instead and have to write more boilerplate (or generate it with some other tool). <h2 id="rationale">Rationale</h2> <p>MVVM was designed to remove virtually all <a href="/facts/Graphical_user_interface/wBlQFWDP">GUI</a> code ("<a href="/facts/Code-behind/xq7KM8mN">code-behind</a>") from the view layer, by using <a href="/facts/Data_binding/qp1TkWzk">data binding</a> functions in WPF (Windows Presentation Foundation) to better facilitate the separation of view layer development from the rest of the pattern.<a class="footnote-ref" id="fnref:18" href="#fn:18"><sup>18</sup></a> Instead of requiring <a href="/facts/User_experience_design/wYjvMsf8">user experience</a> (UX) developers to write GUI code, they can use the framework markup language (e.g. <a href="/facts/Extensible_Application_Markup_Language/L17VFyz2">XAML</a>) and create data bindings to the view model, which is written and maintained by application developers. The separation of roles allows interactive designers to focus on UX needs rather than programming of business logic. The layers of an application can thus be developed in multiple work streams for higher productivity. Even when a single developer works on the entire codebase, a proper separation of the view from the model is more productive, as the user interface typically changes frequently and late in the development cycle based on end-user feedback. </p><p>The MVVM pattern attempts to gain both advantages of separation of functional development provided by MVC, while leveraging the advantages of <a href="/facts/Data_binding/qp1TkWzk">data bindings</a> and the framework by binding data as close to the pure application model as possible.<a class="footnote-ref" id="fnref:19" href="#fn:19"><sup>19</sup></a><a class="footnote-ref" id="fnref:20" href="#fn:20"><sup>20</sup></a><a class="footnote-ref" id="fnref:21" href="#fn:21"><sup>21</sup></a> It uses the binder, view model, and any business layers' data-checking features to validate incoming data. The result is that the model and framework drive as much of the operations as possible, eliminating or minimizing application logic which directly manipulates the view (e.g., code-behind). </p> <h2 id="criticism">Criticism</h2> <p>John Gossman has criticized the MVVM pattern and its application in specific uses, stating that MVVM can be "overkill" when creating simple user interfaces. For larger applications, he believes that generalizing the viewmodel upfront can be difficult, and that large-scale data binding can lead to lower performance.<a class="footnote-ref" id="fnref:22" href="#fn:22"><sup>22</sup></a> </p> <h2 id="implementations">Implementations</h2> <h3>.NET frameworks</h3> <ul><li>.NET Community Toolkit</li> <li><a href="/facts/Avalonia_(software_framework)/9CB11jjT">Avalonia</a></li> <li>Caliburn, Caliburn.Micro</li> <li>Chinook.DynamicMvvm Open source</li> <li>DevExpress MVVM</li> <li>DotVVM open source project</li> <li>FreshMvvm</li> <li>Jellyfish</li> <li>Mugen MVVM Toolkit</li> <li>MVVMLight Toolkit</li> <li>MvvmCross</li> <li>MvvmZero</li> <li>Prism Library</li> <li>Rascl</li> <li>ReactiveUI</li> <li><a href="/facts/Uno_Platform/ukLzuEWo">Uno Platform</a> - Open source</li></ul> <h4>Web Component libraries</h4> <ul><li>Microsoft FAST</li> <li>Omi.js</li></ul> <h3>Java frameworks</h3> <ul><li><a href="/facts/ZK_(framework)/BQk9xTAf">ZK Studio</a></li></ul> <h3>JavaScript frameworks</h3> <ul><li><a href="/facts/Angular_(application_platform)/tkAQu3A3">Angular</a></li> <li>Aurelia</li> <li>Durandal</li> <li><a href="/facts/Ember.js/FGKn7NAC">Ember.js</a></li> <li><a href="/facts/Ext_JS/tYcGXqNs">Ext JS</a></li> <li><a href="/facts/Knockout_(web_framework)/Jdg4DfD5">Knockout.js</a></li> <li>Oracle JET</li> <li><a href="/facts/React_(software)/wEllNzoY">React</a></li> <li><a href="/facts/Svelte/8SWHklmI">Svelte</a></li> <li><a href="/facts/Vue.js/AojblWPD">Vue.js</a></li></ul> <h3>Frameworks for C++ and XAML (Windows)</h3> <ul><li>Xamlcc</li></ul> <h2 id="see-also">See also</h2> <ul><li><a href="/facts/Multitier_architecture/cUTM2sU9">Multitier architecture</a></li> <li><a href="/facts/Model%25E2%2580%2593view%25E2%2580%2593controller/vRbMXjMm">Model–view–controller</a></li> <li><a href="/facts/Model%25E2%2580%2593view%25E2%2580%2593presenter/8xvY6VKY">Model–view–presenter</a></li></ul> <h2 id="references">References</h2> <ol> <li id="fn:1"><p>Smith, Josh; et al. "Thought: MVVM eliminates 99% of the need for ValueConverters". Google Groups. <a href="https://groups.google.com/forum/#!topic/wpf-disciples/P-JwzRB_GE8" target="_blank">https://groups.google.com/forum/#!topic/wpf-disciples/P-JwzRB_GE8</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li> <li id="fn:2"><p>Smith, Josh; et al. "Thought: MVVM eliminates 99% of the need for ValueConverters". Google Groups. <a href="https://groups.google.com/forum/#!topic/wpf-disciples/P-JwzRB_GE8" target="_blank">https://groups.google.com/forum/#!topic/wpf-disciples/P-JwzRB_GE8</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li> <li id="fn:3"><p>Martin Fowler (19 July 2004). "The Presentation Model Design Pattern". Martin Fowler.com. <a href="http://martinfowler.com/eaaDev/PresentationModel.html" target="_blank">http://martinfowler.com/eaaDev/PresentationModel.html</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li> <li id="fn:4"><p>Smith, Josh (February 2009). "WPF Apps with the Model–View–ViewModel Design Pattern". MSDN Magazine. <a href="http://msdn.microsoft.com/en-us/magazine/dd419663.aspx" target="_blank">http://msdn.microsoft.com/en-us/magazine/dd419663.aspx</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li> <li id="fn:5"><p>Smith, Josh (February 2009). "WPF Apps with the Model–View–ViewModel Design Pattern". MSDN Magazine. <a href="http://msdn.microsoft.com/en-us/magazine/dd419663.aspx" target="_blank">http://msdn.microsoft.com/en-us/magazine/dd419663.aspx</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li> <li id="fn:6"><p>Smith, Josh (February 2009). "WPF Apps with the Model–View–ViewModel Design Pattern". MSDN Magazine. <a href="http://msdn.microsoft.com/en-us/magazine/dd419663.aspx" target="_blank">http://msdn.microsoft.com/en-us/magazine/dd419663.aspx</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li> <li id="fn:7"><p>Gossman, John (8 October 2005). "Tales from the Smart Client: Introduction to Model/View/ViewModel pattern for building WPF apps". <a href="https://docs.microsoft.com/en-us/archive/blogs/johngossman/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps" target="_blank">https://docs.microsoft.com/en-us/archive/blogs/johngossman/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li> <li id="fn:8"><p>Smith, Josh (February 2009). "WPF Apps with the Model–View–ViewModel Design Pattern". MSDN Magazine. <a href="http://msdn.microsoft.com/en-us/magazine/dd419663.aspx" target="_blank">http://msdn.microsoft.com/en-us/magazine/dd419663.aspx</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></p></li> <li id="fn:9"><p>Massey, Simon (9 April 2011). "Presentation Patterns in ZK". Retrieved 24 March 2012. <a href="https://www.slideshare.net/simbo1905/design-patterns-in-zk-java-mvvm-as-modelviewbinder" target="_blank">https://www.slideshare.net/simbo1905/design-patterns-in-zk-java-mvvm-as-modelviewbinder</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></p></li> <li id="fn:10"><p>Steve Sanderson. "KnockoutJS". <a href="http://knockoutjs.com/documentation/observables.html" target="_blank">http://knockoutjs.com/documentation/observables.html</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></p></li> <li id="fn:11"><p>"The MVVM Pattern". msdn.microsoft.com. 4 October 2012. Retrieved 29 August 2016. <a href="https://msdn.microsoft.com/en-us/library/hh848246.aspx" target="_blank">https://msdn.microsoft.com/en-us/library/hh848246.aspx</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></p></li> <li id="fn:12"><p>Pete Weissbrod. "Model–View–ViewModel Pattern for WPF: Yet another approach". Archived from the original on 1 February 2008. <a href="https://web.archive.org/web/20080201101909/http://www.acceptedeclectic.com/2008/01/model-view-viewmodel-pattern-for-wpf.html" target="_blank">https://web.archive.org/web/20080201101909/http://www.acceptedeclectic.com/2008/01/model-view-viewmodel-pattern-for-wpf.html</a> <a href="#fnref:12" class="footnote-back-ref">↩</a></p></li> <li id="fn:13"><p>"The MVVM Pattern". msdn.microsoft.com. 4 October 2012. Retrieved 29 August 2016. <a href="https://msdn.microsoft.com/en-us/library/hh848246.aspx" target="_blank">https://msdn.microsoft.com/en-us/library/hh848246.aspx</a> <a href="#fnref:13" class="footnote-back-ref">↩</a></p></li> <li id="fn:14"><p>Microsoft (3 April 2024). "Tutorial: Create a web API with ASP.NET Core". <a href="https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api" target="_blank">https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api</a> <a href="#fnref:14" class="footnote-back-ref">↩</a></p></li> <li id="fn:15"><p>Wildermuth, Shawn (11 May 2010). "Windows Presentation Foundation Data Binding: Part 1". Microsoft. Retrieved 24 March 2012. <a href="http://msdn.microsoft.com/en-us/library/aa480224.aspx" target="_blank">http://msdn.microsoft.com/en-us/library/aa480224.aspx</a> <a href="#fnref:15" class="footnote-back-ref">↩</a></p></li> <li id="fn:16"><p>Massey, Simon (9 April 2011). "Presentation Patterns in ZK". Retrieved 24 March 2012. <a href="https://www.slideshare.net/simbo1905/design-patterns-in-zk-java-mvvm-as-modelviewbinder" target="_blank">https://www.slideshare.net/simbo1905/design-patterns-in-zk-java-mvvm-as-modelviewbinder</a> <a href="#fnref:16" class="footnote-back-ref">↩</a></p></li> <li id="fn:17"><p>"ZK MVVM". Potix. Retrieved 24 March 2012. <a href="http://books.zkoss.org/wiki/Small_Talks/2012/February/New_Features_of_ZK_6#ZK_MVVM" target="_blank">http://books.zkoss.org/wiki/Small_Talks/2012/February/New_Features_of_ZK_6#ZK_MVVM</a> <a href="#fnref:17" class="footnote-back-ref">↩</a></p></li> <li id="fn:18"><p>Smith, Josh (February 2009). "WPF Apps with the Model–View–ViewModel Design Pattern". MSDN Magazine. <a href="http://msdn.microsoft.com/en-us/magazine/dd419663.aspx" target="_blank">http://msdn.microsoft.com/en-us/magazine/dd419663.aspx</a> <a href="#fnref:18" class="footnote-back-ref">↩</a></p></li> <li id="fn:19"><p>Smith, Josh (February 2009). "WPF Apps with the Model–View–ViewModel Design Pattern". MSDN Magazine. <a href="http://msdn.microsoft.com/en-us/magazine/dd419663.aspx" target="_blank">http://msdn.microsoft.com/en-us/magazine/dd419663.aspx</a> <a href="#fnref:19" class="footnote-back-ref">↩</a></p></li> <li id="fn:20"><p>Gossman, John (8 October 2005). "Tales from the Smart Client: Introduction to Model/View/ViewModel pattern for building WPF apps". <a href="https://docs.microsoft.com/en-us/archive/blogs/johngossman/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps" target="_blank">https://docs.microsoft.com/en-us/archive/blogs/johngossman/introduction-to-modelviewviewmodel-pattern-for-building-wpf-apps</a> <a href="#fnref:20" class="footnote-back-ref">↩</a></p></li> <li id="fn:21"><p>Karl Shifflett. "Learning WPF M-V-VM". Archived from the original on 13 April 2009. Retrieved 5 June 2009. <a href="https://web.archive.org/web/20090413205731/http://karlshifflett.wordpress.com/2008/11/08/learning-wpf-m-v-vm/" target="_blank">https://web.archive.org/web/20090413205731/http://karlshifflett.wordpress.com/2008/11/08/learning-wpf-m-v-vm/</a> <a href="#fnref:21" class="footnote-back-ref">↩</a></p></li> <li id="fn:22"><p>Gossman, John (4 March 2006). "Tales from the Smart Client: Advantages and disadvantages of M-V-VM". AI Skills Challenge. <a href="https://docs.microsoft.com/en-gb/archive/blogs/johngossman/advantages-and-disadvantages-of-m-v-vm" target="_blank">https://docs.microsoft.com/en-gb/archive/blogs/johngossman/advantages-and-disadvantages-of-m-v-vm</a> <a href="#fnref:22" class="footnote-back-ref">↩</a></p></li> </ol>