Recently I’ve heard people talk about “MVVM” which, evidently, is an application architecture. It stands for “model, view, view-model”—whatever that means. I think a lot of people would agree if I say that the most prominent app architecture in the last decade (or perhaps much longer) was MVC—model, view, controller. So, what is MVVM?
As always, I’m not writing from the position of someone who knows the answer. I’m usually way too busy to write about things I already know. Let’s do some research. This will be a guided tour through the research.
There is a wikipedia page: https://en.wikipedia.org/wiki/Model-view-viewmodel. It is inscrutable. Back to Google, and I find this page, which looks promising: https://www.wintellect.com/model-view-viewmodel-mvvm-explained/ . Let’s read that.
“As opposed to a passive view which has no knowledge of the model and is completely manipulated by a controller/presenter, the view in MVVM contains behaviors, events, and data-bindings that ultimately require knowledge of the underlying model and viewmodel. “
“…the view is that it is not responsible for maintaining its state. Instead, it will synchronize this with the viewmodel. “
“The ViewModel (Our Controller/Presenter)“
So far, I still have no idea how any of this is practically different from MVC. Before this is over, we are going to understand that.
“models and properties on the viewmodel are updated from the view via two-way databinding”
Let’s bookmark this article right about here. We might come back to it, but right now I want someone to directly answer my main question? How is MVVM different from MVC? Cause right now it sounds a lot like the VM is the same thing as a controller.
This article looks promising: https://hackernoon.com/mvc-vs-mvvm-how-a-website-communicates-with-its-data-models-18553877bf7d . Frankly, after reading that article I feel like I still don’t understand the difference. Something happened. I have maybe a glimmer of an idea, but it’s not enough.
In particular, consider this quote from that article. “Unlike the MVC method, the ViewModel isn’t a controller. It instead acts as a binder that binds data between the view and model. Whereas the MVC format is specifically designed to create a separation of concerns between the model and view, the MVVM format with data-binding is designed specifically to allow the view and model to communicate directly with each other.” That appears to be very specific, but even after reading it several times all I’m left with is vague, nonspecific generalities. This talk of “separating” view from model versus “binding” view and model are actually the same thing as far as I can tell. In either case, we are talking about a way for view and model to communicating, and for one to be able to update the other. So…I see no actual difference between these even if we use different words.
Here’s a StackOverflow QA page on this topic: https://stackoverflow.com/questions/667781/what-is-the-difference-between-mvc-and-mvvm . Strangely, it hasn’t been closed as off topic yet by a collection of people who got their reputation points by answering basic jQuery questions 10 years ago.
Now I’ve seen MVVM mentioned in the same breath as Silverlight several times. the only thing I know about Silverlight is that I’ve never needed it for anything.
From that StackOverflow QA page, I read the following: “For ASP.Net, MVVM is used to two-way bind data within views. This is usually a client-side implementation (e.g. using Knockout.js). MVC on the other hand is a way of separating concerns on the server-side. “
That is delightfully specific. Also, what is knockout.js? Let’s read on. Maybe come back to knockout later.
“…the VM is just a bridge, between the designer and the coder, so should be kept simple”
“MVVM…Don’t be fooled by the letters, by the omission of the C. Controllers are still there. They need to be. “
A question comes into my mind again at this point. As a developer of modern web apps, is MVVM what I’ve been doing all along since AngularJS came on the scene? Still not really sure. One author writes, “MVVM = model, controller, cache, view = two-way communication = rich interactivity”. I definitely have worked with a model and controller on the backend and a view on the front end with its own kind of controller build on Angular or Vue, etc. Is that front-end controller actually what they are calling a ViewModel?
I’m still on that StackOverflow QA page. A different author writes something quite different. He says, ” The controller is replaced with a ViewModel. The ViewModel sits below the UI layer. The ViewModel exposes the data and command objects that the view needs.” That same author points to a blog post we will look at next, after we finish looking over the SO page: https://russelleast.wordpress.com/2008/08/09/overview-of-the-modelview-viewmodel-mvvm-pattern-and-data-binding/ .
Another author says “MVVM is a progression of the MVC pattern which uses XAML to handle the display “. I have actually never heard of XAML before today. My experience is almost exclusively in writing web apps with a thin backend. In my stuff, the backend does almost nothing. If it does anything at all, its only purpose is data storage and retrieval. So even if XAML is a big thing, that’s why I don’t know it.
This quote, while grandiose and vague, still seems to help a little: “The main thrust of the Model/View/ViewModel architecture seems to be that on top of the data (‘the Model’), there’s another layer of non-visual components (‘the ViewModel’) that map the concepts of the data more closely to the concepts of the view of the data (‘the View’). It’s the ViewModel that the View binds to, not the Model directly. “
Before moving forward, let’s see what XAML is and where people use it.
OK, first off, XAML is Microsoft thing. I have a deep, unyielding disrespect for Microsoft that is only slowly, recently beginning to fade (maybe). Microsoft has like 30 years history of building shitty products like Windows 95 and Internet Explorer (all versions from beginning to end). I will still only look at a Microsoft program if it is open source or if I need to because of pressure from my industry. So anyway, XAML is some markup language built on XML that is used for writing views inside certain Microsoft stacks.
Let’s remind ourselves what Silverlight is, because that keeps getting mentioned in all this and I haven’t heard anybody even mention Silverlight in years. Well, Wikipedia says its deprecated. Looks like it was yet another example of Microsoft trying to roll its own version of an existing technology (Flash) and foist that on the public instead of just aligning itself with existing trends.
Now that I know the state of Silverlight, it concerns me that most of the articles I see about MVVM mention it as a relevant example. Regardless, though, it’s an architectural pattern, which is not language-specific.
I think we’re done with the StackOverflow page. Let’s take a look now at that blog post I mentioned above. Yes. Two paragraphs in I can already tell this is worth reading. Again, the link is here: https://russelleast.wordpress.com/2008/08/09/overview-of-the-modelview-viewmodel-mvvm-pattern-and-data-binding/ .
“…but MVC is not just about ‘Separation of Concerns’ which some people I have worked along side believe.” I am/was one of those people. If that’s not true, I look forward to learning better.
He writes: ” The controller is replaced with a view model. the view model sits below the UI layer. The view model exposes the data and command objects that the view needs. You could think of this as a container object that view goes to to get its data and actions from. The view model pulls its data from the model(s) below. ” That sounds exactly like a controller to me.
I stand corrected. This article taught me nothing.
OK, I think I found something that actually answers my questions, hopefully. Let’s begin reading here: https://softwareengineering.stackexchange.com/questions/104889/what-is-the-difference-between-the-controller-in-mvc-and-viewmodel-in-mvvm .
“In MVC the Controller knows the view, it can change the View. It also knows the Model and can call it. In MVVM a ViewModel is an abstract representation of the View and does not know the concrete UI, it wraps the Model in a way so that it can be displayed as desired. “
That quote is worth studying. This might be the first bit of information we’ve seen that is chewy with substance. One thing that’s still not entirely clear is how the view sends information back to the model. Is the ViewModel allowed to post information to the Model? In MVC, that is the job of the controller, but I haven’t read anything that said the ViewModel could do that. Even so, it seems to be the only option.
Our research so far has not been exhaustive. It has not answered all of my questions. But it has added some new ideas to my mind—stuff that might affect the way I design things in the future. I like the idea of separating view from the view model so that the view is just a dumb presentation layer.
There might be a part 2 on this topic. I may play with the ideas more and write further when I can ask and research more intelligent questions.
adamcross.blog 