It seems that more and more people are
looking for ways to not have to deal with XAML when building a .NET
MAUI application. And with this framework MauiTeactor, you can do absolutely
that. You can use MVU build on top of .NET MAUI. Let's go check
it out! On my channel, I've been showing you
already a couple of different ways how to build your .NET MAUI apps with
code and not XAML. We have the C# for Markup extensions,
which is in the Community Toolkit right now. Check out
the video for that. I've already talked about Comet, which is also an MVU
experiment that we've got going on from the official .NET MAUI
team. But now there is the MauiReactor which is built by Adolfo.
I'm not even going to try and pronounce his full name. He's from
Italy and he's been building the MauiReactor. He's also done the version for Xamarin.Forms.
I think it's called Reactive UI or something like that.
But now there is the MauiReactor, which is a MVU framework
built on top of .NET MAUI, which is really exciting.
I've been looking into it for a little bit. I've been seeing
tweets all over the place from Ado. We can call him Ado as well. Not
too confused with ADO.Net. And he has been tweeting
about it as well with all kinds of crazy examples
that he has on his GitHub repository as well. So actually, let's
switch to his GitHub repository first. So this is where you can find
all the information. Adospace from Italy. He doesn't have the
sponsorship enabled. So Ado Adolfo, if you're watching this,
enable the sponsorships on your account because I want to sponsor you,
I want to support you for this amazing work. And of course, as long
as we can't sponsor him, make sure that you star
the repository which is also a sign of you supporting this project. But for
the rest, you can scroll down here, you can see
what it is. He even has some documentation which is a work in
progress. It's all open source. So if you love this, please consider
helping Adolfo out as well. And a bunch of
instructions that I'm going to walk you through here as well. And you
can go through the samples that are here, the source that is here. So you
can go check this out. Definitely do. Now let's open up
a console window. So let's close this browser window
right here. And I have this console window. And the first thing that we want to do
is install the templates that are available for this amazing
project. So what you want to do, I'm going to
actually copy it here from off screen the command so that I don't
have to type it here. dotnet new install. And I think this command comes from
the official page. I think we want to do not --install, but just
install because the other one is being deprecated. So dotnet new
install Reactor.Maui.TemplatePack. And whenever we do it's going to
install it. And you can use it from the command line or you can use
it from Visual Studio. That's what you want. You can use this short name to
dotnet new maui-reactor-startup create your project that way. But
I'm going to do it through Visual Studio. Now the other thing that I'm going to
do is install a global tool, dotnet global tool to enable Hot Reload. Because Hot Reload is enabled for
this project as well by a custom tool that is built by Adolfo
as well. So, dotnet tool install -g, for global, Reactor.Maui.HotReload. Just enter that and
it will install this little tool for us as well, which
we'll be using in a little bit. Now we've got that in place, let's
just open up Visual Studio. I'm going to do that in the presentation mode so
that the fonts are nice and big and you can see everything just fine.
And I'm going to create a new project right here. And whenever
we do, we're going to see this new project type which is the MauiReactor
template. Here you can see it MauiReactor based app by Adolfo
Marinucci. See, there we go. I still tried to
pronounce your name. So we have this one and let's do next. We
don't have any exciting options here. Projec1. So let's call this
MauiReactorSample or something like that.
MauiReactorGetting StartedSample, something like that.
Maybe I'm going to do more videos about this. If you want to see more
videos about getting started with MauiReactor, let me know
down in the comments. And now I'm going to click Create and then let's go to
create this new project type and I can run this MauiReactor app.
So here we go. Let me maximize this window right here
and we get this Getting Started with .NET MAUI
which is totally useless for this project type. For other things it's very
useful. Amazing new things here that you can go into the
documentation. But for the MauiReactor, it's not going to link us to the right
documentation for that. And let's have a look here at the
Solution Explorer, we see a couple of new things but also a couple of
familiar things. So we see the MauiProgram and if we dive straight
into that, that's our entry point. For this MAUI application. You can see
we have CreateMauiApp, MauiApp.CreateBuilder. But here
we can see the UseMaui ReactorApp. So that's something new,
right? That is something that Ado has built for us. It has like a
couple of other things here #if DEBUG
EnableMauiReactorHotReload, but for the rest it looks like pretty
familiar, right? But we don't have example. So now he's doing this Add
Resource. Well he's still adding XAML for the styles and the colors here,
but that's about it. Right? Otherwise we're not doing xaml.
So we have to add this through these lines of code.
Everything you can do in XAML, you can also do in C#.
So we've got that. And the other thing is, of
course, like we have our Platforms folder, so we can still write our platform
specific code. All the metadata for your apps is there. We have the resources. We
have a GlobalUsings.cs. I'm actually not sure if that's in the
default .NET MAUI templates. You can definitely add it and use it
like this as well. But we have it here for the Mauireactor templates.
And here under pages, this is new. We have our
MainPage.cs. And this is the equivalent of the
MainPage in .NET MAUI where we have all XAML
with the waving .NET bot. Now we have the same thing, but built with
MauiReactor. Now, while I'm walking you through
this, actually let me deploy this to the Android emulator so that
it's running in the background and we're not stuck waiting for that if I'm
going to show you that. So let's just do that while
I'm talking here and you can see a couple of things. So Mvu, if
we dive into that a little bit, you know that that's all about
state, right? We update the state and then that gets pushed to the UI,
right? So that's how that kind of works. And here we have that main page
state, in this case with the counter, because we have that counter
clicked button. So we have that. And here our main page is actually a
component which has this state object, right? So
everything is built with states which you might know, or
components which you might know more from ReactJS or I think Flutter takes the
same approach as well. So we have all these components that
we're inheriting from and we can specify the state object
here, which will be used for the state of this actual page, which is actually
a component. Are you still following? So we have all that. And
here we have the override for the visual node, which is render.
So whenever a page, whenever a component has to be rendered, it will call this
Render method and it will render that on the UI. And that's kind
of like how that MVU thing works, right? So on the render, we are going
to return this new ContentPage with a new ScrollView, with a new
VerticalStackLayout, which is all stuff that you know, from .NET
MAUI, right? And Adolfo has added his own kind of
implementation, his own layer on top of the .NET MAUI Core
bits here. But it's still MAUI components. It
still renders to the native components as they should
show up on that platform, right? And for the rest, he's trying
to mimic here, like the VerticalStack Layout. So a new Image, the new Label,
the new Label. Welcome. Well, he changed the text here a little bit. Obviously
Welcome to MauiReactor and the new button with this little
counter thing, right? So we're going to say
State.Counter because we know this state object, right,
which is going to be placed in a State property apparently, which is
probably a part of this component right here. And we know it's of the type
MainPageState because that's what we say here. We can do State.
Counter == 0 and it's going to say click me
for the label. And else it's going to be clicked
State.Counter. So the amount of times that it's been
clicked, right? And here we have this new kind of like MVU style syntax,
right? So we have this fluent syntax, the
image HeightRequest HCenter. So that's probably the
horizontal center of things. And we just have a kind of like
generic set with which you can set the bindable properties. In this case,
we also immediately get the support for the semantic
properties, which is cool. So you can add that accessibility to your app here as
well. So that is build right in
accessibility for Mauireactor. Check, we got that. So you can see a
couple of variations here. But for the button we also have
like this on click. So we also have the events here that you can
totally do. So event on click set state. We're going to
increment that counter and boom. We got some other things here for the vertical
stack layout, some padding, some spacing. That's all how it works. And if we see
this in Android, you can now see here, this looks exactly the same
as you would do File, New .NET MAUI application, but now with MVU
style. And we have the same
components. Really amazing. Now let's see if I can put this side
by side a little bit here. Whoops. I want to have the Emulator on
the right side and Visual Studio on the left side. So let's see if I
can make that happen here a little bit. Typically I prepare these things so you don't have to
watch me struggle with the UI here. But now I'm doing this live demo, just
whipping up a Maui Reactor project. Here we are. And I
can bring up a little terminal window here. So let's do, I
think it's under View and we can do Terminal. And here this opens
in my project folder. And here I can start that hot reload. So you also have the hot
reload things here for while you're actually running your
debug. So I have to go into my change directory, MauiReactor folder here so that I get to the actual you
want to be in the C# project here in the same folder as the
csproj that we have here. And then what you want to do. So let
me, I was going to bring this up a little bit here. Then what
you want to do is do... dotnet-maui-reactor -f. So let me paste
that in here... dotnet-maui-reactor And then you want to
specify like the TFM that you're running. So net-7.0-android, you can script this in Visual Studio to make
this show up automatically. And I can press return here. So that's going
to start setting up the build pipeline. It's going to inspect my thing, it's
going to monitor my folder. And whenever I make a change, you can see monitoring
folder. So whenever I make a change now it's going to light up in my emulator.
So let's do here we also have background color and if I just do the dot, you can see
that we have all the APIs of .NET MAUI here. So we have border
color, we have character spacing, we have clip, we have flow
direction, we have everything that's inside of .NET MAUI. But
now with this fluent syntax MVU style, you can do all the things. And
I want to do the background color and you can just specify colors, dot,
I don't know. Let's do yellow just so that it's
crazy. You can see it. And whenever I save that, you can see
that it's replacing the syntax tree and it's becoming here
yellow in the emulator, right? So it shows up near real time. It takes a
little bit of processing here, but it shows up here on the emulator
inside of your running application. Of course, also works on all the other
platforms that are supported. So that is really, really cool. Hot
Reload is in here as well. And for the rest, just go check
it out for yourself. There's a couple of cool samples in the repository that
I've just shown. And yeah, this is how you can get
started with MauiReactor. Now this is just your very high
overview getting started with MauiReactor video. But I'd love to
know in the comments, is this something that you like? Is
this something that you would use? Adolfo put this out as a GA version so you
can use this inside of your applications.
Applications are being built with this, which is really, really
cool. Why do you like this over the C# for Markup extensions? Why do you like
this over XAML? And do you want to see more videos about this on my
channel? Basically, whatever your thoughts are,
go inside of the comments and let me know. I try to get back to
you, but I read them all even if I don't respond. So
definitely make sure to do that. Also, please don't forget to
like this video. Click that subscribe button and maybe check out this video about
the C# for Markup extensions that I've been mentioning a couple of times. And here
is the playlist with other .NET MAUI videos. See you on the other
side.
