.NET MAUI MVU With Comet: Getting Started in VS Code

did you see that was it a comet or maybe it was a falling star because a lot of you have wished that with dotted maui and even with xamarin forms you could write your ui more like flutter or maybe swift ui and that's exactly what you can do with comets so let's check out how to get started with that yourself before we dive head first into comet getting started and how to explore the concept yourself let's just take a step back and establish what comet is exactly because maybe you're not familiar or maybe you just need a little bit of a refresher so comet is the net c-sharp implementation of the mvu framework basically it allows you to write cross-platform mvu style applications based on c-sharp and dot-net maui so what is mvu exactly um i hear you asking well mvu stands for model view update and it's basically in line with like mvvm mvc it's just another pattern which is more reactive and like you know you might know fabulous from f-sharp which is kind of similar but this is based on c-sharp and um mvu has a lot of popularity now because of frameworks like flutter with dart and swift ui from ios so a lot of people are really excited about using mvu and it also has probably a smaller learning curve for people who are not familiar yet with xaml and mvvm and that kind of stuff so it makes it easier to write your applications and be more productive straight away with like mvu applications so if you want to know more in depth about what mvu is and what it means to you or what it could mean to you please let me know down in the comments and i'll be sure to make a little video on that as well where i explore the concept this video is more about exploring how to get started and grasping all the concepts yourself now if you do know a little bit about comet already then you might know that james clancy is one of the biggest contributors of this project maybe he is the one spearheading this project right now but i think it all started with like the examined forms back in the day where we could also have all of this support but you know the the way xamarin forms was architectured wasn't really great for this i think um because you know xamarin forms was heavily coupled with like the platform implementation of all the stuff and now with donna maui i think this is really one of the advantages that we have here is that it's decoupled of the implementation on the platform so everything is based on interfaces which you know some people don't really like but on the other hand it does open up the architecture to now make a comet more plugable in there and leverage still all the power of don and maui but we lose all the overhead that we had to go through with xamarin forms now james clancy i think he just loved everything that he saw about swift ui and maybe flutter and dart about the syntax and the language and how that was built up basically the mvu implementation and he thought i want to have that but i want to have that in the language and the framework that i love csharpand.net so he and i think david ortnow and maybe some other people started a little hackathon project and please note at the time of recording this it's still experimental but there is something interesting going on here before it was on james's personal account and now it has moved to the.netaccount.net github account so it's now on github.com.net comet so i don't know exactly what that means but at least it's a little bit more official but like i said please still note it's still experimental at this time now at this repository you can of course find all the getting started stuff as well there is a sample application there's all the things that you need to contribute to comment if that's what you want so please scroll down here find all the things here you have the little key concept with like model view update so model pushes the state to the view with this view you can have the bindings and the commands that will trigger an update with the state changes back to the model and that goes in a circular fashion again if you want to know more about mvu and how it all works in a more detailed level more in depth please let me know in the comments but then david wrote a little blog post the other day with comment development on mac os which should really get you started now everything i'm going to show you here is on windows but the exact same thing will work on mac os as well because that is the beauty of all this it's all cross-platform and it all works on these different things now as well so here again he goes over through all the things so this is a little bit of comet code right here you can specify the state so basically your model your binding context in like the mvvm world with this comet right object so that is what holds your state that is your model basically and then with the body that is everything that will appear on screen so that would be the content of your content page in xamarin forms or dotnet maui you can create this body which with has a v stack so that's a virtual stack which is a little bit of a new concept you also have the horizontal stack and here you can specify hey i want to have a new label which is called the text in comet world with this this caption right here it has a frame so a width of 300 we also have this button with this label on it and whenever we click it we do comma dot writes with just a simple counter application with a frame so we set a height a margin a color you can set all the properties through this right and if you just know c sharp or you just know any other programming language and you come here for the first time creating transplant form apps then i think this you know is much more friendly to start with than also having to learn xaml and all the magic string bindings that you have there and or let alone the c sharp syntax that we have now to build the ui right so this is much more productive much more cool much more modern clean all the things so i think a lot of people will like this now there's a lot of more info here but let's skip to the important parts of just getting started who reads the manual anyway so get comment it's distributed as a separate nuget package right now and by installing the comma templates we basically have everything we need to get started so let's copy this little command right here dot net new dash i clancy.com.templates.multiplatform you can see clancy's name is still in here so for moving it to a little bit more official we probably need to change that at some point we go into a command line window right here i think you need administrator rights on it and i'm just going to paste this command in here you will see that it takes a little while to install the template here we go you have it template name but the important thing is the short name here which is common so we can just do that and i'm going to create a new directory on my desktop so let's do maker comma demo let's go in there with change directory comment demo and let's just do net new comment and that will create all the files that are needed for a new comment project now here you can also see in the blog here at the window below this one you can do code dot if you have the regular visual studio code installation that definitely works i personally have the visual studio code insiders which is kind of like the preview version so i have to do code insiders dot and the dot specifies that i want to open the current folder that i'm in and it will open that folder in visual studio code or visual studio code insider so you can see here um on the left all the files that are just created so i have this little subfolder here comment demo with a main page the cs proj all the things and also you can see the dotnet maui showing through here with this platforms folder which has the android ios mac catalyst and windows in here so it's just built on top the.net maui principles here if we go into the main page you can see that it has all the code that we've just seen and we can go into this comet right object which is uh down here below and you can see it just has two simple properties with the rights and the comma train and that holds our state right here so there's nothing you need to do besides setting this attribute for the state right here now i know clancy still wants to change some things but he's bound by the rules of c-sharp right so by the c-sharp syntax and he's talking directly to the team at microsoft with specifying this this c-sharp syntax we can change that right we have the power to do that so he's talking to them how we can make and implement changes to make this even more elegant and even more better and i think one of the things is to try and lose these attributes right here but for now we need those now basically this is all we need to get started the one thing i noticed while running this earlier is that there is a new nuget package newer than is specified in the cs project in the templates right now so let me go into the cs proj because it actually prevents it from building we scroll all the way down and you can see that this is everything that we need right now to do comet we just have clincy.com which is the nuget package name and the version right now is uh 430 here at the end and there's also a thing called reloadify but more on that later so let's just save this which should resolve the right nuget packages and the versions and we'll download that for us because it's experimental the tooling is a bit rough so you can definitely use vs code and i will give you a little hint there's also a visual studio code extension i will show a little bit more on that over on the mac side towards the end of this video so make sure to keep watching but right now what i'm going to do is pop open a terminal right here so i'm going to go to the terminal new terminal and what i can then do is here at the bottom say net build and then this command is the exact same as you would do in don and maui so i will have to specify the target which is run to make sure that i actually run the application and minus f for the framework to specify the target framework because this also uses the single project approach of dot and maui so i can run all the targets from this one project and i have to specify which one i want to run so let's say net 6.0 dash android because i want to run on android and if you get confused and you can see here in the target frameworks in your cs proj all the targets that you can use of course the ios and the mac catalyst will only work on a mac or if you've connected to a mac build host so i'm going to run the android one right now but again because the tooling is a bit rough it will not pick up on you can't choose the android emulator from right here within the ui so what i did it will pick up on the running android simulator so what i did is go into visual studio 2022 here go to tools android and into the android device manager and whenever you do that you will get this window with all your emulators and you can just start whatever emulator you want to start here so i did that you can see it right here and it will pick up on that running emulator so if i go back to this command and i will start running this one then it will start building the project and it will eventually show up here in the emulator that we've got running here so let's just um wait a little bit and see for that to come up so the application has been built our application has come up on the emulator right here you can see the dot net splash screen just as we've seen in done at maui applications as well and if it comes up we will see the interface the wow what an interface very minimalistic of our main page right so we just see that label and the button and if i click that you can see the counter going up and the number of comments is coming up here as well so um let's go over to how cool i mean this is all that we need to do to create a comet application and get started with so now it's up to you to explore all the concepts but how cool would it be we have hot reload now and this is just c sharp code and maui so we should just be able to change code and it should show up in our ui automatically right so let's go over to our main page and maybe i'm really really excited about comments so write the comment in our button caption here i'm going to add a couple of exclamation marks here i'm going to save that i'm going to go back to my emulator and there's nothing that's disappointing right that's where we come back to the reloadify thing because this is still experimental it's not incorporated in all the tooling yet maybe it will maybe it never will make there but for right now we need a little bit of a separate tool to make the connection to hot reload which is called reloadify so let's go back to david's blog post and scroll a little bit further here we have reloadify so we can install that as a net global tool so let's just copy this command go back to our command line window i'm going to clear the screen and paste that command in here this will take a couple of seconds and then it will install the reloadify as a donet global tool so i can now use that and what i need to do is from the same folder say reloadify my project name cs proj and then also specify the target now david says here mac catalyst i'm kind of sure that you need to do net 6.0 dash mac catalyst but i'm not entirely sure um so i'm going to do that and i'm going to go back to my vs code and here in this terminal window i need to go into this comma demo subfolder because that's where my cs proj is so let's go into comma demo once more and let's say reload define comment demo dot cs proj and then minus t net let me get myself out of the way 6.0 dash android and whenever i do that and start running that it will open up that cs proj it will start running and it will start listening for clients so it basically acts as some kind of server i guess i'm not sure how it works under the hood but i think it acts as a server and then connects you through to hot reload and hot reloads of the things for you so now it says listening for clients i still now need to restart my debugging session so i'm going to open up another terminal window here and i'm going to again do dot net build minus t run and then minus f net 6.0 android so this will again run my android app again let me just switch back to the reloadify window and my app should come back up pretty soon and then you will see in the console output here down below that is listening for clients but now it's it's actually connecting to the client it will see our app coming up here and then whenever we start making changes in our mainpage.cs we also have the hard reload and we also have these new changes coming in so that will make the experience even better than it already was with comet so now you can see client connected so we have our app connected so maybe i got a little bit carried away with all the exclamation marks right here so let's go to this caption of this button if vs code will allow me to and then remove all the exclamation marks here ctrl s save my file you can see a new div was successful hot reloading this main page dot cs sending data to client and whenever i go here to my emulator then you can see it has reverted to just one exclamation mark so that is how you can get started with comet on.net maui and c sharp and mvu style and all the things now before i let you go i also promised you to tell a little bit more about the comet vs code extension so you can see it right here just go to the extension marketplace search for comment and it will pop up automatically i already installed it and what is really cool about this is that you get a couple of tools for free not in the last place you will get a little thing down here all the way at the bottom which says iphone 13 right now and whenever i click it it will start loading the devices and it will get the list of all the simulators that are on my device and i can just get the simulator you can see it here already running on the right i can just choose one of these simulators and from there i can just click play click the debug button and it will start my session right away so that will make your development experience even more easier now there's a little note i couldn't make it work for the android emulator so i'm not sure what's going on there maybe there's a little bug maybe i set something up wrong because this extension is of course also available for windows but as long as you can't really select a android emulator from there the use is not really that great but yeah there's also this extension which makes it possible to do all of this from vs code i think i already mentioned it a couple of times i'm still a old-school person mvvm all my data bindings example i well i'm not going to say i love it i mean i i learned to live with it i learned to work with it so that's kind of like the the way i like to fix things but this looks definitely very promising and i'm definitely going to look into this more and a great way to look into this more is by making more videos about it so if there's anything that you still want to know more about mvu or comet please let me know down in the comments so i will make more videos than that otherwise please click that like button so it will spread to more people very much appreciated thank you click that subscribe button if you haven't done so already and you want to see that comment content coming in on your feed automatically press that subscribe button and that will happen for the rest i'll be seeing you for my next video keep coding but also check out this video right here that is a session by james clancy where he talks about more mvu and more comment or check out this playlist right here which will show you more about dot net maui as a whole see you next time [Music]

Channel: Gerald Versluis

Views: 11,720

Keywords: .net maui, software development, dotnet maui, .net 6, .net maui preview, visual studio code, comet, .net maui comet, .net maui mvu, mvu pattern, mvu pattern xamarin, mvu pattern .net maui, dotnet maui mvu, mvu comet, model view update c#, .NET MAUI MVU With Comet, dotnet maui mac, dotnet maui getting started, maui dotnet 6, dotnet maui setup, dotnet maui tutorial, Xamarin Forms MVU

Id: 52RmT2MIFzg

Length: 17min 11sec (1031 seconds)

Published: Mon Jan 10 2022