Blazing into Summer 2.0: What’s New in Blazor in .NET 6?

[Music] [Music] so [Music] [Music] so [Music] there we are folks welcome to the kickoff of blazing into summer i am your host ed charmingo and i've got some wonderful guests coming up all week and i have one uh to just introduce here shortly let's take a quick look at what we're doing this week on code it live before we get started this is the blazing in the summer 2.0 this is the second time we've done it we had this event last year fantastic bunch of guests came on and we had a wonderful week of building apps live on stream so today we're kicking things off with the one and only daniel roth he is principal program manager at microsoft and i will introduce him shortly he's going to talk about all things that are new in blazer in dot-net 6. so the previews are out the bits are hot and he's going to share what he's been working on with his team uh tomorrow on tuesday we have uh signalr real-time apps with bl and blazer translation so we're going to have layla porter you might know her as layla codes it from the layla codes it channel on twitch she's going to join me at 10 o'clock eastern time tomorrow afternoon and it is her birthday so come by and wish her a happy birthday wednesday we have uh the uh developer that created the unit test framework for blazer called b unit he's going to come on he just released the 1.0 release of b unit just a short time ago and he's going to show you the best practices to use when unit testing your blazer applications on thursday we're going to move to a new time slot at 11 o'clock eastern time we have curious drive with us on the show on thursday he has a fantastic collection of blazer courses on youtube that are free and you can check those out and he's going to come on and talk about a demo app that he created for his youtube channel and then finally on thursday afternoon i'm going to jump over to the microsoft channel and do a presentation with cecil phillip on on.net live so make sure you stick around thursday afternoon at 4 40 eastern time for that and then on friday to wrap things up we have the wonderful fierce kittens from twitch and she's going to come on and show us some ux workflows with some drop downs and things like that for her gift bot application that she's been building so we've got folks here that are building all sorts of cool stuff they're going to come on all week long and talk about what they're passionate about with blazer and there's no better way to kick this week off than to bring on uh the program manager in charge of all of this uh daniel roth so let me bring daniel roth on hey how are you doing daniel oh man i'm doing great it's almost the end of the school year summer's almost here at least in the northern hemisphere my kids just got vaccinated so we're almost ready to like get out in the sun and have a lot of fun and uh yeah excited to be here to talk about blazer awesome we are excited to have you here and uh you've got some great stuff for us today and i'm gonna stay here and monitor chat and see what kind of questions people have and um we've we've got brand new preview bits to play with so i'm sure there's some things that you would love to uh to share with us today so i'm going to go ahead and share your screen daniel all right the floor is yours my friend take it away things are going to be smoking hot off the press for this one lots of preview bits lots of new stuff yeah thanks everyone for for being with us today and watching my name's dan daniel roth i'm a program manager on the asp.net team at microsoft it's great to be here with all of you and i'm really excited uh to get to show you what's new in blazer in net six now for those of you who have still haven't heard and you're here learning about blazer for the first time blazer is a web ui framework for building client-side web ui using.net and c-sharp instead of javascript now.net has always had great support for building server rendered web apps but if you wanted to do anything that ran client-side in the browser on the user's device well that meant writing some javascript blazer enables enables you to build full stack web apps with just.net you can use your existing.net skills your tools your code on any part of your web app blazer is open source it's cross-platform and it runs in any modern web browser using only open web standards html css and c sharp blazer is part of the asp.net core uh web web ui framework or web framework your complete modern web framework for net uh the addition of blazer to asp.net core expands the reach of your donet web apps to the client there's no need to rewrite your existing asp.net core apps to use blazer you can add blazer functionality to your existing pages and views without having to change anything now how does this all work well blazer works in one of two different ways the first way we call blazer server in a blazer server app your web ui components run on the server using.net core or net5 and all of the ui interactions and updates are handled using a real-time websocket connection with the browser blazer server apps are fast to start up and simple to implement because all your code stays on the server support for blazer server shipped with dotnet core 3.1 lts and also with dotnet 5 this past november the second way blazer apps work we call blazer webassembly blazer webassembly enables running.net code directly in the browser using a webassembly-based.net runtime that gets deployed with your app when paired with net on the server blazer webassembly enables full stack web development with net blazer webassembly apps are true client-side apps so they can be deployed as simple static sites and they can even run fully offline like in a progressive web app blazer webassembly is available with dot net 5 as well now regardless of which way you choose to host your blazer components the way you write your blazer components is exactly the same the same blazer components can be used with either hosting model unchanged and this means you can take advantage of a really rich ecosystem of open source blazer component libraries in your blazer apps regardless of how they're being hosted you can find many blazer open source projects from the awesome blazer repo at aka.ms awesomeblazer there are also many great commercial blazer component offerings available from telerik and many others that include everything you need to build apps fast and have them look stunning now dot net 5 shipped last november and dot net 5 added a whole bunch of new functionality for asp.net core and blazer developers and it of course included support for both blazer server and blazer web assembly we did a lot of work to improve blazer web assembly performance on.net 5 component rendering and json serialization i think was like two to three times faster than previous releases we have built-in support now for component virtualization so you can render those giant grids and big lists of data really really fast and efficiently we added support for lazy loading so you can chunk up your blazer webassembly app and load it in in pieces instead of one big chunk we added support for css isolation so you can have component specific styles we added support for javascript isolation and object references so that if you want to reuse existing javascript code you can do so really really easily we also did a bunch of work so you can write more c-sharp and have to rely on javascript interop a lot less for common scenarios like for example setting the the ui focus now dotted adoption continues to accelerate and f5 is actually the fastest adopted version of net ever while dot net core 3.1 kind of set the record the previous record with 3 million downloads in the first six months dot net 5 smashed that record with over 3.6 million downloads in the same initial time period who's using blazer today i'll highlight a few customers one example is the postage they offer services for end of life planning the postage helps you arrange your important documents and accounts so that they can be managed by your loved ones by your survivors by using blazer for their web app and xamarin for their mobile app the postage was able to have their very small and agile engineering team work across the stack saving significant cost ge aviation is an industry leader in airline systems their flight pulse app puts sensor data and analytics into the hands of thousands of pilots to help them improve safety and efficiency the back end configuration of what data the pilots actually see that's all done using blazer we also use blazer internally at microsoft microsoft endpoint manager is a product for managing devices in enterprises they built their community hub feature using blazer the community hub allows it admins to share scripts and reports and other management objects with each other it's hosted on azure and then embedded in their existing wpf client using an embedded browser control and lastly dynamics 365 is another example dynamics 365's connected store offering is a new offering to help optimize in-store optimizations with real-time observational data the in-store setup and configuration for dynamics connected store is all done using a blazer web app as well so if you haven't used blazer before getting started is really easy you just want to go to blazer.net and download the latest.net sdk you can then develop your first blazer app on your preferred platform using visual studio visual studio for mac or visual studio code now the next wave of dot of improvements to net and blazer uh is coming in.net six later this year uh the work plan for net six is broken down into various themes that are published publicly on the themesof.net website which of course is a blazer site the main themes for net 6 include making it easier for new developers to get started with net expanding support for building cross-platform native uh client apps ensuring that.net has everything you need to run natively in the cloud ensuring that enterprises rely relying on long-term support or lts releases have a smooth upgrade path strengthening the net ecosystem making development with net faster and more productive and lastly making sure that we continue to deliver on the promises of the.net platform that's sort of our catch-all for you know finishing stuff that we've we've already uh started so if you want to explore these themes well let me see if i think i've got this yeah the themes of.net sites right here so just go to themesof.net you can see all the themes and you can drill down into all the epics and user stories and check out progress see what's already shipped in the latest preview releases for convenience we've actually consolidated all of the asp.net core and blazer related items in this acemic core roadmap for net six issue so go and check out that yeah hopefully it's the most transparent planning for a.net release that that we've ever done i just shared that link for you in chat there uh daniel perfect great yeah definitely go check that out it's all on github so you can follow the the pr's and the design notes as they as they come live now there's a lot of new stuff coming uh to blazer in dot net six uh honestly way more than we have time to to go over even today but to give you a taste of what's coming um we're going to look at six great new blazer features we're going to look at dot net hot reload we're going to look at state persistence during pre-rendering error boundaries web assembly ahead of time or aot uh compilation uh smaller download size and blazer hybrid apps hopefully we'll have time at some future points talk about all the other great stuff but you can keep up with our release announcements to learn about all the other great features coming to blazer now the easiest way to show these features is to just jump to the code so let's go ahead and do that demo time all right so let's check out these features we're going to start out with dot net hot reload donate hot reload is the ability to very quickly make code updates to your running app during development without having to restart the app all right so very fast iterative development and this is not specific actually to blazer dotted hot reload is a feature coming to olive.net 6 for all the different app models asp.net core mvc razer pages mobile and desktop development and of course blazer as well now to dot net hot reloading in action uh we're going to do some work on this uh simple picture editing application called picture fixer um i've left myself a little to do here in the code to actually start listing a list of pictures that we can then uh edit using the application all right now this is a blazer webassembly app uh and for this demo i've already actually started the app uh with dot net hot reload enabled i did that actually from the command line so i've got this you know command prompt in the background where i run.netwatch.net watch has uh is enabled with hot reload but everything that i'm going to do here in vs will soon be fully integrated into visual studio as well uh in an upcoming visual studio release an upcoming visual studio update okay so to do this let's go find the code for our little to do and let's just you know let's just change it something else like hi there everyone and i'm going to hit save and then almost immediately it updates in the app it's so fast like let me let me do it again um dotnet hot reload and blazer rocks okay and then i'm gonna put my mouse over the save button watch this three two one save and like basically as soon as you click the button like the the app has been updated uh it's great so dotnet hot reload what it's doing is it's calculating what's changed in the dot net il and then pushing that into the running applications like patching the running app so it's very fast to do also it preserves the app state the app doesn't restart so any state that you have like a complicated form or a deep nested tree view it's preserved so you can continue to iterate and make progress on that part of the app that you're already working on all right now this app is fetching a list of image data from the server that's this http request down here at the bottom and then saving it in this images variable and i want to print a list of all those uh those images so let's do a little for each loop right here and let's make that nicely what i hope is a quick question for you dan um the hot reload what scenario does does that work under right now and then um what is the plan for release is it like all like server webassembly etc what do we have now what's coming up oh yeah like look so so it works with um blazer server blazer web assembly mvc uh razer pages all those things are available today you can just use dotnet watch to try that out and like i said in the future you'll be able to do that with vs there is some really initial support i believe for maui and for desktop scenarios um it's still a bit of work in progress but uh the best place to get the full update on all the current workloads is there's a really nice blog post on the dot net blog let me see if i can find that really quick so dev blogs and we don't want the internet blog we want the net one let me pop this out so everyone can see so i'm just gonna go into devblogmsmicrosoft.com.net this is the.net blog and then somewhere down here if i just search for a hot reload they talk so often things go down the list pretty quick so this blog post introducing donate hot reload experience for editing code at runtime dimitri walks through all the latest updates for donut hot reload so that's where i would go go and check out right there thanks for all the work and share that with chat perfect all right all the workloads we'll have done at how reload by the time we're done with the.net 6 release in november okay so we want to loop over our images so i'm adding this for each loop and then i have a little image list item component that i'm going to use to render each image and that's this component right here and right now it's just rendering a div so so pretty simple and again i'm going to save hop reload that into the app and boom we've got our list of at least the image names uh so far so let's start uh messing with the markup of our image list item component let's add uh some styling and add a class uh let's see what we want to do here we want to do a background let's give us a white background save it almost immediately updates uh let's add some margin save let's add some padding these are all uh tailwind css styles by the way you don't have to use tailwind you can use bootstrap you can use whatever css you'd like um the dev that wrote this app just happened to like tailwind so that's what we're using i'll add some padding uh what are we gonna do let's add some drop shadow so those things pop a little bit and let that a little bit more so it's a little bit bigger and as you can see you get this like iterative dev workflow you just make changes you see the updates in the ui almost immediately so it works great for markup i don't want to bore you like writing a whole bunch of markup uh live so i'm gonna copy and snip it with the completed markup that i want right there and again i'm just gonna save to hot reload that whole thing into the app and now we've got some you know beautiful little list items here showing the image showing the text and then how long ago they've been updated so hot reload for blazer component markup working great but it's not just about markup we can also dotnet hot reload code changes like just c-sharp code you may have noticed that this new markup is using this humanize last modified method c sharp method to figure out what string to render at the bottom of each of these list items let me expand that code here's the the c sharp code for determining that string and we can just mess with this let's change this from updated to last change this is the c-sharp string we'll save that and immediately just update well maybe we want this to be edited yeah looks great so we can do c sharp code too uh and we can also do a css we can do css hot reload um let's go mess around with like the the theme for this app uh where is that that'll be in the main layout yeah here's a our component specific style for the uh the layout for this application we've got this theme color variable set up it's got the sort of green theme right now let's change that maybe to something more red we save and the css changes also get pushed into the running app without having to to restart so that's net hot reload you can do markup c-sharp css dotnethopreloading.net 6 makes developing asp.net core and blazer apps really any type of.net app way faster and much more productive than ever before and these css variables you're using here are just native css features which is something that i actually love about blazers that you could just use any html or css standard tech and it works that's right open web standards all the way down there's nothing proprietary here i'm actually going to switch this back to green because i like the green better there we go okay all right so that's hot reload uh next let's take a look at error boundaries in blazers the new support for error boundaries so air boundaries are components that can capture unhandled exceptions from the component tree and allow us to react to them this is really nice because this really cleans up how you do error handling in blazer on blazer today it can get a little messy sometimes with all the try catches and trying to consolidate how those exceptions get get handled error boundaries make that really simple and clean all right now to join onto arrow boundaries sorry to interrupt you there daniel yeah we had a question about hot reload that um i think is pretty important here somebody's asking if new files are added to the project or a project reference how is that handled yeah so in some cases um like as much as possible we will fall we will use a hot reload to update the code into the app i can't remember what the current state of adding new files is i think new files was still considered a root at it last i checked that may have changed um because the the set of things that we support with hot reload is expanding in dot net six um if you're familiar with um edit and continue support in visual studio that's gives you at least an initial understanding of the types of c sharp edits that are supported with dotted hot reload at least initially but we're actively working on expanding that that set if there's a change that gets made that can't be updated at runtime into the running application there's a bunch of events that get fired to the to runtime the runtime lets you lets the system know the tooling no and then we fall back uh to just restarting the application like we always have if you want in visual studio will actually give you that option say like hey you've made a change to this app that can't be hot reloaded uh do you want me to restart the app for you in order to in order to have that change applied and you can decide oh do i want to do that now or do i want to hold off for it for a little bit so for project references i'm guessing that and and new files i'm guessing both of those right now are considered rude edits that that means that they're not supported for hot reload just yet um but you go check me on that like give it a try and see what happens but if you're using.net watch by default dotnet watch will fall back to just restarting the app if you make a root edit so that you can stay in that iterative dev flow all right so hopefully that answers that question all right let's look at uh error boundary so moving on and i'll have time at the end also if i if i miss your questions um we'll we'll do a sort of a open q a at the end you can save it for then too um okay so i'm going to introduce a deliberate bug into my humanized last modified method here i'm going to paste in little code so this is saying that if the image id happens to be one then uh oh invalid operation exception okay and the image that's id one i think is this last one you can see it the url at the bottom uh localhost edit slash one so that happy kitten is that the pro gonna be the problematic kitten going forward so i'm gonna go ahead and click save uh to make that change into the app and yeah you can see already at the bottom ah let me do that again so we can get here ah there we go and we got our dreaded you know yellow bar of death that says that there's been an unhandled exception that happened in blazer and if we go into the dev tools we should be able to to see that exception let me pin this to the bottom so it's a little easier to see in the console we flow the exception so at least during development so you can see what happened so we had our unhandled exception how can we do a better job of handling this exception well we can do that using the new error boundary component so the error boundary will set up some unhandled exception handling for us in the component tree and for this app i'm going to put it initially in the main layout so in the main layout this is where we're rendering the body of each of the pages in this sort of layout structure and i'm just going to wrap this body in the new air boundary component so what would that component do well if everything's going smoothly no exceptions then the component the air boundary component will render its child content which would be the body um if there's an unhandled exception that happens then instead of rendering the body the air boundary component will render some error ui but here it will use some some sort of default ui so i'm going to go ahead and save this i believe this is a case where this is actually considered a root edit so we'll see like the the app this takes a little bit longer to pick up there's the little dot watch as it restarts the app so weren't able to hot reload that one but we're trying to expand the setup.net hot reload scenarios and yeah now so now we don't get uh any page content because there was an unhandled exception by our component down the component tree and instead we're getting this little default ui now what is that default ui let's go back into uh the dev tools and we'll select that element and you can see it's just a div by default it's a class a div with class the blazer error boundary zoom in a little bit so you can see that okay so just an empty div well then where's all this you know fancy colors and icon coming from well that's just some styling that we're doing in the app css file we include this in the default blazer template if you want to use it uh down here at the bottom we're setting you know a background image and an icon and even adding the text the text is not even included by default so that's where that's all coming from it's in the app that's uh styling that that particular div but you can completely customize what ui the error boundary shows in the event of an error let me show you how to do that so i'm going to change this air boundary and swap it out for a different one so this error boundary is explicitly setting the child content to be the body but then it's specifying the error content and we get a context variable which has the um that's the current exception that was that was thrown and then i can put whatever you know razor markup in here i want here i'm using this error details component which i've defined in my app and that's this guy and it's just doing a div with some details and printing out some of the exception details okay so if we save that and just give the app a second to restart and apply that change yeah okay so this is my custom ui now so we've set up an error boundary and then we have custom ui and we can actually see all the details of the exception now putting a general aero boundary like this in you know in the layout and also printing out exception details to users that's probably something not something you should do this is probably a little bit too broad for an uh you know a valuable error boundary so instead we can actually scope this error boundary to you know where this type of exception happens so let me let me undo this go back to what we have before uh and instead of putting an error boundary here i'm going to put it in our index component around the image list item let's see what that does so let me grab a little snippet and we'll put air boundary right here format that okay so now we've got an error boundary just around the image list item so if everything's good we should see the image list item if not we should see our default error boundary ui so let's save that let that apply cool and now if we scroll down at the bottom you can see all the other image list items render just fine but the one that's problematic that's the one that's getting our error boundary ui and of course we can customize this again to make it look nice and be specific to this particular error case so we're not just like you know dealing with random errors and you know leaving our app in a potentially broken state this is a known case so now we're gonna print a div with a nice little message and let that reboot and yeah okay sorry i couldn't load this particular image sad kitty all right so that's that's error boundaries as you can see air boundaries they give you a really convenient way uh to manage unhandled exceptions in your blazer apps any questions about that ed um i've tried to use one in within a component do these need to be at the parent level or can you put them in individual components and then if it is an error that happens in the uninitialized async the problem i had is uh that error happened before the air boundary picked it up so i ended up throwing the yellow bar instead yeah so you should be able to use an air boundary wherever shouldn't have to need to be a root component or any particular type component like in this case i use it in a layout component and i use it in a page component but you should be able to use it further down the hierarchy you may not have seen the ui if the css styles maybe weren't picking up correctly but they should like i think i think the css styles are fairly it's just pivoting off the class right uh like this is the one we get but yeah it's just the air boundary uh the laser air boundary uh class so that should pick up so it should work regardless of where you do it inside the component hierarchy um as for all the cases that the air boundary catches i have to go check the docks uninitialized may be one of those cases where um it's an unhandled exception that can't actually be handled using this this model but most cases should be handleable i don't remember if we already have the all those cases docked i'll have to go look let me let me go check on that and uh we can we can post a link maybe later to the air hendrick uh interesting question um are there any considerations for catching specific exceptions uh no i don't think the air boundary like um has an exception type on at least not that i'm aware of let me i think it's just general let's see that i'm aware of i think it'll just do any unhandled exception and then you have to pivot off of the exception type like you get you get the exception here in the content and um you can do something i think there is a way to continue but uh with the it's not like um uh try catch with a particular type so it's a little different than that um it's not that i'm aware of uh with uh with me tinkering around too i believe i saw an api in there so you can provide like a retry button yeah you can retry the logic that it it failed on and it will you can basically reset the error boundary so that it's once once an air boundary gets into a like it's handled an exception state it'll always render the error content the reset logic is basically a way of telling the error boundary you know go back things are fine now let the the the good content render again very nice all right let's move on so next i want to look at state uh state persistence specifically during pre-rendering now to do this i'm actually going to get rid of my little error that i introduced previously at save make sure we're still all good all right so for state persistence during uh pre-rendering do i refresh this yeah okay so um pretty much all the markup in this application is being produced client-side and we can see that if we look at its source let me do a control u and this is the the actual source that got downloaded for this app and you can see it looks pretty spartan like there's not much that's being generated from the server instead all of the ui markup is actually being generated by blazer in the browser like client side now often we want to actually render the initial markup for the app from the server and that's better for a variety of things like search engine optimization so that the the content of the site can be statically statically analyzed and it makes the perceived load time of the app feel much faster you basically get pixels on the screen right away while blazers being downloaded in the background and and set up for interactivity now blazer supports uh server side for rendering is one of the nice things about having.net on both sides of the wire and we can enable it in our server project by simply changing the render mode in our host page excuse me so let's go into our server project and let's find our host page so underscore host.cs html so this is a razor page uh this is being this is code that's actually gonna run runs on the server to generate the initial html for for the app uh just like in an mvc app or a razer pages app here we have the component tag helper that's being used to put a marker for where do we want our blazer content to live inside of this page and so we're pointing to the root component for our blazer app and then currently the render mode is set to default which is a webassembly but we can change that to say we would like this to be webassembly pre-rendered okay and so that's going to now tell this page to first run our components server-side so that we can generate some initial html and then in the background the components and the runtime will get downloaded client-side so that it can be set up for interactivity okay so i think that's all we need to do yeah so now we should be able to uh let's let's to see this in action let's uh refresh the app i think and make sure this is working all right and if we look at the source nope i need to actually restart hold on let me get this up get that change applied all right now really helpful stuff for seo because yeah so just those two screens you just showed the empty one is generally what the search engine sees and with pre-rendering on this is what the search engine sees so you'll see all the initial markups we get all initial markup in the application so that's nice let me put this back to the [Music] side windows didn't put that exactly where i wanted it okay great so now we have all the initial markups so the initial page loads should be quick um unfortunately there is still a problem you may have seen this if you tried to use pre-rendering let me just highlight the problem let me put this in a new tab and let's watch what happens as the app loads so initially we see the content for the app and then it disappears and we see the loading spinner while the client is fetching the image data from the server and then we see the content again now we're kind of exaggerating that in this app because we've got this little two second delay in uninitialized in the index component but still this problem would happen even if we remove that delay it would be like a flash you'd see the content and it disappears and then we see the content again well that's annoying uh why is that well what happened what's happening here is after the initial page loads with all the html that got downloaded from the server blazer starts up on the client it has to fetch the image data again from the server and that's because nothing transfers the image data to the client from the server we're only getting that pre-rendered html the component then renders the loading spinner while it's fetching the image data on the client which removes all of the pre-rendered html so basically we're rendering this and that's stomping over all of our nice pre-rendered content so that is that is pretty annoying problem uh but fortunately there's now an easy way to fix this in dot net six so in dotnet six what we can do is we can persist data from the server that was used during pre-rendering so that it can be reused on the client and the way we do that is using a new service called the component application state so let me go ahead and add that to my index page all right so component application states the new service i'm also going to implement idisposable i'll show you why in just a second now if we go down to our uninitialized async method for this component right now all it's doing is uh that http request to get the image data from the server but we're going to change that to persist the image data using the new service so let me do this all right what does our new logic do uninitialize async will now hook this event on persisting on the component app state service and wire up an event handler um the component app state service will then let this component know hey now is the time to persist your data we're in the middle of pre-rendering go ahead and persist your data and in our persist image data handler we're using the component appstate to persist the image data and then returning then back in on initialized async we check to see if the image data has already been persisted if it's something that we can just reuse if it can't then we go ahead and fetch it from the server uh if it's already there then we just use it because uh we don't need to fetch it twice okay and then lastly we implement um idisposable so that we remove our event handler so we're not accidentally accidentally linking uh leaking event handlers now you may wonder like well where does the data actually get persisted well that happens on the page like it gets persisted into the page you may have seen in our host page below the component tag helper we have this other tag helper now uh persist component state and that's where how you can say where on the page would you like any component state to be persistent okay so let's go ahead and save all that get that running and let that reload okay so now if we do that same test again i'm gonna grab the url and go to a new tab and let's go ahead and load this page loaded no loading spinner so that looks good let's make sure that we have all of our pre-rendered content we still do and then now down here at the bottom you can see there's this blazer component state comment with a blob of data with all the whatever state we asked uh to be persisted into the page that can now be reused on the client and the page it loads fast we can hit we can't refresh all we want and it looks great all right so i've got a question for you dan um how would you compare this to view state in an asp application i knew that question was going to come up everyone all the web forms developers are shouting that's view state that's music um i mean it has some some similarities to view state i mean the differences here is that you know you're really controlling exactly what you want to persist into the page like we're not um as a framework uh defining a bunch of ui state for you and persisting it in into the view this is state that's just being defined by your app that your components need in order to reinitialize themselves so it's a much more fine fine-grained lower level concept than view state in web forms i know like with web forms if you were a little naive you could end up with view state was that was huge and not even know what was going on with this model it's very explicit you you persist what you want if you don't want it there then then don't don't persist it only persist exactly the data you need to initialize your components and uh in in this scenario too it's only on the initial page load from the server it's not like early web forms days where it's passing this back and forth consistently on every request yeah yeah if we were to like navigate away from this page and then go back um you would actually see the the loading spinner but by navigate i mean like within the blazer app you're navigating come back you would see the loading spinner at that point because it has to go refresh the image data from the server instead of potentially using stale data so yeah it is just about that initial pre-rendered page state good point and then somebody asked in chat here elliott brandt asked oops it's moving the chat while i'm trying to click and highlight uh if somebody navigates away before it finishes loading what happens uh if it navigates away before it finishes loading um like the background like the i assume they mean like the runtime itself so um you do need the runtime for full interactivity so if you're talking about like you know in-app client-side uh navigations which are normally handled by the blazer webassembly runtime that interactivity isn't actually there yet until the the run time comes down so there's a little there's a little delay between when you get the pre-rendered content and when interactivity actually is available it's very short but it's basically dependent on how long the download takes uh into your application once the runtime is there though if you try to navigate then everything just just functions as as normally all right yeah so that's uh persisting uh pre-rendered contents a cool feature let's try that one.net six it's a great improvement over uh what we have the dot net five by the way that's a that's an amazing feature to have because you had that double hit and there's many a blog posts on ways to work around that in dot net five but now we have something out of the box it's fantastic built-in okay next i want to show one of the features i'm really excited about which is blazer webassembly ahead of time compilation all right now to do this i'm actually going to shut down the app running in.net watch i'm going to get it running in is express just so that i have it running on a different port there we go okay so now this is this app is a picture editing application right and so we can click on one of these images and do some basic editing on these on these images um you can actually like remove parts of the the image for example if we wanted to make this tennis player's life a little bit more interesting we could just remove the ball so let's just select the ball and poof it's gone so this is doing some very basic uh image processing it's got a little pattern match algorithm that's implemented all in c sharp uh here's the actual code for it this is derived from an open source implementation from from this person right here so thank you uh for your contribution to net open source uh yeah and so we can uh try and remove some more stuff from our image like let's say we want to remove this url up here we can try and if you could only do this with my student loan debt that's right yeah i did you know decent job it's not perfect but uh okay job let's try to do something bigger let's try and remove this whole logo right here so i'm gonna very carefully my wrist is like straining to get this and there all right so we can remove that whole logo going going gone yeah okay cool i mean it's not like i said it's not a perfect algorithm but it did it um a little sad though is that uh you know it took a little while it wasn't particularly fast uh why is that well that's because blazer web assembly by default runs on a dot-net aisle interpreter there's no jet in blazer web assembly so it's not something that the webassembly spec allows for um so that runtime is is perfectly fine for most ui scenarios but it's not particularly great for like cpu intensive tasks like image editing like like this but to speed it up we can try out the new support for blazer webassembly ahead of time compilation or aot compilation in dot net 6. webassembly ahead of time compilation will take our.net code and pre-compile it to webassembly so that it runs much faster okay now to try out the new support for webassembly aot you need to first install an optional dotnet sdk workload and you do this from an elevated command prompt okay so what you do you know go ahead and get cmd or your terminal of choice and you want to run as admin and once you've got that up it's a little bigger this is the command you run.net workload install microsoft net sdk blazer web assembly aot this is in the the blog and then the docs i don't need to remember this um but uh i've already run this on my machine and that will pull down the tool chain that's needed for webassembly ahead of time compilation all right once you've got that you go into your blazer oh my that's a preview version of es let me uh let me close this solution see if i can get uh oh looks like vs's okay yeah let's reopen the solution so we can get this running again there there will be bugs when you're using preview bits i'm sharing the previews uh post blog post in the chat for folks as well if they want to go look the latest release and see um the things that you're talking about here today daniel all right what is going on why can't i open the project so i want to see the project file let me try closing this all the way down and open this again sorry folks blame javascript i i don't know yeah well you know we're we're using a preview version of vs with preview builds of the the.net sdk so sometimes things get a little a little cranky let's try this one more time all right we're running fine get this side by side and okay great all right so then once you've installed the dotnet sdk optional workload you also want to run aot compilation true and add this property to your cs file okay so when you've done that you now have aot enabled for this project um cool where was i okay now a couple of notes when you actually go to try this um the first thing is that running webassembly aot compilation takes a little while like it's it's not a slow it's not a fast step um running aot on this app actually took me about 10 minutes um so we currently only perform aot compilation on publish we treat it as like a publish optimization step speeding up aot compilation is something that we're looking at and working on also when you do aot compilation it will make the runtime execution faster but it will also increase the download size of the app a bit an aot version of a blazer webassembly app is generally about twice as big i know some people have had thought that aot would actually make things smaller but it doesn't actually make things smaller the net il representation of code is actually very compact when we turn that into native code it's like running engine or crash gen or ready to run the the native representation actually tends to get a little bit bigger um so this is really a trade-off between some down load time performance for your app and runtime performance and whether that makes sense for uh will depend on your particular applications scenario for many apps you don't need aot and the io interpreter is just fine if you're doing some cpu intensive stuff aot all the way okay now i have an aot version of this app already so let's go ahead and run that i'm just gonna cd into the directory i did a release publish and it was nutsnet6 and then publish folder and see we can see this being useful for us at uh telerik baby to do some of our document processing with uh aot compiled uh uh version of that tool quite possibly very very processor intensive to do in web assembly all right i'm gonna get the sir the the published version of our picture fixture app running i'm gonna bring that up uh in the browser okay we got the same application let's go back to our tennis player let's make sure things are still working after some unhandled exceptions okay yeah that's working great all right let's do the logo again this big logo there we go oh yeah so 0.3 seconds i think before what was it like uh oh this is the let's get it can we do the cat hold on hold on let's make sure we this is the non-aot version i think this like usually takes like six to eight seconds yeah six seconds so like 20 times faster or so to run it with aot so much faster runtime performance and yeah we can now we can now do all sorts of fun image editing like this uh this great kitten i don't know this face some people say this cat is cute but i think this face just creeps me out like i feel like it's staring into my soul so why don't we just fix that and just erase that right there and perfect much better you can hear all the cat lovers in the audience just groaning in pain perfect pun intended right no no cats were actually hurt in the the in this demo but uh blazer web assembly ahead of time compilation it makes your apps run much faster for cpu intensive tasks although it does increase the download size now um we've got some questions here and i think it might actually be pretty easy to answer so eagle and elliot were asking about other versions of blazer other runtimes is this going to be handy for things like blazer server and maui but correct me if i'm wrong daniel those don't use webassembly those use the standard.net runtime so you don't need aot that's right yeah blazer server apps all your net code is running on the server so you're on full.net five you've got a jet based runtime so it's you know converting il code to native code on the fly for you at runtime very fast you know arguably the the fastest way you can run code almost the fastest way you can run code on the planet so it doesn't get any faster on the server you don't use aot there at all um i mean there are potential scenarios for using the aot pattern with server apps in the future like maybe you want to create a single you know heavily linked binary for your server code that you're going to deploy into a docker image those things are things we're also looking at but that's not web assembly ahead of time compilation that would be like you know native aot on the server uh in when we go look at uh blazer in hybrid applications like in maui again you're not using webassembly there you're running on normal either dot net five dot at 6 run time or maybe the the mono run time if you're running on a mobile device your net code is running directly on the device it's not running in the browser on web assembly so webassembly aot isn't needed excellent and then mr magoo asked these way early on and we we held him for the aot segment here um he wanted to know does aot how does that affect lazy loading uh does it change yeah with the lace loading dlls and i would assume maybe how to how are those assemblies lazy loaded once they're aot compiled yeah that's a that's a great question so um with lazy loading what we're doing is we're basically like delay loading.net assemblies and giving you an opportunity to load them in in the app whenever you want like whatever is appropriate usually it's done based off of the route like if you browse to a particular page okay now please load this assembly because i only need this dependency here when you do webassembly aot you're basically taking all your.net il code and turning it into a single webassembly bundle so you do lose that ability to like slice and dice a piece of that app off now you may ask well well can i you know slice the webassembly bundle into different pieces and um dynamically load the webassembly bundles um that is something that we're looking at but there are limitations right now with uh dynamic loading of webassembly bundles like there are size limitations on them um they have to be actually pretty pretty small so it's not something you can really do today uh yeah so you do lose out on lazy loading if you move to the full aot model there's another another trade-off that you make and those are shipping as wasm files they're not they're no longer dlls all right you you get all of the aot code in a single wasm bundle it's actually all get linked in together with dotnet.wasm so you'll notice your.wasm file gets a little bigger oops apparently got some things that are still still running um you when you look at the download trace for an aot app it's kind of interesting because in addition to that netwasm bundle you still will see dlls being downloaded with your app and we often get questions about that like why why am i still seeing dlls if i've aot the app and the reason is that there are scenarios where uh aot.net code um can't handle specific dot nets and uh runtime features like if you need to do code gen or if you're like you know having use of reflection in those cases we actually still fall back to the il interpreter so that your app still functions as normally and for those scenarios we actually need the the uh the metadata from the dotnet assemblies to make them work so you still get the.net dlls as well so don't be surprised if you see that there may be some additional trimming that we can do on those dlls to make them as small as we can that's all part of a broad effort that we have in dot net six to actually decrease download size all up for blazer web assembly apps and we've actually made some really good good progress there which was what i was going to show next do you want to see a really small minimum blazer well small it's kind of relative here but at least much smaller minecraft come up for a second i thought you were going to tell us you built minecraft in places unfortunately no this is this is a very minimalistic uh blazer application it's got the counter so we can click a button and it's you know it's doing some basic ui rendering i actually deployed this blazer web assembly app with the help of a friend um as an azure static web app which is a really kind of cool service i'd like to make this bigger for deploying static like jam stack style applications or blazer webassembly apps with like a serverless backend so that's how this app is deployed but this app we linked down as much as we could and made it as small as we possibly could so we moved removed bootstrap we removed you know any unnecessary components and let's see how big this one is so a default blazer webassembly app with dotnet 5 like if you just do final project and published it it weighs in at about you know 2.2 megabytes i think is the the size if i clear the site data for this app and judging by the url your friend was anthony chu it was yeah who has an excellent blog and uh if you find him on twitter make sure you follow him for some really good blog posts on on azure stuff anthony does some some really great stuff and thank you anthony for your help here but this app is 1.1 megabytes transferred um so yeah about this is about a i mean it's half the size of a default blazer webassembly app and dotnet f5 and it's about 35 smaller than the equivalent app like if i built literally this app in dot net 5 this app is about 35 percent smaller so we are doing work uh to shrink the size of blazer webassembly apps we do have some good size reduction gains in in.net 6. howard how did we do this we did this a couple different ways one is better.net il linking the dotted io linker is much smarter in dot net six about going through your your dlls and trimming out any unused code uh through static analysis uh we also can are using the same tool chain that we use for aot comp compilation to do um runtime re-linking so the donnet wasn't bundle is normally a you know just a static bundle that comes down with your app you can't really change its size but with the new tool chain we can actually look at which runtime features your app needs and link out runtime features that you may not be using for example this app is set up to use in variant mode for globalization which means the tool chain can go into the wasm bundle and remove all the stuff related to globalization that this app is not using uh so that's a big size win as well as just better data sharding of the globalization data like don it has all these features so that you get really great uh localization and globalization we're getting much more efficient with how we surface those features in blazer webassembly so much smaller apps in in dot net six that's something you can also look forward to so even though with your aot it gets bigger the thing that you're starting from is going to be smaller cool very nice all right i've noticed this may be a little bit anecdotal but i've noticed too that your your custom application code really doesn't make that file size increase a whole lot there there's a lot in that dot-net framework but as you're writing you know a couple pages and components and views and things that that size doesn't just like drastically go up it means very yeah this is this is the actual app assembly it's like the most of the app is you know core framework libraries on the runtime when you start writing your code most of the time the code you write is tiny like.net il is actually a very compact format so you can write a lot of code and not have a significant impact on the app you can run into trouble if you start pulling in like really large dependencies like if you go grab some like you know megabyte dll that has a ton of stuff in it and and link and reference that from your blazer webassembly app that will that will increase your app size pretty quick so be be intelligent about what dependencies you you pull into a blazer webassembly app remember it's going to be have to be downloaded and loaded in the browser a question i get a lot daniel is like how does how does the size compare to something like angular or react and and my answer is usually well you start off a little bit larger but it's not this linear progression into a large you know file size where the the other side of the coin with angular and react is you might start a little bit smaller but those are pretty linear the more code you write that size kind of gets pretty big pretty fast so the end game is generally about the same but you know over the course of the size of your app you know you might see some variants in those two things that's right yeah and i mean to be fair blazer webassembly's goal is not is not to be the smallest um i mean we do have an inherent overhead of having to bring a runtime with the application but our goal is to make sure that that size is not an issue like it should be good enough for pretty much any application that you want to write all right so that is the web set of demos i wanted to show so everything we've seen so far is improvements to using blazer to write web applications now if so hopefully you've seen that if you're building a web app we've pretty much we've got you covered we've got lots of great stuff for building server rendered and client-side rendered web applications with dot net 6 and ace net core and blazer but what if building a web app is insufficient for your scenario what if you need more than what the web platform offers you and you require full like unfiltered access to the client device's native capabilities you know in short what if you need an actual native app well net has many great options for building native client apps arguably we have too many options but we have a bunch of ways to do it if you're building if you're a web developer and you want to build a native app one really compelling option is to build a hybrid app now what is a hybrid app well hybrid apps are native apps that leverage web technologies for their functionality for example a hybrid app might use an embedded web view control to render web ui inside of a native app this means you can write your app ui using existing web technologies like html and css while also leveraging native device capabilities examples of hybrid app frameworks include electron which is what was used to build visual studio code and microsoft teams also another framework is cordova which is used by many mobile uh mobile applications so for web developers building a hybrid app can have a lot of benefits you can reuse your existing web development skills your existing code even your entire web app to build a native application you get full access to the native device capabilities including using native ui elements together with your web ui elements now not every app needs to be a hybrid app but for many scenarios the hybrid app model can give you a really significant app development cost savings so you can build hybrid apps on desktop and mobile apps with dot net and blazer uh blazer hybrid apps combine all the benefits of the web on native apps and the dot net platform in a blazer hybrid app like we were talking a little bit before your blazer components run natively on the device they don't run in the browser and web assembly is not involved at all your components run locally and they render in an uh to an embedded web view control using a local interop channel this means your laser components run very performantly and they have full access to the native capabilities of the device through the net platform through normal.net apis you can use your.net web skills and build native apps with web ui that can then be shared with your web apps you get code sharing there as well now work is already in progress in.net six on the much anticipated.net multi-platform app ui or don at maui dot at maui is the future of cross-platform ui for net with.net maui you can build a single app that runs on mobile and desktop android ios windows and mac it's the evolution of xamarin forms but with an improved architecture and development experience dot net 6 also includes support for building cross-platform hybrid apps with dot net maui and blazer dot net maui includes a blazer web view control that you can use to host blazer components in your.net maui apps uh since every dotnet maui blazer app is a.net maui app they can run anywhere.net maui does although for dotnet six our primary focus is on hybrid desktop scenarios all right so i'm going to show you now what it looks like to build a dotnet maui blazer app all right so let's go back that's super exciting for me i think this is really cool technology can close the browser and let's create a new project here now i got maui set up on my machine to install uh to set up maui you need the.net 6 previews you need to install the the maui optional.net sdk workload and there's really there's a tool called naui check that you can just run that will put everything on your machine that you need to run maui so go go check out the maui docs to get all the getting started steps uh once you've done maui checked more than once twice you should be good enough to run it once hopefully if you're having to run it twice let us know because that that shouldn't be needed uh you know it's still in preview so there's lots of wrinkles still to iron out but yeah should only have to run it once but if you uh once you've done it you should now have the maui templates here's the normal.net maui app template and then we also have a dotted maui blazer app all right so let's click next and create one of these that seems like a great name for our dotted maui app and we'll go ahead and create that now this project is just an uh this solution is a normal.net maui project it has the same structure as a.net maui project we've got our core project right here this is the project that we use for android ios and mac catalyst windows of course is a little special right now it has these other two projects for running on win ui we're using one ui under the covers uh we are working on consolidating these projects into the core project but right now they need to be to be separate okay so let's go ahead and run let's start on android first and then we'll take a look at the code while this is building and deploying let's go take a look and see what we've got here so in mainpage.xml we can see that we just have basically one maui control in this app and that's this blazer webview control and it's rendering some static html just a static html file that's in the the project here it is we've got a little tag to mark where we want our blazer content to be rendered and then we're pulling in the blazer webview script okay and uh in that blazer webview control we're also specifying which component do we want to render inside of that uh that control looks like the app is getting there almost we'll give it another second uh and here we're specifying the component type to be this main component now where is that coming from well from a razor file of course here in main.razer this is our component and you'll notice this looks exactly like the app.razer component that you would find in a blazer app this is just setting up the blazer client-side router which will then route to all of our pages there's our counter component and our fetch data component all the standard stuff that you would see in a default laser application and hopefully it's now running and it is and uh yeah there's our blazer app running as a native android application we have an embedded web view control our components are running natively on the device but they're red rendering to this webview control all the normal blazer stuff works you know we got our counter and our fetch data page uh all being rendered in the browser in the native android app uh quick quick statement or question here um does maui mean i won't have to worry about responsible responsive or adaptive ui i think i think the answer is the opposite yeah no no you you still oh you always should worry about a responsive ui um the the benefit of this hybrid approach is that for your responsive ui you can use normal web techniques for doing that so you're using css and html to render all this uh ui this is the this is the normal i mean we have a css file we have bootstrap that we're pulling into this maui app in order to do the rendering of this mobile application if you're doing native ui in maui then the xaml pattern has its own set of uh gestures that you use for building responsive layouts and so forth yeah i think i think the answer here for me is uh if i'm if i'm using maui then i know i'm very specifically targeting more than one device so i'd rather be using those adaptive and responsive behaviors absolutely um so one of the benefits here is we can actually use a combination of web ui and also native ui um so right now all i have is this blazer webview control but we can add some native ui to our app and i'm not gonna i'll spare you me trying to type out some xaml um but here i have a little snippet i added we're going to add a stack layout with a native label control and then we have our web view control underneath with an option to make sure that it still fills up the the remaining space so if we save that and run this again the second run should be a little faster because the app's already already deployed we should be able to get not only some web ui using blazer but also native controls now if you're familiar with the mobile blazer bindings project that's an experimental project that we've been playing around with for a while that really informs a lot of what we're doing with dot net maui there is a way there to also do native ui using razer that's not coming to maui and dot net six that's something we'll maybe consider in a future release so to add native ui in dot net six you just use normal xaml and you can see it works like there's our uh there's our it's so native uh label control above the rest of our web ui which was all implemented using blazer okay the fact that you can co-mingle these two things and share state i think is an uh just phenomenal technology but also a great migration strategy for people that have existing code and they want to start going to blazer they can share some of these things in the same space yeah absolutely you could start with native and add blazer there and use that to go to web or the other direction if you're a web developer and you're starting with a web app and you need some native functionality you can pull your web code into a native application i want to show desktop as well so let's set the win ui package project as the startup project this trips up a lot of people right now this is the project you run not the not the win ui one the win ui package one to run the desktop version and so we'll go ahead and run that and this should run our hybrid app as a desktop application um this is using win ui the latest uh windows when uh ui stack and there we go yeah and so we've got we still get our native control this is now a win ui native control at the top and we've got our blazer ui nice we have the default template is fortunately responsive so it works on big screens and you know desktop apps and on mobile apps as well now one thing that's really cool about running an app this way is in addition to using native ui elements we can also use any of the native functionality of the underlying device like we're not running in the browser sandbox here we're running in a native app so we can do really cool things like uh let's go into our index component this is the like the home page for our app and let's add some code in here i'm just going to add a string variable we'll call it message and we'll say hello and then i want to render that message up above we'll put it in a h3 tag right and then what i want to do is have a button here where i can edit this message so i'm going to add a button on click and i'm going to put a method uh the event handler here that i haven't defined yet i'll define it in just a second and we'll call this our edit button okay and then now for my edit functionality i'll just copy in some code i've already got format that okay so what do we got here so we've got a button that on click is going to call get message and in get message what i want to do is is launch an advanced text editor for editing the message that we're displaying in our native maui app so what this does is it uh creates a temp file on disk it writes some placeholder text into that text file and then launches our advanced text editor waits for the user to you know specify what message they want and to close the the process and then reads the file in again and renders that message okay now let's go ahead and run this app again and see if that's working notifications on the windows tray and all sorts of cool stuff with this yeah speaking of files i needed uh i needed a using statement so i can actually interact with a file system not something you can do from a web app right you're not going to be able to mess around with the file system in a web application but because we're running in a native application we can now click edit and launch our advanced text editor uh dotnet maui blazer is great maybe we'll take advantage of our advanced text editor features with uh some emoji in here and close that and it's able to pick up the string that we just saved to the disk now obviously that code was windows specific we would need to put an if def around it to say like only run this code uh in the windows version of this app but the point is that you can touch anything in the net platform you can you get full uh access to the native capabilities of the device so yeah so cool simple example and you mentioned uh like system tray integration like one of the demos that we showed at build was we built this weather application and we built this application actually twice we built it once just using.net maui and xaml and then we built it again using html and css with with blazer and that's this project so i'll show the app first running as a web application you know imagine you built this web app like you have an existing web app and then you decide that you want to add some native functionality to it so here's my web app you know it's got a nice nice design got some things you can click on see the stats from different weather stations we can see the current weather in boston we can add some new stats we can change the location to you know let's go see the weather in korea we can change some settings to say we want to use metric units this is all a web application html css c-sharp but what if i wanted to add add some native capabilities to this app well we can do that using.maui so all of the logic for this weather app is in this blazer weather project so here's all the components like there's the home components and so forth and that's just referenced by our web application just to show that that's the actual dependency nothing no trickery going on here um and then i just added a maui set of projects to this solution that reference those same set of blazer components unchanged so we're referencing that same blazer weather project right there okay and we can just use it so if we if we look at how we set that up in the code go back to mainpage.xml again it's just a blazer webview control pointing to main the main component and in main component all i'm doing is rendering the app component from the blazer web application that's it all right and so we can set this as the startup project and let's run on android first dude i believe curious drive shared a link to uh this very project on uh in the chat room yeah it's uh it's available on github so if you want to play around with there's two versions of it there's the one on my account which is the web version so here we have you know the nice responsive version of our weather app now showing up on a mobile device and we can also do it on windows as well get desktop get that up and running now this desktop app was actually augmented with some native functionality like whereas i think it's in maine page.yeah so it has some like system tray integration and it can fire off native notifications that's all possible because we're using that hybrid app model all right so here's our weather app this is not a browser this is a native wind ui shell got all the same functionality again but now if we look down the bottom right hand corner there's a little dot-net bot hanging out in the system tray that was added by this wind ui app we can click on him and we can fire off native notifications um this same app runs equally well on mac and on ios if i had my mac device up here we could take a look at it as well but at least for now we can see we've got mobile we've got native desktop and missed it and web all the same code using blazer using dotnet maui and blazer so that's that's the new hybrid app model with dotted million blazer super cool check it out in dot net sex well you have those three up i just want to reiterate too though the one that's running on the web browser tab is using webassembly the other two are running on the dotnet runtime without web assembly so there's uh a there's a possible speed difference between these uh you might you may be more performant on the the maui hosted ones is that that's right i think i'm not sure if it's the server one might actually be running on blazer server so the component rendering might be comparable i have to go check it out that could be true as well i think it is a blazer server version here not that webassembly is slow by any means but you know going back to that aot conversation um you know if if you had something very processor intensive that you need to aot that wouldn't apply to the the maui versions of the app yep yep good cool um i'll just mention real quick also that if you're um you know if you're looking to get to maui um one modernization strategy you might try is actually like if you have if you're a winforms dove or a wpf dev like you have an older app and you want to start adding modern ui that can carry forward into maui we have blazer webview controls for wpf and wim forums as well so you can do this same hybrid pattern with you know existing windows desktop applications that's something that we also have added support for internet 6. all right we'll go back to slides real quick so when when are all these goodies coming well don five released back in november and we're basically on a yearly release cadence with net um every other release every even numbered release is a long-term support release so dotnet six will be on lts release and it will ship in november of this year and then we'll have a yearly release cadence after that where every odd number releases the current release and every number of release is an lts release so dotnet 6 is already in progress we just shipped on at 6 preview 4 and we expect to have a preview about once a month from now until we ship in november so be sure to give it all a try like i said done at 654 is available you can try out hot reload air boundaries state persistence webassembly aot blaze dotnet maui blazer apps um the winforms and wpf controls are all there as well the improved performance uh you can get it at dot dot net slash get dash.net six and with that i think i'm done and i'm happy to answer any other questions that people might have uh there was a question in chat and i i'm trying to remember i think it was time bender 360 asked that we did it wasn't uh fitting into the flow of the show yet so i saved it for the end he was asking something about blazer server apps and he was wondering if a blazer server app and.net 6 does the connection to azure sql always stay connected like sig like signal r and is there any improvements coming in.net six i'm not an azure sql person so i don't have any idea what they're talking about uh okay well i mean yeah yeah sure so like how does the blazer server app work right like the the user connects in the browser to the server and we set up a websocket connection then to the the server all the blazer components run server side and they handle rendering the ui uh and shipping that down to the client and as the user interacts with with the ui in the browser we send those ui events to the server so that the components can then handle them on the server associated with that user is what we call a circuit like some state for that particular you can think of as like a session we don't really call it a session because it's slightly different but you know that that user's uh interaction with the the website then what you do on the server to talk to your databases or any other web apis or whatever it's completely up to you um you can of course set up a database connection directly to sql azure from your server process running you may be running that server process on azure already and then how you manage the lifetime of that connection is up to you so you could scope for example the db context if you're using any frame or core to the lifetime of that particular circuit and so the connection will basically live for the the duration that the user is using that particular uh use the duration of the user is using the app um if you wanted to have it be a singleton you could do that i think in general um the ef core folks recommend scoped uh set uh lifetimes for their db context or at least making them as short as possible you can actually even just new up a context do whatever work you want with the the database and then tear it down so that that the lifetime of the database connection is really in your hands because your code is just running on the server and uh before we get some more questions i just want to let people know we do have prize drawings going on and we're going to announce those at the end of the show so don't go anywhere so just stick around for a few more minutes um we had another question come in uh can a blazer maui app interact with background tasks of the device even if the app is closed that's a great question um i mean it's it's a full it's a fully native.net process so you can anything the device can do you should be able to do if you want to call into like native windows you know win32 apis you can do that like you p invoke to your heart's content all those things are possible um so yeah absolutely you can interact with background tasks no no problem um maui tries very hard to give you a like common abstractions over common tasks that you might want to do across all the different platforms that it supports like if you want to do something on you know desktop windows app and mac and ios and android well the way you do those things on the different native platforms is probably different um so they maui gives a bunch of convenient apis for like you know dealing with location or you know there's a whole like the system tray integration i think was had was in part done with one of these maui abstractions so that can help but you're not constrained by those apis like if you want to touch native functionality you absolutely can so the sky's the limit whatever the device can do you can do it from your maui app excellent um i i think that also answers the next question that was up there about uh device capabilities um as you said there there's kind of a broad range of common tasks that this takes care of uh and then elliott brand had a question about uh troubleshooting an http client uh maui app that was crashing the android emulator i i rather than try to like troubleshoot on-air where's the best place to report these type of issues daniel so the maui repo is on github github.com.net maui for that particular issue i would 99 guess sure guess that the issue is with https i believe there's a known bug in maui right now where they're having uh the the hp client stack like blows up when you try to do requests to hbs sites from some of the platforms it may be like specific to android or something um so try doing an http call without hps which i know is terrible like we shouldn't be we should be recommending to anyone to do htv instead of hps but just to work around the bug until they get it fixed um my gut is that's probably the problem you hit i hit a very similar problem when i was building the blazer weather app okay excellent um for blazer wasm and maui can source code be viewed by client devices are there any security issues a developer needs to be aware of on client-side rendering so not your suspect so you know it does surprise some um uh some some users that are new to maui and are used to server rendered web apps uh to see their their dlls getting downloaded to the browser they're like whoa those are my dlls like does that mean they can you know decompile them and look at how they were originally built like yeah that that any code that's going to the client you should effectively think of as public like it's it's it's on the user's device the user can has the compiled version of the code they're not going to get the source code unless you're like shipping the source code with your app hopefully you're not doing that but they do have the actual compiled uh assemblies and that's true for maui as it is for for blazer webassembly um so keep that in mind this won't ship any ip you know in your assemblies down to the browser that you don't want users to be able to see it's not a security issue but it basically surprised for some folks is that this applies to xamarin as well oh yeah by the way yeah xamarin apps are are you know you're installing a android or ios app that has a.net runtime with your.net compiled code inside of it of course and it's a it's a client app running client side it's very different than a server rendered up where your code is all staying on the server and the the user agent is only seeing your rendered html and and json um regarding security as well in blazer webassembly we want to make sure it's clear that we're not doing anything fancy to like punch out of the browser security sandbox we're running on webassembly which is an open web standard so all the browser security sandbox constraints equally apply you can't do anything in the blazer webassembly app that you couldn't already do in javascript and likewise you can do anything that javascript could do so that's the constraint that's put on you by the browser when you're running in a blazer webassembly app in maui you have a native client app so the only constraints that are being put on you are by the platform so if you're running on a mobile device there may be you know permissions or capabilities that you have to specifically request or whatever in order to get access to those things but you can if you're running on a desktop app for the most part you know you can do whatever you want like it's basically considered a a trusted piece of code at that point on the user's machine within the you know the security model of the underlying os yeah uh so one of the one of the things i like to tell people is if you have something that you're worried about with ip put it in an azure function or hide it behind a http call don't have that part of your application code and that applies to any platform just don't ship it to the client and you never have to worry about it yeah so don't take your winforms app and then try to ship it all the way down to the browser like you do need to think a little bit about what logic should be in the browser what should not be it may require some some refactoring but the good news is you can use your.netskills.net code existing existing dependencies just you do need to think about that this is a new app model all right so just uh working a little background stuff here as we get through the questions we're choosing some winners as we speak here um which i need to i didn't look at the prizes i don't get the prizes so i didn't look at the prices [Laughter] it's already free a little bit about support is there any you know blazer server support going away anytime soon or is it just as popular as web assembly are we keeping all the things daniel um it's uh technically actually right now it's more popular i mean blazer server shipped shipped first uh we did blazer server originally in.net core 30 and then it shipped again with dot net core 3.1 dot net core 3.1 has an lts uh support lifecycle so you know three years of support on top of.net core 3.1 i shipped to spyro.net 5 and it's shipping again it's power.net 6. so without it six it gets another additional three years of support once we shipped on at six in uh in november so no it's not not going away um that core model of being able to render web ui to a different process is very fundamental to a lot of things that we're doing in blazer if you think about how maui and blazer are working together it's basically like a blazer server app just kind of scrunched locally onto your machine instead of having the interop connection be a websocket connection that stretches across the internet it's just all happening right there in process so no laser server is not going away it will continue to be supported and for many scenarios it's great like it's very simple easy to get started with really fantastic technology to use and i i'll ask one final question here daniel um do you see maui and like flutter being or is it flutter the the google tech that's trying to do like the same like right once run anywhere type of thing are those kind of competing in that same space they do very similar things so like they are they are definitely different options for for very similar scenarios um so i mean flutter is based on dart and it allows you to write i think mobile and desktop and i think recently they have that they added desktop and web maui is trying to do some very similar things but with dotnet and with with c sharp and it gets nicely.net you also get paired with a really great server stack so you have you know net uh across the board we really have been trying very hard to make dotnet uh uh a dev stack that you can use to write anything you know web ui desktop mobile games ai regardless what you want to do you can do it with with.net um i would also say that maui is a little different than flutter in terms of how it renders the ui like maui is is a uh abstraction over the native ui controls from the underlying platform so when i rendered a label control in my uh dotnet maui blazer app on android that was an android label on windows that was a win ui label on ios it would be an ios label flutter i think does a lot of its own own drawing but that said uh in maui we're also we're also looking at doing similar things where you can have a cross-platform graphics stack there's a library called i think it's maui.graphics that will allow you to do similar cross-platform drawing as well within maui so you know very very similar scenario overlap um you know different different technologies underneath the covers and different scope of things that they currently support excellent excellent stuff yeah uh so i appreciate having you here on the show to kick off our blazing into summer week uh it looks like we're gonna end up having to make this a yearly thing daniel this blazer blazing into summer uh looks pretty popular with folks and blazer's here to stay so so why not keep it up right sounds great love to thank you for having me and man i'm looking forward to the the rest of the sessions and uh we have a winner uh mark stega i think is how you pronounce the last name i'll post it in chat uh mark will we'll be sending you an email letting you know uh that you won a prize and we'll we'll be sending that out shortly to let you know what what the prize was and how you can redeem that so thank you all for joining us today again special thanks to daniel roth i appreciate you staying and answering all the questions that people had uh there was quite a bit of them so uh my pleasure excellent good luck to you and your team on uh november and uh i'm sure we'll see a like a.net con for something november 2021 mark your calendars yes it's gonna be epic yes and uh again like daniel said we got great guests coming all week uh i'll share this up on the on the screen one more time and we'll let you get uh back to your day daniel uh but we've got some really amazing community folks joining us this week uh tomorrow it's laylah's birthday who streams on their birthday layla streams on her birthday so layla porter tomorrow from layla codes it um she's going to be working with signalr and doing some speech to text and doing some language translation it should be super fun uh eagle's going to talk about unit testing on wednesday if you haven't seen b unit before if you're a big fan of unit testing i highly suggest you join us curious drive a fantastic guy does wonderful videos on youtube about asp.net blazer and net he's going to join us and then i'm going over to your neck of the woods daniel and i'm going to join uh cecil phillip on dot net live i love that style artisan laser components i can just see you with like your your planes and saws carefully sanding your blazer components polishing them very you know it's like the the bread making of uh of the uh needing the blazer component and then fierce kittens fantastic twitch personality uh just fantastic personality in general she's coming on friday to share what she's working on with her gift bot application which is a um an app that runs on blazer and it's built on her show and used by her audience so uh very interested in seeing what she's up to so with that said daniel any final words uh give.net six preview for a try let us know what you think of the features and if you have any suggestions or ways that we can make the product better let us know on github awesome and uh we'll see you here all week folks thanks for joining us and take care have a good afternoon

Channel: Progress Telerik

Views: 3,836

Keywords: blazing into summer, blazor, dotnet 6, dotnet, .net 6, .NET Hot Reload, WebAssembly, .net maui integration, new blazor features, twitch, livestream, ed charbeneau blazor, ed charbeneau, daniel roth, blazor 2.0, webassembly aot, blazor error boundary, blazor demo, blazor .net 6, blazor dotnet 6, dotnet maui, blazor webassembly tutorial, blazor .net, blazor .net core

Id: -jickk7eDJs

Length: 94min 23sec (5663 seconds)

Published: Mon Jun 07 2021