Hey, everyone! So now that we have our fancy WPF form, the next thing to do is to glue
it with the rest of our code base, right, the stuff that we wrote, the gameEngine and
all that other stuff that we had which currently is not functional because we changed our application
for console application to Windows application. But before we go ahead and fix all that, I
want to give you some theory on MVVM. And in our next tutorial, we’re going to use
that theory in a more practical application. Alright.
So let’s go ahead and talk about MVVM. So MVVM is a software development architectural
pattern that is designed to break apart your WPF application into separate components,
right. And why is it good? Because you’re keeping it modular and each component has
its own single responsibility. Remember single responsibility principle? So that is very
good because you can fight off change very effectively. That’s the first one. Second
one, it’s very effective when you are working in large teams, right, different teams can
work on different components and that way, it’s much easier to collaborate.
These components work together in order to get the information to the screen. Even though
they all have single responsibilities, they work together in union to get the information
to the screen. And the information can come from anywhere, right. I just say external
sources because it encapsulates pretty much all the possibilities. And now it’s actually
good to start talking about components. So the first component we have is our model.
And the model takes in or doesn’t take in but it’s populated by the external sources.
External sources could be database, could be a web service, could be anything really.
And as you’ve noticed, I modified all the components just so it’s easier to relate
to the responsibilities and remember them when you’re working on your own projects
because it works for me and it helps me when I personify the object or anything else. I
personify a concept even or an idea. So let’s see. The model in this case as I say, it’s
an object, right. And it’s a simple object. Think of a model as a simple object. It doesn’t
know much about anything and it doesn’t have much logic if any, and it has fields
on and in this case, I see ID colored description. And then external sources keep populating
me with information. I don’t know much about anything else. I’m a simple object and have
some properties on me. So that pretty much gives you a good idea of what the model is.
It’s just a simple object. I mean think about it. It’s just some class and it has
some properties on it. As I said, not much logic if any, and it’s a very lightweight
object and it can be populated with external sources. So any type of external source can
populate this object. That’s the great thing about it because you can just use one object
and you can have like millions of external sources that populate the same object in different
ways but it’s still the same object so you don’t get code duplication which is wonderful.
Okay, so now the next one, the next component, is, actually let’s talk about the view.
So the next one, we’re going to skip the view model for now. We’re going to come
back to it though. So we talked about the model and now let’s talk about view. So
your view, I say fancy visual stuff so windows, layouts, dropdown, fancy UI elements. And
it says I’m the artistic of them all, users only see me, I’m good friends with View
Model, and he helps me translate some data that I can’t understand, data I can’t
understand, also gives me opportunity to interact with the model. Okay, so as you can see, the
view is pretty much your presentation so can see all those fancy dropdowns and all the
textboxes, and the grids, and all the scroll bars, and everything else. That is your view,
so the visual stuff. That’s pretty much it.
And I want you to see this. The model has no idea about the view. It has no idea that
the view exists. It doesn’t care about the view. Also, the model does not know about
the view model. The model has no idea about the view model. It’s just populated by the
external sources and it has no idea about the view model and the view. The view however
knows about the view model. And what happens in here, right in here which I actually didn’t
draw but I should have drawn, in here, what happens is it’s called data binding. So
the view binds to the view model. So now let’s talk about the view model.
So it says behavior. View binds to my properties so the view binds to view model’s properties.
Okay, so I do data transformation from model for view. I have commands for helping view
interact with the model. I also notify the view of changes to the model. Yet view model
has no idea about the view. But the view knows about the view model. So what happens is the
data binding is the key here because view model just provides some stuff, it consumes
the model, then it does some data transformations, provides some commands to attract with the
model. It has notification system setup so that if anything changes on the model, the
view can be notified and then vice versa. So you have two way binding, one way binding,
we’ll go over that. But all that is happening here.
Now then the view just binds to all that. And the view model is just there. It just
takes in the model and provides with all that functionality. And then the view binds to
it. Okay. As you can see, since we’re separating all these concerns, we’d become free of
injecting all kinds of dependencies into the view model because the view model doesn’t
need to know how the data is being populated. The data is being populated here in the model.
And the model is very lightweight. It can be passed around anywhere, right? It’s very
lightweight. It just has some properties on and that’s it. And so it can be populated
in any way. We don’t care about any of these dependencies.
That is happening here. And then the model is being populated. Then once it is populated,
all the view model needs to know is about the model, how it’s populated, we do not
care. So then we pass this into our view model and that’s when provide functionality and
then the view binds to the view model. As you can see, if we were a team of hundred
developers or even a little more, if we had a UX team and UI/UX team, we could have just
gave them some dummy data and said, “Listen, can you guys provide us with a view while
we’re working on the view model?” And some other guys could be taking care of how
the model should be loaded, they’re writing some persistent layers and all that kind of
stuff. And so we can separate our contributions pretty effectively. And one team can be working
on this or even one person can be working on this, one person can be working on this,
another person can work in on this part, a person or a team, it doesn’t matter. What
matters is that it’s very effective because then we can combine them altogether. It’s
like Legos, right? So you can have it all and then complete components separately and
then put them all together. And it’s very, very, very easy to integrate.
Another thing about the view model is that since it doesn’t have many dependencies
if any, because we’re just passing in the model and maybe a few other things if we need
to, but since it doesn’t need to care about the external sources and how everything is
being loaded, then we can very easily test our view model because we’re going to have
some logic in here and we’re going to be doing some fancy stuff, some data transformation,
stuff like that. So we can easily test that without having to worry about any of the dependencies.
And that’s a little bit of an advanced topic but in our next series, we will implement
this in a practical application I mean for our tic-tac-toe example which you are very
familiar with or should be very familiar with at this point. And it will make a lot more
sense. But before doing that, I thought it’d be a really good idea to give you a big picture
explanation just so that you can dive into the stuff and maybe read a little bit more
to kind of grasp the big idea, and then in the next tutorial, actually see how it’s
being implemented. If you’ve enjoyed this video, please remember
to subscribe to my YouTube channel and to my email list so that I can keep updating
you with the latest content. Until next time.