[MUSIC].
>> Hi everyone. My name is Sergio Pedri.
I'm a Software Engineer too here at Microsoft.
I work in the Microsoft Store Client Team
and I'm also the owner of the.Net Community Toolkit.
Today I wanted to introduce the new.Net
Community Toolkit 8.0 which is the new release which is live
today on NuGet and I also wanted to
particularly talk about the new MVVM toolkit and
the new source generator features that are
included in this release and show you how you
can use them to greatly simplify
your MVVM code in your mobile application.
First, I want to introduce the Community Toolkit as a whole.
We have several different community toolkits which are
maintained and published by
Microsoft in close collaboration with the community.
For instance, there's the MAUI Community Toolkit,
which contains controls, outbursts and
behaviors for building mobile applications.
Then there's the Windows Community Toolkit,
which contains controls, extensions,
for doing all things that you might need to build
your own UWP on when you I3 applications.
Then there is the.Net Community Toolkit,
which is platform agnostic,
meaning that it doesn't have any dependencies on
any specific UI framework so you can use it
from.Net project that we might be working on.
For instance, you it contains the diagnostics package,
which has useful API such as Guard and Throwhelpers,
which are meant to simplify
all of the scenarios where you might be
wanting to do some complex argument validation
in your methods or to efficiently throw exceptions.
There's also the high performance package,
which contains helpers to efficiently, for instance,
pool string instances or memory buffers to efficiently work with
2D memory buffers or to
do complex bit tricks operations in a fast way.
A lot of helpers to work in high performance scenarios.
Then lastly, there's the MVVM Toolkit,
which is a new modular, fast,
and modern MVVM library
which is part of the.Net Community Toolkit.
This is meant to be an official successor to MVVM light.
In fact, we've collaborated with Lauren Bu Yang,
who is the original author of MVVM light to ensure that existing
MVVM like users has a nice migration path to the MVVM Toolkit.
Now we are also using this in
several inbox applications such as
the Microsoft store and Photos app.
The MVVM Toolkit is built around four core principles.
First, it multitarget.Net standard 2.0 and.Net 6.
This means that it can be used from any.Net runtime out
there really so you can use it from.Net
Framework all the way up to.Net 6.
Especially when you're using.Net six,
since there's a lot of new high performance APIs available there,
the toolkit will automatically use some diagnostics,
specific optimizations for free automatically.
Then it's also simple to pick up and use A la carte.
What we mean by that is that instead of forcing
you to structure your entire code base in
a specific way or following saw
specific patterns in order to use it,
it simply exposes some basic building blocks
that you can then freely
pickup and integrate into your project and
then expand as you integrate the toolkit more.
You're not forced to go all in the toolkit which makes it
easy to integrate it into large existing projects.
Lastly, it's also meant to be a reference implementation.
What we mean by this is that in the BCL
there's a lot of interfaces for which
are foundational for MVVM such as
INotifyPropertyChanged or I command.
But that don't actually have an implementation out of box.
The argument toolkit in this case,
it's providing that in an unopinionated way so that you
have that implementation that you can
rely on for all your MVVM scenarios.
Instead of just going through even more slides,
I want to just dive into an actual demo to show you how
you can use the MVVM Toolkit in your mobile application.
First, I wanted to show the new MVVM Toolkit at sample up.
These are simple app that's now available in the Microsoft Store,
which includes all of the docs for the toolkit,
which are also available in MS Docs,
you can find out at aka.ms/mvvmtoolkit/docs.
Along with all of the docs,
there's also several interruptive samples that you can see.
For instance, here we have the docs for observable object,
which is our base view model type,
which implements identify property change.
Here we're talking about the new set property method,
which is used to set a field and
then raise a notification if the value has changed.
To go along with that, there's
an interactive sample that you can try out,
you can observe the binding here.
Then you can also see that XAML and
C# code have made the sample up.
It's nice to get the rest of the context
for wherever all these APIs are used.
We also have a step-by-step guide here
to show how you can combine all of
these different building blocks to show
a fully self-contained small application.
In this case here we're just built
this very simple reading browser
that lets just see posts from various subreddits.
Next, I wanted to jump into Visual Studio and show
how we can use the MVVM Toolkit
into a mobile application and in particular,
how you can use the new source generator to greatly
reduce the boilerplate code that's typically used,
that typically necessary in MVVM scenarios.
First let me actually deployed this app.
This is pretty much just a small variation of
the default template for a mobile application.
We have a simple button that you can click,
and whenever you click on it,
you can see there is a counter that's synchromented.
Then I also added here on entry where I can type my name which
is Sergio and you can see
that name is reflected through a binding here.
Let's take a look at the actual code
behind for actually the view model for it.
Here we're inheriting from observable object,
which as I mentioned is
the base view model type for the MVVM Toolkit.
We have a couple of observable properties so we
have counter here and we have name.
Counter in particular is not only using
set property to set the value and solidification,
but it's also calling OnPropertyChanged so that we
also send notification for
counter message whenever the counter is updated.
This is needed to update the text that displayed in the button.
Next, we'll serve a small method here,
IncrementCounter that simply increments this counter.
Then we're wrapping that into
this Increment Counter command, which is a property.
Then we also have a line in the constructor over here that's
initializing that proper dot command
by creating a new relay command property.
Now, this is all pretty straightforward,
but it's also quite verbose.
Let's see how the new source generators can help with this.
The first thing we want to do is to add
the partial modifier to this class.
Let's do that. This is needed so that the generator can
then create additional partial definitions
of this type with all of the generated code for us.
Next, we want to simplify all of these absorber properties.
What are we actually delete all of this.
Lets delete counter and let's also delete name.
Of course, as you can imagine,
counters now showing an arrow because there's no longer
an actual counter property anywhere. Let's fix that.
For that, we want to add a new attribute on this counter field,
which is observable properties. Let's do this.
One here, and then one here as well.
You can see that counter is now no longer showing an error.
In fact, if we come to click on that to see the generated code,
you can see that now the generator has in real-time created
another main page view model implementation
or definition actually.
Here we have the same two observable properties we had before.
They are basically do exactly the same.
They're returning the field,
they're checking whether the value has changed.
They are sending notification,
they're updating the value.
They're doing all of this and they're even
exposing some partial methods that we can potentially
implement to then inject additional code that we might want to
execute before or after they're a given properties updated.
We don't need this in this case, but it's still nice to have.
You can see that the same code is now pretty much in place,
but we're missing one bit.
Counter before used to also some
of the figure for counter message.
We need to fix that because that's no longer the case.
For that we need to add another attribute in this case
its notify traffic exchanged for.
Then we need to pass the name of
the target property called solidified.
Your schedule will be name of counter message.
If you look at the joy that code again jump from here,
you can see that now there is an extra line here,
OnPropertyChanged, but this time it's
sending a notification for counter message.
Perfect. Now the last thing that's
left to simplify is this command infrastructure.
Why don't we actually delete all of this.
Then we can also delete the code in the constructor actually
the entire constructor since there is no property to
set anyway. Let's do that.
Then let's simply unauthentic this method to say hey,
this method needs unassociated command to go along with it.
For now you need to add relay command.
Now we also want to see the generated code for this.
In order to do that, we can expand the solution explorer here
we've got two Dependencies.Net 6 Windows Analysers,
Community Toolkit.MVVM, and then RelayCommand.
We can see there's another partial definition
of main page view model,
but this time is created a IncrementCounter command
so the name is automatically inferred
by the name of the method that we annotated.
Then there's also the it's using this IRelayCommand properties.
In this case, the generator is automatically detecting
the right command interface to use based
on the signature of the annotated method.
It can also support asynchronous methods as well as methods
with a cancellation tokens or other parameters.
In this case, we just have
asynchronous and parameter list method so it's
just using the simple IRelayCommand interface.
We can actually run the sample
again to verify that everything works.
You can see how we've pretty
much cut the entire code we had in half.
All that's left now is
just the code a specific tittle to our business logic.
We've removed over the boilerplate and
now the generator from
the MVVM Toolkit it's taking care of all of that for us.
Here's the sample app.
You can click on the button.
You can see that the counter still works
exactly as before and we can also type
here and you can see that the property is
also updated in real-time exactly as before.
There's a lot more features in
the MVVM Toolkit and in-between.Net Community Toolkit as a whole.
You're welcome to read all of the release
notes in on GitHub and in the blog post as well.
You can read all the docs again at apa.ms/mvvmtoolkits/docs.
You can also find all of
the source code on GitHub aka.mstoolkit/.Net.
You're welcome to also create bugs,
issues actually to report bugs or proposed
new features and just let us know how it works, how it goes,
and we're looking forward to see what
you create with it and we hope it will
greatly simplify how you build
your mobile applications using MVVM. Thank you.