Component-based UI for .NET MAUI with MauiReactor

tune into this week's on.net where I have my good friend Edo on talking about his amazing framework for Donna Maui called Maui reactor a component-based UI Library you gotta see to believe so tune in hey everyone I'm James and I'm back with an amazing guest this week talking about a library they built for net Maui to have a code first component-based UI for building.net Maui applications in it is mind-blowingly awesome my good friend Edo how's it going Edo hi James how are you I'm absolutely amazing and um you know you go by Edo but you have like me I think I like my name James guyatano montemagna and you have a wonderful name as well but I didn't even try to attempt to pronounce it so I think you got it for everyone yeah yeah but long even if uh if uh it's a an Italian surname uh Adolfo marinucci anyway uh my friends especially from from us called me Edo or Edo yeah if you recall the framework.net to watch us uh to access a single server or another store anyway now nowadays we have a SQL client access so it's anyway they they still call me Ado oedo.net so Edo is pretty fine for me yeah I love it yeah my my grandparents are from both Sicily and southern Italy and there's actually a Tiny Town in Italy montemanya know which is how you would say my last name yeah so but they americanize it to Monty Magno so you know but James um and my grand grandfather James vincenzio montemagno like just some really wonderful names um so although I've never been like honestly it's really sad because I it's on my list I was really close I lived in Romania for a while I traveled around a little bit I still have never been so it's on my list but when I'm out over there I'll definitely ping you on this so anyways enough Italy talk um let's get into it so let's talk about Maui reactor where did it come from why did you create it like what's the origin story yeah uh my reactor is the library to build application that we you can be used to build the application use it um nmvu a pattern approach that's pretty different from the standard classic approach you you user use when you buy application for net Maui or even for WPF or Avalon or bologna or you know Uno platform it's a different approach it has some good benefits in my opinion of course I I actually I started with me Miss I started in the past using the mvvm approach to build application for Windows using a WPF but then I started looking at the mvu approach when I met with react GS framework oh yeah and then I tried to use the same approach using in a.net that is my preferred language and I translated this concept to First xamarin forms and then to mail we and I was really excited with the dotnet my we framework when it came uh a few years ago last year or the day you know the year maybe last year we went to uh Gia uh but I was really excited about that because it promises to be much more powerful than summary forms even faster with the Handler approach so I I started to Port my old library that was built for Family Farms 2.net Maui and I I I want to show you and your community and the community of dotnet how can be useful to really build the application that has a lot of animations something like that also I want to show you how it can be easy to build application with Auto load that comes with the library so you can change the code you can change everything of the application and see live your changes without restart it I know that there also there is also a.net built-in Ultra load model but this is a pretty different approach because it is please used with my my Reactor with my library and take advantage also of the mvu approach and if you want I can share the the screen so I can instruct you and your fellow Community yeah to understand how we can start getting started or yeah let's do it let's go ahead and bring your screen up over here yeah and I was excited because I've been following you on Twitter and I've been seeing all of the amazing things you've been building with it so I was like I gotta have you on so I'm see it so yeah let's take a look I'm excited to see where you get started and what you can build uh okay I I think the the the first thing to do is to point your browser to uh my reactor GitHub page where you can find also uh of course the source code of the library but also a lot of useful information to to get things started for example there you can see that there are some tool that uh you have to install you you optionally I have to start because you should start to to have a a good environment to getting started with new project and to run the auto load model um there are also a documentation site that is reachable by this link this is the documentation website that I built during the last year and I'm updating uh every every week or every weekend so um there you can see how you can set up your environment but also is described uh what means to build application using components and what the component is and you can see there how you can create cool animations you can embed to the path controls how you can create graphic graphics and so on perfect anyway the first thing to do is of course install the template pack the template pack is a data net template that that let us getting started faster because it creates a a brand new project that contains already a reference to the dotnet packages.net Maui packages as well as to the malware actor packages so if you run something like that in a shell like these uh you should be able to install this uh this package this template of course in this case uh it complains a bit because the the template packs already stalled so uh you we can use now the Maui reactor startup command to create the the new empty project for example I can go under tests folder and I can run the this comment like this I can choose something like a cool project and this will be very familiar to anyone else because now that you have these templates installed just.n you well just like you've nude up any project before which is great yeah yeah yeah yeah of course when you have started this template you will find the same template in a new project here using visual studio oh nice yes this is the template Maui reactor based app with my name of course I can go add select the name uh just click create and it creates the same empty project like this here okay uh the the project is similarly to standard.net Maui project um you'll find the family uh Maui program where the the map weap is actually created uh a couple of things that make it different from the standard one is of course the call to use Maui reactor app where that is a factions that comes from the library where you specify uh the the root component that is the the starting point of your component based app in this case is called main page the main page component is under Pages by default and is a stateful component because is a class that derives from component and declare a state class called main page state in this case of course enough should be composed of many components that are arranged in a tree view like so a component as multiple components inside the component you have you usually you must have a render method inside the render method you can create a the visual nodes so the widgets the controls or that comes directly from the dot net Maui Library so in this case you have a Content page scroll view a vertical stack layout and so on now you yeah really really I know all these scroll views and the vertical stack layouts are those just standard.net Mali controls are those special to your library these are special to my library because they are actually they that that are actually wrapper classes that correspond one to one with the underlining native Native components and I think widgets not in the control um so you actually are not creating a Content page here but you are creating a wrapper the native control is created when the component go goes live and it requires to be rendered on the page so inside the Library there is a a render Loop and and the native control is only created when the wrapper needs to render so only the visible uh Native controls are created and nothing else so it's pretty much optimized for this and of course if I run this app I should be see we should be see the usual starting page of the app that show the dotnet boot Mage and handle word label and the familiar button uh click me uh the the usual clip me that shows how how we can actually change the state and render the state inside the render method so let's let's wait a bit that that app that starts let me see now it should start in a moment and then yeah what we see here is like also the project that you said is very similar so it's the same single project system things like that the developers are used to but it's using your stuff got it yeah exactly the same is the dotnet Maui project actually you can even start from an existing.net my we project that uh that one that has the usual view but using saml or something like that you remove the XML and uh and just a point to the Maui reactor packages and you get and you have the same the same app that you see here perfect so uh okay we have now the the usual uh screen when I click uh this method is called yeah let me put this uh oh oops let me put this okay so uh when I click this method this code this and the state uh property counter is updated incremented and when I called the set State uh automatically the component is refreshed and the render is called again and uh the content page is rendered again so the scroll view Etc of course is what is called usually called a ghost tree so there is a ghost tree of wrapper controls that comes from my library that correspond to the native uh tree of widgets that come from the.net Maui conference so it's spread intelligent in my humble opinion of course only what is different is created or removed from the uh a native tree so in this case when these these components refreshed the content page you found that content page is already created you have to it updates attached to the already existing content page and so on for the scroll view Etc now another cool feature of the malware reactor is the dotnet uh is the Maui reactor Ultra load component we have to install it using this command like this dotnet tool install and uh or like this I can just put in a in a shell like this and of course now it now complains that the reactor my way out reload is already installed so uh we can just use it to use it we have just to run this comma like this dotnet my reactor and we have to specify of course the version of.net at the frame at the platform in this case Android so if I put this inside the shell I can use a shell inside the visual studio outside as we like for example here I can just run a terminal window side Visual Studio like this if I run this common 7.0 Android okay is now monitoring my folder this is the browser 7 folder and now I'm ready to make change a changes and see the the result like this for example if I add something like this here it will connect to the Maui reactor app that is running and update the level in this case for example I can change these if you see the changes are sent pretty uh it's pretty fast and the ultra load another great feature of the mvu approach is that what is actually what is actually uh refreshed is just the content of the component so what is inside the render method but the state is preserved between iterations so if you see here we still have five times uh okay but so we have the counter at seven at five if I click here I go to six seven eight if I change something like for example remove this label um the labels is is went away but the counter is still uh topped eight times this is a practical things because yeah if you think or to an app that a lot that has a lot of components you are ready deep uh debugging something like in the in a secondary screen and you have downloaded something that from internet uh you have a pretty complex State this state is preserved between iterations so uh it is pretty easy to change your layout without losing uh the context no you know yeah it's very cool because like what you're showing is is is that you know developers that are maybe used to xaml hot reload and some of the.net hot reload you know um if you go through and you set up your mvvm correct and all this other stuff and then you know in general all your state will remain but here what's nice is that when you're coming in with this mvu style the code first um you still get all of that stuff and I thought what was nice that you showed is that you already were just running your app and you're just like oh just enable hot reload go you know what I mean I'm sure you can set up scripts to kind of even do that automatically when you run your app so that's really neat uh in general and and I'm assuming here the reason that you need this additional hot reload command is because it needs to be aware of your render Loop right like dot net hot reload and xamaha really like those things don't know about the render Loop of of your framework so is it just sort of telling it about it like hey go do this thing yeah yeah I I I I guess I could use in future in the future the outre load the death camps with documents uh maybe uh um in the the next version of Maui reactor I will look into this because actually would be interesting interesting to see how it works with the standard Ultra load of course in this in this case um is pretty fast but it can be structured to also let us debug our code so make a breakpoint even when we we ought to reload the applicant the application for example in this case let me see how we can show how I can show it for example let's say I create a private function like um button click like this got it so you can like really like change any of the code basically yeah yeah cool in this case um I just make the same thing so I just put inside the the set state code inside the private function of the class so nothing's changed here anyway if I make a breakpoint now here and I click nothing gaps happens because actually I didn't use a feature of the ultra load that is the full mode to show you this I have to stop it now and I have to we run the ultra load in another mode the full mode for example if I run something like this I go under CD or like this Android okay yeah yeah if I run a.net my reactor command using mode full it actually it's going to use the full blow uh Ms bills the task to build my project so everything is built everything for everything I means that actually it produce also the the bugging information for me so when I start now there they have and I make a breakpoint even when after okay if I go here if I click of course now the breakpoint is it of course let's continue okay now let's make some change so restore the label if oops uh this one I have to close this one let me start there okay um we add two attribute in function I'm sorry this is not okay let me see if now it works again okay um the the break point is it Anyway even if I change the this code so the the auto load swap my render apart but the um the the break point is it at the same time let's make another example for example let's remove these okay let's wait a bit that this is working okay the as you can see uh the label text is changed if I click now here this is to be working again as you can see uh using mode full we can Auto load our application preserving our ability to debug the application even we using uh the new code so this is a practical the only real difference is that using the full blow Ms build task it's a bit slow and the fist mode so this is another approach so kind of based on how you want to go about it you know you have the option to go in that full debug mode generate those things I'll just kind of do yeah hey I just want to make a few changes right here to the UI nice and quick very cool yeah I usually use the first mode only when I really need to debug something I switch to full mode got it very cool now you said like there's a lot of animations and like some of the examples that you showed do you want to show off that really quick too yeah yeah yeah uh this is another this is the an app of recipes that I'm working on that I want to show you and to publish it and I want to show to the community is not yet completed anyway okay okay this is a an application that shows a sense some good cool features of my reactor especially my animation there are two kind of Animation in my reactor the first one is what I called the RX animation is the ability for my reactor to animate between property two different values of properties of the state of the component is the the the the easiest one the other this is the the simple app we have a scroll view with some cards from with recipes we we can move around go up and go down I have I have added some cool animation when you scroll up and down when you click over a card the card is expanded and now you have the abilities to scroll look looking at ingredients and steps to reproduce their recipes now there you can see how we can animate the movement of the scroll like this and go back like this yeah this is just an example of course but I found this app in in on internet and it was realized in in flat and I wanted to show that is something that we can build using.net Maui um so this is just an example but that's awesome to see a shoe show what is possible even in dot network of course yeah that's great to see you know like you said you can always show the hello world but then actually building stuff with it and seeing real applications is really really cool um so this is awesome Edo I love it I'm excited to play around with it myself and I hope that our viewers are as well I will put links to out of the GitHub stuff and everything that you have into the the source code example as well yeah thank you so much for showing it off and coming onto the show and like I said I will put links to everything including that awesome ride yeah as well yeah totally all right well thank you so much and again I hope that everyone enjoyed seeing all this kind of really cool mvu stuff if you have any questions head over to Edo's GitHub but also put over to his uh Twitter account as well to reach out if you're building cool stuff with it let him know but uh and thank you again for coming on I really appreciate it God thank you thank you very much all right thanks everyone again and don't forget if you're over there if you like this video hit that like button and subscribe so you stay up to date with everything Happening Here on the.net YouTube so until next time I'm James and this has been on.net [Music] foreign [Applause]

Channel: dotnet

Views: 7,783

Keywords: .NET

Id: w_Km5AyreT0

Length: 28min 2sec (1682 seconds)

Published: Wed Mar 08 2023