What's New in Blazor for .NET 8

we're ready to go hello everyone hello Visual Studio live it's great to have you here on campus again welcome um it's I think thank you all for for being here I'm Daniel Roth I'm the product manager on the asp.net team for Blazer and today we're going to talk about all of the new features and capabilities that are coming in blazerin.net 8. Blazer is a powerful web UI framework based on.net with blazer you can build beautiful and richly interactive web experiences using.net and c-sharp no JavaScript required combined with an asp.net core back end Blazer and asp.net core enable full stack web developmentwith.net Blazer comes with a powerful reusable component model that you can use to easily handle UI events render updates and set up two-way data bindings Blazer comes with built-in components for handling forms and validation as well as displaying large virtualized data sets uh there are also lots of component libraries that are readily available from the community that you can just download and install as a nuget package and use you can build Progressive web apps with blazer so that you can make your web apps installable and support offline scenarios using the latest open web standards we provide Rich tooling for Blazer and visual studio and with Visual Studio code including support for hot reload and while you write your Blazer apps typically using c-sharp if you want to you can interoperate with JavaScript if you have existing JavaScript libraries that you'd like to to reuse now Blazer has actually been around for a little while now like it's uh over I think it's over five years that we've uh been uh releasing Blazer releases uh the the first experimental releases of Blazer I think we're in early uh 2018. and with each dot net release it just keeps uh getting better uh this past November we just shipped.net 7 which had lots of great new blazer features in case you missed it here's just a recap of a few of the highlights in Donnet seven we expanded Blazers reach beyond the web you can now use Blazer to build native mobile and desktop apps using the Blazer hybrid pattern that's integrated with net Maui we added support for building uh standard space HTML custom elements with laser so you can embed a Blazer component really in any application we addressed a number of top feature requests like handling location changing events some improved data binding semantics and more flexible handling of authentication requests us at the webassembly layer we also did a bunch of Investments we added new capabilities like a new low-level JavaScript interop model as well as support for the simd and exception handling webassembly standards if you haven't already I encourage you to go and try out blazerin.net 7. today you just go to blazer.net click get started and go ahead and run through your first tutorial if you haven't seen these new features from.net 7 I encourage you to go check out Steve sandersons.net conf from last year you can find that at aka.ms slash blazerin.net7 of course this talk isn't about.net seven we're here to talk about what's coming in.net eight what's the new stuff so in dot net 8 we want to enable you to use Blazer to get the best of both the client and the server when building web UI modern web applications need to use typically need to use a combination of approaches involving both the client and the server to deliver the best UI web UI experiences many web apps will dynamically generate HTML from the server in response to requests this is typically called server side rendering or SSR server-side rendering is really nice because it helps your app load really fast all the hard work got done on the server to like load the data and decide what to render and all the browser has to do is display the already rendered HTML uh in.net we've always had great support for server-side rendering with Frameworks like MVC and Razer pages now for Rich interactivity you generally want to handle things from the client and for that you use client-side rendering or CSR by rendering from the client you can have really low latency UI interactions and you can leverage client capabilities like if you want to access local storage or the camera or the local compute and so on for client-side renderingwith.net we of course have laser lasers component model is focused on handling UI interactions from the client now like I said many modern web apps actually need to use a combination of these approaches both server-side rendering and client-side rendering like maybe your home page of your app or your blog is best handled from the server so that it loads fast and is easily indexed while more elaborate functionality in your app needs the responsiveness of running from the client currently with net that means you can do that but it requires uh using multiple different Frameworks like MVC or Razer Pages plus Blazer in dot at 8 we're working to combine the benefits of the server and client into a single consistent model based on Blazer you'll be able to use blazer for all of your web UI needs you can use Blazer components to render HTML directly from the server and also get full client-side interactivity with either Blazer server or blazer webassembly from within the same app you can even mix the two interactive hosting models and switch which which one you're using at runtime it's full stack web UI development with.net and Blazer now this work to enable full stack web UI with blazer really breaks down into uh five by five areas of of investment the first is server side rendering with laser components then enhanced navigation and form handling streaming rendering the ability to add interactivity per component or per page and the ability to choose the interactive render mode at runtime let's take a look at each one of these areas now I imagine most of you are probably already familiar with server side rendering in one form or another especially if you've used Frameworks like web forms or MVC or razor Pages server-side rendering means you're generating HTML from the server in response to a request server-side rendering with blazer means that you're going to Route the request to the right component on the server and then that component will render HTML directly to the response there's no web assembly there's no web sockets involved here you're just getting plain old HTML rendered to the browser in response to requests now this is different than Blazer server which in some sense is also a server-side rendering model but Blazer server is a persistent stateful connection based model that is used to handle UI interactions in traditional server-side rendering the connection only lives as long as that request and the app is typically stateless all right so what would what does server side rendering with blazer look like so let's go over here to this application so this is a recipe app that's built entirely using Blazer um if you follow Blazer fairly closely you may have seen this recipe app before um but what's different about this one is that this one is actually built using the public.net 8 preview six bits you can get this code off of my GitHub repo at Dan roth27 slash best for you recipe so you can download this and run it today the other demos we've done were prototypes that like lived in the nearest Minute core repo and if you could figure out how to build the the whole Ace met core repo then you could run them but uh a little it was not for the faint of heart this one is using all of the latest features that we shipped and are publicly available for you to to use so on the home page we've got just a list of recipes and then if we click on a recipe we can see the recipe details all the ingredients and instructions on how to make that recipe now if we look at the browser Dev tools to see what's going on here let's remove all the filters and I'm just going to refresh the homepage page we can see that we've got some HTML and some CSS and some images but do we have any websockets I'm going to filter on websockets no websockets do we see any webassembly uh resources being loaded no web assembly there's there's not even any JavaScript in this app it's just pure vanilla server-side rendering if we look at the what's coming back for the initial request all of the htmls being emitted from the component on the server okay what does that look like in code here is the actual solution for this application um this is the root app.razer component for this application you can see this is a this is a a Blazer component and it's rendering the root HTML tag we've got Blazer components in here for rendering the Head outlet and then setting up the the Blazer router and the Blazer router will then route requests to the corresponding Blazer components that live in the app we have an index page if we look up here at the top we can see there's the the route being set up for this page and we have a recipes Details page that we saw as well also has a route now the magic that sets up each of these Blazer components as a just normal asp.net core endpoint is in program CS if we scroll down here there's this new API app.map Razer components where we're passing in that app type and that's what's going and finding all the Blazer components and just setting up them up with uh endpoint routing so normal normal server-side rendering based off of Blazer components we can do form handling as well so if I search for like chocolate recipes and submit that that was actually a form request it was a get request and re-rendered the page with a set of chocolate recipes I select one of those there's also a form down here at the bottom of the recipes where we can submit a rating reviews for each of the recipes like if I really like this one so we submit that and then we should see at the bottom yep our our review was added and then up at the top it's also calculating like an average of the star rating reviews so that was a form post request and if we don't like uh put anything you can see that this is this is a Blazer form like it's actually a wired up valid form validation as well so we're getting validation errors too uh let's look at what that looks like in the code in the home page the and so this the the get the search form is just a vanilla form and then down below we are binding the query string data to this uh Blazer component parameter and then passing that to our recipe store to then run the query for those specific recipes that's the get request in the recipe Details page we can scroll down and see here's that star rating reviews component that lives over here in this separate component Library so starting rating reviews dot Razer and here we can see that we've got the Blazer edit form component and the Blazer like input components that we're using to build that form when we want to model bind the data like the form request data that comes from that submitting that form we have a component parameter that's attributed with Supply parameter from form so that we can get that data and then when the form successfully submits with and it's valid after the validation rules have all run then our onvalid submit method just gets executed and and we here we're just firing an event to let a parent component know like hey I got so I got a new review what do you want to do with it uh and then we clear out the the model for the form so that it resets okay so that's that's form handling with server-side rendering in Blazer okay so that's pretty cool so we can now do state lists server-side rendering with our Blazer components and now that we're using Blazer to do server-side rendering we can start taking advantage of Blazer to enhance the server-side rendering experience of our app the first enhancement that I want to show you is enhanced navigation and form handling so let's see yeah so normally when you do a page navigation or you submit a form post you have to do a full page refresh to render the response that comes from that from that request Blazer however can intercept the page navigations and the form form requests and instead issue a fetch request and when it issues that fetch request it will still do normal server-side rendering but when the HTML content comes back Blazer grabs that and says let me take care of that for you and it updates the Dom seamlessly just the the changes that need to be made to the Dom without having to do a full page refresh this means your your navigations and form handling are smoother they're faster and they just feel more responsive let me show you what that looks like so let's go back to the app now uh did I I guess like yeah here we go so if I uh navigate around like watch the little like um reload spinner and Edge like you can see there's a little blip like every time that I navigate that's because every time I currently navigate it's doing a full page refresh this is just traditional server-side rendering right now you may have also noticed that when I submitted one of those um uh recipe reviews that I lost the scroll position on the page because again did it full page refresh and so we lost the scroll position but we can do better to do better let's add some laser enhancement we're going to go into our app.razer component and I'm now going to uncomment the new blazer script blazer.web.js and this will light up enhanced navigation and form handling for me as well as all the fancy new dotted features that I'm going to be showing you okay so let's go ahead and save that and let's rerun cool okay so now if you watch the little reloading spinner uh you can see that uh it's uh not doesn't even like do the little spin Blaze the navigations are fast and smooth it's a little easier to see if I bring up the browser Dev tools like if I remove all the filters and I refresh the home page so initially on the first page load we load everything right but then if I click on a page we see that the down here the request for that particular recipe was intercepted and instead a fetched request was made and then the only content that we really had to download was this uh that that HTML and then the image for the actual recipe we didn't have to download like the CSS style sheets for the for the application we didn't re-download blazer.web.js we only had to download what was needed and Blazer updated the Dom seamlessly so it's still doing server-side rendering but your app starts to feel like what you would normally associate with a single page app or a spa Style app the navigations are smooth not jarring and much more responsive so that's enhanced navigation and form handling oh I shouldn't show you forehand let's do form handling too so if I go down here to the bottom and let's submit another recipe review like love it and we submit that so now the recipe review gets added but you notice we didn't lose the scroll position anymore the page didn't get fully refreshed we're just still right there in the context that we were previously you may notice there's a little bug right here that the form doesn't get cleared out that's a bug in.net8 preview six it's getting fixed in preview seven that should work but uh you know preview is still still a work in progress all right cool that is enhanced navigation and form handling all right next enhancement is streaming rendering so when you're doing server-side rendering sometimes when you're rendering a page you might need to do long running async tasks in order to render that page like maybe you need to go get some data from a database or maybe you need to make an API call with traditional server-side rendering the the user has to wait for all those async tasks to complete before the page can be fully rendered and then it gets sent to the browser and then the user sees the page so while they're waiting they see the little you know loading spinner in the browser and then Boop they see the the actual update with streaming rendering you can do an initial render of the page while those async tasks are executing like you can render the layout and then put some placeholder content for where you're going to put the data that you're actually fetching like maybe a loading dot dot or whatever so with streaming rendering you you still do the get request and then you get an initial batch of HTML but maybe you're kicking off a database query but you at least get some pixels on the screen you let the user know that something is loading and then when the database the async task completes when the database uh query is done then the component renders again and a streaming update is sent on the same response stream there's no websocket connection here this is not Blazer server we're just using that same connection that was set up for the request to send additional updates on the response stream and then Blazer seamlessly updates the Dom with those updates that's streaming rendering let me show you what that looks like with net 8. okay so um right now the home page actually loads uh pretty fast like I can Mash on the refresh button and it's very Snappy um the recipes in this app aren't actually being loaded from a database it's just like a Json file but let's pretend that they are uh so let's go to our repository for getting uh the the recipes and we're going to add a simulated database query we're just going to add a task.delay for one second it's an async task so this if we now rerun the app we should see that it takes a a little longer now for that homepage to render you could probably see it there but let me do it again I'm going to refresh ready ready click one one thousand and then it's done you can see the little like progress spinning thing like one one thousand still spinning done so now we've got this one second delay unfortunately on our home page how can we make that better let's go to the index.razer component and I'm just going to add attribute at attribute and the attribute I'm going to add is stream rendering and I'm going to set it to enabled true so we're turning on streaming rendering for the home page let's look at the logic for the home page for a second so here it says if there are no recipes yet then it will render loading recipes dot dot dot when we have recipes it will Loop over all the recipes and render them down at the bottom when the component is initialized we're making that async kicking off that async task to go and get the recipes and that's where our simulated database query is occurring the Blazer will render the component as soon as that async task is kicked off so we'll see that loading dot dot initially hopefully everything's working correctly and then when the async task completes Blazer will re-render the component again we'll now have the recipe data that comes down the same response stream a streamed update and we should see the UI update seamlessly let's see okay did you see it okay let me let me get rid of some of these other tabs because we have a bunch of recipe apps to open now so I'm just going to refresh the homepage watch it so refresh there's that loading recipes dot dot and then a second later we get the the streamed update if you had multiple async tasks that you were doing then you could get multiple streamed updates that would come come to the page so that's streaming uh rendering with uh Blazer and net eight you get pixels on the screen faster so your app again feels uh more responsive still doing server-side rendering we haven't done anything client-side yet we're just making our app feel like a client-side based application by leveraging some Progressive enhancements okay now it's time to actually add some client-side interactivity in addition to server rendered HTML we also want to be able to use the client capabilities of the the web platform with laser we have two ways of enabling client interactivity we have Blazer server and Blazer webassembly whether you choose to use Blazer server or blazer webassembly for your app depends on a variety of different factors like load Time Performance requirements your UI latency requirements like load time the Blazer webassembly is going to be a little bigger to download because you have to download the runtime so the load time is a little slower laser server will load faster UI latency Blazer server does all the UI interactions over the network so there's a you can't there's only so much you can do about the speed of light as in nothing you can't do anything about speed of light so there's going to be a little bit of delay when you click the button before the component renders and the response comes back Blazer webassembly you're running code locally on the device so you can do low latency stuff scalability concerns Blazer servers is utilizing your server resources to to drive the UI the user interface of your app so you're paying with server resources to do that with blazer webassembly you're pushing that load to the client so trade-offs right engineering trade-offs today choosing between those two models is typically an upfront Choice like you decide I'm going to be a Blazer server developer I'm building a Blazer server app I'm going to pick the Blazer server template and that's what I'm going with or I'm going to build a Blazer webassembly app that's what I'm going with for this particular application and you typically are today choosing that for the entire application in dot at 8 we want to enable you to add client-side interactivity on a per page or per component basis so when you have a component or page that needs interactivity you can choose to just sprinkle a little interactivity on that page and now you have a little island of Blazer server or Blazer webassembly in what is otherwise potentially still a server-side render app or if you want to enable it for the whole application you can still do that that too I'll set any circuits that get set up like any server side state for Blazer server or downloading the Blazer webassembly runtime that only happens on the pages where you're actually using those features if you're not on a page that's using those features then you're not paying for them there's no overhead let's see what this looks like okay let me go back to the recipe app now this recipe app has a third page which is this submit recipe page it's got a recipe editor where I can submit new recipes to the application like maybe I want to add some chocolate chip cookies and I want this UI to be a more sophisticated user interface like it has this little picture picker where I want to be able to pick an image for my recipe I have chocolate chip cookies there we are and we'll add that right now it doesn't preview the image for me it just displays the file name which is kind of lame and then it has this um ingredients list editor where I can add ingredients like 300 grams of flour currently if I click this button nothing happens there's nothing handling the the button click event that's because this page hasn't been set up for interactivity yet it's still just doing vanilla server side rendering the only real interactivity you can do with server-side rendering is like doing you know form posts and the like how can I make this page interactive let's go and do that so if we go back to the code let's find that submit recipe page this is it all the logic I've factored into this recipe editor component we can go to definition to see what that looks like so here's all the form fields for the the recipe editor we've got that image picker here we've got a little bit of like I think there's some JavaScript in drop code that's like generating a data URL for the image and you've got button click handlers for the uh the uh this ingredient list editor component so fancy stuff and I want this component to be interactive how do I do that well we can just do that by adding a render mode an interactive render mode and the one I'm going to start with is Blazer server when you use Blazer server first for this render mode would be correct great okay so now just this component in the app should be interactive using Blazer server let's see if that works we start the application let's go back to the recipe uh page cookies and let's add an image talk to cookies and aha we're getting a little preview of our chocolate chip cookies now when I add some ingredients that's all working too you can add some eggs I can drag and drop stuff and switch between Imperial and metric units and we get all the normal form uh client-side validation logic now now running because we've made this uh just this one component on this one page interactive using Blazer server now you can also and this is doing um specifying a render mode uh for a component instance if you want to you can just declare that this entire page should be using Blazer server you can do that using the render mode server attribute that's basically saying wherever this component gets used all the time it should be Blazer server and that's convenient particularly when you have Pages we recommend using this sparingly in general laser components are all about reuse like they're components right you're supposed to be able to reuse them in a variety of places you generally don't want to tie your components to a particular render mode or hosting model you want them to be able to be used with webassembly or server or Blazer hybrid or anywhere you want so that so generally we would recommend not baking in the attribute to say this is only a Blazer server component but in some cases that's needed and so that is also available I like the other models in this case so I'm going to switch it back like that okay um what about Blazer oh I didn't I didn't show one important thing so if we let's see what's happening in the the network tab so if we go back to the browser Dev tools and let me make sure I've removed all filters I'm going to refresh the home page okay now on the home page do we have any web sockets I'm going to filter to websockets no websockets yet if I go to the submit recipe page now we see the Blazer Server websocket Connection being set up we've got a circuit the page is interactive when I navigate away from this page I go to the home page it's gone so you freed up that circuit so you know you the scale characteristics of your app are much better your your laser server circuits can be much much shorter lived all right now what about webassembly how do we do uh the webassembly render mode well we can just change this render mode to webassembly let's do that and we'll go ahead and run this app okay so it should still work uh if I try to upload an image like this that could work yep so this page is still interactive but now if we go look at what's happening on the network Tab and for this I need to make sure I don't have any Blazer webassembly cached anywhere let's clear all the caches we're not cheating there's nothing cheating going on here and let's look at the network Tab and the home page let's look at everything okay so on the home page do we have what just happened today click on something okay great I don't know what I just clicked on okay on the homepage do we have any web sockets no web sockets we have any web assembly yet no web assembly yet but if I browse to the submit recipe page ah now I see that.net.native.wasm this used to be called.net.lasm I don't know why it got renamed in.8 but reasons that the dotted runtime team I'm sure have have good reasons for and then we can see all the uh the assemblies the code for the Blazer webassembly app being downloaded to the browser this will then get cached so if you have any other Pages or components elsewhere in the app that need Blazer webassembly it'll already be there and they can just go ahead and use it so the web assembly runtime is only downloaded and cached when you have a page that's using that particular render mode I know right now this looks like it's a little big like it's like wow 20 megabytes what's up with that Dan um this is development we don't do any of the optimizations so like trim the app and compress things and all that fancy stuff to make the app as small and tight as possible when you publish this app all that will happen and like the overhead for laser webassembly is roughly about a Meg or so so this goes way down once the trimmer has its chance and the the compression logic is run all right cool so that's an adding client-side interactivity all right so that's that's pretty neat like you can per page per component basis decide if you want to use Blazer webassembly Blazer server if you change your mind you just switch the render mode you know you don't have to like restructure the the the app uh extensively in order to be able to to do that but sometimes you might actually want to delay the decision of which render mode you want to use until run time um for example um maybe you prefer to use Blazer webassembly if the.net runtime the web assembly runtime is available but you want to avoid the user being impacted by the the load time of downloading and and loading that uh that runtime so what you might do is you might actually start off a user using Blazer server which loads really quick and still is interactive and then download the.net webassembly runtime in the background and cache it and then when the user comes back to that page or to to that app the app can see oh look the runtime is already here let me just go ahead and use that and it can switch at runtime to blaze using Blazer webassembly instead that way you kind of get the The Best of Both Worlds you get the the fast load of laser server but you get the client-side character true client-side characteristics of Blazer webassembly so you you a user comes to your page initially you set up that websocket but you sneak down found the.net runtime in the background and then they like maybe they refresh the page the app now looks and says oh wow there's a runtime here already I'm just going to go ahead and use that you've now offloaded that load from your server to the client and everybody's happy what would that look like okay so if we go back to the app um what I would love to do is change this render mode to Auto the auto render mode that would be pretty cool um it's not yet implemented in.net 8 unfortunately so I can't actually show you with the the dotted preview six bits the pr actually just went out like it's going in for the the next uh believe for the next.net8 preview release but I can't show you with this version of the app so for this part of the demo I'm actually going to switch back to a earlier prototype implementation of these features that lives in the asp.net core repo this code's a little bit older a little staler from what we're actually shipping in.net 8 but the concepts are still the the same so here's that recipe editor component and here I'm using the attribute model to say I would like this component to use the auto rendering mode Let's see what this looks like and I think I need to stop the other app because I think they both use the same port there we go all right so we should see our recipe app there it is okay that was streaming rendering was working go to our submit recipe page uh well hold on let's let's start let's start the homepage let's do the the whole thing so let's clear all the caches so make sure we don't have any you know cheating here going on uh empty refresh cash okay so on the home page do we see any websocket connections no do we see any web assembly no okay so but if we go to the submit recipe page aha so now we've got a Blazer Server websocket Connection set up but if we look at for a webassembly we can see ah we've also downloaded the.net web assembly runtime in the background now which one are we actually using uh if we look at the dev console uh we should see right here that it's saying that it's running over a websocket connection so current right now we're using laser server but let's say the user browses away from this page and comes back or just we're just going to simulate that by refreshing the page and now you can see it has switched to executing using webassembly at runtime so you have made a runtime decision a policy decision on which render mode you want to use and you get the best of both Blazer webassembly and Blazer server all at once so that's the auto render mode this is just example of um one uh runtime policy that you might have we actually plan to make this extensible so that you can have others like maybe you like using Blazer webassembly but you don't want to use Blazer webassembly if the client has a very low power device like you don't want to burden a low power device with running all that client-side code so you'll take the load off of them by running it from the server that's another policy that we hope to enable with this this model so you can choose when you use server or webassembly cool so how can you get started using all these cool.net features um so the in dotted 8 we are introducing a new blazer template the Blazer web app template that sets everything up for you the server side rendering interactive rendering models so you get the best of Blazer server and Blazer webassembly in one template it has all the progressive enhancements enabled as well and it has options for enabling the different interactive rendering modes like if you want to use Blazer server as part of your app you can check a checkbox and say yep I want to please please enable that feature or I want webassembly you can have both or you can say you know I'm not using webassembly at all just turn that off I don't need any of that stuff these are all things that will be enabled by this new template and we're hoping that this will become the One-Stop shop for all your future Blazer web applications just create a Blazer web app and Away you go let me show you what it looks like so let's go back to actually I'm just going to open up a new Visual Studio instance and let's create a new project and yeah so these are all the Blazer templates and the one I want you to to draw your attention to is this new blazer web app template okay that's the one we're going to create we'll do next that that shows up if you installed a.net 8 preview and that seems like a fine name for our Blazer web app and then here notice I've got this option checked that I want to use interactive server components so this will set up the template so that we can use Blazer server for wherever we want in the application we don't yet have an option on the template for enabling Blazer webassembly you can do it manually and we have samples on how to do that there's some rough edges still that we're working through and we will add the Blazer webassembly option in an upcoming uh preview you can do it today it's just uh requires some some manual steps okay so let's go ahead and create this let's see what we get let's see what a Blazer web app looks like in.net8 let's start here in program CS so the first thing you need to do is add the services for using Razer components Blazer components and then because I checked that option it's also adding the services that enable support for Blazer server interactivity and then down below we map the Razer components pointing at the root component for our app so it knows where to go find all the routable components that's what's going to go and set up all the setup endpoint routing for each of our Blazer components so server-side rendering will work if we look at app.razer this is the root component for the app again it has the root HTML tag it's set up with the Head outlet and we're setting up the Blazer router uh it's also set up with the new blazer.web.js script so this is kind of the the root of your application and then each of your pages are over here so in index.razer this looks like every index.razer you've probably ever seen in a Blazer app is just some fixed content on the page in this template this page will be server side rendered it's not doesn't need interactivity there's no buttons no nothing there on on here so it's just going to render from the server and be done on the counter component we have the normal counter counter component code but at the top we are saying you know what this counter component I want to be interactive and I want to use Blazer server for that so this is an interactive component and then the show Data Page this is the weather forecast page and it's going to render all the weather forecasts into a table of weather forecasts it has a little again a simulated API call if you will to go get the weather forecast data so it has an async task that will happen when the component is initialized and it's set up to do streaming rendering so you can see all the new.net goodies if we run this and you can tell we're using.net8 because we get that little security pop up that that security pop-up happens because uh HTTP 3 is now enabled by default and requires certain TLS features that require that acknowledgment from Windows for some reason uh but anyway here's the the home page this is just a server-side rendered page you know all the content is right there if we look at the source on the counter the counter does work it's an interactive component it is the only interactive component in this application this is the only page where a circuit needs to be set up and then on the fetch Data Page you see the loading dot dot and then the weather forecast table renders so we're getting streaming rendering as well so this is how you can quickly get started with playing around with the new uh full stack web UI features in Blazer in.net8 um yeah for the web assembly stuff there's a sample that you can go look at but it's feature preview there'll just be another check box but we'll set up the whole template for you so you can also do webassembly um one little note we had previously um we were previously trying to do a single project model for both Blazer server and Blazer webassembly like Blazer webassembly is kind of interesting right because it's actually a separate process like it's a separate really a separate build output from your Blazer app you have code that's going to run on the server and then you have code that's going to run in the browser on the client you probably don't want those to be exactly the same thing like there's server side code that just won't even work in the browser and you want the code that goes to the browser to be as small as possible so you want to carefully manage what code you put in there we had hoped to have a single project model where we used multi-targeting to build it for both the server and the browser in one project that turned out to be pretty complicated because of all the concerns with building for the browser like a lot it was really easy to have a lot of code that you didn't want go to the browser end up in the browser so for dominate the plan is still that you will if you set up the webassembly render mode you will still need multiple projects you will still have a client project and a server project that makes it really clear what's actually being built for the client and what code will be shipped down to the bathroom so if you've been watching earlier demos that's a that's a change a slight change in Direction I still hope that we'll get to that single project model honestly but not for dominate all right what if you have existing Blazer apps how do you upgrade them to dotnet8 well the good news is is it's trivial you just retarget your app to dot an eight update any nuget packages to the dominated versions and they will just work you don't have to change any code your existing Blazer server and Blazer webassembly apps still supported still will be completely functional you then have the option to further upgrade that app to use the new dominate patterns like if you want to switch from blazerserver.js to blazerweb.js and enable server-side rendering and streaming rendering and those features in addition to the Blazer server stuff then you can do that too and we will provide guidance and docs on how you do that let me demonstrate real fast so let me go back to visual studio let's create a new project I'm going to create a Blazer server project for for this demo now in dot net 8 because the Blazer web app template actually can do everything that a Blazer server app can do we've removed the dot and 8 version of the Blazer server template you should just create a Blazer web app if you're if you're a Blazer server developer just create a Blazer web app and you'll have what you had before and more but for this demo I actually want to start with a.net 7 laser server application just to prove a point uh so there we go so here's a.net 7 Blazer server app you can see that it's targeting.net7 in its project file we run it it should work and function as any other laser server app would yep all functional okay and what do I need to do to change this did it on an eight did I just do that like Target 20.8 and now this is a dotted eight Blazer server app it's just that simple if I rerun this again um well I guess and well you can tell it's a dot 8 app because we get this at security prompt saying it's now using HTTP 3. so let's go ahead and allow that and then it should run again I think it ran again did it run again let me uh let me just I'm just gonna make a little code change just because I want to make sure that we're actually hello from.net save and let's run that I think sometimes it just doesn't pop again okay so it was running it's just that visual studio for some reason didn't bring the the browser to the Forefront so we're running on.net.net8 now all we had to do was change the uh the TFM and if you have packages make sure you update your packages to the donated versions as well if you want to then take this Blazer server app and turn it into the the new Full stack web UI model we'll have docs and samples on how to do that I have one on my GitHub repo uh Dan roth27 net 8 Blazer server this this repo here if you want to see that this guy right here this has it starts with a DOT Net 7 Blazer server app and then has commits that walks through how you upgrade it to dotted eight if you want to use all the new bells and whistles and there's some you know steps here outlining on how to do that okay it should be straightforward upgrade what if you're using MVC or Razer Pages or something you're not using Blazer um what does this all mean to you well we have been progressively adding more and more features that enable you to integrate Blazer into existing MVC and racer Pages apps and really any kind of app like if you have a react application or an angular application you can add Blazer to that even prior to.net8 we have been shipping a component tag helper that you can use in an MVC view or a Razer page that allows you to render a Blazer component as part of that page that's already supported today you can do that with with.net7 newman.net 8 we're adding a Razer component result which you can return from a minimal API or you can even return it from a MVC controller action and say instead of like rendering the NBC view I'd like to render a Blazer component and that's Now supported as well in done at 8. for other style apps you can always take a Blazer component and turn turn it into an HTML custom element and embed it in any web application that you want you can put it into a react app you can you can technically even put it into a web forms app I think we recently published a a blog post that described a migration strategy for web forms applications where you can kind of Whittle away at the UI controls by embedding laser based custom elements into the the the web forms application which is pretty cool concept I'll show you the Razer component result real quick plenty time okay great all right so let me um what I want to do I want to show God we're doing Razer component results so I wanted to do open recent projects this guy this guy okay so this is a a Blazer application but it's also got a couple of other things in it so if we look in program CS uh down here at the bottom I've got a you know minimal API effectively or a you know just mapping a route and I'm mapping it to this so slash route like literally route and all it does is return a Razer component result and it's rendering the home component I happen to name the index component in this app home I think that's a little more natural honestly but whatever it's it's basically the index.razer file and I changed the home component to have a component parameter like here you can see it takes a a string message and then renders it in the heading and so when I'm rendering that razor component result uh you can see that you can also pass in parameters that you want to pass to that component also I've got an MBC controller aptly named MVC controller and it has an index action and this is also returning a Razer component result again the home component and this time passing a different message saying hello from MBC instead of hello from what I do and the other one hello from Route yeah hello from Route okay so if we run this okay so this is this is the normal Blazer app but if I browsed and this is the the home component that's rendering and it's just doing its default text hello world but if I browse to slash route we can see that the home component is now rendering and it's saying hello from Route um we don't get the layout why don't we get the layout that's because layouts in in Blazer are applied using the usually using the Blazer router like the Blazer router sets up a default layout for all of your pages I'm not actually using the Blazer router here so I don't get that I could add the layout to the component using the at layout directive that would work as well but this is mostly just about proving the point that I can render a Blazer component from anywhere I want um if I browse to slash MVC slash index then now it says hello from MVC so I'm hitting an MVC controller which is now returning a Blazer component as well so that's how you can use Razer component result to render laser components in a variety of places now one of the happy side effects or a convenient side effect of the work that we have done to enable um server-side rendering with blazer is that you can now in.net 8 render Blazer components completely outside the context of an HP request and completely outside of the asp.net core environment you can take a razor component and render it to HTML directly as a string or just as a stream and then do whatever you you want with it this is useful for scenarios where you want to like just generate some HTML like for maybe you're trying to send out some emails or trying to generate some HTML fragments for something it also would be useful for static site generation we planned uh you know we have in our roadmap to add static site generation support to Blazer what that means is like instead of waiting to for the request to render the component what if we just rendered the components at build time generated a bunch of static files that you can then you know put on a CDN and distribute everywhere that would be super fast that's something we also expect to add to Blazer in the future not for.net 8 but this work is laying the the groundwork for that capability as well so let me show you what that looks like uh so let's go to this project so Razer HTML rendering this is just a console app this is not an asp.net core app we're not setting up the ace net core host there's no HP requests happening here um we have a component that's my component.razer that's just rendering the current time and we're using this new API from dotted 8 the HTML renderer to take a component and just render it to a string or to a stream here we're calling render component async that's how we do that we pass in the type of the component we want to render again you can pass in component parameters that you want to feed into that component so that they get used when the component renders and then here I'm rendering it to a string but you could also render it to a file like to a file stream that works as well and then taking that HTML output and just writing it to the to the console the one little tricky bit here is that components need to be rendered in the context of a component dispatcher that's what this dispatcher property is on the HTML renderer so you first got to call this call invoke async and then within that context you do all your render component async calls that's the only sort of tricky bit about this otherwise it's very pretty straightforward so if we run this this is just a console app and you can see up above we took a component rendered some HTML from it no requests no ways minute core this is a way that you could start to use Blazer components for like templating of any HTML content that you want so that's generating static HTML content with laser components what about webassembly we continue to invest in our.net webassembly capabilities the.net web assembly runtime is getting a whole bunch of new features and improvements in.net 8. if you're using ahead of time compilation we are now turning on simd and exception handling support the using the the extension webassembly specs by default which significantly improves the runtime performance of your of your code we are working to preview multi-threading support for Blazer webassembly in.net8 the pr is out for that right now it's it's looking like that might still stay in preview 4.8 but it will be available like you will be able to take bill create a Blazer app enable multi-threading and use it it might not be fully stable yet because there are some there's complexities with doing multi-threading inside of a of a browser but uh it's coming we've done a whole bunch of work to improve hot reload support when running.net code on webassembly the.net webassembly runtime now has full parity with the supported set of edit types that core CLR supports so all that whatever edits you could do with like a Blazer server app or an MVC app you should now be able to do those same edit types in a Blazer webassembly app which is pretty great a feature that I'm really excited about is jit interpreter Blazer webassembly apps today by default will run on an interpreter-based runtime so it's taking your.net IL code and interpreting it in order to execute it there wasn't really a it's not really a great way to do jit like a full jet at least on webassembly so we're doing interpret interpreter-based approach instead and that impacts runtime performance like it's not going to be as fast as like a full jit server based runtime but in Dot and 8 we have found a way to add at least limited uh support The Interpreter now has an additional tier where it will take chunks of your.net code at runtime jit out or you know generate out a webassembly modules small webassembly modules that can then be loaded synchronously at runtime and optimize code paths in your Blazer webassembly app and this is resulting in some pretty significant runtime performance improvements like 20 20 faster UI rendering 2x faster adjacent to serialization times so you should see your Blazer webassembly apps in.net8 just get a perf boost you don't have to do anything it's just on by default so that's the the new distributor limited jit support Blazer webassembly apps in.net8 are now uh CSV compliant so if you need to have enabled the content security policy uh based loading restrictions on your app you can now do that with your Blazer webassembly apps and we're also introducing a new packaging format for Blazer webassembly apps called webcil that's more web friendly.net assemblies are windows portable executable files like Windows PE files in some restrictive environments they take issue with that like you're just going to download some dlls across the internet like they run in the Blazer and in the browser security sandbox so you can't do any a laser can't do anything with those PE files that you couldn't already just do with JavaScript they're still in that sandbox but some security software will see the dll and be like nope and it'll just block the application when we've received some reports of that so in Don at 8 what we're doing is we're stripping off all the windows PE specific stuff from the.net assemblies when we package your Blazer webassembly app and then repackaging that content as a as a webassembly file has a wasm file and using that instead and that should hopefully avoid any of these issues where people deploy into like a really restrictive environment and then see their Blazer webassembly app get uh get blocked so that's the new web Cil packaging in in dot 8. again on by default don't need to do anything just redeploy your app and you'll get the new uh the new friendly Packaging in the Blazer framework itself there's also a bunch of new features um so quick grid we previewed quick grid with dotnet7 quick grid is a fast and functional data grid component for Blazer that comes from the the Blazer team in dotted 8 we're going to ship a stable version of quick grid that you can just use to display your data um section support is coming in.net8 sections is a way that you can create an outlet for some content on one component that can then get filled in by another component if you've used MVC your razer Pages before it's very similar to the section support in uh like views and and pages except now done with Blazer and Blazer components um uh with client-side routing we can now route to a specific named element on a page so you can like navigate to a particular spot on the on the UI for Blazer server apps we're adding new apis so that you can monitor your circuit activity and uh in the future handle idle idle circuits like if you have a circuit that's just someone you know open up the browser and just sat there and then went to lunch and isn't using the those server resources you might decide you know what you're not using this I'm gonna shut this down so that you free up those server resources and we're also doing a bunch of uh authentication improvements in in.net 8 across the board not just for Blazer but they will enable you to completely build and customize your identity UI using the Blazer programming model a few words about that we've heard a lot of feedback from our aspinet core users that they'd like to see a better story for authentication particularly for single page apps for for spot apps the problems with authentication and Spa apps today are well for one thing uh today we use open ID connect to set up authentic authentication for these apps and we use a third-party component to do that called duende identity server when the identity server is a great great component awesome awesome project of the folks that run it really know what they're doing um but it now has a commercial license and honestly for a lot of apps having a full oidc server is a bit Overkill like you don't really really need it um that was one problem the other problem is that the UI that we give you the default UI at least for asp.net core identity was built with Razer pages but if you're building like you know a react app that's a little weird or you're building a Blazer app like I want my identity UI to be in Blazer I want it to be in re and react so what we're doing in dotted 8 is we're we've we're removing dwende identity server from our from our templates you can still use them like they have awesome templates of their own that you can leverage to set them up and we recommend doing that if you need full IDC compliance but instead we're introducing our own set of client-friendly endpoints for identity management that let you get like Bearer tokens or get a set of cookies and query the identity data stores to get information about the the users you can then use those endpoints to build out your own identity UI and we'll provide samples and content for identity UI for Blazer and then I think we plan to do angular and and react so that's coming in.net8 I want to show you two of the other uh Blazer enhancements really quick let's go over here let's look at uh actually I took a quick grid real real fast if you haven't seen it before so the easiest way to see quick grid is go to the click grid demo site so that's um akms Blazer slash quick grid okay so this is a this is a Blazer app and we can see an example of quick grid here quick grid is a fast lightweight and functional data grid component it supports pagination it supports a sorting you can do filtering search for all the Canadian metals and so forth it also supports data virtualization so this is a quick grid example that's loading you know 22 000 rows of medicinal data sets as I scroll you can see that the data is being loaded as I scroll as opposed to sucking in all 22 000 rows into memory at once you can completely style it uh yeah it's a very designed to be fast and very functional component it doesn't have like every single data grid feature like if you're really looking for every Bell and whistle on your data grid then we definitely recommend go and check out the the commercial data grid components or some of the community ones from the component vendors or the various open source projects but for many scenarios it's it's more than adequate so that's data grid we'll have a stable version in.net8 so you can just add to your existing apps and then let's look at sections laser sections okay so this is a Blazer application and sections allow you to Define outlets for Content so here in my um my layout I've defined a section Outlet using the new section Outlet component you just give it a name so I'm calling this one top row that's because it's in that sort of top row gray bar that's in every Blazer template and then in the pages I can then provide section content for that outlet so on the home page we've got the section content again same name and here I'm just providing some static text so we're going to stick home up in the top uh in the counter page we've got section content and here we're adding another button that is like a an additional counter button so we got two counter buttons now and then on fetch data we have a section content that is just rendering the uh the weather for I think it's for the weather for tomorrow okay so if we run this okay so on the home page you can see up here it says home up in the corner there's our section content being filled in on the counter page we've got a counter button up top and a counter button down below they both work so we got two counters um fetch data you can see that the the weather is supposed to be chilly yep tomorrow and it shows up in the the section Outlet as well so that's sections very much like sections in MVC or razor Pages if you're familiar with that except now you're using components in order to set that up all right cool so here is a summary of all the stuff we've talked about all the things that are coming to Blazer in.net 8 full stack web UI of all the the new capabilities server-side rendering streaming rendering enhanced navigation form handling interactivity uh and uh deciding the interactive render mode at runtime we have a bunch of framework enhancements that we're adding about the newly can generate static HTML using Blazer components quick grid sections routings named elements and then a whole bunch of webassembly runtime improvements as well including preview multi-threading support most likely we'll see maybe maybe we'll get it stable I don't probably preview the jet Jupiter support hot reload improvements webcil packaging and so on if you're a back-end developer uh there's lots of great stuff in asp.net core in.net 8 as well like on the first server side development we are on a journey now to enable full native aot for asp.net core apps in donate H we're targeting minimal apis where you can take your code and completely pre-compile it for the architecture that you're targeting get much better memory characteristics smaller deployment sizes much faster startup times new middleware for request timeouts and short circuits we're adding a bunch of metrics so you get much better observability for your asp.net core apps Kestrel in dot at 8 now supports main pipes so it has a completely new transport we already talked about how hp3 is now enabled by default a whole new authentication Story in.net8 the new identity endpoints and then also an API development experience and dominate that's vastly improved lots of great productivity tooling and features that you can use to build out your your apis so front end back end using.net we've we've got you covered that's what I had today I hope you enjoyed learning about this stuff if you haven't go install.net7 that's the supported production ready version of.net you can build your Blazer apps with right now and if you would please try out the donating previews give these features a spin there there will be rough edges still there's there's things that we're still working on we're you know pushing out the features as fast as we can can Implement them but your feedback helps us make sure that they're meeting your requirements meeting your scenarios and making Blazer as good as it can possibly be and with that I'm happy to stick around and answer some questions thanks everyone [Applause] foreign so it's it's up to you like this is a policy that you get to Define in your app like a lower power device maybe is like a an older phone right like or an old tablet where you're like I don't know if it's got the the the CPU the the the the juice in order to run my application and I'm going to offload that work to the to the server so how you would detect that like you'd have to use the like the HP request like whatever headers you get back from that uh that device um to know what kind of type of device it is but it's up to you to write that policy we don't plan to provide that as like an out-of-box thing is okay do we have I don't we don't really have official guidance on that um I can't say that I mean we have received feedback that on um lower end devices Blazer webassembly can drag um I don't think we have great numbers yet like okay you need at least this this level of device in order to have a really good experience on the the client we probably should and it's well what would be better is if we just improve the Blazer web of some of the experience so that even on low power devices it still works well um that's that's work that we have on our backlog to investigate as well hopefully you know interpreter like that will help because it speeds up the runtime performance some of it is though is just like the browser itself like how long it takes the mobile browser that you're using to like compile the webassembly code and get it up and loaded and running sometimes you know the platform itself is just a little sluggish compared to more modern devices um something we should do better job of providing guidance on yeah yeah so um there's a new there's a blog post that we just put out about this um uh it's the system web adapters 1.2 blog post the the trick that you can do is that you can take a Blazer component and you can turn it into an HTML custom element when it's an HTML custom element you can render that anywhere like you it's it's it's it's you should just think of it as like another uh HTML element that the browser now knows what to do with so you could take like a Blazer webassembly based um uh Blazer custom element and just embed it directly into a um uh web forms app that would work another pattern that you can do is you can put a Blazer server app in front of your web forms app this is what we call um the incremental migration pattern where um you have an existing asp.net app that's that you want to upgrade migrate or upgrade to the like latest.net platform you put an acement core app in front and then use our reverse proxy use yarp so that uh it requests go to the asymmet core app first but if they don't get handled by the asymmet core app then they get directed to the asp.net app so it looks like one app but you can start slicing off pages what's that kind of prioritize them yeah yeah taking it gets a first shot at the request so that way you can slice off pages of your app and migrate them to say MVC or whatever you want a page at a time because a lot of times people have these apps that are still developing and it becomes this race like I'm trying to Port it to aspenic core but I'm still developing the app and so I'm always it's always a moving Target the incremental approach allows you to keep developing the ace banana uh net app while you're while you're upgrading if you do that you could put a Blazer server Hub in the asymmetic core app and have Blazer server components that get embedded as custom elements in the web forms app and even be using the Blazer server model there to like Whittle away like a control or a component at a time that's a a pattern that we have now guidance and samples on how you could set up repeat the question yes so the question was um uh can you I mentioned before about embedding Blazer components into a web forms app is that something you can do and the answer is yes by leveraging the custom element support in Blazer thank you any other questions you're excited yes I'm excited as well I think it's going to be pretty epic one model to build all of your web UI components server client interactive or not whatever you want to do you'll be able to do this with with the Blazer programming model I think it's going to enable some pretty compelling experiences anything else I will of course be here uh later today at the ask the experts table so if you want to chat about your latest Blazer War Stories and what's you know going well what's going wrong feel free to come find me I'm happy to chat I'd love to hear your feedback on things that you think maybe we should be doing better in Blazer that's all cool and I'll also be here tomorrow at the the table the experts table event as well so I'll be around if you didn't get your question answered today or you think of something after the the session uh but thank you everyone for being here I hope you enjoy this and uh try out Don at eight thanks folks

