MVVM Source Generators: Never Write MVVM Boilerplate Code Again!

i am a huge fan of mvvm whether i'm developing apps with wpf xamarin forms dot net maui win ui or any other xaml framework i like the idea of sort of separating my code base from my user interface code base however as you develop more and more applications with mvvm just like any other framework and architecture pattern you've got to write a bunch of code well don't worry because now with the community toolkit for net there are source generators for mvvm which means you basically don't have to write anything at all and you let source generators take care of everything and today i'm going to break down how to remove all that code and get in to source generators that are brand new in this toolkit so tune in [Music] hey everyone i'm james and i'm back with another video this time around mvvm source generators now if you don't know anything about mvv i'm not going to break down the mvvm101 but i have a video it's right up there down in the show notes there is a xaml 101 and an mvvm101 and mvvm is model view view model now when you're doing this architecture pattern normally have your xaml user interface and your view models and those are loosely coupled and there's properties that have a data binding framework in between now this data binding framework is something like don and maui xamarin forms avalonia win ui wpf anything that's really xaml there's this glue that sits in the middle of it now to make that glue and those properties update like when you type into a text field that updates other things this mvvm needs to notify properties and you need to send these commands when you're doing different button clicks and that obviously generates some codes now you can write this code manually but there of course are tons of different you know different libraries out there to help you including mvvm helpers which i'll put a link to up here did a video on that which is a library from me that helps you write less code when you're doing mvvm but there's of course tons of other ones out there but there is a brand new dot net community toolkit that introduces source generators and source generators enable you to write less code because they generate the code for you and this thing is astonishing so i'm going to break down and get into it so let's do it all right so let's take a look at an application sample here which is a very simple app where i have first name last name over here and if i say james monty magno it updates right here if i click submit it will actually click a submit button and it'll do some debug information and things like that so here i have data property binding to first name and last name whenever i type in here it updates here so it's kind of nice we get that sort of mvvm goodness so let's see how this thing was generated the first thing that we can see in my xaml is that i have some entries so we have entry first name last name and this magic binding property now this is a.net maui application so you might see things like x bind or other things like that they all work very similar over here we have a binding first name which means there's a property in my view model which i have set to the binding context here on the xaml you might have dependency injected it you might have set it in the code behind wherever it is there is a property back there that is named first name last name and also full name as well now over here we can see that i have a button that also has a command which is submit command so you might take that information submit it up and then send it off to a back end now i just implemented standard generic just i'm going to implement mvvm by myself i'm not going to use any frameworks any libraries and we can see what that looks like over here my main view model i've implemented i notify property changed and that is the first implementation of how to raise notifications that things have changed and that is very very simple basically here we have this property changed it can take in a property name and then the user interface is going to subscribe to this property changed event when things change it uses kind of reflection or magic to say hey this property of first name or full name updated so go ahead and see if any user interface controls or data bound to it and go update the new properties so we see here we have some very simple stuff like first name over here it has a getter and a setter here we have on property change so if i set this it's going to raise a notification that first name has changed and i'm also saying hey go raise a property change notification for full name i do the same exact thing for last name because if they update the first name or the last name you want to update that full name this full name is just a getter so it doesn't do anything special it says return first name plus last name there and that's it that's pretty much it that's pretty cool and i use this little caller member name so that's why i don't have to pass in the name if i don't want to so that's kind of a nice little trick there now the other thing that's in here is this i command and the i command is what happens when this button is clicked so that i command is sort of a contract that says do this when i click this and be enabled in certain scenarios so over here i have a simple submit command and i initialize it here i use this question mark question mark equals that says if this is null then create a new command which uh this command is just part of done maui it could also come from other frameworks too and then use the submit over here so that kind of binds that stuff up so that way your sort of business logic isn't exposed to your interface it's exposed to a contract and i'm just outputting some information here which is nice so that's sort of it um but let's get rid of all this stuff because this is shenanigans i don't like any of it and i want to get rid of all of it pretty much so we're going to do that we're just going to get rid of all of this different stuff inside of here so here's what we're going to do we're going to add a nuget package over here and it's a currently of this time of recording when i'm recording in march 2022 is a pre-release and we're going to browse for community toolkit.mvvm this used to be the microsoft community toolkit the windows community toolkit but basically it is a new community toolkit.mvvm there's a bunch of them um that are out there that do different things and this one specifically is for mvvm so we're going to install this here and this will work in anything it doesn't have to be done in maui as long as you're using visual studio 2022 it'll be have access to the source generators over there and we just installed it cool all right so first things first that we might want to do is actually get rid of this property changed so if i go ahead and delete this and delete this property change over here and get rid of a bunch of stuff we're just going to try to delete a bunch of name stuff over here just delete a bunch of stuff i can come in and say i notify property changed up here property and when i bring this in i can say using communitytoolkit.mvvm.componentmodels that's one of the very first namespaces we're going to bring in and what this is going to do is it's basically going to say hey i want you to generate that source code for i notify changed on here now we can see that there's a squiggly here and that is because the source generators create a partial class so we're going to need to make this a partial that's one of the really cool parts of of c sharp is you can have these partial classes over there which is really really nice so again we've removed a bunch of stuff here so we'll get back to that here but so far i actually noticed that it actually has the same exact stuff the same exact signature model you're like where did that source code come from well if i come over to my dependencies on any of these we'll have these analyzers let me pull this out a little bit and this is where our source code is going to be generated so you can see here's all of the source code generators that are available so we have observable object observable property all these different things so this is i notify property change let me just open that up check this out now this has auto generated it's nullable enabled this is creating super sleek streamline code for me automatically so i don't have to write any of it at all it creates everything that i need it does equality operators there's property changes it does all sorts of things inside of here it's just absolutely beautiful like it writes all this code all this stuff for me automatically and it even gives me these nice little things right here which is set properties so you can actually pass it an old value and a new value and you can sort of really optimize this code so it sets all this stuff for you automatically i mean this is just really really cool so it is highly highly optimized so for example here if i want to say set property over here we can see that it actually takes in a ref of the field so i could say first name and then i could give it the new value over here now what this is going to do if i hover over it's going to pass me a bull and this is really cool because it is going to not only check to see if first name has changed it is then going to set it and then call the property change and return a bool so this is nice because now with little code at all i've optimized this code not to write any of this code set properties coming in automatically and what this does is it enables me to say if the property changed update it but i also want to update this full name too so that is super duper slick right so all i did was put i notify property change on here it implemented it automatically and it's good to go now there are some things in here like you can bring in observable object as well an observable object will have many of those same exact properties this is another one here that basically comes in from the component model that that implements i notify property changed i notify property changing as well so just know that while you can add this attribute i notify property change over here it can also be an observable object and this is an important thing because imagine a world where you needed to i don't know come in and say like public class my data item okay you might for example say my data item and you're like oh wow okay well now does this thing implement i notify property change is there some other thing do i want to implement on this base class i can't i can't do something like observable object as well because you can't inherit from multiple things so what you can do is just add this little attribute here and it will tally on to it so that's kind of nice is you can sort of add that onto there get the i notify property changed get the my data item there and you're good to go so if you have like a database thing totally good but this also still looks like quite a lot of code so we actually want to get rid of all of this code so let's literally do that okay so this is what we're going to do is we're going to get rid of some of this stuff here so let's get rid of this here i'm going to do observable object because why not that's going to be my base here and we're going to go ahead and get rid of all of these properties okay now all we have here is first name and last name private strings that's it okay now here's where the magic of source generators comes in i'm going to blow your mind all you got to do is say observable property now notice that first name just went away okay watch this observable property last name is here too now you're saying like where are these things coming from james because now watch this i can say public main view model like give it a constructor i could say this dot and i have first name in the intellisense where did it come from well that is the magic my friends of the source generators if we come over here under observable property i can look at the main view model so they're broken down here and it's generated all of that code for me automatically right there so i no longer have to worry about creating all that code doing all that stuff checking over here it checks all the equality does all this stuff for me automatically and calls the on property changing and on property change for me automagically which is kind of amazing but wait you're saying well james how do you update this full name because you've added these magical properties how are you going to tell it that whenever you change first name to also go ahead and do this down here well you add another attribute on here you can say also notify change four or can execute four this is cool i can say name of and here i'm going to say full name all right i'm going to add it down here too so what this is going to say is make this an observable property and then if that changes also notify full name as well okay now let's go back into that source code and we can see here check this out check this out we have our first name here but notice now we have two on property changes and is going to call into first name and full name automatically for me now there's a bunch of gobbledygook stuff going on here right this internals blah blah blah but that's because all the source code has been generated for me behind the scenes amazing it's just so cool now last thing here okay what about commands this is uh my other favorite part okay normally you'd have to create the command create the public command set it all up here no you just delete this here all right let's bring back in our let's bring in our system diagnostics here you just create your methods over here okay and then all you got to do is just say i command right this is an observable property this is an i command you're going to now bring in community toolkit mvvm.input and just like that if i come back over into my source generators and i look over here i'm going to have a brand new source generator for i command generator and here's my submit look at this it's an i relay command so that's its implementation of i command and it creates all that code for me automatically so i don't have to call that anymore it knows automatically that that is my submit is a private void it's going to handle it all now i'm going to do is run it again all right and i've dramatically look at this i've basically there's like no code at all inside of me i'm just listing my properties putting it in here and all that source code is generated for me automatically now if i come back over and see my running application let's bring it over here i can say james monty magno sure enough when i hit click well let's debug this and actually see what's going on over here we can actually add a break point to make sure you know i don't know if you believe me that's actually calling this let's go ahead and bring this back over here so we get james monty magno hit submit look at that hits my break point and my i command everything is implemented automatically now you're saying james this is amazing but what if i have something like an async task right what if what if i need this to be asynchronous i need to make a web request well totally fine i just did it it's done check this out when i go into the source code that was generated it's an iasync relay command it's all done for me automatically it's already implemented 100 if it's async it just does it for you automatically you no longer need to rely on mvvm helpers or other things it's all built in 100 right there for you now i am literally just scraping the surface of this community toolkit for net when it comes to mvvm now you need to definitely check out the blog post which i'll link below from the team behind this that's working with the community add all sorts of new stuff there's all sorts of ridiculously awesome stuff inside of here and this is just one of the libraries that are part of the community toolkit now i also want you to check out the.net youtube i'm actually going to have sergio on from the team that was working on this to talk about the entirety of what's in the dotnet community toolkit so definitely head over there um and subscribe to the.net youtube because we put out videos over there as well official ones there it's gonna be really awesome but i hope that you really enjoyed this and realized like mvvm no longer needs to be super complex right you don't need to write all of this source code you need to do all of these different things you can just write a few little attributes and everything will be automatically generated for you i'm using this in all of my projects going forward file new i'm creating a down at maui workshop and we're just going to teach it this way why teach it the only way to scaffold all this code right here boom you're totally good to go so dive into the documentation which i'll link below over here and honestly if you are looking to get started in mvvm you're like wow that looks amazing but i want to know the basics again check out the videos up over here down there for mvvm and xaml 101 but honestly go check this thing out it blows my mind and if you like this at all or if your mind is blown leave comments below and of course if you like this thing give this video a thumbs up so other people find it that is the best way to support the channel besides actually not only subscribing to the channel which would be awesome but if you like and share this video it helps other people find it and then it goes into the youtube algorithm of goodness i hope you enjoyed this video i am just enthralled and just blown away by this library and i can't wait for new versions of it to come up and for it to hit stable release which by the time this thing comes out who knows if it already has i hope you enjoyed this video make sure you like and subscribe as i always say and i can't wait to check you on the next one so until next time i'm james thanks for watching [Music] you

Channel: James Montemagno

Views: 72,255

Keywords: mvvm, source generators, xaml, .net, dotnet, c# source generators, community toolkit, .net community toolkit, mvvm community toolkit, mvvm viewmodel tutorial, c#, model view viewmodel, mvvm tutorial, c# mvvm viewmodel, mvvm pattern, design patterns, how to use mvvm, design pattern, programming, mvvm design pattern, mvvm c#, tutorial, c# mvvm framework, c# mvvm pattern, mvvm programming, mvvm wpf, c# mvvm, c# viewmodel tutorial, view model

Id: aCxl0z04BN8

Length: 19min 24sec (1164 seconds)

Published: Thu Mar 10 2022