What is the MVVM pattern, What benefits does MVVM have?

ymvvm that was the thumbnail that's why you clicked it and i'm going to answer that today because so many of you have asked in the comments why do i need to learn mvvm what is it about why can't i just start writing code and be super productive why do i need to learn an entire architecture pattern to just start developing apps well you don't have to if you don't want to but you totally should in today's video i'm going to break down everything that you need to know about mvvm what it looks like without mvvm and what it looks like with mvvm to start building applications so tune in [Music] hey everyone welcome back i'm james montemagno and i'm back with another video today talking about mvvm yes model view view model mvvm it's sort of like mvc but with more v's and more m's and actually one less c so it's similar and not you have the model view but you have a view model instead of a controller now the whole idea here is it's an architecture pattern right just like mvc is an architecture pattern just like mvu model view update as an architecture pattern they're a way of structuring your code and then frameworks come along to sort of spice it up add some additional goodness for that stuff there so like a controller in asp.net core adds a lot of routing and a bunch of other stuff in there the mvu the update part of like a flutter or a comet application sort of does automatic updating and sort of a c-sharp or dart style mvvm came about in the world of xaml so an xml based markup language which you use today to build things like dot maui applications xamarin forms applications uno applications avalonia applications win ui 3 applications uwp applications what am i missing wpf applications all the different types of applications for ios android mac windows all the good things as well so it is a way of saying hey my user interface is going to be written in this xml based markup and what if i needed to test that code or what if i needed to simply abstract that code into a way that's not tightly coupled to my user interface because you can totally tightly couple it to your ui we'll take a look at it today but what if you do want to unit test that or what if you want to have some you know automatic updating happen as well so the view model and mvvm sort of brings in that loosely coupling viewmodels should have basically known nothing about your user interface is the whole concept and then an mvvm framework which are all those things i listed including don and maui and abellonia and nuno and all those things bring in a data binding framework and structure to the application that enables sort of magic if you will so when your users type in a text field it automatically will update the code behind when you update the code behind it automatically updates the ui so what i'm going to do is i'm going to break down what it looks like to build an application very simple like a first name last name app with no nvvm like hey i'm just slanging code over here it's going to be great and then we'll go ahead and use mvvm structure to actually take that code and put it into a more uniformed way of doing it that's super testable so let's go ahead and check it out all right i created a very simple this is just a donna maui application again it could be any application app over here that has two entries a label and a button now with xaml of course the names and the properties and the things don't look the same but most of the data binding the logic the principle are all very very similar some syntax of course can be slightly different but i'm here in a dynamic maui application and the base here is going to look pretty similar so i have two entries a label and a button it says click me photo open up the app sure enough i have a first name last name and a button that says click me type in james i can type in monty magno and nothing happens now the concept here is that i would like to update this label specifically with whatever's in that label thing for first name and last names i could concatenate those two things together so let's first take a look at this in the code behind here the main pages mlcs i don't have access to anything if i just type in label i have a generic label i don't have access to this label because it hasn't generated a backing field like the xaml is just sort of rendered and unless i tell the xaml that i would like to expose it via a public property or a you know internal property here to the main page it's not going to do so because why generate extra code if you don't need it i'm definitely going to need to update that label so let's do something called x colon name so i'm going to give it a name sort of like exposing a property like if i had a property of label and then in the code behind i would create that as well right so i would do that here and i'll say label full name now i know if i'm going to concatenate my label with the two fields from entry i'm going to need to do that so let's go ahead and do an x colon name for both of those i'll do entry first here and then i will do entry last there we go entry last cool so now if we were clever about this what i could do is i could say void update ui or update label i guess we'll just do that and here what i'll do is i will say label dot sorry label full name dot and here you can see i have access to all sorts of things i have opacity text color max lines i have events all sorts of things in here but we just want the text property so let's go ahead and do that here and i'm going to say equals and let's do some string concatenation of entry first dot text do a space and i'll do entry last dot text as well cool so that's it so i just have a little bit of code here it's going to be updating every time now there's two ways of introducing in events and this is where things get a little bit tricky because i now have these you know mean it's just references to these three different fields but how do i create events on them well there's two ways of doing it if i wanted to i could say entry uh first dot and then here i could look at all of the different properties and we can see i have size change text change completed over here i'm going to say text change and i could say plus equals add an event here and then i'm going to have this full event so i can't just bind it automatically to this update label i'm going to go ahead and put this here now it gets a little tricky because am i registering in the right place when does it get unregistered is it going to be garbage collected here and there so maybe i put the plus equals inside of a cons you know constructor and then the deconstructor i unregister it or do i do that in on a pairing or on on a pairing it's a little bit funky um so what you can do is instead of manually registering it you can come in and actually come into the entry and you could say text changed and i could do entry first text change so i could just simply bind it not bind it up but set it here to that then what i could do is on the entry here i could say text changed and then i could create a new event because you know i don't want them to be exactly the same and that will create another field for me automatically inside of visual studio so then what i would do is i'd say update label and then i would also do update label here and you're probably saying well james now it kind of looks like you kind of have some repetitious code over here but in general you know i probably want different events maybe here um just just so we can kind of see it here and this looks fine right this isn't a lot of code but how do i test these things how do i make sure i do this stuff what happens when i need to pass this data around it gets a little tricky because for example if i came back to this button and i wanted to say you know clicked for example and add a new event handler that will look good and then i could say you know you know you know counsel dot right line and then i could say label full name dot text for example and just output that every time i click it um cool so i got a click event but if i needed access to that button then i got to do the same thing right i got to come in and i gotta you know enable it disable it i could i could come in and say x colon name dot button test here and then what i could do here is i could say you know button test dot is enabled equals false and then i could come in and say button task dot is enabled is enabled equals true and now we're sort of you know getting really deep references into the ui okay so now i can actually run this application again so let's do that let me shrink it over from my widescreen monitor and sure enough if i say james i say monty magno and then of course i can click and you can say see kind of flash there because it and disables it and re-enables it automatically but if you look back at the source code how am i supposed to test this stuff right how am i supposed to come in and test that when this thing changes this gets called that this is actually set correct because i'm not setting it to a backing field there's nothing to test here how do i make sure this enables and disables automatically that these things are being set well you kind of can't right that's kind of the bummer part of it so let's add some mvvm goodness to it the first thing that i'm going to do is come in and manage nuget packages and i'm going to install the community toolkit.mvvm version 8.0 preview and i've done a whole video on this this is sort of the new modern way of doing mvvm that really simplifies development this adds all sorts of good stuff in here so we're going to add that nuget package which is great again it's not required you could do a lot of manual stuff but we're not going to do that because you know why why bother with manual stuff when you can do all this stuff for freeze basically but what i can do here is i can say add and now i could do two things i could add a brand new project and my view models could live in that entire separate project they don't have to live in this project right they can live somewhere completely else or i can just come in and add a new class so i'm going to do that and i'm going to say that this new class is my main view model cool now my main view model over here we're just going to go ahead and add a new namespace we're going to say public partial class i'm going to make this an observable [Music] object which comes from that mvvm toolkit so let's go ahead and add that on there perfect i'm going to go ahead and clean up some of these name spaces boom all right cool now we're looking pretty good okay so what i'm able to do now at this point is actually start to implement this logic that was here but i'm going to do it in a way that's like more testable as well as add in some mvvm data binding magic so what i'm going to do is i'm going to say string first name string last name and then i'm going to do a boolean that is is busy because if i looked over here at this is enabled we would want that to be set to false and then to true and do that counsel right line then what i'm also going to do is i'm going to do a public string of full name here all right now this full name is going to concatenate the first name and last name but the first thing we need to do is make these properties observable so i'm going to say observable property that comes from the mvvm toolkit and i'm going to do that for all three of them here so observable property for first name last name and is busy now that is a source generator which is going to automatically come in and generate a bunch of properties for me so here's on observable property my main view model and what we can see is that this has written a bunch of super optimized highly optimized code here for first name for last name and it handles all of the changing and mechanisms to make the data binding work which is really cool so we're gonna do that now we don't need to make full name observable because what we're going to do is come in and say hey when we do this just go ahead and set it to first name and space last name there we go now that looks pretty good and then what we're going to do is we're going to tell the mvvm framework that hey whenever first name or last name changes raise a notification for full name so i can say um raise or what is it called it's called notify property changed for and here i can say name of full name there we go there we go perfect nice all right now at this point what i'm able to do is i'm able to come back into my main page xaml and just see us and delete all this stuff i don't want to do any of this stuff okay get rid of that and now inside of my main page the idea is that i don't need to hard code in any of these pages any of these name properties any of this stuff so i'm just going to get rid of all of this stuff here okay so delete delete delete makes my xaml a lot smaller too again i'm decoupling that ui from my code behind so we're going to do now is i'm going to say text i'm going to say binding to first name over here so this is a string basically that comes in and it says hey this is referencing a property name inside of my view model and that's going to be the first name and you can note that i'm using capital first name because if we remember that source generated generator generated public string first name over there for me and then what i can do is i can come in and say last name perfect same thing here i can come in for the label and i will say full name now i'm not getting an intellisense in here because at this point i don't have any of my binding contacts or anything like that set up so i could go ahead and and do that here so i can say x colon or xmlns view model i'll say view model i guess this is just going to be my main or what is it maui app 4 and then i could say x colon data type this is a don and maui thing and i'll say view model is my main view model and then that will sort of link these two things together to get compiled bindings we see those little dot dot dots go away now at this point for the button i can also do this i can say is enabled and i can do a binding over to the is busy that's kind of cool right so i have that all rigged up and i'm good to go so that will automatically enable and disable the button if i don't have to set any properties or do anything and that means i can set it from all sorts of different methods and all those different things from my code behind completely there and the ui is just going to be reactive all right all right so we're getting closer the last thing we need to do is implement that button click okay now when we do this this is going to be something called a command and a command for all intents over here is going to tell the button what method to call that's in the view model so what we're going to do is we're going to put in something we'll call like tap command and that'll be good that's what we're going to call it if i go into my view model over here i'm going to go ahead and simply put in a void over here okay and i'm going to say tap all right and then now in this method i'm going to do is busy equals true all right and then i'm going to do is busy equals false and then i'm going to do something called uh counsel.writeline and i'll do you know full name let's i'll put the full name here just like we did before now in this instance you're probably saying well james you're sending is busy to true and then is busy over here to false so that's actually not going to work because by default is busy's going to be false right and true so we're going to want to do in our view model is do something i like to do is create a public you know bool is not busy over here and do the opposite of is busy so that's something you can do there too so now in our xaml instead of doing is busy we'll do is not busy all right there we go perfect now the last part here is exposing that tap turning it into a command and luckily the mvvm toolkit also does that so here's the relay command i'm going to bring in the mvvm toolkit and what that will do is it'll automatically take the name and generate the i command or the implementation for you automatically and append command at the end so again if i go back over into my source generators and i look at the relay command generator we'll see tap and right here we see the tap command that's cool all right now we're going to do is link these two things together and i'm just going to kind of do it in a way i wouldn't do i'll probably do some dependency injection automatic fun stuff happening here i'm going to say binding context which is the way of binding it up and i'm going to set it equal to a new main view model all right all right now before i boot this up i need to do one more thing which is i also need to say hey whenever i set is busy i also need to set is not busy there we go so now when i boot this up and we just have this nice mvvm sort of architecture here i've segmented out this code tap is by itself it's not worrying about the ui at all and sure enough now when i come into my app i can say james monty magno and i can tap away and you can see it still click enable and disable automatically now this is really really cool because if you notice inside of my xaml i have no references to the entry i have no references to the text changed event or anything like that sure enough the entry automatically just figures out what event to use i don't have to tell it to call some other method or do anything like that by principle of me setting right here the first name and last name properties it's going to automatically raise that notification same thing here whenever i hit the tap command it's going to automatically change that over so now my application works super smooth automatically responsive when i enter anything and it's totally good to go i can take this view model put it into a completely separate project like i mentioned earlier use my favorite unit testing framework like nude or xun or ms test and it's complete it doesn't know about the ui none of this knows about the ui all this generated code is simply that generated code you don't have to worry about anything it's not doesn't care about the ui it's just giving notifications to don and maui in this case that something has changed or something has been entered you get that beautiful two-way data binding and to be honest that is really just the beginning of how mvvm and xaml ui and even c sharp ui all go together to give you that nice update mechanism back and forth i hope that this was like a pretty nice overview insightful look at why mvvm is it's kind of almost necessary in some way when you're doing this type of application development but how it adds a bunch of other perks onto it as well like not having to put any code in your code behind that's not testable or having nice automatic updates in there and there's a lot more in xaml you can do string formatting in xaml you can reference other elements inside of xaml with data binding you can additionally do things like value converters so in this example i was doing is busy is not busy you could have a value converter i don't know why i use quotes again but it's literally called a value converter which takes one value and converts it to another value you can deep link basically into other classes and properties so if you had a person you could do person.firstname person.lastname and all of that works together you saw me use xdatatype which is the compiledbindings that's kind of an extra tip and trick if you're using forms or down in maui where you get that intellisense which is really cool and of course you do get all that intellisense inside of your ide compared to have something completely separate in your code behind that's me that's mvvm that's xaml that's data binding if you like this or if you have more questions into that world i will link to documentation below into a deep dive into mvvm and xaml i also have a whole video mvvm101 where i go through all that stuff and i have a down at maui workshop here as well it's four hours long takes you from start to finish and of course i have that video on the mvvm toolkit too if you enjoyed this video and you want more sort of explainer videos let me know i'll do them put it down in the comments below let me know what you think but that's going to do it for this video so until next time i'm james montemagno thanks for watching and of course don't forget to like and subscribe alright cheers [Music] you

Channel: James Montemagno

Views: 91,483

Keywords: .net maui, mvvm, model view viewmodel, data binding, xaml data binding, why mvvm, data binding c#, C#, .NET, avalonioa, uno, uno data binding, avalonia data binding, wpf, programming, c#, architecture, development, viewmodel, c# programming, c# tutorial, wpf mvvm, mvvm viewmodel tutorial, mvvm tutorial, c# mvvm viewmodel, c# viewmodel tutorial, mvvm pattern, how to, model-view-viewmodel, how to use mvvm, mvvm design pattern, c# mvvm pattern, mvvm c#, c# mvvm framework

Id: AXpTeiWtbC8

Length: 22min 38sec (1358 seconds)

Published: Thu Jun 30 2022