I am a huge fan of MVVM, whether I'm developing apps with WPF, Xamarin
forms, .NET Maui, when you, I, 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.
You 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 tonight.
Hi 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 MVVM, I'm not going to break down the
MVVM 1 0 1, but I have a video it's right up there down in the show notes.
There is a XAML 1 0 1 and an MVVM 1 0 1 and MVVM is model view, view.
Now, when you're doing this architecture pattern, normally, have you resemble user
interface and your view models, and those are loosely coupled and there's properties
that have a data binding framework in between those data binding framework is
something like Dani Maui, Xamarin forms.
Avalonia when you eye WPF, anything that's really XAML, there's this
glue that sits in the middle.
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.
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 appear at a video on that, which is a library
from me that helps you write less code, uh, when you're doing MVVM, but
there's of course, tons of other ones.
Yeah.
But there is a brand new.net community toolkit that introduces source
generators is 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.
All right.
So let's take a look at an application sample here, which is a very simple app
or have first name, last name over here.
And if I say James Monte Magno, it updates right here and I click submit.
It will actually click a submit button.
Do some debug information and things like that.
So here I have a data property binding to a first name and last name whenever
I type in here, it updates here.
So that's kind of nice.
We get that sort of MVVM goodness.
So let's see how this thing was January.
The first thing that we can see in my XAML is that I have some entries.
So we have a 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 binding first name,
which means there's a property in my view model, which I have set to
the binding context here in the XAML you might have dependency injected.
It might have set in the code behind wherever it is.
There is a property back.
That his name, 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 summit command.
So you might take that information, submit it up and then send it off to a backend.
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.
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 any 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 a 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 if 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 or 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 returned.
First name plus last name.
And that's it.
That's pretty much it.
That's pretty cool.
And I use this little, uh, collar member names.
So that's why I don't have to pass in the name if I don't want to.
So it'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.
And, uh, I initialize it here.
Use this question, mark question, mark equals that says, if this is no,
then create a new command, which a, this command is just part of Don Maui.
It could also come from other frameworks do and then use the submit over here.
Um, 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 it's sort of it.
But let's get rid of all this stuff.
Cause 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 those different stuff inside of here.
So here's what we're going to do.
We're going to add a new gear package.
Over here.
And that's a currently, uh, this time of recording when I'm recording and March
20, 22 is a pre-release and we're going to browse for community toolkit dot MVVM.
This used to be the Microsoft community tool kit, the windows community
tool kit, but basically it is a new community toolkit that MVVM, there's
a bunch of them, um, that are out there, uh, that do different things.
And this one specifically is for, and.
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 will be 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 the.
Property changed.
So if I go ahead and delete this and delete this property changed over here and
get rid of a bunch of suffers, kind of 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 proper.
And when I bring this in, I can say using community toolkit at MVVM dot component
models, 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.
Property 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, um, Of C sharp as 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?
If I come over to my dependencies at any of these, we'll have these, uh,
analyzers, let me pull this out of.
And this is where our source code is going to be generated.
So in, 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.
And let me just open that.
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.
Does equality operators as 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, automatic.
And it even gives me these nice little things right here, which is set property.
So you can actually pass it an old value in a new value and you can
sort of really optimize this code.
So it sets all this up 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 proper.
Over here.
We can see that it actually takes in a, uh, ref of the field.
So I can say first name and then I could give it the new value over here.
Now this is going to do.
If I hover over it, 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.
And return a bull.
So this is nice because now with the little code at all, I've optimized this
code and I have 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.
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.
Um, that, uh, 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 dunno, 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 in this base class?
I can't, I can't do something like observable object as well.
Cause you can inherit from multiple things.
So what you can do is just add this attribute here and it will tally on to it.
So that's kind of nice as 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.
All of this code.
So it's literally do that.
Okay.
So this is what we're going to do is we're going to get
rid of some of the stuff here.
So let's get rid of this here.
I'm going to just 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.
Now here's where the magic of source generators comes in.
I'm going to blow your mind.
All you gotta do is say observable property.
Now notice that first name just went away.
Okay.
Watch this observable property.
Last name is here to.
You're saying like, where are these things coming from James?
Cause now watch this.
I can say public main view model.
I give it a constructor.
I can say this dot and I have first name in the IntelliCENTER.
Where did it come from?
Well, that is the magic.
My friends of the source generators.
If we come over here under observable proper.
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 at checks, all the equality does all this stuff for me
automatically and calls the on-property changing and on property change for me
automatically, which is kind of amazing.
You're saying, well, Dame's a, 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 for or can execute four.
This is cool.
I can say name of in here.
I'm going to say full name.
I'm going to add it down here too.
So this is going to say as a, 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 is 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.
What about commands?
This is my other favorite part.
Okay.
Normally you'd have to create the command, create the public
command, set it all up here.
Now you just delete this year.
Oh, it was bring back in our, it was bringing our system diagnostics here.
You just create your methods over here.
Okay.
And then all you got to do.
Is this a I command, right?
This is an observable property.
This is an I command.
You're going to now bring in community toolkit MVVM dot input
and just like that by comeback 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.
Look at this, it's an I relay command.
So that's its implementation of I command and he 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 voice.
It's going to handle it all.
Now. I'm going to do is run it again.
All right.
And I've dramatically look as I've basically, there's
no code at all inside of it.
I'm just listing my properties, putting it in here.
And all that source code is generated for me, automatic.
Now, if I come back over and see my running applications, bring it over here.
I can say James Monte Magno.
Sure enough.
When I hit click while it's debug this and actually see what's going
on over here, we can actually add a break point to make sure.
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 Monte 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 I, what if I need this to be asynchronous?
I need to make a web request.
Well, so I find, I just did it.
It's done.
Check this out.
When I go into the source code that was generated, it's
an I, a sync 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 dotnet.
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 dinette community toolkit.
So definitely head over there and subscribe to the.net YouTube.
Cause we've put our videos over there as well, official ones.
They're going to be really awesome, but I hope that you really enjoyed
this and realize like MVVM no longer needs to be super complex, right?
You don't need to write all of this source code yet.
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 da at Maui workshop, and we're
just gonna teach it this way.
Why teach it the only way to scaffold all this code right here?
Boom.
You're totally good.
So dive in to 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 one-on-one 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.
Thumbs up.
So other people find it as 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 in.
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.