Stop writing M V VM code and let the community toolkit generated all for you.
I've talked about it before in previous videos, but M V VM source
generators are absolutely amazing and I've learned a lot since my original
video, and there's a new version that introduces some brand new features that
I'm gonna break down for you today.
So tune in.
Hey everyone.
I'm James, and I'm back again talking about mvm Source Generator
as part of the.net community toolkit.
I've talked about them on previous videos at.net comp.
Sergio broke down everything new in version 8.1, but I've learned
a lot since my original videos.
I've been using them in tons of my applications and there are just.
A plethora of new features that I wanna break down for you that maybe
you've actually been around for a while, but I didn't include in my
video cause I did know they exist and then Sergio told me they exist.
And I want to let you know about all the awesome features cuz the more I use this
toolkit, the more I absolutely love it.
So let's go and break it all down.
All right.
First things first.
Over here.
This is a .NET MAUI application, but this community toolkit
works with pretty much anything.
I have a .NET MAUI app.
I have a Xamarin.Forms example.
I have a Wpf example.
I have a Wpf .NET framework example, and you do need to put your code in a
.NET standard library and, and go into.
Cs prod and you know, update your langer over here to at least be C sharp, I think
eight or nine or something like that.
The tools will tell you, but everything is here for you automatically.
Now let me go ahead and run this application really quick.
This is my m vvm source generator sample that I, uh, use in as
example in my previous video.
It's a very simple application over here that has a first name field in James
and a last name Field, Monte Magno.
Here I can click this submit button and it goes and it parses some data.
It waits a little bit, and then it will pop up a dialogue box using the
guard methods in the community tool.
Now if we look at the source code here in the main view model,
we're gonna notice a few things.
First, I'm using these cool attributes that are coming from
the M V V M source generators.
We can see here, there's the community toolkit stuff down here I
have an observable property of first name and another one of last name.
And note that I have another public property here that is Concatenating
first name and last name.
And we've added this notified property changed.
For both, um, both of these properties.
And then down here I have a simple method and it has this relay command on top.
Now, previously this was I command and also notify for, but in the
final version of 8.0, they changed the names here and I've updated my
example so you can now see them.
Now the cool part here is that this doesn't really look like normal
property changed events and also like how is I notified property
change getting implemented here?
Well, that's all because of source generators.
Those attributes are source generating behind the scenes.
If I go into my analyzers, I can look at the M V V M source generators.
Down over into the I notified property change.
We're gonna notice that this is a partial class and all of this code has
been generated for me automatically.
A little more so easily enough is the property changed events.
Now this is source generated code, so it looks a little complex, but what
we see is it generates first name.
It gives us our get and our sets, and it optimizes the code and raises those
property, changed events for first name and full name and we can see it here.
Last name and full name as.
So that's really, really cool.
Now, a few things that I will also note that I didn't know existed
before is sometimes you might want to do things when things change, and
there are partial methods to do that.
If you look at the source generated code, they're right there.
So this is actually really neat.
So let's say for example, you needed to not just.
Go in and execute a notified property changed event like we
can do with the source generator.
Maybe you needed to execute some other code.
For example, whenever that property changed, you can do partial.
And here if I zoom in, you'll see that for every property you get an on first name
on last name changed and changing event.
So here, if on first name changed, I could go in and I could go ahead and I don't
know, like, you know, display and alert.
So let's grab an alert, alert notification down here, and then just say you.
Changed, I don't know for some reason.
And we'll say, uh, value, just output to value, right?
So now just like that, I've taken this and I've said whenever first name changed, of
course execute the value changed event, but then also raise this alert dialogue.
So I'm just go ahead and make this smaller and I'll say deep boom, just like that.
Look how fast it was.
Basically, it now has notified that up and it's gonna be a bad
experience there, but that's really neat in case you need to do so.
And some people have noted that additionally, that sometimes there are
multiple attributes and those stack up.
Wouldn't it be nice to have those attributes on one line?
Sure.
Just like put your attributes on online, that works as well, that that
will generate the same source code.
Whatever you like, slowly up to you.
Um, this works really great, so you can just add those attributes
there and handle everything for you.
I like 'em on separate lines.
That's my opinion.
All right.
The other one down here is something that has been built in since
8.0, which is the relay command.
This was eye command previously.
Now it's relay command.
This will handle synchronous or asynchronous tasks, and we can see
that this is basically going through awaiting and parsing some data.
So sort of, uh, mimicking a network call.
Now, if we look over at the source generators, what this has done for
us is it's implemented this submit and it's created a submit command.
And this is of type i ay, relay command.
And we can see that it's implemented in async relay command.
Now, uh, inside of here, what's really neat is it gives you additional properties
and ways of canceling and getting insight if that command is running.
So normally what I would do inside of here is I'd have something
like, You know, a bull is busy.
And then I would make this an observable property.
And then what I would do down here is I would say like, you know,
it is busy equals true, right?
And I'd make that a, you know, is busy of course.
And then I'd say, you know, false basically something like that, right?
So a little is busy or false and then I go back over to my UI and I'd adjust that
back and forth, uh, based, if I wanna do a little spin spinner or something.
Well, you don't need to do that because there's a bunch of stuff
built into the relay command.
So let's get rid of this stuff cause we don't need it.
And I'm gonna go into my main page here.
I have an activity indicator, but it's not running.
It doesn't know when to run, doesn't know when it is busy.
So what we can do is, I can say is running and I'm do a binding here to
specifically the submit command dot.
And what I wanna show you here, we zoom in.
Is that there is a can be canceled execution task is cancellation requested
and is running so I could bind is running and is visible to the binding submit
command is running just like that.
Let's go ahead and run this one more time and we should see
for about that five second when that submit command is executed.
It goes ahead and runs.
So let's go ahead and do this here.
I'm gonna type in my Jameson Magno, click submit.
And just like that, our activity, activity indicators running.
It's mind boggling.
It's like so unbelievably cool.
And here we get our guards and we can see that that's gone off and
running and boom, just like that.
It's done.
So that's really neat because no matter what, if there's an
exception, there's something else.
When this thing is done, you don't need to add extra code into it.
Is really, really cool.
One less variable, one less thing, because the command knows if it's in
the execution block automatically.
That's pretty unbelievably cool.
All right, so those are some of the new features that I've noticed
as I've been going through this.
I've also noted here that while I do come in and I add this attribute
of Notified property changed, there is a built in class that you can
inherit from called Observable Object.
Now observable object.
If I go over here, um, we can see that this is coming from the
community toolkit and it implement.
I notify properties changed and notify property changing.
So, up to you.
If you're able to inherit from a base object, then go for it else.
Just go ahead and add that attribute up top and your code
will be source generated for you.
So either way there, really, really nice.
All right, let's talk about new features now inside of 8.1 we're in preview one.
So I got preview in here.
So you know, it may change over time.
I don't wanna, you know, say anything.
Um, in case they change attribute names.
They have done tons of performance improvements and under other optimizations
to all of the generated code.
So just for free.
By upgrading, you'll get optimizations, but they've also added the ability to.
Set different JS O properties and J s O attributes.
Now, since the code is generated for us there previously was no way if
we're serializing that or deseril that to use different JS O properties.
So that's kind of a bummer, right?
If you're using the system text json stuff, you want to add those attributes
on top of it to say this is required.
Or you know, don't use first name, use name, or use fn, for example.
But now you can do.
So specifically if you.
Version 8.1, preview one.
You can now add another attribute on top of this so I can go
in and I can use property.
This is a really neat thing they did and Sergio breaks down everything
in more detail around how, why they picked these things in the release
notes and in the don net com video.
But I can say J s O and I can use any of these J s O properties from
system text json serialization.
So I could say required, for example, or I could say property and I could say J S O.
Uh, property name and I could say, let's say FN for some reason, right?
Maybe that's what it's being serialized too.
And I could do that same thing.
Maybe last name's not required, but that is Ellen.
Now when I go back over to my source generated code, let's go ahead and look
at the, uh, observable properties here.
There we.
It will automatically append on those specific attributes for you automatically.
So because we applied it to that specific property, we now get the JSON required
attribute and the JSON property name attribute as well, which is super
duper cool, and we can see down here.
We also get ln on our property name attribute.
There are so many amazing features in the community
Toolkits, that's just one of them.
The Dynamic Community Toolkit has a bunch of things, including diagnostics,
including uh, performance things.
There's also a Maui Community Toolkit.
There's a Windows Community Toolkit.
There's so many amazing things.
I will link to the community Toolkit, GitHub, and of course, I'll link to
my sample project right here, so you can pull it down, see how it works.
In Don and Maui, in wpf, in framework applications, and SAM Forms applications.
And so much more.
If you have any questions, leave them down there.
If you like this video at all, you're using all of these new source generators,
give this video, thumbs up, boom, hit that subscribe button, share it with
your friends for all of these goodies.
But I just wanna thank you so much for all of the amazing feedback on the
previous video, on the workshop, and every time we show this thing off, I
absolutely love it and I know that you're gonna love using these new features.
And if you have other things that you found that maybe I didn't cover
yet, put 'em in the comments below.
Love to hear from.
Thanks for watching.