Channel: dotnet

Views: 66,367

Keywords: .NET

Id: QD2-DwuOfKM

Length: 66min 20sec (3980 seconds)

Published: Thu Aug 03 2023

Reddit Comments

[u/xita9x9]

The ability to serve pages using traditional SSR and create islands of interactivity (server/wasm model) only when you need it (per page or per component), is really interesting.

[u/Shadow_Mite]

Hopefully hot reload works when it’s supposed to

[u/girouxc]

Wish they would have gotten the single project working for mixing server/wasm. Hope they’re able to navigate the complexities involved in future releases.

[u/Vegetable-Bus2379]

I'm looking forward to .NET 8 and Blazor. There's a lot of good features coming, so many Dan has a hard time showing them all in a 60 minute session.

The sections feature alone is really useful http://www.telerik.com/blogs/aspnet-8-blazor-sections-fully-explained,https://www.telerik.com/blogs/aspnet-8-blazor-sections-fully-explained

[u/Arjenlodder]

Looking forward to it! I'm wondering how a Bearer Token (for API calls) should be shared between the WASM and the Server, when using the Auto RenderMode. Anyone has an idea about this?

[u/[deleted]]

It sounds like he’s saying use ssr for non-interactive stuff, and auto mode for interactive stuff.

I wonder why not just auto mode for everything? Too much unneeded websocket use and too big dl size for mobile regarding reserving battery?