.NET 8 Latest News, Blazor, ASP.NET Core, .NET MAUI and More!

good morning folks good afternoon good evening wherever you might be joining us from welcome welcome to this very special webinar if you cannot tell Ed and we are very excited uh we are old but we are we have been doing net for quite some time and I think this is one of the best times to be a net developer net 8 is here and we are here to unpack all the things about productivity and how we build the next generation of amazing apps with net 8 and how can we help uh with all things taric so welcome again we are your hosts I'm s Basu with me I have my good friend Ed sharo while you see and hear the two of us we have some very smart engineers and uh you know project managers uh in the background so utilize this time to ask us you know any questions as we go along so let's uh dive in we are all here about uh you know for your productivity your success um Ed how do you feel about net a uh right now I think we're in one of the best places inet that we've been in in quite some time Sam yeah absolutely the ecosystem is so rich the tooling is great uh we can reach just about every platforms it's a really good time and hopefully uh we can show you that uh we are here to enable your success uh going forward trying to make you as productive as you can be um now this is a quick agenda for today uh we are promising 90 minutes that's all the time you are uh you know getting from you and we are very thankful for that we do have a lot of content both ered and me so we'll try our best to do like 45 minutes each uh there is a lot to cover between you know mod. net the tooling AI containers you know taric UI across you know web desktop mobile so a lot to cover we'll try to do justice in you know 90 minutes or so so that's our agenda for the day again keep asking those questions all along so you know when we do the release webinars uh if you are using uh you know taric products uh thank you for your patronage if you're new uh to the taric and the progress family welcome on board hopefully you can see we have a broad portfolio of you know products you know that try to keep you uh productive and it's not just net we do a lot of other things we do a lot of JavaScript we do CMS we do digital experiences and it's all there to try to make your apps more you know fluid and uh accessibility is big for us um so all of those things are there to you know try to make you more successful so this time around we thought we'll take a slightly different take uh we will talk about the ecosystem we'll talk about the tooling uh in general before we dive into uh some of the core things because you know I'm big into um you know mobile stuff and desktop I'm all about net Maui and desktop applications Ed is all about bler and web apps but you know let's talk about net as to where things are a little bit before we get to uh some of our updates so this is m.net uh you may have seen this uh from Microsoft and you know from everybody else it's a good place to be like Ed said it's unified it's you know taking us a while to get here but you know net 6 onwards Net 7 and net 8 it really is a unified stack and you can reach just about every platform every type of form factor with modern. net the tools are great across Windows you know Mac or Linux um you know OS operating systems we'll talk about some containers everything is very optimized for your workflow the ecosystem with you know libraries and Frameworks and UI tools we should not try to reinvent the wheel and everything is set up for you uh to be as productive as you can be so that's modern. net in a nutshell uh and again we don't need to tell you m.net has also been you know um enjoying a lot of momentum lot of growth uh you know look at the number 6.5 million developers every month um so that that's a lot and you know it's you know very heavily admired uh High Velocity open source projects so you know what's what's not to like uh now um net uh gets an annual release every year and as we speak today net 8 has been out for just a couple of weeks now every November we get a new net and this one here is a little special doc net 8 carries with it what's called the LTS badge long-term support So Enterprises and folks like you um have a little bit more confidence going and you know jumping on to net 8 because you are assured of support for you know X number of years U so with the net 8 release we also had net conf which was a big virtual event uh you know and all of the sessions uh across all things. net they're all online um so you know take the time to you know dive into what you know matters to you um Ed and we are big fans of all the content uh that was presented at do and conf now let's talk a little bit about tooling uh and and some of the other you know areas of net that are exciting if you are on Windows excuse me um then Visual Studio 2022 that's the ID that does everything for you right it's a great place to write code debug uh you know the debugging experience is fantastic testing Version Control uh collaboration with you know other members of your team deployment everything is in one place it's a rich rich ID that does everything however modern. net also invites everybody you know to be productive so folks like me are mostly on you know Mac or Linux uh so we have vs code uh which is a fantastic uh crossplatform lightweight source code editor it has multiple language support and the biggest thing is the extensions marketplace where you know you can grab whatever you need for the type of apps that you're building and you get to be productive it's lightweight and it just works great and you'll as you will see with some of the modern uh you know workflows like with blazer or doet Maui you are perfectly productive no matter which ID that you choose so essentially you need to understand where the differences are choose the uh tool that works the best for you if you're on Windows it's kind of a no-brainer uh to do Visual Studio but vs code also will give you the same experiences in a browser or if you're using things like GitHub code spaces or if you are using things like Microsoft Dev box which is essentially a VM in the cloud that you can connect up to and be productive from anywhere or from any device so you know a lot of options as to how you are productive but it's you know all there for you U so let's dive in a little bit more C def kit this is essentially a vs code extension that makes you productive so um Ed I don't know how you feel about this but as a c developer I do not miss uh you know not being in Visual Studio like the ID because I am perfectly fine in vs code all of the intelligence all of the AI that I you know love and you know like to use these days it's right there for me um in in vs code yeah good you know with the visual studio for ma going way too it's going to be uh the kind of uh highlighted option for doing Dev on um a a Mac platform yeah yeah it is the crossplatform editor of choice absolutely yeah okay now let's talk about a few things that we again don't get to talk a whole lot at and me uh I'm a big fan of containers because it's one thing to be able to build your net apps but how do you deploy those apps uh you know dock or and other containers have been very popular uh you can take those containers to the cloud have a really easy way of you know deploying your net apps along with all of the dependencies there has been quite a bit of work done with Ubuntu uh for folks who run things on AWS or Azure and you want that lightweight uh you know footprint uh canonical has done some fabulous work with some chisel containers so now it's that much easier uh that much lower of a footprint to deploy your uh you know net apps elsewhere so we'll talk a little bit about containers and you know we cannot uh do anything these days without talking about AI it is everything is changing how we you know maybe work uh and get productive as developers so net loves AI because you know what's not to like no of course with everything you have to take things um with a grain of salt you have to do things that are ethically right your company might have policies about how much AI you want to use but it's all there for you if you want to tap into any open AI Azure has amazing Services uh you know where they host a lot of the large language models the sence behind the AI and you're seeing co-pilot uh you know making developers more productive inside of windows inside of Visual Studio inside of vs code and net is right there for you uh so if you want to have that customization if you want to bring in a little bit of AI in your apps you should you know feel right at home so we'll talk a little bit about that as well and we are of course here to make you productive uh you know for those of you who are using our things our UI and our Frameworks and our solutions for a while you already know this but the taric family is all about doet developer productivity we make UI for everything you can think of for doet developers web desktop or mobile and again if you're are doing JavaScript you are welcome to we make kinda UI for all flavors of JavaScript angular react uh view jQuery you name it and actually the net and the JavaScript worlds are playing along so much nicer these days U where we can have web apps working nicely in Mobile and desktop so lot of productivity here for you and we genuinely care about your experience as a do developer uh so if you're you know looking to use on any of our tools uh check out the app stores we have demo apps uh for desktop and mobile um you know check out the demos see how we are utilizing U or looks like edit your back your camera froze for a bit um but demos uh is where everything is at docs is where we spend a lot of time uh and effort trying to make sure your experience is good and then if you need something from us that you don't see or if you just want to have a comment feedback. right.com we genuinely read and you know care about your experiences all right now uh let's talk about a few things here I'm going to talk about mobile and desktop a little bit and then lean a little bit into uh the website which is all of EDS uh but just really quickly going through this how do we build for mobile I say 2024 because it's not yet there yet but it's almost holiday season and if you are starting an app today you are likely not shipping it this year so you have a lot of choices I'm not going to go through every one of them but if you're doing web things you know stick to your web things you have a lot of Frameworks you know mobile web pwa uh all of these things are you know meant to bring your web apps and now it's also much more welcome with net Maui um you know running on mobile and desktop so you know choose the stack that works for you have a codebase that You' like to maintain and speaking of Maui I'm obviously a big fan uh it's evolved a lot coming fromet 6 days uh now we have mobile and we have desktop so a lot of folks our Enterprise customers are building line of business uh complex desktop apps with net Maui and you can see the net Maui team uh you know uh trying to enable all types of desktop scenarios and we are trying to do our best because keyboard and mouse are different game compared to touch um so the same exact code base with shared resources can now power both experiences and that's not something we take like ly so a lot of effort has gone into making sure ma is good for all of your web apps as well or all of your mobile apps as well as all of your desktop apps as well speaking of desktop again uh I'm going to fly through some of this but lots of options right if you want to reach Windows you know uh don't let anyone tell you Wind forms and WPF are not the way to go because they run on net 8 today and I'm going to show you some demos uh wi UI if you want the latest window stack but if you want to do web stuff that is welcome too uh on Windows but then the last couple laser hybd in net Maui through when UI are you know the latest uh Stacks coming fromet Maui same uh story for Mac OS and Linux again unless you have a real strong lead to go you know just on that one platform you don't want to go just native you want to do something crossplatform so again be it web be it.net U you can get to Mac and Linux fairly easy so uh speaking of uh mixing and matching things Blazer and Ed is obviously a huge fan and you know what's not to get excited about Blazer it is C everywhere uh it is the do net that you love and care now it lets you build mod web apps that can be entirely client side or entirely server side or a mix of the two and what I care about Blazer is taking it out of the web although Ed wants to stay all in the browser but you can actually make very nice pwas very nice electron apps and the mai story is particularly nice which is what we call Blazer hybrid so you can take all the goodness of the web and bring it to mobile and desktop so lot of good things you know code sharing uh a lot of avenues to you know try to be productive as net developers all right Ed any thoughts here before I uh jump into some demos um you know mau's really compelling um we we talked a little bit before the show here and unfortunately I don't have uh the devices working this morning but um with Maui you can deploy net apps all over the place including uh one of my favorite toys right now the uh Oculus VR headset so I'm excited to see what you can do with Maui and then we'll show off some of the Blazer side of things later absolutely and you can take Dr Maui to taen so it can run on your TV or your fridge or your smartphone so you know uh the world is your oyster so if you're new to net you know get started. net gets you here uh you can get all the tools you can get the run times everything uh so we are doing a webinar on net 8 so obviously I am on net 8 uh but I'm going to take you to my um command line here just for a second here just to show that I am absolutely on do net 8 however net is also you know it's not your old school net so if I do a list of my sdks you can see I have net 6 s and eight they all you know coexist net is a folder you can blow it away you can Reet it as many times as you want you can bundle it with your apps so it's you know nice and flexible So speaking of that let's watch my time here I'm 15 minutes in again keep the questions coming as I'm running through some things here that I find exciting so let me uh go into uh a folder here um and uh let's see I want to take you into AET uh deploy folder let's talk a little bit about how you run your net apps and uh let's go in I think there is an app folder in here and I have VSS code uh running or as an environment variable so it can you know bring this up in my path so there's my vs code now this is you know modern uh and popular uh lightweight code editor uh I will show you Visual Studio as well but you can see all of that on the Windows side with Ed I'm trying to show you the crossplatform things uh By the way when you are on vs code uh take a look at the extensions Marketplace this is where things light up this is where things are so much nicer get the things that you need to be productive there is just a huge Marketplace of all types of extensions no matter what language you're doing um so these are the some of the you know absolute must have ones the C dev kit which gives you C intelligence and productivity uh C language tools we'll talk about co-pilot in a second I'm a big fan of the material icon theme it essentially makes your files nicer it recognizes what those files are and these are the two that I will talk about we have some extensions for mavi and extensions for Blazer which are really nice uh but let's start off with a hollow World type uh terminal project here so what I have here uh is just a hello world just console right line hello world and you know Ed is big into Aesthetics he has some design sense so I cannot just print hello world I have to bring in a fancy font to make Ed happy and then I have a little counter here that essentially every second it counts uh the counter so that's how simple it is so let me go ahead and run this here I'm going to uh come out of this and let's do a net run again simple uh net console app is what we are running here so you will see that's the fancy hello world to make Ed happy with my fancy font and every second it's a counter right and I can stop it and then it stops all right now a lot of people might not know this but uh well maybe a lot of you do because you're experien uh in a doet devs you can actually send in parameters so I can say just count until five oh apparently I don't know my uh uh my input strings is it just Dash uh what is-5 maybe uh no all right we'll try one more and then we'll stop and maybe oh there it is I had to do a space so I can send in a parameter and then it stops at five the program does just does not keep on going so just hello world.net now just to show you what this looks like here's the app here is um let's go into net deploy when I'm running the app locally this is what it's doing so bin if I go into my debug that's my net a run time and you see all of my dependencies so this is what it needs to run there's the figle dll so if you have a net Blazer application or an as. net application and you're bringing in taric UI all of your dependencies are just a part of that executable now we can do a little better now this isnet app running locally now what if we actually did um a publish so let's go back in here I will do um I'll try to remember some of my last commands let's do a doet publish right so essentially what this is doing is um oh it is one level up so let's go up one level and let's do a net publish so what this is doing is building my net app but it's getting it ready for publication so now if I go back here you will see there is a uh there's a new publish uh folder and let's also do uh a net publish with uh a self-contained uh option here so let's go back uh let's go back let's go back um yeah so publish with a self-contained true so what we're trying to do here is wrap up net runtime and you know publish that uh together so now um let's go into release here uh so there is my publish this is for the net uh just running it locally but since I'm on a Mac it also gives me an OSX arm 64 now this is all of the net that your app needs to run so you can take this folder and run it on any machine Any server that doesn't even have net because all of the you know necessary bits are you know right there for you um so this is you know one way of running it including all of dependencies but let's talk about containers here for just a second uh I am going to bring up our beloved Docker container here so that's going to spin up the docker engine and you can see it's starting up here um and now I'm trying to containerize uh my docet applications you can see I have an image here and image is essentially what are the things that my image my container needs to have to run so uh unbeknown to us there is also a little Docker file in this terminal lab it's saying go to Microsoft you know repositories and you know bring down an image that has the net runtime go ahead and publish that image copy over the working directories and off you go right so that is me just you know trying to containerize that app so uh I have that image running but I actually don't have a container running so my app is not you know hosted anywhere but I do know how to run that image so let's now go ahead and uh try to do a little bit of um uh a create of an image let's see if I can remember any of my um commands here uh let's do this one so I'm going to create a container uh with that image in mind so let's go ahead and do that it gives me a quid so now if I come back to Docker uh there is my container but it's not actually running yet right but it's you know I have not attached to it but it's it is kind of running so if I go ahead and um let's see if I can bring it back to where we attach it uh so like this one here so I am attaching myself to that container oh it's not started yet so all right we'll go ahead and start it uh just so you don't see me typing I have some of these old ones that were running uh this one here so I'm starting starting up the container now it is running so now I can attach myself to that CER core now you can see that it's starts from five because the container is running and I just wasn't listening now it's now it is running right um and uh if I go ahead and stop it now the container is still running my app it is still running so if I reattach myself uh now you can see it starts off from 22 onwards so it's a nice way to you know start running your apps so this is you know docet with all of its dependencies and everything is running fine however uh I'm going to uh go ahead and kill this for a second uh what is uh not so nice about this is just a base.net app with just one dependency it's a maybe a taric dependency is about you know 248 megabytes so this is something new that was done in net 8 and these are called chiseled containers so it can be much much better so let me go back into my app here and I'm going to take you back to uh my CS Pro here where I'm going to enable two more uh lines of code and these are bringing in some dependencies so I'm saying I want my Ms builds to be a little smarter so I'm building in the you know bringing in the containers and I am asking for a specific container family called jamy chis this is Ubuntu essentially the latest Ubuntu release is called Jammy jellyfish so it's called Jammy chiseled uh so with that one change now I can go ahead and um you know build another um container let's see if I can find the Jammy chiseled one uh let's see go back go back this one here so doet publish but I'm specifying that I want that particular runtime and I want Linux arm 64 so if I go ahead and do a build and and publish for that uh see it's optimizing the assemblies for time uh and now it's you know almost done so now let's go back here to my in doctor container you see the Chisel tag uh created two seconds ago but look at the difference in size 30 megabytes this is all that you need with m.net to go run it and deploy it on any Cloud any container because that's how chiseled it is so it is bare basic of whatever the OS you need whatever net runtime you need and whatever your app needs on top of it so really really optimized workflows and you can carry all of your teric dependencies with it so um just something that's you know really nice all right so moving on from uh containers I will quit the doer engine so it just you know doesn't sit there uh let's move on to a little bit of you know AI because that's also everywhere uh so let's go ahead and um close this for a minute and have you noticed um any speed increases with all of these you know Green Field applications that you're you're demoing absolutely so um net 8 is all about speed because uh some of the performance benefits in net are enormous uh Steven tube and some of other Engineers from the net team they take the time to write up the you know performance benefits of net uh you know take a day off to read that it's just a lot of optimizations and everything is just so much faster so much smoother uh so it is really nice yeah deal with a lot of demo apps and I noticed that mine just boot up like instantly now U you know compared to just uh before net 8 you know things took you know couple seconds to boot up now it's pretty instantaneous just on some of the things that we work on it absolutely is all right now Switching gears to AI because you know everything is AI nowadays right so take a look at my extensions here I do have some taric ones here but I also have GitHub co-pilot and other things in here this is a standard.net uh you know console app here but take a look at what we are doing here with a little bit of co-pilot and again it's an option it's not something you have to use it's just an option to show you that these things are there we are looking into the extension extensibility model of how we can make you more productive with teric UI as well but take a look at this class here I have a class and again how you uh comment things matters a little bit so I have an athlete class here and I am saying this is the class that defines an athlete then I have a list of athletes and I'm starting off with you know vard KY Leon Messi Tom Brady some of them you know greats but I do have uh some extra so this is called the GitHub co-pilot it is a co-pilot you are still the pilot you are still the one responsible for running the show but this is just here as a sidekick right so if I do a comma and if I come down hold on it's trying to suggest something here so it says hey I'm not offering you cop def kit because looks like you have a better uh you know assistant next to you so if I do a tab here uh you can see in ghost text it's starting to recommend what's next right it says Hey Kobe Bryant is next I will say accept with a tab or I can reiterate on it I go down here now it says Michael Phelps is swimming that's great one more usin bols running yep I'll take that as well so you can see how quickly uh it can actually look at your code and start you know iterating over this now let's just say I have these list of athletes and now I am trying to write a function uh to do something else about it so it's all about you know context so it's starting out listing like do you want a list of sports like no that's not really what I want what I maybe want is a static function of um you know list of athletes by name so you can you can see that it starts guessing a little bit so it's very dependent on um the context that you are and so start starting to you know give me a list of things as I'm starting to you know type my method so that's nice uh what if I don't want any of this so let's go back in here what if I just wanted a comment here so I'm going to say say um function to filter athletes by Sports so you see how it's not even letting me finish and it comes up with it I tab in once and I hit enter and it comes up with a static list of athletes where they're you know filtered by Sport and I hit Tab and it's there so again it's there for you to help uh and if you don't like something here's uh where you can actually ask the AI to see what it is so I can do command I and now I get a inline uh check so I can do explain so why did you give me that piece of code so if I say explain up comes the GitHub co-pilot you know chat and it's you know trying to explain why it suggested something uh and if you have code that's it it's just you know hard to uh you know comment uh you know you don't have to do that anymore so I can just do here and I can say Doc so give me some documentation on this method that I just wrote and response is being prepared it's trying to figure it out and off we go so I'm going to hit accept and and all of a sudden my file here has documentation for every method so again it's here to help you it's up to you whether you know how much of this you want to use and that this chat is really nice it can be in line or you can you totally turn it off you can have a secondary uh you can have a primary view where you see your files and then you can have a secondary uh you know tab where you see all of your chat so all of is is you know it's here to use So speaking of AI let me tap out of here and show you a few real implementations or you know actual use case of AI if you wanted to use it um so I'm going to go in here uh to uh project let's go to GPT uh because everything is chat GPT these days right so this is a doet Maui project by the way and uh this is the solution explorer that you get notice how nice my files are uh because that you know extension knows what these files are if you would rather have the visual studio Microsoft type Lookout then you can still have a solutional Explorer uh notice how in this one here I still have like if I look at my dependencies in my Maui app it knows exactly like this kind of looks exactly like Visual Studio because that's the point it's a solution Explorer so um I can go into any particular program here and uh I can also choose where I'm targeting this is already noticing my Mac but I can do Android I can do you know iPhone and other things like that but Mac is fine for me uh let me go ahead and run this really quick uh so Ed and me are good friends uh we often do vacations just by ourselves you know who cares about our families right uh so this is uh coming trying to come up with you know just a quick little uh demo app of using chat GPT inside of yournet apps because you absolutely can um so it's coming up here on my desktop uh but you can run the same app on um you know um mobile R uh you know web as well so let's go to the most exciting city in the world that's you know Cleveland Ohio uh which is actually really nice it's my closest you know big airport um so it might take a while and it it's firing off uh you know calls to you know chat gbt to get a list of in options but beyond that you can have all types of customization on uh you know type of calendars so now it's come comes back here are some attractions in Cleveland have this is literally you going to chat gbt to ask what are some things to see in this city or what are some hotels and it comes back with your responses exactly as you expect like these are text based responses and then you can use just you know utilize calendars or other types of UI from us to make it a nice you know AI powered you know trip assistant and all of this is just a restful call so all of your AI is at your fingertips if you wanted to use it uh let me take you here to the main Pages um you know code behind uh so I'm you know getting a service I'm initializing it and I'm just essentially asking uh please enter a location and then uh what are some you know attractions around that City or what are some hotels around that City that's all that I'm doing so AI is here to help sprinkle it if you need to or if you care in your apps so speaking of that let's uh take this a little further because you don't want my um you know just sample apps that are not very exciting that you want real apps so let's go over here uh I am going to take you to uh an app that's a little better written than what I had here and that is our t.net Maui app uh let's go into examples here I'm going to pull up the control sample uh that one is fine here now this is a much much bigger application uh with all of our UI you know baked right in uh so let's go in here uh let's you know start uh on any any page here um abamp is fine Mac is fine so let's go ahead and run this really quick and notice how I I can do all of this from Visual Studio but I can also do it from vs Cod so it's you know up to you so our with net 8 you're going to see all of our UI light up with all of the latest bits in net and it's up to you how much of the newest things you want to utilize but be It Mobile be it desktop you're going to have all types of UI light up for you so speaking of uh you know AI here is our uh you know chat AI uh this is for you to have that interactive chat experience it's actually um you know not dependent on whatever is the back end this one happens to be in Azure but it can be chat GPT it can be any other you know AI type bot here uh so you know time with friends is what I'm looking at you can again start seeing the experience of you know having those calendars when do you want uh to leave Ed and me want to leave right away like tomorrow uh for you know seven days why not and you know who wants to go to Cleveland when we can go to more exotic places here so I'm going to say just the two of us uh we are going to go to Spain right and it comes back like you can start seeing the experience here now this is kind of a window where you can scroll this is like a card so let's just you know choose something exotic in Spain and now it says hey would you like you know flights yes why not uh this is an app that's written in sopia so you know it starts you know testing out flights from Sophia to uh somewhere in in Spain and it's going to come back with some you know flight options I am done and and so on so this is you know AI integrated inside of your chat type applications maybe you're writing a support application anything that you need you know chat for so what you're seeing here is a sample of all of our net Maui uh you know UI inside of desktop and the same exact app works for mobile as well and don't take my word for it the same app is also out there the app stores so you can go and you know check it out so some of the things that we you know spend a lot of time on you know are the data grids because that's what you kind of need for any type of Enterprise app so this is a full-blown data grid uh with all the functionality that you can think of you know filtering sorting grouping uh things like you know Frozen columns and we also with net 8 and the latest release we also have keyboard support across Windows and Mac so again think about how we're doing this across wi UI on Windows and across Mac catalyst on Mac to give you that true keyboard and you know Mouse experience so you have full flexibility to build a really complex uh desktop application with net mavi so all of this UI is you know right here for you to use you know take a look at uh just a you know plethora of choices that you have everything from input controls to data visualization navigation view if you want to have like a uh you know hamburger menu on the top if you want to have tabs at the bottom that's all up to you uh lot of the Enterprise workflows need PDF and you know word editing and Excel spreadsheets all of that is also built in there for you so you know take this to town make make some amazing desktop applications right uh so that's you know a quick look at uh net and net Mai so what I'm going to do here is quickly uh switch uh context here uh to uh my Windows machine so let's do a remote desktop add any comments so far any any questions can just wondering who who's paying for that vacation you know work the two of us are just you know working away all right so I'm going to connect to my Windows machine which happens to be you know sitting under my uh desk here uh so I'm just going to connect uh yes that's fine uh so off we go to my remote uh Windows desktop it's just running Windows 11 but it actually has the net 8 uh you know or net you know 11 and net 8 Bits in it and why is it blank or why is it black for some reason let's see and let's see oh it's actually uh signed me out that's why uh all right so we can close this once and try to reconnect hold on and reconnect again do you want to sign out the other session yes I want to get in I know I have you know probably six or seven more minutes before I have to hand it off to Ed uh but again keep the questions coming um okay so I am on my windows uh you know eight box uh yeah that's fine so I want to show you some more desktop apps you know with net uh 8 you can bring in everything that you have done on desktop uh with you know older versions of net just forward so take a look at some of the options here so going to start here with WPF so our taric UI for WPF is a very very rich uh and productive uh application Suite it's you know 15 years in the making so lots of engineering that's been ped into this this app that I'm showing you your desktop apps don't need to look like Battleship Gray desktop apps from 2005 or 2010 right they can look like this uh so this is a WPF app and you can see it's completely fresh and it looks modern it is fully accessible and it supports all the things has amazing UI UI so 160 plus UI components built right inside of this app and you can pick and choose which ones you you know want the really complex ones are you know the 3D uh type you know rendering of graphs and charts and grids and all types of you know complex things so all of this is out there for you to you know play around uh some of the newer things we did was uh if I go into U oh it's trying to come up with teams which I don't need right now data visualization if I go in there uh we did some uh new things with maps you take a look at the our map UI just how many types of maps it supports you know be it you know airport Airline seating stadium seating Hotel floor plans you can do it all uh but obviously it works with you know a whole variety of mapping providers this is you know the Azure map provider and again you can you know layer any number of things that you want on top of it uh and really you know have a rich experience in terms of interactivity uh this is also something new this is called the Highlight text block so as your users are start you know type starting to type you can you know uh start highlighting uh just a couple of characters of what they're typing in so you can give them a reason why uh your autocomplete box or your combo box is showing you the suggestions as the people as the user is you know typing in so uh some really uh good stuff here and SVG images um they are everywhere uh let me go in here um so full support for svgs if you want to bring in and svgs are honestly the way to go uh even with like net Maui if you look at U excuse me if you look at the code sharing or the asset sharing aspect of it svgs really are the best because it can res resize Things based on what iOS needs based on what Android needs or Windows or Mac um so right here in WPF we got full support for all types of you know svgs that you want to bring out uh you know custom colors we can we can do it all so you know bring your svgs and all of your um you know WPF apps are ready to be fresh and looking you know nice uh so that's WPF and again just think about this for a second this is W PF uh as we had seen or started in 2005 it's running just fine this is net 8 is the runtime for this WPF app so uh speaking of things that are even older Wind forms extremely productive environment uh you know for developers to build amazing apps and again they can look fresh uh this is a winrs application that's running onnet 8 as of our last release so we take a lot of you know you know time to make sure everything moves forward right and again there is nothing holding you back back um so again in the new uh you know win form story what we have done are some you know really nice uh you know UI uh you know things so that's that's a notification icon here so I you know fired off a notification uh that's the notification that I you know see at the bottom of my screen so if you need to keep the user you know updated I know like bler and other things to web style notifications this is for desktop and we also have a very nice Pips pager and slide view for you so you know classic wizard type look or like a carousal look where you want to you know have the user uh just you know tap and it goes around in a carousal you bind it to images or some rich cards or some text and it'll do all of that for you so that's winforms and WPF both running on top of net 8 and if you want to you know do the latest in um uh on on the Windows stack uh with the latest UI and ux wi UI is is your thing and again take a look at how fresh wi UI can look again U hundreds of apps that are running or UI controls that are running on top of win UI 3 and the latest you know net runtimes be it for win32 as well as for you know WP um here's that same chat experience uh but apparently no one's paying for it so I'm not going to go through the experience but you can start you know envisioning U the use case where you have that continuity of experience you have a chat application that's running net Maui on your iOS or Android same apps running on web same apps running on desktop and we can provide the UI for every one of those platforms and it's up to you how you integrate it with your services or your you know AI Solutions of choice right so um that's a lot in a nutshell we talked about containers we talked about uh AI a little bit so choose the right tools that are you know good for your native apps um you know however you're doing it uh and you know be productive we are here to provide you all of the UI um so in terms of where you know we land we we had made a blog post about what doet 8 means you can see the support all across you know reporting uh testing we are right there as well Fiddler if you want to have you know Network transparency of how your net apps uh are behaving you can have full accessibility uh or access into it uh some of the you know desktop support uh things we I didn't get to show you but things like scheduler navigation view these are really you know key for your desktop apps that are you know um smart and they honor the you know mouse and keyboard um so we uh we talked about the vs code uh extensions we have one full Blazer we have one for um for Maui as well and I didn't get to show you that so um Ed I'm going to Ste uh I was supposed to end at 45 minutes so I got three minutes right so I can take just a little bit of time to show you that few more minutes Sam all right because this is so cool so I have uh the teric UI for.net Maui extension installed right in here and there's you know while you're are shopping around might as well get the one for blazer because Ed is going to talk about it so with that I can start blank so if I do control shift p I'm in my command pallet right in there is our new template wizard so I start that off I can say um give it a name test and um go ahead and create that on my desktop uh that's fine um trial is fine. net 8 I'm going to go ahead and create a project so right in here without even touching anything else I am you know firing off a new template uh now this is going to beet Mari template but with a little bit of you know uh sugar that we're are sprinkling on top to make you a little bit more productive because what it's trying to do is bring in taric UI so just a little bit of Plumbing that you have to do you don't have to anymore it's just ready uh ready for you out of the box um so it's still thinking here for a second let's see it's creating a project it's done actually so open in vs code so here's our new project and it's nice and shiny doesn't have much but here is a standard you know net Mai project that you expect but if I look at the solution Explorer here uh that's fine let's go up here to the solution Explorer you are going to see that we brought in a few things if I look at my dependencies uh let's just say for you know my Catalyst right in there package wise there is tiller UI for Maui right there right and uh if I look at my Maui program.cs I have that compatibility mode I have the used toic extension method so everything is wired up for me and here's my main page and this is you know standard you know uh M stuff but we just replaced the button in here so we have a name space so we are you know giving you all all the things you need to start coding right away um so you're you're productive so you can start with the button now here's other thing we are throwing in uh there are some code Snippets that are ready for you so you can start typing in like teric and then the whole thing or you can just say TM TM is a short form for tiic Mai so up comes our code Snippets and essentially this is just there to help you out um just so you don't have to type up all the zmo uh so calendar is easy U but like something like uh a scheduler might have a little bit more uh to it so let's go pick a Schuler uh like that one and while I'm here I'm also going to pick maybe um I I love our rating control so let's go get our rating control uh right in there so like these are simple examples but if you can think about a grid which you're trying to data bind there is some complexity to it which is going to get you a nice point to get started and then you can bring it bring it your own um so with that let's go ahead and run this really quickly um and this is running on net 8 um oh I have some errors here um because it it actually did not restore uh it's it's not finding my um uh it's not finding my uh nugat config so uh again once you have this set up it can go find it and then you can you know run this uh just as easily but you can see the code Snippets and how easy it is to you know get started and then often running you go with AET memory app with teric memory bits uh you know lighting up your UI so I am almost uh you I'm already a minute over so I'm going to stop here and uh you know give the stage to uh add here but hopefully uh I I jumped over a whole bunch of things but hopefully you see the promise of uh where net modern. net is it is flexible in in terms of how you build apps it's flexible in terms of how you deploy your apps uh in in you know containers it's flexible in what type of AI you want to bring in both for coding use as well as for AP use so you're you know you're making your apps more intelligent and so on so uh Q&A Ed or maybe we want to uh skip to you directly and I will keep answering question question or two um I did see in chat there was a little bit of confusion I I guess it was just maybe semantics is um Maui ready for mobile oh yeah yeah absolutely so dotin Mai is the evolution of uh you know what we call let's let's take you to here um so this is the landing page and it is the evolution of Net's crossplatform strategy so now this is essentially something that's evolving from zamarin so IOS and Android are kind of given we know how to do that we know how to build apps smartly uh we know how to manage our dependencies and iOS or Android with shared you know resources it's done and given even the store deployment story is getting so much better there there's a new extension for that as well but what we are adding on is desktops so we actually have a lot of customers who are building next generation of complex desktop apps with Maui but Maui starts up from you know a mobile first mindset so absolutely and then uh this is a good one might be a slightly off topic but I think it it works um you showed like a lot of sdks on your machine because you're always tinkering with all the new things Sam how do you manage all of the net sdks what's the best way to like prune those out or deal with yeah everything is a so you you know it's living under your you know root user and your you know where uh you have doet installed you can actually choose where it is but um you can blow away the SDK if it's you know causing you a little bit of you know friction blow them away and you can Reet them you can I mean as we saw with you know self-contained deployments you can bundle net with your app so if you have because I mean the SDK will sit there and you know use up a little bit of space so if you are running up uh on Space shortage or if you just want to clean up your machine go ahead and remove that it's just a very fixed look location where net installs its bits and where the you know Global tools go in terms of you know the command line and then your new caches those are all in a very fixed space so go ahead and clean up a little bit if it you know if it helps and uh what one more good one before we transition over because we're going to talk a little bit about mobile um Android and iOS uh which is better for those platforms Maui or Uno oh that's a different question um all right so let me uh take you to a quick little thing while we're talking um um net may embedding maybe um hold on uh this one here okay so what exactly is unao platform so the visual markup that we are using uh to describe the UI of our application it doesn't need to be one thing so you can do all up C if that's what you want to do or you can do zaml which is extensible application markup language it is like XML as much as you know Ed hates zaml or maybe hates is a strong term doesn't like zaml it is like HTML it is just a markup language so um XML or you know zaml as we as it stands like it has been used for so many different types of applications over the years so there are a few dialects of zaml so if you come from a WPF background then you know you are used to a certain type of zaml if you come from you know wiui or WP background then you used to a certain dialog of ZL and to me like once you learn one you can learn everything else as well um but if you are you know keen on maintaining your dialect of zaml then Uno platform is another open source um you know Solution that's going to take that uh you know wi UI zaml and run it on iOS Android um you know Windows and Mac and other things uh so this is not supported by Microsoft but again I know the folks they're doing fine um they in fact have opened up a new thing called net Maui embedding so even though they have their own renderers for iOS Android but they're able to render Mai UI on top of it um so uh let's see if I can show you another post here uh let's see Uno platform uh maybe this one here so uh any of our uh net Maui UI uh that you want to render on iOS or Android it will also work inside of Ono platform app but just understand that this is not net Maui so if you're looking for a Microsoft backed solution then you may want to go with net Maui but if you're okay with you know wi UI ZL and that's what you love and that's what you want to do then go you know go to Uno platform UI wise you're not going to be stuck you can render all of our arer UI everywhere awesome all right I should probably take over here Sam so have too much time get you the floor here and I will respond to any other questions as they come up all right folks so we're going to talk a little bit about Blazer hybrid apps withn net Maui uh as we transition into talking about Blazer so Sam covered Maui in general and a lot of uh options that we have with deploying to desktop mobile IOS and Android um I personally like to use web uh Technologies to do my development I know Maui's a great option if you're a zaml expert and um you can write your UI with that I like HTML and CSS myself so with Maui comes a stack that we like to call Blazer hybrid which uses um an embedded technology inside of a net Maui app so we can deploy to um multiple uh cross-platform targets so it's a blend of native and webtech um I can use CSS HTML JavaScript um it's all wrapped up in this nice web View container uh that's inside of the net Maui app and this gives me uh via net access to platform features cameras sensors Gyros all of those things that nice device Hardware API through the Maui apis um this means I can deploy to desktop and in Mobile and uh Target those specific Hardware functionalities um that means I can push my apps into the App Store as well so uh you know on the web we have lots of choices to deploy our applications uh there's pwas and we can install uh through a pwa but with PW we just don't get that same um Native uh App Store type of deployment um with blazer hybrid we can actually ship our apps into the App Store um and either sell them or deploy them that way uh so there there's a couple really good benefits just in that regard uh in choosing Blazer hybrid to deploy your application uh so as I mentioned these applications are a container uh so the Blazer application is actually wrapped inside of the net Maui application inside of a Blazer web view which is a specialized web view um that is uh specific to Blazer and what that web view does is it not only boots up Blazer but as we'll see in demo here it targets the device uh the devices doet platform so the runtime that's on that device is the one that we're going to use so there was a question in chat does Blazer hybrid use web assembly does it use server side rendering Etc actually it uses client side rendering but not with BL not with web assembly but with the net runtime that is on the device that you're using um and this lets us go to any platform because we have net everywhere these days uh one thing that's uh nice about all this as well um similar to web assembly we don't have a requirement for internet connection so we're not relying on the server to render views um the only thing we might uh require a server for is some data so uh in the example that I've got next you'll see that we we use some data to get uh or use a server to get some data on our uh application and there there's some caveats with it that we work through um one thing that I really like about this approach is I can bundle all of my application logic views components all of that in a razor class library in a centralized location and then I can use different front ends whether it's web or Blazer hybrid to deploy so I have one place one shared uh project with uh basically all of my applications views and code and then I have my different front ends that I published and there they're basically just shells wrapping the application so let's take a look at what that scenario looks like and uh Sam is my screen sharing okay still yes yeah so while you're getting just to answer a quick thing and just to clarify folks were asking about U Blazer hybrid versus like electron so this desire to have web apps running on mobile or desktop this is nothing new right it's just the tools and the Frameworks have just gotten so much better uh pwas are a great option if you are okay with the web as a distribution model you can still go to the stores electron is kind of for desktop only because it can be a little heavy-handed so the difference between electron and Blazer hybrid here is electron is a nodejs application and it shifts with chromium as the engine so you have a browser that's built in uh so that's the one you have to keep updating while Blazer hybrid and net Mai takes the approach of everyone has a modern browser so we're going to go ask for a browser component from Windows from Mac from iOS or Android so you're not responsible for the browser updates you just have a modern canvas to layer up your you know web UI and like what Ed said Blazer is not running on some separate server it is Blazer and net now we have the exact same runtime that's net 8 today mhm yeah and uh if you're you're looking into electron make sure you do your homework on uh how mobile uh deployment works it's actually not recommended by most folks they they say it just eats through battery so if you like your users or love your users you might not want to take that approach uh everything that I've read about says it just eats battery life on mobile devices well I mean yeah know electron is really not meant for because I mean it needs a njs process running but on desktop like your vs code your figma your slack those are still electron apps so if you know what you're doing it is fine and you can render all of our Blazer UI on desktop yeah yeah uh so in this application you'll see that I've got um what I call the Blazer app I've got my Maui application I've got a server app I even have unit tests in here which is nice and I have a web web assembly application um now the server is not supplying any of the web views for this app it is only there for data so there's some web apis in there if we pop this open um you'll see that uh there's just an error page um and a Weather Service uh which is uh providing some generic weather data that's being published out to the different front ends that I have uh so no no views in there nothing server side rendering none of that inside of the server itself and then then um I've got a Blazer app uh up here and the Blazer app doesn't really have a home it doesn't live anywhere on the browser or the server uh Etc it just has all of the components and features and Pages for my application so this can go anywhere that I publish it and then I have a Blazer web assembly app that you'll notice is missing components and Pages there's no Pages no components in here whatsoever because it gets all of that from this Blazer app up here so the web assembly app is for the browser and then on Maui I do the same thing you're going to notice there's no Pages or components or anything really in this app because it's getting them all from here so I've got one code base which is my blazer app app and then I have my Maui shell and my web assembly shell and I can run this application on web desktop mobile and elsewhere um and then another thing that's really nice about this is I can unit test the Blazer app uh and I know all of my components are unit tested so I have all my tests in one place as well I don't have to have specific tests for Maui or specific tests for web assembly I'm actually testing this library of UI components here so if I jump down in the test Explorer you can see if I run this really quick I can test those out and we'll get results down here and uh I've got my weather component that I've built uh getting tested and if there were any errors they would show up in our detail summary on the right hand side we go troubleshoot those things what's really nice about this is I don't have to keep launching a browser or an app and manually going through and checking things to see if there are problems now now Ed uh on this front before you move on I wanted to say if you are okay running your browser or maybe even doing it headless because now the moment you bring in Blazer on a desktop or you know other canvases outside of windows you can do things like test Studio where you can do automated testing you know off your Blazer UI as your app is running on desktop yeah if I was going to do some end to end testing I could fire up uh teler test Studio I can run through my entire application in the browser using test studio um this gives me a nice uh short um Dev cycle though uh where I can go um at the unit level and unit test out my components as well so um a lot of times you're you're going in and you know checking the layout of something or uh making sure some functionality is working inside of the app itself uh you can do all of that in a quick unit test and we have tools to help you with that as well you'll see I'm doing some mocking in here Sam and uh what better way to mock something than to use teller jmck so we can just call mack. create in there with teller jmck um and then we can uh use jmck to uh wire up our services and things without having to create a fake implementation of that thing so just with one quick line of code here I've got a Weather Service um mock of my ieather service interface and uh my component will render um with that uh that Weather Service and then when I'm rendering this out I just call mack. arrange and I say you know what do I want this Weather Service to actually go ahead and populate as far as data so I can put some test data in here um and for this scenario I'm actually using something called Auto data and it will pull in data uh or generate data and populate it along with just mock so there there's some nice uh te testing methodologies that we can use there and we've got some teller Tooling in there to help this as well all right so let's go ahead and fire this up I'm going to go ahead and start uh my uh server and I'll do start uh let's do without debuging it just goes a little bit faster you can see how instantly on that was thanks to net 8 um it's now up and running and this is the obligatory laser example that you always see with the counter and the fetch data component here now uh this is running in the browser and I did run the server app what the server app is doing is it's uh it's looking for routes and it is finding this web assembly application and hosting the this web assembly app so again the server isn't doing the rendering necessarily here it's just serving up this web assembly app uh that's running inside the browser um the next thing I want to do is uh fire up my Maui application so let's go ahead and do that as well and I've got you could see up here uh my blazer app. Maui selected and I've got a pixel emulator here we'll go ahead and run that without debugging as well just to make things boot up just a little bit quicker you're not bringing it to iOS yeah the same app will work yeah but you can see the flexibility here and I think while you are running this you know somebody else had a question in the chat room but it is the same exact UI component that you see but now it knows that it's responsive because it's a smaller you know surface area but the same UI component is what Ed is referencing from his web app which is web assembly and from the Maui app and so on yeah so this is coming from uh let's jump back over the emulator's picking up some clicking behaviors there but this is still the same Blazer app here running inside of this shell um that is wrapped inside of this Maui application so it's all coming from this Blazer app it's just a different shell that's wrapped around the outside of the app making everything work um and I can inject different services in there depending on whether I'm on the web or on a uh a mobile device because I might want to take advantage of some of the features on that device camera sensors Etc so I can swap some of those things out through dependency injection if defs and there there's even some ways to Target things specifically um inside the platforms folder here if you want to do something very specific uh so there there's flexibility across the board in regards to that but what I want to point out next here Sam is when I click on weather uh my app's kind of going to crash and there's an error uh reason for that is uh my uh my application here my server application is running on Local Host right and a Maui application running in an emulator or some connected device somewhere doesn't know what Local Host is does it it's a VM a simulator is a VM yeah so it's Local Host you know it's its IP address for Local Host is not the same as the one running on my Dev machine so that poses a problem and I need to specify something here or I need to put in some kind of uh little shim to work around it but what Microsoft has done with net 8 in the release the release of Visual Studio has included this nice little utility for me and I don't know if you've taken a look at this recently Sam but but if we go up into um our server app here I'm going to pick server again and under uh the attached devices here you'll see Dev tunnels um I can go into Dev tunnels here and select one of my Dev tunnels I'll go ahead and run the application again and you'll notice that Local Host is now not part of the URL let me close this other Tab out so we don't get confused and you'll see this URL it's spit out up here so this is actually being hosted um in Azure not the whole application but just a like a kind of like a VPN so we're port forwarding through Azure and uh this is made public for my applications to consume so if I take this URL I'm going to go back over to my Maui application over in program CS here and then I've got this on my clipboard I didn't want to have to try to memorize that URL so we'll go ahead and paste that back in you'll see my my URL getting uh used over here and then we'll go ahead and run um the Maui application again and that should reboot really quickly and once it does I should be able to go over to my weather page and there's my weather how about that so that's that's called Dev tunnels and that is baked into visual studio now um it wasn't preview for a bit so you might want to read about that give that a try not exactly part of the net 8 runtime or anything like that but it shipped along with net 8 so um yeah you can configure that in a asp.net application um underneath of this menu here where you see Dev tunnels you go create new Dev tunnel there's some Wizards that you go through uh select security features yada yada yada and then uh you get your url that you can uh share with your um application uh clients um you can share them with uh you know stakeholders in the company that are maybe testing the application things like that um it's it's a really nice utility that they've included is Dev tunnels on BS code is a question that just came in you know what I'm not sure um about that myself I I haven't checked in to whether it's in vs code or not um so I have to look that one up yeah I'm not sure either but I think they have like a command line thing that you can do so that get you I would assume there's a command line for it uh another demo that I wanted to do but uh because of the way we stream and all of the cameras that I'm using here uh and the way that the Android developer tools work uh I guess there's a collision with my camera being an Android device and my Oculus Quest 3 being a uh an Android device but essentially you plug in your quest um and you can deploy it as well so uh it's a little bit hard to stream uh with this thing on my head and like I said I'm I'm it's not connecting anyway but uh this is a screenshot from uh the same Maui application running inside of augmented reality which is pretty cool and uh there's really actually a nice web uh developer workflow in this as well so um you can connect uh your desktop device into the application running in the headset uh you basically Remote Desktop in you can see your Dev environment side by side with the application running in AR um and you can continue to debug your application uh run it test it all of that right inside of the headset so it's pretty it's pretty uh a neat experience to try out I'm still kind of experimenting with it looking for practicality uh things like that but essentially it shows up here under your Maui app and instead of it saying Android right here here it really uh just says Quest three on it and um you know there's very little configuration to make that work it's just uh giving Dev permissions basically and that just uh is up and running uh so sorry we couldn't Dem with that live but it does work who needs practicality when you you can have Cool Tech right exactly it's like Sam said why would you do this a wow factor why not Sam I mean it's augmented reality um it's it's an interesting new space so I'm over there dabbling checking things out kicking the tires see what uh what we can do with it um so Blazer hybrid is is really amazing it lets you deploy uh to web desktop mobile and even um the metaverse so that that is something that is uh definitely a modern technology that is future facing and it's all built with Blazer and Blazer got a lot of love this uh time around with net 8 so we're going to shift over to just talking primarily about Blazer and asp.net core and what has happened in that space and we'll probably end up wrapping up there uh so first of all Blazer got a new unified architecture and what that means is when you're talking about Blazer in uh the sense of asp.net uh again we're shifting away from Blazer hybrid here and over to asp.net core uh on on aspnet core Blazer uh used to have this concept of are we going to run this on the server or are we going to run this on web assembly now we've got a unified architecture that we'll talk about how that works uh big part of that is the new server static rendering capability that it has um and this lets us uh write Blazer applications that can uh render without interactivity and this is really great for SEO uh and we'll we'll talk about the details of that and then we have the ability to choose our interactivity from there with server side and client side um and then there's a new feature called navigation that is also very nice so Blazer lets us build apps faster and this is not just my opinion but several um other industry folks uh Danel Roth especially thinks this is one of the fastest ways to build applications uh because we don't have to rely on the JavaScript ecosystem don't get me wrong javascript's great it it does build you know um great AAA applications uh but if you're a net developer like myself uh you want to use one language you want to use one framework and you want to use one build system uh I'm not a big fan of running a bunch of uh CL commands and configuration tools and JavaScript Json files to get something up and running I want to just use my net skills and build the application uh and that's what Blazer does for us and with this new unified stack we can build full stack applications uh with Blazer and uh you know we've got again server static rendering enhanced navigation and form handling streaming rendering uh interactivity per component or per page um in automatic render mode so a lot of new things uh that will'll dig into here so in uhet 7 and earlier versions of net uh we had the choice of running Blazer on the server we'd spin up some websockets talk to the application using signal R do our updates uh over that websocket connection and that was running Blazer completely on the server um we also have the ability to run Blazer in the browser using web assembly and uh we use the net runtime and web assembly for that and uh all of the processing takes place on the well with net 8 uh we have static server rendering as well and what that does is lets us just write uh statically rendered Pages out to the browser and this is nice for SEO performance uh that sort of thing better user experience um and this is more of the classic way of building web applications as well so we're just using HTML and form posts to do work uh so this is great for scale especially if you're doing marketing sites you don't have a lot of interactivity on on many of your pages presenting information like dashboards uh and then basic things like navigation simple forms that don't require a whole lot of real-time interactivity um if you do have that rich interactivity need event handlers real-time updates things like that uh some sort of interactive model would be great but a lot of our Pages don't require those type of things again if you got a lot of marketing stuff on your site you don't want to have to spin up a web socket for that page or uh have web assembly um the net runtime for web assembly installed uh to make that happen so static server side rendering is a great way to get SEO and performance out of our applications so previously we had to select uh server or web assembly uh for our entire applications with uh a Blazer app and This Global interactivity model is still available on net 8 um but it was the only way to do this before net 8 so net 3 to uh to now uh we could choose whether we wanted server side interactivity or web assembly with the new static server rendering in net 8 static server rendering is the default so Blazer will render on the server um Blazer can run completely on web assembly if we want to but most people out there um are using Blazer along with a net server anyway so the default Choice here now is to render everything statically from the server so we have static server rendering and then we can choose individual Pages or components that we want to run in web assembly or even server so our whole application doesn't need to subscribe to one of these methodologies we can actually use all of them together and this page or component interactivity um is nice uh not only for user experience page load times and that sort of thing but we can set up automatic uh server and web assembly um uh components as well so it will choose web assembly if it is present and if it is not it will choose server and load the web assembly uh files in the background uh with static server rendering without that interactivity um there are some things that we need to take into consideration for example if we have a page that has say a catalog of products on it U it might need to have some long running service to make that page uh render completely uh what's nice is uh this new feature called streaming rendering and what it does is if I'm static rendering a page um I can render a loading option like um a state where the page has pieces with placeholders uh loading indicators things like that and I can then stream in pieces of the UI as they render on the server so this gives us a fast UI uh render where we're getting the UI out there to the user and then displaying things uh as they begin loading and uh the way it does this is it keeps that connection open so there's no signal R there's no websocket it's just the uh the the web request um that's being delayed and uh letting these pieces get loaded in um it just takes a little bit of UI finesse which is something that we may be able to help with like skeleton components loaders and things like that that might take some time um another feature that we get with net 8 is enhanced navigation uh so without uh using uh client side rendering and uh writing the application you know with that Spa type technology what enhanced navigation does is the server is looking at the pages it's rendering and looking for changes so Blazer has an amazing diffing algorithm in it that looks for updates in uh each of its renders and um knows which pieces of the web application are changing and what it can do is say you have uh you know a navigation column something like that we need to uh render some main content on the page but we don't have to render everything the header the footer the navigation all stays the same um enhanced navigation will actually do that server side for us so uh again this is helping with page load times using fewer requests um it's retaining most of the Dom structure uh so this is all about speed and functionality you know getting Blazer faster uh getting the users on our site very quickly U the only caveat here might be if you're using a lot of JavaScript uh type of stuff on your uh application that Blazer is unaware of um you need to disable uh the um enhanced navigation for pages that make use of a lot of JavaScript rendering Technologies and then with uh static server side rendering we can still do forms we don't need web assembly we don't need signal R to do form interactions this is something that we've done on the web uh for quite some time and it works the same way it always has uh so Blazer will help us a little bit with this um we could still use our onsubmit event handlers uh uh anti-forgery protection server side validation all of this still works and uh we still have the same apis to do the functionality that an interactive component would have but since it's being rendered on the server with blazer Blazer is smart enough to know how to render this on the client and just use uh web standard uh form posts to do the work and then we into choosing interactivity and we can choose to have Blazer um handle everything uh we can Mark any page or component as a server or web assembly uh component uh what's nice about laser is no matter how we write our components uh they can run anywhere as you saw with my my application earlier um there was nothing in components that said they were specifically web assembly server or even Blazer hybrid um they were just components and uh with blazer in net 8 uh we write those components the same way now they can be server web assembly or even both because we can automatically change the render mode um on those components and they work with these new forms of server side and static rendering is as well uh the auto render mode I keep saying we can use these things interchangeably or let the server decide uh what this will do is if something is marked automatic it will choose Blazer server for that component um if the web assembly runtime isn't present and then it will load the web assembly runtime in the background so the next time the user visits that page or the application um then it will use web assembly instead uh so this is a nice compromise between running everything on the server where you're paying for that all out of pocket um on your server infrastructure it's probably you know coming out of your Azure bill you can turn on automatic mode um and support the components being run in web assembly so you get that that instant on capability of rendering things on the server um and let the resource load in the background the next time that that user visits your site or changes uh between Pages they will start using web assembly and that will greatly cut down on the amount of infrastructure you need to provide for that application uh for this to work you do have to make sure your component um is in a web assembly project uh so uh for bler to be able to uh do tree shaking and things like that um you need to specify uh a separate web assembly project and any page or component that does get rendered through web assembly needs to be in that specific project so a little bit of a a compiler um thing that we we need to set up for so that's Blazer in8 a lot of new capabilities uh lets us do a whole lot more faster uh the the startup times of these applications are just so much better and uh getting started with all of this is again really easy because we have new uh app templates to help us select these various render modes and uh get started with these different concepts um and these are just the tip of the iceberg there's still more um uh performance improvements along with just rendering faster and Json de serialization through a new jit interpreter a Justus in time interpreter that shipped with Blazer and net8 um and this you know this also complements you know hot reloading um web packaging uh and uh the CSP compliance or um security compliance and then of course teler uh here at progress the teler UI for Blazer was supported on Day Zero of shipping. that means you got 100 plus UI components that are natively written for Blazer uh that are all shipping uh now with net 8 capability uh you can theme them I say infinite themes here we have a bunch of Base themes there's four really solid base themes and then there are different swatches that we provide uh so there's you know dozens of uh themes out of the box but really with theme Builder this is an infinite choice you can go into theme build customize all of our themes uh at a granular level change colors borders all of that stuff um theme Builder a great extension to uh the platform here and you get uh accessibility with our components globalization localization uh we have an excellent uh tool online called the Blazer repple look let which lets you try out Blazer in the browser without installing any IDE or utilities on your machine you just jump on the web open up a browser and you can start hacking away on Blazer samples right there it's at blazer. tell.com so Ed if I can jump in just for a second on on a couple of things you mentioned uh first is folks had questions about accessibility folks had questions about globalization localization this is what we bring to the table these are things that you're going to spend a lot of engineering efforts trying to get it right or you can just you know have it ready out of the box and you know it's December so it's the the time for a lot of like code Advent type you know calendars and and the rapple folks uh you know Ed included there's a whole monthlong series of you know uh very interesting Blazer bits uh showing off all the capabilities and then um Ed we may want to keep like two minutes towards the end for some Q&A and I may want to just you know show a couple more things that were asked okay um so real quick just want to show like we have um our file new project temp plates you showed some of these for uh the visual studio code and uh Maui applications we have these for Blazer as well and we have Blazer server client hybrid the new um Blazer web app that has the automatic um and then here's all those swatches I was talking about that we have and again you can customize those uh with theme Builder as well and uh we can fire up a brand new application really easy use all the new cont Concepts that I talked about and the teller components are all uh part of the project as well give this a quick run Sam um and you know it's the the usual hello world application but this one has those Blazer or the teleri for Blazer uh bits as part of it and before we go I just want to show that um we not only have the fact that there's uh UI components here and this may not run because it's looking for I think it's looking for a Dev tunnel is it still set up for Dev tunnels here you change your settings in the last Pro yeah I need to change that to none so this one wasn't configured for Dev tunnels so it was it was trying to load the dev tunnel but I've got a tell button here I still have the classic um uh HTML rendered table here so let's go real quick Sam and fix that I'm going to jump over to the weather component you'll see in here we're just explicitly writing out like the data to a table here I'm going to copy and paste a short snippet of code in here I'm gonna delete c c Snippets and um I'm gonna put a teller Grid in there and I'm just going to data bind that to forecasts and set autogenerate columns to true and then go ahead and run the app again and we'll have a teler data Grid in there which has a lot more features than rendering that to a table plus you don't want tables H tables are not the best so we could add sorting filtering custom paging templates uh crud operations all of that right to this teler UI for Blazer data grid that I just created with one two three lines of code here and if we wanted to go even further and uh we could scaffold this out so if I go to my client application here and select uh there's a lot of items in here there should be a teler menu in here there it is terer UI for Blazer scaffold new item I could even come in here and scaffold out any of our really rich UI components using scaffolding tools here uh so I could come in create a grid give it a page name uh connect it to a model and a data service um select columns if I'd like uh create crud operations all of that hit finish it's going to scaffold out at view for me and save me a whole lot of typing so we've got a lot of capabilities there um of course Blazer hybrids uh officially supported by Tel UI for Blazer net Aspire is actually something that folks were asking me quite a bit about uh so I'll make it the quickest donet Aspire recap possible here uh first of all you need to be on Visual Studio preview to take a look at net Aspire because it is a preview item it is not uh shipping the um globally available bits yet uh so you want to be in Visual Studio preview and then you need to have the workload installed so on your Visual Studio installer you have to have the net Aspire workload uh I have that so I'm going to pick the do net Aspire uh starter application and we'll go ahead and fire up one of these what net Aspire is um it's a orchestrator pattern that the folks at Microsoft are working on to allow you to build microservices and uh micro front ends um and cloud-based uh infrastructure really easily using uh this orchestrator pattern some Visual Studio Wizards and tooling and uh this is what we've got so far and you will see a lot more options I believe showing up uh beneath this uh whether they change the UI for it or create more checkboxes what have you uh right now we can select whether we want redis caching or not um and whether we want a starter Blazer application or not so I've got all of those items selected so we'll go ahead and add everything here um and you can also select these things through uh some nice um what do you call it a build pattern type of code here as well we can look at that in the app host and this is that orchestrator pattern I was talking about and the items that I selected here you uh you see with referenced caching that's my reddis cache and with reference to API service that is my uh Blazer or sorry my asp.net core um web API service that was added to this um and then there's also a front-end web project as well so you get this Builder pattern I could add um all sorts of microservice infrastructure here and then it's going to build and run the as Spire um application so I'm going to hit run here and it's going to even ask me if I want to start Docker because uh Docker is required for reddis so it's going to go ahead and start up my my Docker instance here and then uh what's really neat about all of this is you get a dashboard that is smart um and uh connected to all of your web services your um your microservices Etc that could come in and say I want to take a look at my front end we'll go ahead and click on that there's my Blazer front end it's connected to my web API backend which is my API service here I could click on that you could see there's my data from my backend and then we've got logging uh container information uh tracing metrics the whole nine yards inside of this nice dashboard uh that is all provided by that host and the host keeps everything interconnected as well you'll see I have all of these endpoints up here uh and they're all named endpoints and one of the really uh cool things about this is uh we saw this earlier in my blazer hybrid demo I'd love to attach a Blazer hybrid uh instance to this as well and see how it runs but you saw me go in and paste this awfully long URL that was running through a Dev tunnel inside of this client base address here notice this one says API service so that that doesn't look like a familiar URL to any of us probably what what this is doing is that orchestrator pattern is subbing in the actual um http address uh in place of that API service for us so that that orchestrator really uh makes things a lot easier uh not only in the host app but in the various um uh microservices that are running in it as well because it it keeps track of these things so we don't have to we just reference it by the name of that um that microservice that we want to attach to so there there's a lot of interesting things happening over in this net expire net Aspire um area so make sure you check it out uh and see what type of components are being added in there um they're going to be coming in the form of nit packages uh I think you'll see them appear in the Wizard uh that I showed you on the main screen and um it's just this plug-and-play infrastructure for microservices that's really cool and built with net okay so this was where we kind of left off this was the the vs code thing um with the new extension so we spun up AET memory project it already has net 8 things wired up and uh in my solution Explorer you can see I'm already bringing in our teric Maui bit so my nougat wasn't you know resolving the source um so with that I can you know go back into zaml we were uh typing in some code Snippets here with the calendar the rate rating and the you know scheduler uh so that's just how easy it is to you know start bringing in things here I'm going to run it uh really quick on my Mac desktop so again these are desktop apps that you're writing for Windows for Mac with all types of you know fancy UI uh so you get the default. everything but you now have some taric UI added to it there's the calendar uh there's the rating UI and there's the scheduler the scheduler took us a long time to do it right uh because it's a very involved very complex uh control uh for all of your desktop needs so that that's all there now Ed kind of uh alluded to this let me show you that running really quickly everything has to be live right otherwise you won't believe that it is true so here is a do Maui app with the Blazer template and I think when Blazer is running on uh you know desktop or mobile some of those you know rendering modes they don't really matter because like everything is on the client already um so what you'll notice here is this is a net Maui app but I'm bringing in TQ for Blazer uh it doesn't care because in the Cs Pro the project type is already SDK style razor and with that like I can bring in Maui program.cs one line of code here to add teric Blazer which is exactly what you'll do for your web apps anyways uh and then index HTML has a couple of you know CSS references uh but of and running we go here is my index. Riser with the Blazer UI component I can go ahead and run this really quick so this is the whole Blazer hybrid story and it is officially supported so for folks who were asking this is all tyeric Blazer UI right this is all meant for web apps but it's working just fine on desktop and mobile and unlike electron we are doing things much more you know lightweight so this is uh absolutely fine uh folks who are asking this has got yes nothing to do with Maui but you know once you start being in the native space you might you know want to utilize some of the Maui bits but if you just have deltic q for Blazer by all means go go for it uh you know render it on mobile and desktop we are going to stand by it with official support what happens is like if I you know shrink this this is a date picker uh you see how this is keyboard and mouse you know Centric but if I you know really shrink this down uh to a mobile form factor so Blazer goes into you know the the hamburger menu now if I do that date the same thing is much more touch friendly so you know we'll try to help you out that's the generic date picker the Blazer date picker with with an Adaptive mode of Auto so it tries to recognize so we'll help you out with some responsiveness but uh what you see here is all of Blazer UI in a mobile or a desktop form factor you can also bring in our angular UI or our react UI and you know light up your notet Maui apps as well so that's kind of coming up next not not net 9 you can still do it right now uh if you know the plumbing but uh it's something Microsoft and us we're going to enable you to do with doet 9 and also uh you know going back to uh some of the Q&A if I can you know start wrapping things up here um there were some comments about you know just how many choices you know we have and and I hear you completely uh if it's getting confusing like which one do I choose for my desktop stack uh you know take a deep breath and try to figure out what do you have investments in if you're running WPF you know win forms or win you are absolutely fine keep running uh you know and having complex desktop apps but if you are starting up something green field New then look at do Mai uh look at Blazer hybrid if you are already doing you know web stuff so a lot of things going on a lot of moving pieces but I think uh modern. net is just enabling us to just to do a lot more code sharing across the across the board um and uh we will keep you know answering some of your questions uh especially if you are asking us on the social media we'll get back to you uh tune in live to coded life that's our twitch Channel where you can see Ed and me and other folks you know coding and and doing other things uh with our UI and just you know randomly playing around with modern tech uh so you know as net evolves I hope you can see that we have a lot of ammunition uh on our hands to go build amazing apps so you know let's go change the world and you know we thank you uh for you know hanging out with us with Ed and me and also our support crew behind the scenes thank you for your time hopefully you see that net8 is here uh with long-term support to enable you uh to do all the amazing things and we are here uh to support your journey trying to make you a little bit more productive with all of our UI all of our Frameworks and tooling and theming and accessibility so that you have a better time so you can go ship your apps faster and you know go enjoy the holidays so I think uh we are already way over time but you know feel free to reach out to uh you know Ed and me after the webinar here uh so we can you know answer any questions that you might have and if you have asked things in the Q&A panel we would love to get back to you but you know a big thank you from Ed and me and from all of us here uh for hanging out with us on this webinar hope you have a wonderful you know holiday season and then we'll come back and bring things up in the next year but hopefully morton. net and teric enables you to do amazing things in the you know year that's coming up yeah with that we're going to you know bid you ad you uh for this year and stay well stay productive we'll see you on the next webinar all right bye thanks everybody take care

Channel: Progress Telerik

Views: 1,926

Keywords: Telerik, dotnet, .net 8, dotnet8, dotnet 8, blazor hybrid, blazor hybrid maui, blazor hybrid vs maui, .net maui, dotnet maui, dotnet maui blazor, dotnet demo, blazor demo, dotnet maui demo, blazor in dotnet 8, asp.net core, asp.net core blazor, dotnet 8 features, blazor streaming rendering, blazor html

Id: 0JWYJQYjHbI

Length: 100min 28sec (6028 seconds)

Published: Fri Dec 15 2023