Full stack web in .NET 8 with Blazor

all right so I'm I'm Daniel Roth I'm the product manager at Microsoft for Blazer Blazer is our web UI framework based on the trusted.net platform to enable greater productivity performance and security when building modern web apps these days web apps use a lot of different approaches to deliver the best UI experiences sometimes you want to render from the server you render a page in response to request so it loads really fast and so that you can easily index it in other cases your UI might be best handled from the client like you might want that rich interactivity and access to client capabilities with blazer in.net 8 we're doing work to enable you to use Blazer's convenient component model to handle all of your web UI needs from both the client where Blazer shines today and also from the server and that's what I'm going to show you today so this application this recipe app is built entirely using Blazer here it has a list of recipes on the home page we can look at recipes and see their ingredients and instructions and so forth and yeah it's almost lunch time so these pictures are making me very hungry but let's look at what this app uh is like in the browser Dev tools to see what it's doing so I'm going to refresh the home page now on the homepage of this app this is a Blazer app but if I filter for just the websockets sorry for webassembly there's no web assembly being downloaded for this Blazer application if we go to websockets there's also no websocket connections there's no JavaScript even being downloaded for this app that's because the entire app is being fully rendered server side doing server side rendering so Blazer in dotted 8 we're adding support for server-side rendering using your Blazer components I'll show you what that looks like in the code so this is the the project this is actually part of the um like the full asp.net core GitHub repo it's a sample app that's tucked in there let's look at the pages for or the home page and the recipe details so each of these pages is set up as well they're Blazer components and they're set up as routable endpoints like in the server sense as of of an endpoint so a request comes into the server that gets routed to the corresponding Blazer component and then it does a full HTML render to to the response so server side rendering with blazer components it's just that that simple You author your components exactly the same way as you would do in Blazer today we can do form handling as well so let's go back to the home page and I'll do a little search here for some chocolate recipes that was a form get request so that we could get the chocolate recipes there's another form down at the bottom of each recipe where we can submit our reviews you know tastes great and we'll submit that and then if we look at the bottom we can see that our review was added so that was a form post request if I submit the form without any data then we also get a validation as well so validation is working with these forms how are these forms implemented well this is the recipe Details page component if we scroll down a bit we can find that star rating reviews component at the bottom I'm just going to go to its definition so we can see how it's how it's done how it's implemented and if you've used Blazer before you might recognize these components these are the built-in Blazer edit form and input components for rendering a form and these components when you're using server-side rendering they will bind the request data they'll validate the data run validation and then then call your on submit Handler all from the server so you can do form handling server side as well okay so that's server side rendering with blazer in.net 8. now because we're using Blazer we can actually start to enhance the users experience of this app because it's doing server-side rendering every time I do a navigation right now it's doing a full page load you may see this like little browser blip while it loads the page and that's that's standard for a server-side rendered applications it's a little bit a little jarring a little little jolt there also you may have seen when I submitted this form let me do another one just so you can see it again that it's doing a full page load so I lose the scroll position we end up back up at the the top of the page but we can improve that experience by adding just a little bit of a Blazer uh implemented client-side logic so I'm going to go back to the app and let's go to the main layout component and at the bottom of the layout I'm just going to uncomment the Blazer script and just oh didn't mean to completely restart but we'll restart the application could have just applied that so this will then enhance the way the navigation is done in the application and also the way forms are handled we'll just wait for that to come up when navigation occurs it will still do server-side rendering the page will still render a full HTML response but Blazer will intercept that request and grab the return HTML and then intelligently update the Dom so it doesn't have to do a full page load similar thing with a form request when you submit the form request it's still going to render from the server with this application but when the HTML response comes back Blazer will then intelligently update that into the the Dom let's see how our build taking just a second here do a little dance on the stage well the the rebuild happens yeah because this is part of the full instrument core repo sometimes it takes a second to get the rebuild there it goes okay so now point for the browser to pop up and we should see an enhanced navigation experience any second Visual Studio I Believe In You There we go okay so now as I click around on the pages you'll notice that that that little blip of the browser it's gone the navigations are fast they're silky smooth if I scroll down to the bottom and submit another review you know great whatever we can add that review and we no longer lose the scroll position so that's enhanced navigation and form handling now some pages in an app like this might need to do long running async tasks in order to to render the page like for these recipes maybe we're getting those from a database or maybe they're coming from an API call and that might take some time normally you have to wait for all those tasks to complete for the page to render so you might get a delay like if I go into this app let's go find where we're getting the recipes here where I'm calling get recipes and I'm going to add a simulated database call by just adding a task.delay so it's not a real database call but let's all pretend work with me here um so now we have a you know we're going to get those recipes and it's going to take a second we'll let that apply to the app so now if I like navigate away and then click back ready click there's a one one thousand then the page renders or if I refresh the page click one one thousand now the page loads that's because we're waiting for all those that database query the async tasks to complete but with Blazer and donate we can improve that experience using a new feature called streaming rendering streaming rendering is a form of progressive enhancement where we allow the page to immediately render before while those async tasks are running and we put placeholder content on the page while you're waiting and then when the task complete Blazer renders the component again new HTML but it comes in the same response connection it's not a new connection there's no web sockets Blazers receives that additional payload and then just updates the Dom again so that seamlessly updates let me let me show you what that looks like I'm going to go to the home page of this app and I'm going to uncomment this streaming rendering attribute to enable streaming rendering on the home page and let's go ahead and rebuild that now you may notice on the the home page we have a little bit of rendering logic when the page initially renders if we don't have those recipes yet then we will render this placeholder loading recipes dot dot dot we'll go back let's see the rest of the code and then when the database query completes this component will actually render again from the server and we'll get all the recipes rendered onto the page okay so now if I refresh the page let's refresh you see loading recipes dot dot and then a second later the database query is done and the page seamlessly updates so that's streaming rendering it makes your app uh feel more responsive you get pixels on the screen much much faster so our app is feeling more like a single page app like a spa even though it's still doing completely server-side rendering okay now I'm going to add let's let's add some like Rich client interactivity to this app stuff that Blazer was was born for so we have this submit recipe page with a recipe editor that we can use use to add recipes to the application and I want this to be a really nice sophisticated UI like I want to be able to upload an image for my recipe and instead of just showing the file name I want that to actually show like a preview of the image and we have this recipe editor where I'd like to be able to you know add all my ingredients right now if I click this add button it doesn't do anything I want this to let me like build up a list and I can reorder it using drag and drop and all that stuff why isn't it working yet that's because the page is still doing server-side rendering it's not set up for interactivity yet but let's go ahead and do that so I'm going to go back to the application and let's go find that submit recipe page there it is and I'm going to add a render mode to this page in this case we're going to use I'm going to get this going but we're going to use blade server render mode which is Blazer server so all the UI interactions are now going to happen over a Blazer server based websocket connection so we can get all that interactivity being driven from the server but now interactively okay so let's go to submit recipe and now if I try to upload a picture let's do the oatmeal ah I get my image preview my client side logic is kicking into gear if I add some ingredients like let's add some flour and a couple of eggs and of course some pickles or whatever it doesn't matter uh we can now toggle between imperial units and metric units and we can drag and drop things we're getting all the great interactivity that Blazer is known for so that's now that's now an island of interactivity in what is otherwise still a server-side rendered app like if I go back to the home page and let's bring up those browser Dev tools let's remove all the filters let's refresh the home page and see what we got like do we have any websocket connections on the home page no nothing yet but when I go to submit recipe aha now the Blazer Server websocket Connection gets set up uh it's the page is now interactive when the user leaves that page that connection can be freed up on along with all of its corresponding server resources so a little island of Blazer server in my server-side rendered app we can use Blazer webassembly too we just change this render mode from server to webassembly and we'll go ahead and restart that now what's interesting about using webassembly is normally that requires like a separate project in in this version in.net we have we're working on a single project model where your Blazer webassembly code and your server code can coexist in a single project thanks to multi-targeting like we'll build the same project twice once for Server once for client I'll okay let's bring up those browser Dev tools to see what happens with blazer webassembly I'm just going to clear the site data to make sure I don't have anything pre-cached and now if we refresh the home page okay do we have any web assembly yet not yet I go to the submit recipe page and then the.net webassembly runtime gets downloaded and cached for this page if I have other pages in the app well it'll be cached so they can just be reused and doesn't have to be downloaded again so I'm able to add interactivity it still works like we can show that this is functional let's pick a you know this marshmallowy picture yep it's all functional we can add interactivity using Blazer server or Blazer webassembly on a per component or per page level it's pretty cool um but wouldn't it be even better if we could decide on that render mode automatically like at run time like maybe we do something clever where we start users out with blazer server where we need interactivity and and we because that loads fast right like you get the page going really quick but we download the.net webassembly runtime in the background so that it can then be cached and used on future visits then if the app detects that the runtime is already available it can switch to using Blazer webassembly instead that sounds like that might be pretty nice let's switch this render mode from webassembly to Auto the auto render mode this will I need an O on my auto not not that kind of O not that kind of O this uh this will allow the app now to decide at runtime which render mode to use it will start with blazer server and then Flip Flip to Blazer webassembly if it sees that the.net webassembly runtime is already available I think we can get rid of some of these other tabs okay browser Dev tools one more time let's clear out any Blazer web assembly stuff that might have already been downloaded move our filters refresh okay on the home page do we have any web assembly no web assembly do we have any web sockets no web sockets but if we browse the submit recipe okay so now we've got the Blazer Server websocket Connection going so we're interactive but at the same time in the background aha we are sneaking down that.net webassembly runtime and caching it now which one are we using we can see that from the browser Dev tools here we can see that this app is actually running over a websocket so right now it's using Blazer server but if the user comes back to this app later let's let's simulate that by just refreshing the page aha now it has flipped over to using Blazer webassembly instead it's running from the client we can save on all those those server resources so with Blazer and dotnet 8 you can use Blazers component model to get the best of client and server for building your your web UI so that's full stack web UI development with blazerin.net 8. that's just some of the new stuff that's coming to Blazer and the rest of the.net stack and the dot at a time time frame if you haven't already tried it out encourage you to download the latest dot edit preview and give it a spin that's what I got for you 30 seconds left awesome give it up for Daniel Roth everybody [Music]

Channel: Microsoft Developer

Views: 58,436

Keywords: .NET, Blazor

Id: 0MBeYc9qcWY

Length: 14min 33sec (873 seconds)

Published: Wed Jul 19 2023