.NET MAUI Preview 8 Hands-on - True Single Project, Hot Reload Everywhere, & 1 Click Install

i'm back with another.netmaui.net multi-platform app ui update this time number eight which brings with it all sorts of amazing hot reload for your xaml and c-sharp and live previews inside of visual studio 2022 preview 4. this is the biggest most awesome release yet of the donna maui previews so tune in to get started with a single click [Music] hey everyone i'm james mountain magna and i'm back with another donna maui preview this time preview eight that is right number eight this is the biggest update to done maui as far as the previews go but also not only just development and sdks but also roadmap and updates for timelines on release so a lot of updates going on here so let's just honestly get into it now.net maui is your way of building native cross-platform ios android mac and windows applications with c sharp from a single code base and scott hunter here gave an update on the roadmap and only for don f5 up to done six which just went rc and he talked a little bit about here of exactly what dot net maui is all about now it's really cool is that it's a single project single solution single code base but you can also build hybrid applications with blazer tucked right into your.net maui applications now we've been talking all along about estimates of the roadmaps coming out with the.net 6ga which is in november but here the.net team have been working obviously hard on.net maui and all.net and visual studio and visuals with the visual studio team but collaborating with the community in the open on its development looking forward to the release the team has decided that you know for donna maui it's not going to be 100 ready for the.net 6ga in november so to provide the best experience performance and quality on day one they're going to slip the schedule just a little bit and they're going to target q2 of 2022 for the.net maui ga now this is great because you can of course keep updating along the way to net maui previews all the way up into ga which will apparently happen now in q2 of 202 and i'll keep putting out videos of updates along the way now scott also highlights some really cool preview features here including the new workload installation inside of visual studio 2022 preview including simplified project structures and host builders and all sorts of good stuff and updates and installation but honestly let's get started now before i actually get into the installation if you've been following along with the.net maui previews you may have gotten your machine in a interesting state i know i did because we've been installing with.net maui check which is a command line tool to install all those workloads but now it's actually part of visual studio and it's one click away is sort of always been with xamarin and xamarin forms before that so the team came up with the.net maui check clean old.net6 previews powershell script i'll put a link to this on the dynamic getup repo but i ran this first and foremost i actually uninstalled visual studio 2022 previews ran this script reinstalled everything and this just helped and cleaned everything away humanly possible now over on the docs there is a full guide on what you need to do to get up and running including installing these five different workloads and toggling this done maui preview as well so let's do that first so i'm going to go and open the visual studio installer now if you haven't installed visual studio 2022 you want to go and grab that from the website i'll put links in the show notes and you'll see sort of this picker dialog here which lets you pick the workloads you want so you'll want asp.net and web development mobile.net.net mobiledevelopmentwith.net dotnetdesktop uwp and desktop development with c plus the important part is when you tap here on mobiledevelopment.net look at the optionals xamarin is selected there but donna maui since it's a preview is not selected so you want to tap on that to get everything you need for net maui preview of course xamarin is also an optional so you can uncheck that here and probably in the future who knows i'll probably flip that around but for now since it's in preview you'll want to toggle that on and then you're ready to launch well okay almost hold on just wait a second here there's a little bit more to install you'll actually need to install open jdk 11 over here is the first and foremost thing because the android 31 sdk which is also required requires it so here go to the microsoft build for open jdk hit download and i installed the windows msi for x64 so you want to make sure that you get that then we're like super close we're getting closer the other thing we need to do is install the android 31 sdk i just just mentioned it but that's actually required here so this gives you some information and updates specifically for making sure your open jdk and your sdks are selected correctly so what you want to do is make sure that you set this up and then it should go ahead and prompt the android sdk manager under tools options android sdk so let's do that now so i'm going to open visual studio and close the installer and you can just do continue without code there and then what you can do let me pull this out is do tools android android sdk manager and that should go ahead and open up the android sdk here now for me literally five seconds ago it was working fine and under repositories full list it showed me everything here now i've noticed though and i reported this bug to the team that i think it's because i also have visual studio 2019 here so i actually needed to open vs 2019 and actually run the tools from here so it's a different version obviously so when you run the sdk manager from visual studio 2019 and on the gear select full list on supported you'll see android s as api 31 and you can hit just that one you don't need the emulators if you don't want them but you can turn those on there and then you're good to go you're ready to go that's all you need and you can close visual studio 2019 again now hopefully that bug gets fixed up or again for you it may just work which is kind of cool so that's what we want now the last thing is for windows when ui 3 development you'll need to install the single project msix packaging tools for vs 2022 extension now if you install preview 7 and you upgraded your vs2022 it just will be there you'll just need to update it to the latest version you can do that by going over into visual studio extensions manage extensions and search for you know single over here and online you'll see a single project or it'll be in your updates if you have updates available you want to install it you'll install it and then you'll close visual studio open visual studio and it'll install it there so that's all you need to do now this point let's double check it we are ready to go now i do believe that the edge webview 2 installer does install when you include it but in case you're doing the blazer stuff double check to make sure you have that installed too just double check it i have always had it so it's good to go all right let's do it here you can of course just do file new or if you have everything installed you can say create a new project and now what we see is that right here we have all of the different projects and there's a maui section right here there's a dhana maui blazer app template dot net maui app and a class library so let's create a net maui app and hit next maui app 10. that sounds good and now at this point we're gonna have everything that we need to start building our ios android mac and windows applications from our new single project let's zoom in on that puppy room and what we can see here is we have all of our dependencies all of our platforms all of our resources everything in one place it's everything that you need all in one project we can see here we have our android ios and mac and windows all platforms here there's no other additional project heads that you need all right here now you may be wondering james you said windows is there too i don't see any dependencies well just in case you didn't have stuff installed the template is still being worked on so all you need to do is double tap on your project and simply come in here and comment back in the net 600 windows 10 and hit save in your project solution and now it will show up right over here and it'll sort of bring in all the packages everything you need right inside of this now let's talk about this a little bit we have our new builder model which is right here so we get our custom font setter in here using maui app that's a lot similar over on android i like this there's a main application which is a maui application uh that creates the maui app over here the main activity look at that nothing in there you don't need anything because the main application is going to handle it same over here app delegate look at this minimal beautiful just really really awesome just to kind of see that all come together there now of course we still have our specific app and our main page xaml and in fact if you go into app xaml you'll see buttons and dynamic resources and all sorts of good stuff in there but you'll also see the main page and that'll have labels and text in our button counter application all the things that you know and love but let's go ahead and debug this right here i can go into framework and toggle that to windows and then that will enable me to debug right here on my windows machine so that's right it's going to create my ui three application right here for windows and debug it just as i would sort of expect it to work right and no other dependencies or anything like that no emulators anything like that just running my windows application from that single project there it is it's really big so let's go ahead and make it a little bit smaller wait a second there's two applications what's going on intruder well no no this is the xaml live preview this is really really awesome olea has been talking about this on all the dotnet community stand-ups for a bit and presenting on it it's so cool check it out it's my app inside of visual studio right here which means i can just put my app over on another screen or put it away just in the background doesn't matter i can start designing i get these little grids here which is really cool i can make those different colors like i say i want i like to be like bright pink which is really nice and help me like align and start making my application here where's my real running app so if i was to say hello youtube in here it updates in real time and in fact it is in my running application of course which is really really cool so i get everything in there right if i come in and i was to change this to be not bold for example and just remove that node we can see that it's no longer bold let's put it back now it's bold again right check that out so you can change your xaml you can change everything you want let's change this text here we'll say text color to red and now it's red and of course it's also red on my running app i can click on it it also updates right here we get that snapshot of our app in real time but what's even better is i can actually come into my solution explorer and open the code behind over here xaml cs check this out and right now whenever i click on this i get count plus plus and i increment it but what if i wanted to say equals 10 and increment it by 10. now right here in visual studio there's this new hot reload i have it on for hot reload on file save you can turn that off i can just have a manual let's turn it off for now and just hit this cool little hot reload button all right what did it just do it just reloaded my c sharp code so when i bring this over and i hit this plus 10 every single time i can change this over here so if i wanted to change the output to have a hyphen instead i'm going to go ahead and hit that hot reload increase this now and now we get that hyphen right in there inside of our running application our c sharp hot reload is working flawlessly which is so nice and of course we also have our xaml live preview so i can just put that over here which is really awesome all right that's one platform how about platform number two we're gonna come in and in the drop down set the framework to android and now i also get all of my different emulators so i have a android r emulator here and also my android emulator api 21 and what you'd expect to do is hit debug now this should be working pretty good i've had to toggle the emulators here and there but here it just launched my emulator and now it's going to build and compile my android application that i just created with my.net maui project and everything that i need so this should build up maui app 10 and i've noticed that sometimes obviously the first first time running it takes a few more seconds because it's compiling the full application then after that i've seen it to be much much faster so let's see if this now deploys on to my android emulator as expected so i'll give it a few seconds to compile up here and start a deploy oh here we go it's already deploying check this out it's happening it's going through some native java compilation done building the project i just like i love reading output for some reason i'm not sure why but here it's doing final jar allocation uh for our application and then since this is the first build build right it's doing a lot more here and then it should uh boot up over here so let's see what happens now there we go more dalvik compilation signing the apk found the emulator i just like again reading which is great and um deploying here we go we're in debug done maui there right of course debug sessions always take a little bit longer but now here's our application it's up it's running and wait a second oh my goodness it is our android emulator inside a visual studio that's right xaml live preview works right there check this out so if i increase this count there it is oh my goodness it's happening it's all amazing of course i can come over here i can now drag it off to the side i can come in and make this orange get my intellisense coming up there and now it's orange as we can see i bring over my app of course it's orange i can come back over to my code behind and maybe make that back to one here i can just hit save now come back over here at the hot reload and now it's increasing it by one every single time i can change this to hot reload on file save and i can get that back to 10 hit save and now it's increasing it by 10 again which is absolutely amazing i love it i love every bit of it and i get that xaml live preview right inside of visual studio it's really a delightful experience especially that's going to be real nice if you are developing your application on a single screen and of course you can also turn on these grid lines which can also help you sort of design your application here which is kind of really nice just if you're looking for alignment and looking for pixel perfection inside of your application and you can of course still even change those colors there we go boom so cool now the last one here is going to be ios we're going to change this over here to our framework net ios and you can of course connect to your mac machine and deploy to a simulator or device plug into your mac or under a local device i have my iphone plugged into my windows device now this should boot up hot restart which is a feature that came from xamarin i should be able to log in with my apple developer account over here and it should try to synchronize my developer profile now i've been having some issues on this specific profile of my windows machine so what we're going to do is hop over to my other profile on account which has the same exact bits nothing different but i'm already signed in to my apple developer account where i can totally deploy to my machine so let's head over there all right here we are back inside of visual studio 2022 and now you're saying whoa my eyes now we're in bright mode and this is my my work account here so i have it in light normal blue theme now what we can see up here is that we have frameworks ios and deploying to my iphone simulator you go into your tools options you can go into your xamarin ios settings make sure hot restart is enabled to sign in to your apple developer account bingo bango you're good to go and then just hit debug that's it it's going to compile up your ios application and it'll start a debug session over here well if it doesn't fail so let's go ahead and pop it up here and try it one more time and let's give it a go so now it's actually provisioning code signing and pulling it up so if it fails the first time just hit debug again you're good to go again preview bits and this is really cool because now what it's going to do is start to deploy this application to my iphone that's plugged into my windows machine so if you've never seen this before it is absolutely spectacular and let's give it a go over here so it's closing this file i've screen mirroring my application over here to my device and just hit go now i have my dotnet maui application right here and let's see what it looks like in my full debug session there it is i can click click click click click and of course i get all that goodness right here on my ios application just really awesome to see it all come together ios android windows all from visual studio 2022. all right there you have it that is dot net maui preview eight all of that single project goodness all bundled up right inside of visual studio 2022 from a single click installation i absolutely love it is is absolutely delightful and of course you get all that hot reload of c-sharp and xaml that means if you're creating applications where you want to build your entire ui all with c-sharp you can do that right with that hot reload which is really really cool that works across donet applications you get this ammo live preview it's so good i love every bit about it anyways i hope that you enjoyed this update video on net maui preview 8. uh and if you have any questions leave them in the comments below and of course as always if you really like this video give it a thumbs up hit that subscribe button smash that bell over there that really helps the channel tell us more people about it of course share the video with everyone let me know what you think and of course until next time thanks for watching [Music] you

Channel: James Montemagno

Views: 29,000

Keywords: xamarin, xamarin.forms, .net maui, maui, dotnet maui, dotnetmaui, .net 6, dotnet 6, .net maui preview 8, hands-on, hands on, installation, .net maui installation

Id: Q0qLiBmbOTI

Length: 20min 36sec (1236 seconds)

Published: Tue Sep 21 2021