Full stack web UI with Blazor in .NET 8 | .NET Conf 2023

[Music] all right hello everyone I'm Daniel Roth product manager for Blazer on theet team it's great to be back here at my favorite developer conference. NETCOM I'm joined online from across the globe by my good friend and colleague Steve Sanderson Steve do you want to say hello hey yes Steve here looking forward to Shar you all what up to awesome thanks Steve we're really excited to be here today to share with you how Blazer in donet 8 is ready to handle all of your web UI needs so that you can build great web user experiences faster Blazer is our front-end web framework foret Blazer helps you build Rich interactive web apps using doet and C it's part of asp.net core our umbrella web framework for.net and it ships as part of the net platform Blazer is based on 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 and uh displaying large virtualized data sets they're also great component libraries for Blazer available from theet Community with blazer you can use open web standards to build install able web apps that can function offline we provide Rich tooling for blazer with visual studio and visual studio code including project templates support for hot reload and AI powered code editing and while you typically write your Blazer apps in C you can also interoperate with JavaScript if you need to so whether you're one person or one team Blazer helps you build fully featured web apps faster and with fewer resources you can get started in just a few minutes and then stay productive using one language one framework and one tool chain that's integrated with net a supported platform that you can trust now Blazer inet 8 is no longer just a client web UI framework Blazer now has smart web UI rendering that leverages the capabilities of both the server and the client it's full stack web UI Blazer now has Advanced server side rendering capabilities with components including static server side rendering enhanced navigation and form handling and streaming rendering so you can optimize page load time and really polish the user experience you can then add interactivity for your components wherever needed either from the server using Blazer server or from the client via Blazer web assembly you can even use both together in the same app and automatically shift users from the server to the client at runtime to again improve appload time and scalability let's now go to Steve Sanderson and see what building full stack webui with blazer in donet 8 looks like if you've used Blazer before you probably know that we've always had two hosting models available for you to pick from Blazer server and Blazer web assembly as a quick recap Blazer server is a mode where your application is running on a server probably in a cloud somewhere and it communicates with the user's browser using a websocket connection with signal R so it can send the UI in real time into the browser and receive events back from the user the other hosting model that we've always had is Blazer web assembly where you compile your application in a certain way that lets it run on web assembly inside the users's browser okay now those are the two hosting models we've always had and they're not going away they are both an essential part of what we're doing in net8 and Beyond but we're now also introducing a third capability for you a third hosting model called Static server side rendering and this is in some ways the simplest of the three modes all we have here is your net application running on a server somewhere and to communicate with the user's browser it just does the most traditional thing that web servers have always done it takes HTTP requests coming in and it replies with some HTML but you still get to use the Blazer component programming model except now you don't have to use either websockets or web assembly so what is static server rendering good for and what kinds of things would you want to build with it well one thing it's extremely good at is scale it's great for reducing the load on your server because you don't need to have any websocket connections with each user and it's great for reducing the load on your end users because they don't need to download any web assembly files so you can serve your application much faster faster and more cheaply than you might have been able to in the past secondly it's really good for sites that are mainly about presenting information so mostly readonly public websites things like blogs e-commerce search engines things where the user is mostly coming to read information and the kind of interactions that users can have with your site then are what they traditionally have in HTML which is navigating around through links and entering data in forms and many applications can be built this way now there's a couple of things that it's not really so good for for example it's not a way of having arbitrary interactivity the sort of thing that you would think of as a single page application Rich event handlers and it's also not good as a way of pushing real time information to the user because there's no code running in the user's browser after the page initially loads but don't worry if you want to do either of those last two things you absolutely still can because we allow you to Mark any component or page as running on Blazer server or web assembly for full interactivity and I'll show you that later in this talk let's have a look at this in action here's an example of an e-commerce site the sort of thing that is really good to build with Blazer's static server rendering feature this comes from the eShop sample that you'll see in various talks in this conference and you can get the code and have a look at it yourself uh but let's just see what the user could do with this application well they could explore and try and find some products they could search by different brands uh or they could look for particular types of products let's see imagine I want a jacket uh well I really like the look of this colorful one here so I'm going to add that to my shopping bag uh in fact I like it so much I'm going to add a couple more then I'll go into my shopping bag and I'll realize that I don't really want three of them let's just have one I'll update that I could go into checkout and of course I've got all the kind of validation features that you'd expect on a page like that right so how is that implemented well you won't be surprised to learn that that is implemented with blazer uh so let's look a little bit of code in there uh here's the code for the catalog page that we just saw that was used on the homepage and this uses the same Blazer programming model that's always worked with blazer for example the same kind of life cycle methods uh when this page gets initialized it's going to uh use normal net code to fetch some data from a back end data store and that populates this catalog result here and then if we scroll up here you can see we've got normal razor syntax to Loop over all of those items and display a Blazer component for each one of them okay so it's the traditional Blazer programming model but it's not using websockets or web assembly it's just statically server rendered how does that work then how do we tell Blazer to do static server rendering let me show you how this works imagine you're building bu a website like this it's got a few different pages in it some are for the general public some are for admins only some are static some are interactive now if you were doing this with blazer before net8 you would have to decide upfront whether it's Blazer server or web assembly and whichever one you chose that would apply to the entire application so every single page would be coming out of either Blazer server or web assembly depending on which one you've picked now this approach is still available in Donna it's not going away your existing applications can just be brought forwards and can carry on working this way if you want we now call This Global interactivity it used to be the only option but from net8 onwards it's not the only option anymore so as of donet 8 if you're building the same site then by default each page in it would be rendered using static server rendering so that's the simple cheap option and whenever you want any individual page or component can be marked as requiring interactivity with either web assembly or server and you can choose that on a per page or per component basis and everything works together in a single site and this new pattern is now what we call per page or per component interactivity being able to render HTML is of course great but we didn't just want to stop there we've gone further by adding various enhancements on top of server side HTML rendering to allow you to produce a better user experience than would normally be possible so I'll show you each of those features now starting with streaming serice side rendering this allows you to render the page before you've even loaded the data that needs to go onto it so if you've got some long running database query or some API call that you would normally need to wait for well traditionally you can't return the HTML until you've got all the data that needs to be in it but with streaming rendering we can skip that process render the initial HTML straight stra away and then stream updates into it as the data becomes available and in fact you've already seen that because we were doing that inside this e-commerce site if I go back and start looking through different brand options or looking through different types of products you may notice that each time I navigate I see this loading sign appears at the top there while I'm waiting so how is that even possible traditional HTML can't display States while it's loading it can only just display the final state so to understand this more I'm going to switch over to a much simpler example almost the simplest possible thing that I can do uh over here so all I'm going to do in this very simple example is display a count that increases over time so it's Blazer and when the page first starts we've got a count and we're going to Loop five times and each time we're going to wait for 1 second we'll increase the count and then we'll trigger a UI update now the only reason I have have to call this is because I want to show all the intermediate States if you just want to show the first and last state then you don't actually have to call this so normally you wouldn't but in this case I want to show all the states so if I compile that and I run that inside my browser what am I going to see well I'll come over here and I'm going to start it loading and I don't actually see anything I'm just waiting and I'm going to have to wait for a full 5 seconds before eventually it just displays the final state so that's how traditional server rendered HTML works you will only see the final State and we can see that even more clearly if I load this in curl on the command line when I start that going now we just have to wait and wait and wait for five whole seconds before eventually we just see the final State the count is five okay now watch what happens if I enable streaming rendering I'm going to put an attribute here stream rendering okay and then I'm going to go back into curl on the command line and hopefully we will see that behave a little bit differently so I'm going to start that running again and this time you see we actually get the initial response immediately saying that the count is zero and it goes through all the different counts uh start ending up with the final count of five so what does that actually do inside a browser well if I reload here you'll see I see all the counts and they increase and it updates the UI each time some new bit of information is available now Blazer know about all the tasks that you're waiting for it knows which bits of the UI have changed after each task and is able to send a minimal UI update to the browser all part of the same HTTP response so that's what's happening here inside this e-commerce site each time we navigate we're displaying different intermediate states of the UI rendering until all the tasks are complete and we're able to render the final state so in summary this allows you to do an initial fast UI update without the user having to wait for all the queries to take place in the background and it also has a different technical benefit which is that the browser can start fetching all the static resources like CSS or JavaScript whatever else you're using at the same time that those database queries are happening on the back end now you might wonder why we didn't just enable this by default for every page why did I have to add this attribute explicitly and the reason is that you should only put this on pages when it actually makes sense uh you don't want to really put this on a page if the loading is only going to take a microsc anyway because then the user will just see this strange flash of loading that instantly goes away so you should only really use this if the loading is going to take a few seconds at least and you might want to render some sort of sensible loading State like a spinner or uh like a placeholders for different parts of the UI so it's up to you to decide how things should look while it's loading so you do still need to do a bit of UI design around that and another feature of static serice side rendering in Blazer in net8 is to do with navigation and it's about making your site feel faster snappier and more responsive to your end users in fact it's about trying to make your site feel as responsive as a single page application even though it's using traditional server rendered HTML so again I'll show you and once again you've already seen it because it was already inside this e-commerce site but you wouldn't really have been able to tell because this is running from Local Host it's all kind of instantly fast anyway you can't really see what difference it makes so to understand this a bit more again I'm going to switch over to an even more basic example so we can see exactly what's happening on the network and exactly what's happening inside the Dom so this is about the simplest page I can make that still has navigation in it and if we have a look in the browser's network tab to see what requests are happening when I reload this you'll see that the page has to do three requests to load there's some HTML some CSS and some JavaScript right now when I navigate from one page to another with a normal server rendered site with traditional HTML that is the browser would throw away the entire page and recreate another one from scratch and that's why it feels slightly slow slightly jerky compared with a spar technology but in this case we've got enhanced navigation on which is on by default so when I click on the about link the browser doesn't actually discard any of this information it's already got it only has to do a single extra HTTP request which it does using Fetch and then it swaps that content exactly as it is into the existing Dom and if I navigate back to home then you'll see that it's just done one more request and swapped it in place now to really prove that we're retaining the Dom I'll switch over onto the elements tab here and expand this a little bit now as I click backwards and forwards if you keep your eye on the elements tab on the right there see which part parts of it are flashing and which parts aren't the flashing parts are the bits of the domum that are actually changing and so you can see that all the other parts the navigation header the scripts the head everything that hasn't changed is being left alone and that allows the browser to do the UI update much faster than it would normally do okay now as well as just returning the Dom we have some other functional practical benefits to what's going on here uh in terms of controlling how the UI State changes so if I start putting stuff into this search box let's say I want to search for hello now when I click on the about link watch what happens to that search box well it gets reset back to nothing why is that well because it should right because the about page in fact every page has got an empty search box by default and so every time I navigate it's going to update the Dom to match what the server says the Dom should look like and by default the search box should always be empty but what if I want to retain the contents of that now traditionally that would be hugely difficult you would have to store the data in local storage or something painful like that but because of enhanced navigation I can Mark any part of the Dom as being retained during navigation if I want to so let's go and have a look at the code here here is my navigation menu that we've got here and on this form with a a box inside it I'm going to add an extra attribute I'm going to put data- permanent that's a Blazer specific attribute and that it tells the enhanced navigation system not to replace the contents of this element when the user navigates okay so now if I search for something okay and then I click on the about link notice how the contents of that text box are not removed anymore so as a developer you can control which parts of your page are retained during navigation which is not something you could traditionally do with static server rendered HTML so in summary this is a way of making navigation complete faster because the browser doesn't have to do as many HTTP requests since it can retain all of the static resources that it's already using it also allows the browser to retain most of the Dom Elements which again reduces the workload on the browser and makes the UI feel snappier you also get full control over which parts of your page have this feature it's on by default but you can easily turn it off at any level in the tree if you want to and the reason why you might want to do that is maybe you're doing some navigation to a page that is going to load some JavaScript that's incompatible with JavaScript that's already on your page in that case you might actually want to reset the page and hence turn off enhance nav for that one particular link but the point is you have total control over where this feature applies and where it doesn't the next feature of static serice side rendering to talk about is forms and that is of course how you can accept some input from your user and the intention with the design here is that you should have all the same features that you might know from Blazer server or Blazer web assembly and they should also work with static server side rendering and in fact in just about all cases it's even the same apis so you can even share code across all the different hosting models let me give you an example of that and like before I'm trying to make the simplest example that I can so pretty much the simplest form you can have we've just got a couple of fields uh one name and one price and you can click submit to submit that form and the way that works in terms of the code is like this so if you already know how forms work in Blazer you'll know it's the same thing so we've got the same edit form component the same input components here it uses the same binding system uh we've got the same validation system with data annotations validator and we've got our unvalid Summit here wired up to save product async and so if it's a valid product then we will add it to our data store and set this message that says product added so let's try it out back in the browser I'll try and submit a blank form and of course validation is applied and if I enter something uh to make the form valid and I hit submit then you'll see now the form post is accepted and we get our product added message okay now in terms of new apis when you're doing static server side rendering you do have to give a unique name for each form that gets submitted that's because you could have multiple forms on the page and when an HTTP post request comes in the server needs to know which one you're trying to run the submit Handler for so that's what that is for and then the other new bit of API is this attribute Supply parameter from form and that allows you to bind incoming HTTP post data to a particular net object so it's up to you to control how the incoming post data gets mapped onto your objects like that but apart from that it's the same apis and it should work as you expect now if those were the only features of static serviceid rendered forms then it would be kind of boring because that's just what web developers have already been doing for decades but don't worry we've added some Advanced features that allow you to produce better user experiences than would normally be possible and this works by integrating with enhanced navigation and with streaming server side rendering when you're posting your forms let's show you that so by default form posts are not enhanced they throw the whole page away and create a new one let me show you first I'll type some stuff into this search box something and I will submit my form and watch how many requests are made so I'm submitting now and you can see that the browser has done three requests it's refetch all the static content and it's reset that text box because it's not enhanced and the reason it's not enhanced by default is that post requests are kind of more sensitive than get requests we can't retry them if anything goes wrong and we don't know if the endpoint on the server is a Blazer endpoint or is going to redirect to a non- Blazer endpoint that can't handle it so you have to explicitly Mark your form as using enhanced post if you want that so I'm going to do that on my form there and when I go back to my browser now we'll do the same thing again something in here okay and then I'll type into my form and I'm going to clear the network Trace I'll click submit and this time you can see that it's only done one HTTP request and it didn't lose the contents of my search box so that's how it's integrated with the enhanced navigation system which makes the responsiveness a little better the other thing is how it integrates with streaming rendering now notice that this form takes a little bit of time when it submits I've deliberately added a delay on the server uh so that's why I click and then I have to wait for a full second before this shows up now can we use streaming rendering with this well yes we can so I'm going to to add the streaming rendering attribute here and now to show you that does something I'm going to add another message that happens immediately before we start saving changes so I'm going to put saving dot dot dot in there so now back in my browser let's get rid of this because we don't need it okay I'm going to enter yet another thing and a price and when I hit submit notice we instantly see saving appear and then product added after it's finished saving and that's using streaming rendering so this starts to create a really nice user experience it's a form that when you submit it you get instant feedback even while the operation is taking place and the browser is able to retain whatever parts of client side state we want so you get all the same user experience benefits as with a single page application but without having to use a spar technology so now finally I can show you the full power of full stack web development with blazer on. net8 Blazer has always been about creating rich interactive user experiences and that is very much still the case with net a and Beyond so even though you may be able to build many parts of your site in a very fast and cheap way with static server side rendering there very likely will still be some parts where you want to use full interactivity and the great news is it's very easy to do because this is deeply integrated with the whole system to see this in action let's go back to the eShop sample application and you may have noticed this little speed each bubble in the bottom right hand corner if I click on that then an interactive component is dynamically added into the page and in this case it's running on the Blazer server hosting model but it could also be web assembly if we wanted and this is an interactive chatbot which is powered by the Azure open AI service so I can start typing what's up and it's going to reply to me using Ai and it can even do things like search the catalog so what bags do you have it's going to go and look in the catalog for me and hopefully make some recommendations to me when it's finished thinking there we go got some nice pictures and everything all right so let's tell it actually I'll come back to that in a minute the other thing I want to show you is that the state of this is preserved even as we're navigating around different statically server rendered pages so as I move between these different pages here or I click on different categories notice that I don't lose the state of my interactive component that can be preserved during enhanced navigation the other thing to know is that interactive components can cause statically rendered content to be updated um notice that I don't have anything in my cart at the moment in the top right you see I have the cart icon with no numbers next to it but I'm going to add something to my cart from the chat bar so add the first bag to my cart like that and the chat bot is able to add stuff to my cart and it's also able to trigger an update of statically rendered content directly from the interactive component now if you wonder wondering how the code for that looks how does interactive components update statically rendered content well it's pretty simple here we are inside some code for the chatbot and this is where it adds items to the basket as it calls it and I simply have to call navigation manager. refresh and that will reload any static content that's on this page that we're already on while preserving interactive State on that page all right so there's quite a lot to take in here I'm going to show you simpler example in a second but just to set your expectations how this works is for any page or component you can mark it as running on server or web assembly or even both if you want to I'll get to that in a minute and it's deeply integrated into the other parts of static serice side rendering it works with enhanced navigation so it doesn't lose your interactive State as you're moving around and it knows how to open and close websocket connections to the server as required so we call them circuits when you're connected to BL a server if you go onto a page that's using one of those components it will make the connection to the server and if you then do an enhanced navigation away it will close that connection so you only have to keep the connections open for as long as they're required and that minimizes the amount of server side resource consumption to understand this a little better let's switch back to our simpler application and add an interactive component to it over here on the about screen you can see I've added this little note saying that we want to add a calendar and here it is in the source code too I've already got a calendar component which is built to work with either Blazer server or Blazer web assembly here's the sources for it we're not going to read that in detail it's a bit complicated but it uses lots of event handlers to make things nice and interactive let's add an instance of that onto our static server rendered page right here back in the browser let's reload and see what we see well what we see is a calendar so it looks like it should do uh our inter interactive component is here being rendered in the middle of a statically server rendered page but it's not actually interactive we can scroll around that works fine but if I try and drag these items around well they won't drag it it's not doing yet and if I click on things well again nothing is happening the reason for this is because by default all Blazer components all existing ones can be used in a static server rendered page but they just don't have interactivity because they can't there's nothing inter active in a static server ended page if you want to make them interactive you opt in on a per page or per component basis let's do that with this component right now I could if I wanted go into the source code for this component and add a renderer directive right here and I could say interactive server or interactive web assembly or even Auto we'll get back to that in a minute but maybe you don't want to edit this component or maybe you can't maybe it's someone else's component another way to do it it that's possibly better is you can add the render mode at the place where you use the component so in this case I'm going to say this calendar instance is going to run interactively on the server let's try that out now that's an interactive component it looks the same behaves the same as I scroll but now I can start to drag things around and I get all the interactive features that I might want so I can pick different items I can hit save I get all the features that we should do validation and everything else is all running interactively on the server now for that one particular component the other thing to see is how it's smart enough to open and close connections to the server on demand as the user navigates around so if I start here on the home screen and we'll have a look to see how many websocket connections we've got you'll see we've actually got zero at the moment because there's no interactive server components on this page if I do an enhanced nav over to the about screen then you'll see it does start up one websocket connection to the server and that will be used for as long as there are any interactive server components on the page if the user doesn't enhance nav and after it there aren't any on the page anymore it will automatically close the websocket connection now you can't really see on the browser Dev tools that this connection has been closed but it has and you can kind of see it if I go back to the about screen because it will create a new connection to replace the old one that had been closed so there you go it opens and closes the connections as required to support your interactive server components now running components interactively on the server really is as easy as just adding this attribute onto the component basically any component is just going to work interactively on the server if you do that but what about if you want to run on web assembly well that involves a couple of extra steps and I'm just going to show you that right now so I'm going to switch this component over to interactive web assembly and it won't actually work at first but let me show you what error we get here in the browser it might look as if it's working but this is just pre-rendering and all the interactive features actually aren't operating if we have a look inside the dev tools you'll see we've got this error saying that the calendar could not be found in the assembly that might seem a bit strange because it is in my assembly so why can't you find it Well the answer is when you're running code on web assembly you have to send that code to the browser and it's up to you the developer to decide which parts of your application should be sent to the browser and which should not and the way that we arrange that is by having different projects so here in my solution I've got two projects one that runs on the server and another one that's compiled for web assembly and runs on the client and unless your component is in that client project then of course it can't be loaded on the web assembly side so what I'm going to do is I'm going to take my calendar component and I'm going to Simply drag it including everything that it depends on into the client project there and in fact I can delete the one from the server because that won't be used anymore okay and once that's done I can go back into the browser and when that comes back up this time instead of an error it won't have an error and all the interactive features will be back and now they're actually running on web assembly so that's adding interactive components to your site now it's perhaps obvious but I'll say it anyway if you're going to use interactive components then that means you'll either be using a websocket connection if it's server mode or web assembly files if it's web assembly and in some ways these two are a trade-off against each other with the server mode your site starts immediately but it consumes some server resources whereas with web assembly mode your site doesn't consume server resources while it's running because it's in the browser but it doesn't start as fast because the user has to download those files so is there some way we could use both of these together to get the best of both worlds and that brings us to the final render mode which is called auto mode this allows you to use web assembly but without the user having to wait for it to download in the first place how does this work well initially when each user arrives it will use the Blazer server render mode while it's downloading web assembly files in the background and then the next time the user comes it will be able to use web assembly without consuming any server resources now a requirement for that of course is that your component has to be able to work on web assembly in the same way that we talked about before but assuming that it does then you can use auto mode so let's try it out shall we I'll switch back over here and I'm going to change this calendar to run on the interactive Auto render mode now let's see how that behaves inside the browser let's have a look and I'll hit reload then we should see that it's using the server hosting model initially so that it can start immediately without having to wait for web assembly files to download but in the background it will have down downloaded those web assembly files so if I hit the reload button now the next time it comes up you'll see there's no websocket connection in the browser and if we look on Console you can see it's logging this information about the fact that we're running on web assembly now and of course everything works all right that is the auto render mode so in summary with Donna a Blazer combines the full power of the server with the client this means you can use static service side rendering for maximum scale with enhanced navigation and streaming rendering for a better user experience and when you need full interactivity you can enable that for any individual component or any part of your application now back to down awesome wow thank you Steve that looked amazing okay so how can you now get started building full stack web UI with blazer in donet 8 well it's easy you can use the new blazer web web app template that's included with the net 8 SDK and with Visual Studio this new template gives you the best of Blazer server and Blazer web assembly in a single solution it's set up and ready to go with static server side rendering and all of the new Progressive enhancements and you can also easily enable the new interactive render modes server web assembly and auto let's go and check it out okay I'm going to hop over here to visual studio I have the latest version of Visual Studio installed and we're going to create a new project and of course we're going to use the new blazer web app template which is right here this single template has everything you need to build Blazer apps with net 8 let's go ahead and select that we'll choose the default uh project name and now we have a few options here well first of all by default the Blazer web app template is set up for server side rendering both static and Interactive but we can choose to instead use uh interactive web assembly rendering if we want to do the rendering from the client or we can enable both and that will enable uh using the new auto render mode like I I want all those features so I'm going to select auto we can also choose how much interactivity do we want in this app do we want it per page or component or do we want the whole app to be interactive for this demo I'm going to pick per component so we'll go ahead and create that all right so now we've got our solution with the two projects this top one is the server project and the bottom one is the client that's the bit that's going to run client side and the browser on web assembly and the server is going to handle all of our requests let's take a look at program CS in the server project up here at the top we're registering all the services that are required to render Blazer components uh from the server and the new interactive render modes down below we can see that we are setting up uh the r Blazer component to be routable endpoints using asp.net core endpoint routing by calling this map Razer components this will discover all of our routable endpoints and set them up as endpoints now we've also are uh specifying our uh our root component this app component right here let's go take a look at that so here's app. Riser and here we can see that this is where we're rendering the root HTML document for our application we no longer need a razor page or a CSH HTML file to boot strap our Blazer app we can use Blazer components for our entire application uh your root components will be statically rendered from the server this component is also setting up the Blazer router which works together with endpoint routing to Route requests to all of our components and we're also adding the new unified Blazer script okay we have some pages in this app as well The Usual Suspects we have our homepage which just has some static HTML content we also have this weather page which we can see at the top is using the new streaming rendering feature that Steve showed us that means this component can render immediately with some placeholder content while it goes off and gets the weather forecast data then when the data has been retrieved it can send a streamed update down to the client with the weather forecast information now it's not honestly it's not actually going and calling an API to get the the weather data it's doing a a simulated API API call with this task. delay uh as if we're making an API call that might take a little while okay and then we also have our counter component which is over here in the client project because it's going to need to run on web assembly and this is using the new interactive Auto render mode all right let's go ahead and run our Blazer web app and see what it does see all those features in action there it goes okay get it up and running all right so here on the homepage we just should have some stat itic HTML we can see that really quick if we bring up the the browser BR Dev tools and let's just refresh if we look at what was retrieved from the St server we just have some normal static HTML content like there's the hello world welcome to your app so no web sockets no web assembly here but if we go to the counter component and we filter on websockets we can see that we now do have a Blazer websocket being set up and that means so we can click on the counter the count goes up so this is currently using interactive server rendering and uh we can see that the websocket connection is actually currently active because the request is still pending it hasn't completed yet but if we browse away from the counter component and go back here we can see ah there it goes so the the the websocket connection was just closed we are no longer using interactive server rendering so we can free up those server resources and then when we browse back to counter again notice that there's no new websocket connections but the counter still works how is that possible well that's because in the background we have downloaded and cached the net web assembly runtime so our counter component is now running client side in the browser on web assembly and it works great if we look at the weather page and let's just refresh it and we'll try and freeze the screen real quick here we go freeze it there we go okay so we can see this loading dot dot dot that gets rendered immediately and then if we let it continue rendering about half a second later we get our actual weather forecast data that was streamed down to the browser um there's no websockets being used here no web assembly on this page this is using streaming rendering on the same connection that was established for the uh initial request so just a few minutes we were able to create a Blazer web app that's using all of the new Full stack web UI features uh static server side rendering all the page navigations were enhanced navigations the new interactive render modes including Auto and streaming rendering uh super easy but really powerful all right now in addition to full stack web UI support uh Blazer also has many other uh new features and enhancements in doet 8 quick grid is our uh fast and functional data grid component that makes it easy to display data in a tabular form it's now part of net 8 and supported out of the box sections are a way to define outlets for content in one component that can then be filled in by other components uh Blazer the Blazer router in dotted 8 has gotten lots of improvements it can now route to named elements and it now supports uh route constraints you can monitor inbound circuit activity for your Blazer server circuits to detect idle circuits and we've also completely revamped authentication for Blazer in donet 8 so that you can build uh and customize a complete identity UI using Blazer components we've also added a new capability for Blazer components so that you can render Blazer components uh outside the context of an HTTP request or an asp.net core hosting environment you can just take a Blazer component and then render it as HTML to a string or to a stream this is useful if you want to use Blazer components as like a a templating system for generating HTML fragments like for a generated email it's also something that's laying the foundation for future support for static site generation in Blazer which is something that we're looking at and investigating all right let's take a look at some of these new blazer features and enhancements let's go back to visual studio and we're going to create another project another Blazer web app looks like a good one okay and I'm going to add some additional options to to this one in uh we're going to add some authentication we can select individual user accounts to set up our Blazer web app with authentication using asp.net core identity so let's select that and then I don't really need web assembly for this app so I'm just going to stick with serers side rendering we're going to use uh just the the server render mode so we go ahead and create this all right cool so now it looks a little bit simpler we just have a single project uh let's go ahead and run it we don't have our client project anymore because we're not going to be running on web assembly for this application and this looks like a normal Blazer web app has home counter and weather but now we've got some additional Pages here this off required page if I click on it I get redirected immediately to the login page because that page requires Authentication and it has authorization rules and we now have an entire authentication UI identity UI built with blazer components let's go ahead and register a new user let's add a password Here There we go and I think at this point I'm going to need to set up my database with the schema for the uh for identity yep so I'll just apply EF core migrations click the button and refresh the browser great so now my user is registered I can confirm my email account during development by just uh clicking this link and we should now be able to log in let's see if we could do that so and then type my password again and there we go okay so I'm logged in supposedly can I now access that auth required page I can and you can see that I'm a logged in user we also have a full account management UI where we can uh modify our profile information change our email address change our password set up two Factor authentication this is an entire identity UI solution implemented in Blazer components uh if we look at the code to see how that's done here in the components folder under accounts Pages there's all of our Blazer components that make up that identity UI the code is part of the project now so you can customize it and adjust it to meet your app's needs so that's how easy it is to set up authentication with a Blazer web app in Don 8 what should we do next let's say now what we want to um uh connect to to a database and display some data from from a database can we do that yes all right let's go and let's add a data model to our project I have an existing um uh type that I'm just going to use for this that I typed up previously in my Snippets folder over here this movie type all right so this movie type is an EF core data model that has an ID and a bunch of properties to represent a movie and what I want to do is I want to set up a database that can store my movies I want to be able to display them edit them delete them you know basic CR operations create read update delete and to do that I can just right click on my pages folder and say let's add a new scaffolded item because we now have um the new blazer scaffolder this is available now with uh the latest Visual Studio preview and this scalf what it will do is it will allow me to specify a data model and it will scaffold it out for me all of those crud pages so I don't have to write any of that code U we can pick from a set of templates here if I pick crud that will do all all of the pages or I can pick individual Pages let's do them all I can then select my data model I'm going to pick that movie type that I added previously I then need to specify what DB context I want to use I can create a new one or use an existing one I'm going to use the one that came with a template and let's go ahead and add that so now Visual Studio will inspect my data model uh figure out what its structure is and uh generate scaffold for me a whole bunch of cred pages that I can use to connect to my database generating code and there it goes okay so under Pages now we have this movie Pages folder with all my scaffolded pages let's go ahead and run the application so we can see what those do go back to the web app okay so uh let's browse I think the the URL that it generates is slash movies and initially ah it's telling me that hey you need to run migrations on your database again for that new movie schema no problem we can do that really quick let's go to bring up a console and we'll just add a migration for our movies I'm just going to call it movies and then once that migration is generated we can uh uh Run update database to apply that migration to our database there goes EF core doing its thing all right and now back to the web app taada voila we now have a a a pre-built UI for looking at movies we have a table that shows all our movies we don't have any yet so let's go ahead and create one let's add a movie U I don't know how about ET I think that was I looked up the release date for this one I think it's June 11th 1982 I think all the best movies by the way were created in the 80s awesome era for movies um this is a sci-fi movie price like let's just imagine I don't specify a price I'm getting validation on my form awesome I don't know $8.99 whatever to make up a price and then we're able to add a movie to our database we can see its details we can edit the movie like maybe that price was a little too high let's let's give a discount to folks and of course we can delete movies from our from our database awesome so and I didn't have to write any code to do that I was able to easily to connect to some data and display it using Blazer components that's the new blazer scaffolder available with Visual Studio preview now the scaffolder is in preview but all the code that it generates is fully supported using net 8 let's look at the code that it created that table that we saw that's not just a normal HTML table that is quick grid our our fast and functional data grid component uh for Blazer which means we can do all sorts of fancy things with that table like for example let's say I want to clean up that release date column like make the title a little bit cleaner it's got it needs a space in it it's just using the proper name currently so let's set the title here to release date we'll save that and hot reload that into our app and let that update there we go that looks better I also want to format what the release date looks like so let's add a format string right here uh month month uh let should do the month day and the year that's good and we'll go ahead and hot reload that into the application and that should clean that up there it goes uh what else we can add sorting let's sort the uh on the titles so we'll just say that the title column should be sortable and we can hot that in now this will apply and I it's you can see that the title is now selectable but when I click it nothing's currently happening why is that well that's because by default this page is using static server side rendering it's not it's not enabled for interactivity yet but we can enable interactivity really easily we know how to do that now so let's go to the top of our page and we will add an interactive render mode here we're going to use interactive server cool and and we'll go ahead and restart so that that gets applied I'll give it a second to to restart there we go um now we only have one movie so sorting by one movie is not going to be very interesting so let's add another one uh I don't know how about uh Labyrinth another I don't know what the I don't know what this the release date for this one was we'll just make up one like 1980 Something um this is definitely a movie that gave me uh some some nightmares as a kid I mean you don't really want David Bo's hair in your nightmares um this was I don't know Adventure I don't know what genre it was and let's give it a price and add that okay so now we have two movies and if we click on the title we can sort our movies awesome so we can do sorting uh we can also add a pagination support with that we just use the builtin paginator component that comes with quick grid now the paginator and quick grid need to coordinate on the the pages that should be viewed and so we just need to create a little State object here it's going to be a pagination state object so we'll just initialize that pagination State and then we can specify how many items per page do we want well right now we only have two so we're going to have one item per page which I know is a little bit silly but at least it shows that pagination is working so we'll add our state object to our paginator and then we also need to specify it up above for our quick grid so there's the state and then we'll go ahead and hot reload that in okay and there now you can see pagination is showing up we have one page with ET and then if we go to the second page we've got Labyrinth we can sort this is just some of the things that quick grid can do if you want to see all of its features and capabilities I recommend heading over to the quick grid demo site at aka.ms Blazer quickgrid this has a bunch of really awesome quick grid examples that shows all of its capabilities here's a quick grid that has pagination sorting but also filtering like if we want to filter on particular countries and see their Olympic uh performance you can also do virtualization with quick grid like this is is a quick grid that's actually rendering you know 22,000 rows and it's doing it by only loading the rows as they are visible so as I scroll it's loading the the the data into the quick grid and just rendering those rows um quick grid is out of the box uh a easy and simple way for you to display your data and to connect to your databases all right great so in just a few minutes we were able to get started with a Blazer web app uh add authentication and connect to data using the laser scaffolder and use the quick grid component to display our data now net on web assembly also is significantly improved in net 8 uh your code runs much faster thanks to the new jit interpreter uh based runtime it's a runtime that now has partial jit support or just in time compilation support for web assembly this means your components run 20% faster and Json D serialization is twice as fast hot reload for web assembly is is also significantly improved we now support all the same edit types that are supported by the server-based runtime by cor CLR including the new edit types like being able to edit generic uh uh generic types U we've enabled uh web assembly simd and exception handling support for ahead of time compiled Blazer web assembly apps so they run much faster uh We've introduced a new web-friendly packaging format foret web assembly apps called Web Cil that makes deployment seamless and painless and we've also improved our uh content security policy compatibility so you can really lock down your web apps and make them more secure wow so that's a lot of stuff so what if but what if you have an existing web application how can you start using Blazer in donet 8 with your existing web apps well there are a bunch of ways that you can do that if you have an existing Blazer application it's easy you just upgrade to donet 8 and you can start using all the new features your existing Blazer server and Blazer web assembly apps will work on 8 as it as is without any code changes you can then choose to also upgrade them to the new blazer web app patterns uh if you want to uh we have docs and guidance that show you how to do that if you have an asp.net core web app then you can just add Blazer Pages alongside your existing endpoints and UI Blazer is part of asp.net core so it's designed to compose with all of the of your of your asp.net core functionality if you're using MVC and razor pages you can add Blazer components to your cshtml files using the Blazer component tag helper so you can just embed a component right there in your existing app uh for minimal apis and MBC controllers we also have a new razor component result that you can return from your controller actions and from a minimal API to just easily end uh uh render some UI and lastly if you have a JavaScript based web app you can embed Blazer components in that application as custom HTML elements and this really works with any web application uh like NET Framework based web apps web forms applications anywhere you render HTML you can add a Blazer component as a custom element using open web standards so no matter what type of web app You're Building you can start using Blazer in Don 8 with your web app today there's a really great session coming up on day three of the conference by Ed shano where he is going to walk through all these ways that you can integrate Blazer into your existing web apps you'll definitely want to check that out here's a summary of all the new features available with Blazer and donet 8 full stack web UI lots of great framework uh enhancements and new components and improved web assembly support we hope you're as excited about this release as we are we invite you to give it a try today by going to blazer. net where you can find helpful docs and tutorials for getting started thank you for watching thank you for being here atet comp and we'll be happy to stick around and answer a couple questions

Channel: dotnet

Views: 84,808

Keywords: .NET

Id: YwZdtLEtROA

Length: 55min 56sec (3356 seconds)

Published: Wed Nov 15 2023