Dan Roth talking on Blazor in .NET 8.

[Music] welcome everyone to the tulsa. net user group tonight we got Dan Roth talking on blazer. net8 we got some great uh stuff that has just been released Dan thank you for coming out tonight uh it's great to have you here I really appreciate it I got to meet you at build um what was it April or May I don't remember which but it was the last build and it finally got the yeah I got to stop you and twist your arm for a little bit so I'm F I'm glad that we finally worked out some time for to get you to come visit the user group I'll let you take it from here great thank you so much it's uh great to be here thanks for having me it's great to uh see all your friendly faces on on the call um I'm I'm Daniel Roth I'm the product manager for Blazer on the the net team and so today of course we're going to be talking about Blazer specifically the new features in Blazer and 8 the support for building full stack web UI uh using Blazer in the theet 8 release which we just shipped in in November and it's been been going great it's uh it's been really fun to hear about people's experiences trying out to release and upgrading and using all the the great new capabilities um I'm I'm here for you guys so if you have uh questions or commentary like feel free to put those in the chat or just go ahead and unmute your mic and and and ask away um feel free to interrupt I want to make sure I get your questions and Curiosities uh uh satisfied so feel free to to ask questions as as you see fit so but to kick things off I thought it' be good just to level set about what Blazer is all about what is this Blazer thing what should you use it for uh Blazer is our front-end web UI framework for.net um Blazer is designed so you can quickly build interactive web experiences entirely using net and C um it's part of asp.net core which is our umbrella web framework for net and It All Ships as part of the the net platform if you have a modern net installation on your machine you've got Blazer and that's been the case all the way back to net core 3.0 that's when we shipped the the first Blazer version in the box with net core 3.0 and we have shipped with blazer with the the the net platform since so not so new anymore uh it's Blazer has really matured into a a fully featured uh front-end uh web development solution uh Blazer is based on a powerful reusable component model uh that you can use to easily handle UI events uh render updates and set up two-way data bindings uh Blazer comes with many building components for doing forms and validation and displaying large virtualized data sets um there are also many uh red available Blazer component libraries from the community uh including a library of fluent UI based uh uh Blazer components that we ship from from Microsoft um you can use the latest open web standards with blazer Blazer is based fully on open web standards so you can use it uh to build Progressive web apps that are installable and that work offline uh we provide Rich tooling for Blazer in both visual studio and in Visual Studio code uh including support for hot reload and while you typically write your Blazer apps using C uh you can also interoperate with existing JavaScript libraries uh if you need to from your C code you can call into JavaScript and from your JavaScript code you can call back into C questions okay just people saying that you can ask questions now in donit 8 uh We've dramatically expanded uh Blazer's capabilities um to Leverage The Best of the server and client when building web user interfaces uh modern web apps these days they often need to use a combination of approaches involving both the server and the client to deliver uh the the UI experience for your users for example uh many web apps dynamically generate static HTML from the server in response to requests and this is often called uh serers side rendering or SSR server side rendering helps your app to to load really fast because you're doing all the hard work using the server you're prefetching the data and deciding how to display it it's already done from the server and then all the the browser needs to do all the client needs to do is to display the already rendered HTML so it's it's dynamic in that you're generating HTML from the server it's static in the sense that once the HTML hits the browser it's just you know basically static content um now donet has long had support uh for building server side rendered web apps with Frameworks like MVC and razor pages and even older Frameworks like ASB done web forms and and so on now server rendered HTML uh is by its nature static there's there's no code running on the client that can handle uh user interactions like like like uh hook a an event handler for a a UI event so if you really want rich interactivity in your web application then you're generally going to want to handle things from the client and for that you need uh client side rendering or CSR uh by rendering from the client you can have very low latency UI interactions and you can uh leverage client capabilities like local storage the camera local compute and and so on for client side rendering with dunet we have of course Blazer uh Blazer's component model is designed for um for handling UI interactions from the client now many modern web apps actually need to use you know a combination of these two approaches there's lots of debates on the web about oh you should do server side rendering like no you should do client side rendering but the reality is many apps actually need to use both so for example maybe your homepage uh or your blog is best handled using serverside rendering so that it loads really fast you don't have to sit and wait for a large JavaScript bundle to be downloaded and and executed makes the page easy to index um but more elaborate functionality in your app you know that needs to be more interactive that maybe needs to be handled uh from from the client so blogs you know content maybe better handled from the server lots of interactivity better handled from the client now previously withn net if you wanted to do both of these things together in the same app well that usually meant you had to mix multiple different Frameworks together like you would take MVC and razor pages and then maybe also use blazer for the client side part or maybe use a uh a client side JavaScript framework like a angular or react but in doet eight what we've done is we've tried to combine the benefits of both server and client-based rendering into a single consistent webui framework based on Blazer uh you can now use Blazer andet 8 to handle all of your web UI needs you can use Blazer components to render HTML directly from the server and you can also enable Rich interactivity using either the Blazer server or Blazer web assembly based models or even both from within the same app so Blazer in donet 8 supports full stack web UI development both the server and the client see if there's any questions see any questions gonna move on okay so what does that really mean what do that break down into so full stack webui with blazer in Don 8 really breaks down into five new areas of investment five new capabilities um the first is static server side rendering support with blazer components uh then on top of that we've added a couple of prog a few actually Progressive enhancements on top of static server side rendering by just adding a little bit of client capabilities uh including enhanced navigation and form handling and streaming rendering you can then also add full client interactivity at a very granular scope you can do it per component or per page um and you can do that not just like statically like as part of building your app but you can even decide how you want components to render at runtime by automatically selecting which render mode which component render mode you want to use at runtime so you can further optimize the the page load uh experience and what we're going to do is we're going to take a look at each of these five different areas right okay so first static server side rendering so if you've used net Frameworks like MVC and razor Pages or web forms then you're probably already familiar with static uh server rendering based Frameworks uh static server rendering means generating static HTML in response to a request from the server uh static server rendering with blazer means that you rou a request to the appropriate Blazer component on the server and then it just renders HTML to the response and it's done there's no web assembly involved here there's no websocket connections you just get static HTML rendered to the browser in response to request um note that this is different than Blazer server if you've used Blazer in the past in a blazer server app the components also render server side but there's a persistent stateful connection with the browser usually a websocket that can be used to handle UI interactions so Blazer server we would call that now interactive server side rendering not static uh in traditional server side rendering the connection just lives as long as the request and the app is typically stateless whereas a Blazer server app is State full and it's is fully connected okay so this is different not Blazer server this is a new thing static serers side rendering support so what does this look like so let's hop over here to an application this is a a recipe application um that we've actually shown for quite a while I think I demoed this app back when we shipped Blazer web assembly for for the first time but this is the new version of the the recipe app let's go ahead and get it up and running okay so we have a simple recipe page that we can browse a long list of recipes we can search for recipes you know chocolate ones and there's our chocolate recip we can pick one see the recipe details and then uh learn how to make it and then there's a little review widget down here at the bottom where we can give it a a five star rating now what's new and interesting about this Blazer web app is that it is just using currently static server side rendering there's no client Side based interactivity being used in this app at all and we can see that by just bringing up the source for the page like here's the rendered HTML that came down from the server and it is literally just plain old HTML no JavaScript no no websockets no web assembly nothing fancy like that if we bring up the browser Dev tools and let's remove all the filters and bring up the network Tab and let's just re not not not that let's just refresh the the homepage you can see what's being downloaded to render this homepage for the app if we now filter on websockets I'm going to click on this little dubs filter to just see if there's any websockets here there are no websockets in this app I feel like nothing up the sleeve nothing no websockets is there any web assembly no web assembly is there even any JavaScript there's no JavaScript in this application it is all being statically rendered from the server and that means that the app uh loads fast it's ready to scale it's stateless easy to index all those nice characteristics by leveraging the server for the UI for your application all right so that's the rendering and this can um you can do some interactions with this right like you saw we could do a search like this is a form this just a normal HTML form that's doing a get request let's do a different Like Straw do we have any straw recipes apparently we have straw and hay fetuccini tangle so for all you people who like hay flavored fetuccini you can have some ha Pini but there's that that little widget at the bottom the reviews widget this is also a form you know love the hay flavor whatever you submit that and that does a form post and then adds the the review to the bottom okay so we can do basic uh form requests as well so what does this look like in the code let's go over visual studio and let's bring up like the the homepage where we're seeing all those recipes being generated this is just some simple Blazer code and you know nothing really fancy going on here we have a little recipe store that we're using to get the recipe data we have that form at the top for the search and it is literally just a vanilla form and then we have this uh for for each Loop where We're looping over all the recipes that we got and then rendering a recipe card so just doing all that rendering from the server in response to a request what about the um that little star rating reviews uh component that's over here in this uh Razer class Library so here we can see that we're using the built-in Blazer edit form component to implement the form for uh submitting star rating reviews and it's using the the normal programming model for Blazer form you haven't you haven't used Blazer before this might be new but this edit form is just going to render a a HTML form under the covers but it's allows you to do things like specify a model type and have validation run on that form and that's all going to happen on the server in response to a request and then it will render a normal HTML response so just plain old vanilla HTML forms but now done with blazer components done within the Blazer component model okay so that's how and you get that for free without any kind kind of rendering model that is um for free I mean you you get have an aset core app and you tell your as let's look at the uh the program CS file like this is this is the program CS for my what is you know fundamentally an asp.net core web application and all we're doing here is just setting up our Blazer components as you like map razor components where we're setting them up as normal asp.net core endpoints using endpoint routing but I guess my question is without any interactivity without web assembly or uh uh that's no web there was you saw in the the networking Trace there was no websockets there was no web assembly being downloaded this is just like as like as as web apps were built you know 10 years ago you know right like just server side rendering of of HTML a request gets sent run some net code send a response Y Cool all right so that's static server side rendering and that Blazer will just do that that now by default but we can start to make that experience user experience better like we can start to enhance that user experience by just adding a little bit of uh client side logic a little bit of uh client side enhancements and there are a couple of these enhancements that we add the first one that I want to show you is enhanced navigation and form handling and what this is is that Blazer will instead like normally when you do a a page navigation like you click on a link in your app or on a tab or whatever um it will you know do a full page load right it will it'll do a full page navigation grab the HTML grab all the links pull down any CSS JavaScript and images or whatever it needs in order to render that page and for this reason serers side rendered apps have this uh reputation of being a little bit jarring like every time you navigate the page kind of blips and then reloads like it doesn't have that smooth feel that a like a spa JavaScript based app does but we can get a little closer to that by just adding a little bit of client side logic with our Blazer web app what we can do is we can when a user navigates we can intercept that navigation and instead do have Blazer do a fetch request you don't have to write this code Blazer does it for you the Blazer does a fetch request retrieves the serers side rendered content from your server and then figures out on the client well okay what changed here what's in the Dom currently and what did I just get from the server and then Blazer can patch up the Dom with the the new content without having to do a full page load and what that all uh enables is a much smoother navigation EXP experience and you also get to preserve state in the Dom without just blowing it away and having to recreate it every single time that you you navigate to a new page very similar pattern with with form handling when you do a form request Blazer can intercept that get the serers side rendered content from the server and then patch up the Dom seamlessly let me let me show you what I mean so right now with this app as I navigate around you might even see like the tab kind of blips a little bit as I like click on things that's because every time I navigate it's doing a full page load like if if I uh remove all my filters and let's I'll do a click here you can see that that request to pull down recipe number one was a document style request right so pull down the HTML but then it also had to pull down all this stuff you know we got the stylesheets and this was a stylesheet that we had already loaded for the the the homepage of the app it's the same stylesheet but had to load it again it could be cashed and that that helps but still requested it uh again so we get a bunch of additional resources that we have to request from from the server um similarly you may have noticed that when I submitted a review like let's say I love this strawberry review and I say give it five stars and click submit notice that we're losing the the scroll position on the page or being bumped all the way to the top that's because when you do that form submit it's doing a full page page load and you lose the scroll position as a result we can do better with blazer in don8 so what I'm going to do is I'm going to go into the app and I'm going to find the this is the root component for the app you know we got the the the root HTML dock up here everything in this app is being authored with blazer components there's no CSH HTML files needed we can do it all with Razer files and what I'm going to do is I'm going to uncomment this script and this is the built-in Blazer script the new the last Blazer script you'll ever need right blazer. web.js okay and I'm just gonna restart go ahead quick question um so what you're saying is that JavaScript isn't required to do forms handling you can just do normal forms with blazer like you saw like I was submitting form requests to uh without that Javascript file without that JavaScript there was no JavaScript involved it was just old school form requests right you route the form post to an endpoint on your server it run some code decides what it wants to do with that data and then renders HTML to the response no JavaScript was called in the in the making of this in the the in that first demo there was no JavaScript there at all now I've added a little bit I've added a little bit of framework provided JavaScript which is going to now enhance that that user experience on top of the foundation of static serice side rendering okay so if that worked if I like navigate now around now I don't know if you can see it but like you there's no blip anymore in the tab it's really smooth like it feels Spa like and if we look at what's happening in the browser Dev tools let's say I click on on a recipe there I just clicked on recipe one just like before but notice there's recipe one but where all the other stuff I didn't have to pull down you know the CSS Styles sheets again I mean they were already there they were already applied I did an enhanced navigation instead notice here that the uh request type is no longer document it's a fetch Blazer intercepted the page navigation substituted a fetch request it still did all the rendering on the server got HTML from the server if we looked at the you know the response to this request there's all that HTML but then Blazer looks at that HTML looks at what's in the browser and intelligently does a diff and patches up the Dom with just the changes that need to be applied so that's that's an enhanced navigation which gives you this sort of fast and fluid um uh feel for uh navigations on the page without having to push everything to the client we can also um uh enhance our form post Now by default uh I know I think in if you've watched earlier versions of this demo um we would used to um enhance form posts by default as well we stopped doing that because there um there are some cases where enhanced form post might not be what you want like particularly if that form is going to redirect to some endpoint that isn't a Blazer endpoint then things can get get weird so it's it's an opin feature but you can enhance forms as well and you just do that by going finding the form like here's our our edit form for that star rating reviews component and I'm just going to say let's go ahead and enhance this too let's do the same same behavior that we have for navigations but do it for form posts and so now if we restart the app and pick a recipe and let's say I don't know kind of me on this one and we're goingon to ahead and submit that notice I didn't jump like I didn't lose the scroll position anymore fast and fluid feel with the updates to the UI when I made that form post okay so we're progressively enhancing our app if you're familiar with that terminology from Days of you we're just adding a little bit of client side functionality to make this feel smoother um more responsive to to our users so that's enhanced navigation and and form handling I know it's form name inside your edit form there is that new yeah yeah so form name where's it right here this guy right here right so if you've been doing Blazer before you might be wondering like what is that well remember we to make the form an endpoint we need some way of identifying it we need to know like which form which form is this so you might have multiple forms on a page if we submit to a URL we need to know well which form was this supposed to go to that form name is what we use to um disambiguate uh the the the form on the page identifier y so when you're using static server side rendering you need to specify a a form name good question okay another Progressive enhancement is streaming rendering so sometimes when you're doing uh server side based rendering sometimes you need to do some long running acing tasks in order to um render the page like maybe you have to go to a database and get some data the database or maybe you need to make an API call and those operations might might take a little while and while they're happening the user just has to sit and wait right like the browser's got a you know spinning weight symbol while you're waiting for the HTML to come down but you can't get the HTML until that backend work has completed so what streaming rendering does is it gives you a pattern that improves the user experience where you can get pixels on the screen really fast and then stream updates to the page as those long running async tasks complete and this is all done over this the original connection like there's not a websocket involved here you're using the original request connection and then rendering an initial immediate response so like let's like for example I'll do a little animation like you do a get request and you know to get to really render the page you have to do that a database query but you can render the page initially with like some placeholder content while you're waiting for that database query to complete and then when the database uh query is done when that task is completed Blazer can render that component again to the same connection and rendered an additional update a streamed update to the browser and because Blazer is really clever about being able to patch up the Dom you can take that new update figure out what changed and then Pat up patch up the content of the Dom with the newly rendered content and this isn't a one-time thing like if you have multiple acing tasks that are happening and you want to render you know multiple streamed Updates this way you can you can do that too it's not a it's not like a just one streamed update you can have n streamed updates as well let me show you what I mean so on the homepage for this app uh right now it loads lightning fast because it's just like you know getting all the the data off the dis on my my Dev machine so I can hit this refresh button and the page like loads almost immediately um but let's imagine we had to do an API call or a database query to get the recipe data and to simulate that I'm going to go into my data folder and I'm going to add a little pass. delay to my recipe store abstraction so this is where we're actually getting the recipes and now there should be a 1 second delay that we have to wait for in order to actually get the the recipes which should mean that we get a second delay when we're trying to render the page so if we restart this app now okay so if I refresh ready click 1 1,000 and then the spinning stops it's a little easier to see if I like go to a recipe and then I'm going to click back ready click 1 1,000 and then the page renders so now I've got this one second second delay whenever the user wants to see my site uh so that's not great we can make that better with a streaming with streaming rendering okay so to enable streaming rendering on that homepage you may have saw it before it was up at the top we're just going to add this attribute so attribute stream rendering so now the homepage will uh do streaming updates and if we look at the I'll restart the app but while we're waiting for it to restart um let's look at the logic so this form is just a little search text boock as box at the top you notice we've got this um let's see do it like this okay we've got this if check if we don't have the recipes yet then we're going to render this loading recipes placeholder and then if we do get the recipes then we render remember that unordered list that's not what I want to do this uh we Loop over all the recipes and render them as cards and down below you can see the oninitialized async method this is a component life cycle method that loads the recipe data from from our recipe store and what will happen is that on initialized async will run and it's going to kick off an async task and so it will you know complete while it's waiting for that acing task to to finish and then it'll run a continuation afterwards but immediately after un initialize async you know kicks off that async task Blazer will go ahead and render our home component and when it does that that if check will then kick into gear and they'll say well I don't have any recipes yet so let's uh render a placeholder and then when the async task completes the component automatically renders again and the second time it renders it will render in the else block and that's when you actually get the content so you get two batches of HTML that will come on the the response stream and so now if we go to the homepage and we do a refresh you see the little loading recipes I'll see if I can freeze it right there so loading recipes dot dot dot that the page loads instantly I don't have to wait the second but then a second later a streaming update comes to the browser and Blazer automatically applies it to to the browser so that's streaming rendering with blazer it's just built-in feature and you can use it to improve the user experience for your pages that need to run those long running acing tasks in order to render Dan I have a question This Is Amazing by the way and congratulations on Blazer in doneta it's amazing thank you um but if I what if I want to create um static uh server side rendered content from data uh in the main page before I go and you know grabb the recipes while they're waiting you know before the waiting happens can yeah yeah so the whole this whole block of code up up top top this whole thing is the rendering logic that gets run immediately like in order to generate that loading dot dot dot all this stuff runs so if you have things that you can render like if you have data that's already available or available synchronously like really fast feel free to render that HTML content right away like this loading do this loading recipes doesn't just have to be a P tag it could be like a whole user experience that where would you render that if not in the oninitialized async well sorry say that again uh where would you render that if not in oninitialized async so on initialize async is just code that runs before the initial render um and then the you you have a render before on initialized async well let's see on initialized async runs and then the component immediately run ERS and then any async tasks that you kicked off in uninitialized async when those complete then the component will render again so this all this logic up above you can render any HTML that that that you that you want to in that in that in that spot so in on initialize they thinkc if you have other code that you wanted to have in here like you know generate you know a bunch of of dad jokes or whatever it is speak my language yeah then you know if you have those available feel free to render the dad jokes while you're waiting for the database query to to complete to get the recipes like you can go ahead and render that content and then you just do like a in a state has changed or something oh yeah okay so if you have multiple async tasks that you want to run stream updates then then you just call state has changed so if like I was if I had if let's say getting the dad jokes was also an Asing task and I wanted to go ahead and render the dad jokes while I'm waiting for the recipes then yeah call state has changed that will um manually trigger the component to render and you'll get an additional streamed update yeah so that's how you get those n updates thank you yep yep okay cool so that's streaming okay but Blazer is about like Rich interactivity right like building really cool interactive web apps the cool thing in Don at 8 with blazer is before your your whole app in Blazer was was interactive everything um uh could use interactivity but that also meant that you paid for that interactivity across across every single page of your application like if you were using Blazer server uh Blazer server would set up a websocket connection and state on the server for for the application and that that websocket connection lived for the entire time that the user was using your your app in donet 8 you can now sprinkle a little bit of interactivity just where it's needed like just on a like a particular component on a particular page or just one page or two page out of 10 so that you only um have to pay for the overhead of those Interactive features where they're actually being used so let me show you what I mean in this uh Blazer web app I have another page other than this the recipe catalog which is a recipe editor for submitting recipes and right now this page is just a you know a vanilla form so if I wanted to add like chocolate chip cookies and I want to be able to pick a picture for my chocolate chip cookies here's a picture you know right now all I get is the the file name I'd really like to have like a preview of the the picture that I just selected and then there's this like cool ingredients list editor like I'd like to be able to put a bunch of ingredients in here and click add and add them to a list and be able to reorder them and all that edit them all that type of stuff right now when I try to click add uh it doesn't even do anything like why not is that because I didn't write any code uh no uh that's because by default this page all it's doing is static server side rendering there's no interactive features been enabled for this page but I can enable those features really easily and that's what we're going to see now so let's go to that uh recipe submit recipe page so here's the the form for that uh recipe editor and up top what I'm going to add to make this an interactive page is an interactive render mode this is a new razor directive in in Don 8 render mode and there are a bunch of ways that components can render that will make them interactive and one of them is interactive server this is like the equivalent of Blazer server but in the miniature like just for this one page I'd like to make this P this this one page interactive okay let's go ahead and save that um I think actually before we even do that like let's even be more granular let's comment that back out let's just make the ingredients list editor interactive so we can even put render mode interactive server right here this one component so that's just the uh this guy right here this ingredients list editor I'm just going to make that guy interactive let's try this again okay and so if we go to the submit recipe page so now if I go to my ingredients list editor and say you're let's actually type the name of flower right and click go so now we're able to actually add ingredients let's add some I don't know five eggs and maybe uh 10 ducks or whatever it is it doesn't matter like just buch bunch of ingredients and we can like reorder things now drag and drop works we can toggle between Imperial and metric units this one component is now a little island of interactivity in what is still otherwise a statically rendered from the server application like if we go to the homepage let's bring up the browser Dev tools let's uh remove filters let's refresh the homepage and let's see do we have any websockets on the homepage no websockets here but if I browse to submit recipes aha now we've got something now we've got the Blazer server websocket being set up and we can see that it's active because it's in this pending State like we have a live websocket connection and that's what's allowing this one component to be interactive like I can do things using that interactive experience but if I browse away from the homepage watch watch it watch pending right there ah you see it so now instead of pending it's saying this request had a duration that's because it it ended it's no longer a live websocket connection we closed the websocket connection because we left that page and all those server resources that we were using uh to make that page interactive have been have been freed up so this improves scalability and allows you to add interactivity just where it's where it's needed so that's adding interactivity using Blazer server I heard a question yeah so this Blazer component is in the web assembly project that since you added that directive to the top it runs on Blazer server yeah it's so the great question you I'll get to why I put this component in the client project um you'll see you you can see here that I have factored this app a bit on purpose to help make this demo flow work like this top project is the server project right this is the ASM core project hosting our our all our server side rendering stuff this client project is eventually what I'm going to want to the part that I want to push down to the browser like I'm gonna I'm going to show now rendering that component on web assembly and the code that will go to the browser and run on web assembly will all come from this one project and that factoring is important because you want to be careful about the dependencies that you add to the the part that you're going to build that's going to go down to the browser like you don't want to put a bunch of serers side stuff that gets downloaded to the browser that will bloat the size and you might have functionality that doesn't even make sense from a browser like you don't you don't need EF core usually when you're running in the browser you can't talk to your SQL Server database when you're running client side on the the users's machine so this separation helps to make sure that you whatever code you want to be downloadable and what code you want to stay on the server is really clear um now you have submit recipe in the web assembly project but when you change render mode to interactive server it is running on the server right everything so everything that that the server project references as as a dependency and that that project you can see right here is is one of its dependencies it's part of the graph of code that gets it's getting built for the server so everything in the client project is is just a normal net assembly dependency for the server so I can have components in the client project that I use from the server and that that's fine in fact you might even when even if they're all intended to run on web assembly you might still want to pre-render them from the server like do an initial static rendering of those components and then then while they're being wired up for interactivity on the client and web assembly like you're you know you're waiting for the web assembly runtime to be downloaded but at least you've got pixels on the screen by rendering from the server first so yeah you can you you can get access to those components in the client project because they're just a normal net Library dependency like a nou package or or a project so he really only separated them out because eventually he wants to show a demo where he I'm Gonna Change it to we assembly that's where I'm getting confused here so if that's say let's say that is a web assembly project it's getting shipped to the browser and you turn that render mode into an interactive server does it still get shipped to the browser or does no no it would it would so like let's say let's say I um like's let's let's actually add some some let's change this now so I'm gonna instead of just doing this one component I want to actually uh do the whole page let's make the whole page now interactive and this would do this would make it interactive using Blazer server if I switch this to interactive web assembly now this is saying this is a component I want to run from the client right now if I had another component in the same Library like I don't know this ingredients list editor it doesn't that doesn't really make sense but let's say I had another razor file where I put interactive server on it but it's in the client Library it would go down to the browser it will be part I mean it's just it's just an assembly right it'll get built into that assembly and that assembly will get downloaded to the browser browser unless theet trimmer because we run a trimmer when you publish the app decides to knock it out because nothing's referencing it does does that make sense yeah yeah my thought was I wonder if someone would look at this and because if it is getting shipped with the rest of the files even though it says interactive server that someone might be thinking that will stay on the server and put some code in there no that they think isn't going but it would it would if you looked at the assembly that got downloaded to the browser and looked at the ilil you would see that that interactive server component it's there it's it's it's in the binary because it's being built from this project so this project separation is designed to help people think about you know what code really needs to go where like if I have a component that really only needs to be on the server don't put it in the client project you can just leave it in the server project um serers side logic should stay in the server it's like Fight Club right uh the the client project is where you want to put just the stuff that needs to be downloaded to the browser me making this component interactive server was a bit artificial just to show that it can be done um really the stuff that would be in this client project would be stuff that needs to be downloaded uh to the browser to run on web assembly we did experiment for a while with a model of actually having both the client and server project be the same where we use multi-targeting where we basically take the one one project and build it twice once for the client and one once for the server kind of like how Maui projects are built right like if you look at a Maui project it's got like four or five different targets like the same app is being built for Windows and then for mac and then for iOS and then for Android and maybe Tyson um we play it around with doing that with blazer as well like having a build for client on web assembly and doing a build for for Server um but because of the way multitargeting works in net right now it was really difficult to make sure you didn't accidentally bleed stuff from the server into the client like it was too easy to accident take uh pick up dependencies on the client that you really meant to only live on the server and so we we we we hted on doing that at least for for doet 8 we still have some hopes that maybe we can get there eventually but for at least for doet 8 this separation is important so that you can reason about where the code what what code is going where and and by the way I sorry for interrupting but uh I think that in the works are some tools to help us determine and discern where things are running and also it'd be great in Visual Studio this isn't an asp net thing it's a visual studio thing to have some sort of notifications that you know you're running this interactive code without any interactivity or you know this is this code is going to run on the client or you know do you really want to do this it' be nice to at least have some compiler warnings or something like that yeah I I I agree like that scenario you saw where I had that uh that recipe page right where the button wasn't working why was the button not working um that uh can be that can you can easily hit that and be confused yeah it's stuff that we expect the compiler to catch the reason why we don't currently um raise an error make that an error case is because by default all components will pre-render like you the even even with blazer server today right like with an existing Blazer server app when you navigate to the application it actually renders from the server statically first and we'll generate HTML directly into the response stream and then you get that way the user can see at least see some HTML while you set up the websocket connection and set up all the interactivity um with web assembly in the past we didn't pre-render by default but you still you it was supported like you could do it where you pre-render from the server and while the web assembly runtime is being downloaded and setting it up for interactivity so you least see pixels while that's all happening that means that the components um do render statically a lot of the times so it's not an error to render them statically without interactivity it's actually feature that's that's how pre-rendering works so teasing out like when are you was this a pre-render or did you just accidentally render this statically and meant it to be interactive is is a tricky thing to to to tease there are some there are some obvious use cases though like if you create a new project with interaction per page component and you go ahead and set up a button click but you haven't added the attribute you know it lets you compile and it lets you run and then you click the button and nothing Happ I AG I I think there's more we can do there yeah there could be at least a warning that says hey do you know that this isn't going to happen you obviously expect it to yeah that's that's great feedback yeah we need we need to but it's not for you it's for the visual studio team I think well we're all one Microsoft right we work we work very closely together did I mention I love freaking Blazer in D NTI okay yeah it's great cool all right let's let's look at web assembly let's see the web assembly case so I've enabled web assembly now and this already conveniently in the client project so that's that's all set up to be built for web assembly as well and let's uh run that and see what that looks like okay so if we go to the recipe uh page this should still work and it does and now because i' I've actually enabled interactivity for the whole page right like I did it at the top so now I should be able to do things like um well actually let's let's say like I just submit the page without filling out the fields that are required and then I start filling stuff out chip cookies and then tab off that notice that the interactive uh validation is kicking in now if I pick an image for my my cookies I get this little uh preview of the image showing up on the page the whole form now is fully interactive and in this case it's running on web assembly from from from the the client you know uh what we do here um mix and bake what else do you need to know I mean it's really that simple okay so then we're able to submit our our recipe so if we look at how that's working on the The Wire so first of all I'm just going to clear out the cache to make sure that we don't have any web assembly stuff preached and let's see on the homepage if I refresh the homepage do we have any web assembly files being downloaded on the homepage no web assembly but if I browse to submit recipe aha now we get a whole bunch of web assembly stuff and there's our net web assembly runtime and then all this other all this other stuff too it looks huge it's just big because we're in development like when you go to publish this app we'll do that trimming step that I mentioned earlier where we knock out all the assemblies that you don't need and trim out all the code that you're not using and pre-c compress things so it shrinks it way down but during development we don't bother doing that so that your de developer internet Loop is as fast and responsive as as possible okay so that's how you can also do interactive web assem rendering the last trick is auto render mode um in Auto render mode the idea is to try and take the the the strengths of both the interactive server pattern and the interactive web assembly pattern and combine them together to deliver an even better user experience like what if you could initially start out the user with interactive server rendering you know set up a websocket connection so you get interactive interactivity immediately that's really quick to do you don't have to download any big stuff but in the background I don't know if you saw there the little net box like flew down in the background we we download the donet web assembly runtime in the background while you're still already set up with an interactive server uh um um uh setup I guess in in the application and then the next time the user comes to that that page or uses that component Blazer can detect like oh look there's already a net web assembly runtime here why don't I just use that and save on those precious server resources and then you offloaded that work from the server to the client so you're automatically choosing which render mode to use at runtime that's the auto interactive render mode let me show you what that looks like in practice so for this interactive web assembly component I'm going to switch this to interactive Auto and conveniently it's already in the client so that's what we need and we're going to go ahead and run that okay so now if we look at this app let's clear out the caches again make sure we don't have the web assembly runtime already pre-cached and let's refresh the homepage okay do we have any websockets no websockets do we have any web assembly no web assembly okay but if we browse to submit recipe all right there's that websocket connection right we've got the Blazer server websocket it's in the pending state so that's what's making this page interactive hopefully yes it is okay um but also if we look at web assembly we can see that in the background the web assembly runtime was downloaded and cached and then what happens is is that the next time if we re if we like let's say we browse back to this page in the future or I'm just going to refresh the page to simulate that notice I'm still filtering on websockets but now there's no websockets we didn't set up a a websocket again um the web assembly runtime was already downloaded and cached and if we try to do use an interactive feature like adding an ingredient that's still working and that's because we've shifted from the server to the client we're now running on web assembly so that's the new interactive Auto render mode kind of combines the strengths of server and client together so the page can load fast but you can still offload work to the to the client there are a couple of issues with Auto in doned 8 that we're we're we're in the process of of fixing so if you deploy with auto render mode right now and you're wondering like hey why am I not seeing this behavior when I publish the app uh we know uh as car I think Carl has been uh helping us out with uh going through some of this uh real world testing thank you um there's a patch release coming out in I think I think it's the January release where we're expecting to get this cleaned up it's either January or February where the auto mode will be tuned a little bit for real world usage but that's the that's the the the idea all right cool so that's the auto runer mode all right so how do you get started with all this great stuff uh there's a new uh Blazer web app template in donet 8 that has all these features set up for you uh it's set up with static server side rendering and all the progressive enhancements you can enable the different interactive render modes server web assembly or Auto and you can do that um on individual components or if you want to just enable it for the whole app you can you can do that as well so let me let me show you what getting started with this stuff looks like you just got to do file new project Blazer web app that's the new template right there that's the one you want um if you're looking for Blazer server in Don 8 it doesn't exist anymore because Blazer web app is the new replacement for Blazer server Plus+ Blazer server sharp it does everything that Blazer server can do plus all the web assembly stuff in one in one go so that's the template you're going to want uh we do actually still have you still have yeah I was going to say so if you still do the Blazer server Blazer web assembly templates those are foret 7 right yeah so like if if I if I filter in my visual studio on all the Blazer templates I actually have a whole bunch of Blazer templates like what are all these things so this is the new one right Blazer web app that's that's the one we'd recommend really for all your future usage there there is still this Blazer web assembly Standalone app template that we we still ship into on a date what this is is is a purely client side Blazer web assembly app with no server component it it's basically like a static site it's something that you could publish to GitHub Pages or Azure static web apps without any asit core server anything and have it work just like you know a bunch of JavaScript files and and an HTML file so that's what that one's for that's where like Statics site hosting scenario so that one is still there you may still see these guys below and those are the net7 uh templates if you have the doet 7 SDK also installed you'll still see the doet 7 templat so this Blazer server template down here that's the one that's coming from the the donet 7 SDK and if you like select it and like oh cool I'm going to create a donet 8 Blazer server app one thing that a lot of people have bumped into is they go to this picker and they're like wait where's the where's Don 8 and the reason why there's no Don at 8 is because there is no Blazer server template inet 8 you should use the Blazer web app template um if you have theet 7 SDK you'll still see theet 7 version of that of that template okay going back we don't want that one we want the new fancy so let's create a Blazer web app don8 that looks good and here are some options so off options for enabling individual user accounts here's where you can decide uh what off uh what render modes you want to enable in the app by default we will enable and by enable it this means like make it available to you to use um the interactive server rendering uh you can choose to only enable interactive web assembly rendering if you know you're only going to do interactive stuff from from web assembly or you can say you know what I just want it all give me server and web assembly and I want to be able to do auto then you select the the the last option I'm going to pick the default which is just server you can also decide at what location at what scope you want interactivity you can say you know what I only want inter activity where I choose to have it I'm going to add at render mode where I want some interactive features and everything else can just be uh statically rendered from the server or you might know you know what my whole app is going to be using all sorts of interactive stuff I'm basically going to end up making the whole app interactive so just go ahead and make the whole app interactive for me this would be the equivalent of the old Blazer web assembly or Blazer server templates where the whole app was just set up for for interactivity I'm going to keep it as per page or component um also you may have seen this little check boox down here includes sample Pages that's the way if you just want to um if you just want a blank canvas like you don't want the sample components and bootstrap and you know the the the demo Weare content in the template you can just uncheck this checkbox and uh you'll just get a an empty Blazer web app I'm going to leave that in because we're going to use it for a quick demo so let's create a Blazer web app here it is and if we go ahead and run this it will look like a Blazer web app that you may have seen lots of times before Purple Gradient and all that it's got a homepage it's got a counter you can click the counter it goes up it's got a weather page shows a bunch of weather data but this is running uh differently than previous Blazer apps the homepage is just doing static server side rendering that's it the counter page is an interactive page so it has the the websocket connection and if we look at the code let's look at the homepage so the homepage just static HTML nothing really nothing else really going on there the counter page looks like a normal Blazer counter but it's got that render mode attribute at the top to say you know what this one page I want to be interactive we'll only have a websocket connection you know interactive server rendering for this one page and then on the weather page this is again doing static server side rendering but you can see at the top that it also has set up streaming rendering so it has a a little artificial async task arrow down here and it's on initialize async method to simulate as if it's going off and doing an API call to get the weather forecast data and then that allows the placeholder to render and then after that's done it generates the weather data and that's what allows the weather data to then render in a streamed update so that's how we're getting all those features in one template so you got it all right here you can do interactive rendering streaming rendering all the navigations are already set up as enhanced navigations CU we've already added the the Blazer web web script um yeah so all the features available with the the new template and yeah we got SP that okay um that's the full stack web UI story so we saw all the features uh that's how you can really handle all of your webui needs with Blazer and don8 you with within that one component model you can build any type of web UI architecture that that that you want now that's not all we did in donad dat we also have a bunch of additional framework uh enhancements and features that you can use to make your Blazer apps even better and be more productive um quick grid is our fast and functional data grid component that we previewed initially with Net 7 it is now available out of the box with net 8 um it is stable so you have a data grid control that you can just use right with with included with with blazer uh sections is a way that you can Define outlets for content in one component that can then be filled in by another component if you've done any like MVC or Raz razor Pages development um sections are thing in a cshtml like you define a section in like your layout and then other Pages can like you know provide content for that section saying concept except now with components so you have sections available in your Blazer components uh we did a bunch of improvements to the Blazer router uh we actually like aligned it up with uh the endpoint rout routing router in in ASM core so it now supports all the um route constraints and optional route parameters those all now work uh and we now support routing to named elements uh so the routing uh is much better and improved in 8 uh we added an API so that you can monitor circuit activity for your uh Blazer server circuits so you can detect when circuits are idle and we also did a bunch of improvements in uh for authentication across the board in asp.net core for Blazer that included adding uh outof the boox Blazer components on uh for handling identity for uh building a default identity UI using asith core identity so I'll show you a few of these things really quick uh for this I'm going to create a new app and I'm actually going to use uh deliberately going to use Visual Studio preview for this demo uh because I'll show you one of the new cool tooling features that comes with Visual Studio preview as well so let's create a Blazer web app and it looks good and again I'll select the defaults except this time I'm going to turn on o so we can see the the new o support right and there we go okay and I'm goingon to go ahead and run this app and this should look just like the other one except what ignore that uh preview let's see rebuild is that just because the new get package restore hadn't completed I assume okay yeah just a little net glitch sorry I clicked build too fast I guess all right there we go so there's our Blazer web app and now we've got a you see we got home counter and weather but we've also got a few extra tabs on the application we've got this off required tab if I try to click that I get bounced right over to the login page that's because in order to view Au required I need to be logged in uh and I don't have a username and password set up yet so let's register as a new user and we can go ahead and do that let's type in my pass password do that password and then I think because this is a new app yeah I have to run migrations on the database to apply the identity schema to the database but we got a little button here that will just do that for you refresh the page cool I just registered a new user and I can uh this is a I can I need to confirm my email and during development you can just click this link in order to do that now I should be able to log [Music] in with my new user account I'm logged in and now if I click on that off required page I can see the protected content and it knows who I am there's also this user account page which has all the stuff for looking at your user profile uh changing your email address updating your password setting up two Factor authentication you know it's the full asmi core identity uh experience except all this UI now is built using Blazer components instead of uh I think razor pages is what we used in uh previous releases the razor Pages default identity UI is still available if you're using it you can still use that but for Blazer apps you now have a full uh Blazer based solution all the components for the identity um uh UI experience in this app is under this accounts folder you can see all the components here and these are all just static server side rendered uh components so you can customize this code and adjust it to your application need so that's that's authentic question yeah so all the scaffolding that we used before to add identity to a Blazer or an aspnet server application is that all redone for for bler for all aspnet pages like so there is an identity scaffolder that we that the ships with visual studio and that identity scaffolder is still the razor Pages based scaffolder um we have we haven't built the Blazer version of that scaffolder yet but we will like that's uh that's in the works uh doesn't look like it's going to land yet for 179 of Visual Studio but probably by I think like middle of next year you should expect to see a Blazer identity scaffolder where you can generate these components into an existing app well if you need help the only way to get them is by creating a new project and if you need them you have to like copy and paste them into an existing app which I know it's kind of like the uh the identity UI that we had like you know five years ago in as core um before we added the scaffolder um we just haven't gotten the Blazer scaffolder done yet it's so much better to have have Blazer pages on the client then have to go to the server to get to do the login and stuff that's great so the well that that that that's a different interesting interesting point so these pages are all still actually static service side rendered Pages like they're they're interacting with the identity uh UI sorry the identity apis from the server because they're running from the server so they're set up to be static service side rendered Pages um they're not actually set up to be moved completely on to to web assembly um we haven't built a fully client friendly version of the uh of these Blazer components that would mean like doing API calls to like access the user information and setting up the user account that which these Pages don't don't currently do um if you feel a strong need to have a full client side solution for your uh Blazer identity UI let let me know because that's uh that's something we haven't actually completed yet but it's something we could we could consider I was going ask about that so these are all statically rendered that's how you're able to put the cookie into the browser yeah it's just cookie based off and it's doing it all from the server it's interacting with the database directly from the server I can see the look of disappointment in in Carl's face he's like no I thought no no that's fine that's fine the the best part is I get to contain it all and I get to customize it to to my desires right Brandon Etc Blazer web apps now like they're a mix of all the like you can use any of the render modes together so you can have still your app be a Blazer web assembly app and the identity parts are all being just you know just static service side rendered Pages because for a lot of them actually it makes a lot of sense like most of them are just there's not like a lot of drag and drop and like button- clicky things that are happening on the identity Pages um so the user experience for them is is Snappy it's fast it loads quickly so for a lot of those pages I I would argue actually it makes sense um cases where you might want a full client side experience is like well I want to deploy this to like a static site host like how do I do this on like GitHub Pages or how do I do this from you know an AOS static web app you know that type of thing in those cases you might want the to the the flexibility to be rendered the the UI from the client which I would understand but a moment's a moment's thought and you realize that wow this is hard so I need to have an authenticated API to call into my login page however I'm not authenticated yet yeah yeah that's a real tricky situation yeah you have to well you have to have a login endpoint actually the log endpoint can't be authenticated that would have to be something that allow Anonymous access but that's the endpoint you go to and make an API request to acquire maybe a token um the we do have in asmi core in donet 8 um new identity endpoints that we do provide now as part of asit core uh as part of as core identity so these are programmatic endpoints that you could call from like an angular app or react applications precisely for this reason like maybe you want to do uh client side manage ment of of identity you can you can do that uh we just haven't built Blazer components that follow that pattern uh because we haven't really felt the the need to because you can mix the static service side render pages with your ultimately you have to call a server to log in anyway yeah yeah so you might as well render it from the server but but the key is to be able to control the UI and to control what the user sees and you know brand it to you like I love the fact that it's right in your Blazer app it's a page it's not an outside you know CSH HTML page and it's also all within it is still the Blazer component programming model like the way you interact with these these are all razor files you're not mix having a mix of you know cshtml and and Razer or Razer and you know jsx files or whatever it is that you're using if you're using Javas client like JavaScript you get to operate within one model for how you're building all of your web UI you just deciding like how those components then render what render mode you want to use for those components yeah great um before we go on any is there any love for Azure ADB Toc that is different in donet 8 yeah so the you may have noticed that in the off dropdown for the Blazer web app uh the Microsoft identity platform option is currently missing uh we didn't get that done in in donet 8 it's which which we did a lot in donet 8 but there's still of course there's always more to do um we are in the process right now of building out the um micro oft identity platform samples for Blazer web apps for how do you use azr and azr BTC from this style of Blazer application um and we will add tooling so that you can just you know select the option have it wired up for you or do add connected service and say please add Microsoft ad platform to my existing app those features are coming they just didn't get done by uh by November brilliant um let's see also adding uh some data so this is the reason why I picked Visual Studio preview because another cool feature that you uh have available to you in preview form is let's say I want to actually let me add a model type let's add the the famous movie type from the movie tutorial let's I think I've got it right here yeah here's movie CS so this is just a simple uh entity data model you know it's a movie with an ID and then title release date genre and price and what I want to do is I want to generate some Blazer Pages based off of this uh this movie type well we can do that by just right clicking add new scaffolded item run Visual Studio scaffolding uh tooling and pick razor components and I'm going to use the new razor component using EF core crud scaffolder to generate these Pages let's select that and here I can pick which uh templates I want to generate I can pick individual create read you know update delete pages or I can just select crud which will generate them all uh I pick my model type let's find my my movie type in here there it is uh pick my DB context I already have one because we uh set ourselves up with identity and just go ahead and add that and instead of having to write a bunch of EF core code for my blazer components I'm just going to let Visual Studio do that for me that should generate me that there something in build hours what eress what build errors uh uh I've never seen a demo without one of those Dan I know I've never seen that well looks like it worked I don't know what that was preview feature so you know some bugs may still exist um I just generated all these Pages for me um and I also want to be able to store my movies in the database so I I need to also run a migration to apply the movie schema so let's do that real quick let's do uh migration and know movies and then update the database with the migration we go hopefully some Telemetry got sent from visual studio for that build failure so that the dev is working on the scaffolding feature can finish fixing it up okay so now if I run this oh looks like it's PR running yep still running go to and I didn't add a link to it so I'm just going to browse directly to slov we've got a little like movie uh set of pages that we can use so we can create a new movie add a movie I don't actually know the release date for et I looked it up at one point for for this demo but totally forgotten it's sometime in the 80s 1980 Something I only do I only do movies from the 80s cuz that's when all the good movies were uh sci-fi I don't know $8.99 for the price so we've added a movie to our table we can view its details you can edit the movie got a little form here that's been generated for us back to the list and we can delete movies as well so we now have you know basic crud Pages for connecting to data from our Blazer components using the new blazer crud scaffolder and what's neat is this isn't just a vanilla table if we look at the index page that got generated let me give myself a little bit more room here about doing it like that that homepage this this index page is actually using quick Grid it's using our new data grid component for generating that table and this supports all sorts of really nice features for displaying and manipulating your data uh for example let's do a bunch of edits here um this release date doesn't look like it looks like it's just pulling it from the property name um we can update that let's change that to release date with a proper space in it and go ahead and hot reload that into the running application boom done um this date looks a little verbose Let's uh format that a bit to month month DayDay year and save that boom there we go um we can add sorting let's do sortable equals true and now you should see that the title see how the title is uh selectable now and I can click on it of course we only have one movie let's um let have another movie I think I did the Labyrinth while you're while you're editing Dan Kelly brought it up it's June 11th 1982 that was close was close I don't know Labyrinth is they're all in the summer right they're all the movies get released sometime in the summer or Le summer in in our hemisphere this one's 1980 Something and the genre for Labyrinth is I don't know it's weird it's um say Adventure I guess this movie gave me nightmares as a kid that's why I like putting it putting it on here now if I let's say if I can sort now and it's still not sortable why is it not sortable that's because remember by default Blazer renders Pages statically static it's doing static service side rendering so it's not an interactive page yet and this is where Carl would say Dan there should be a warning there saying that you're using an interactive component yeah you know it's not that there should be a warning it's just that it's this is the new normal that people have to get used to that if they don't put that interaction attribute there it's not going to work I I don't disagree so let's make this component interactive let's fix that interactive server and I think have to restart the app in order to get that to really to apply I've got a bug filed about applying interactive render modes using uh hot reload it's not not supported yet but now if I click on this you can see I can sort change the order that's how easy it is to add sorting uh we have a paginator that's included with the uh with quick grid let's add a paginator component I'm getting a little warning here the paginator component expects a value for the parameter State and I broke because I accidentally saved and replied it to the running app so that was was hot reload letting me know that that's not going to work uh so I need to add a state parameter here uh what is the state the state should be a pagination state so let's just add a little code block and add a pagination state object down below and this is where we like uh specify like how many items do we want per page since I only have two we're going to make the items per page one and let's go ahead and add that state right here this is also the state object that the paginator uses coordinate with the quick grid so you actually also have to say pagination and then apply uh pass in the state object to the quick grid too so that it knows about both okay and looks like we are back in gear and now we've got a little paginator widget at the bottom so we can you know is it not work working there we go so I can click back and forth and see my my two pages and you can add filtering you can add virtualization there's a really nice um demo site for quick Grid at aka.ms Blazer Qui grid just go there there a little GitHub Pages based site it's actually a Blazer web assembly based site that has a example of quick grid we know all the things that we showed sorting and filtering filter to Canada and see how Canada does in the Olympics um clear that out and so forth you can connect to various data sources uh it supports virtualization so this this quick grid is actually rendering like 22,000 rows of data into this uh this grid and it's rendering them as they become visible that's what uh that's how virtualization works so that's supported right out of the box you can style it however you want you know make it look super professional and so on so it's a it's a very you know fully featured quick grid um if you really want every Bell and whistle uh quick grid is might might end up being a little bit uh to feature uh poor for your needs and those cases we would recommend going off and checking out the you know the the commercial grade grid comp data grid components from like terer and sync fusion and Dev Express and so on but for many uh common scenarios quick grid is is is quite sufficient so that is quick grid the new identity uh UI and the new blazer uh crud scaffolder as well I know I'm a little bit over time so I think I'll we'll start stff there couple other quick things I just want to call out before we wrap up um web assembly execution inet 8 is much improved uh for net code um that we have a a new interpreter based runtime in donet 8 and what this is is it's the the donet runtime that you download to the browser to run your your net code in the past it didn't have any jit support it couldn't take your net iil and convert it to web assembly on the fly like you would expect a like a server runtime to do like a server runtime will take your yournet assemblies and we jit them to Native instructions for your for your underlying platform we didn't have that for web assembly for a long time but in donet 8 we now have a a partial jit support for our doet web assembly runtime and that makes it run much much faster so you know 20% faster UI rendering Json distalization is way faster it's like twice as fast significant runtime performance Improvement for your code running client side in the browser uh hot reload in don8 is significantly improved we support um new hot reload types uh types of edits you can now uh edit generic uh uh types um and also the um uh hot reloading to a web assembly based app now supports all the edit types that were supported for server-based workloads so we have full parody on the the edit set and we continue to do work to uh push back that Frontier of what works with hot reload I just got an email today about capturing lambdas now supporting hot reload which is huge for Blazer like if you've ever had like a child content or a templated parameter like you're using mud Blazer or whatever and you've got a bunch of content inside of a component tag and that never worked with hot reload because it's a Lambda that's capturing some State and hot reload didn't support that that is coming and that's going to be way better so this this is a constantly improving uh bar the hot reload experience um if you're doing ahead of time compilation like taking your net code and just compiling it directly to web assembly uh as far as a build step that's also much faster in donet 8 thanks to uh simd and exception handling support being turned on by default um we have a new packaging format for uh web assembly based apps called webc um we got a bunch of feedback from Blazer web assembly users that in certain environments their apps get blocked uh by uh like firewalls or security software because they see a dll being downloaded across the network and they're like no no no and they just just just to stop it and Blazer is based onet dlet assemblies which are dlls and so they would sometimes get blocked in very restrictive environments in do8 we have a new packaging format for your assemblies that strips off all the you know Windows native execut of your assemblies and just makes them into uh packages them basically as web assembly files to avoid that problem as far as we we've heard so far this has uh had a lot of success that people are um haven't heard any problems yet with the the new packaging format which is very promising uh Alo we have improved our content security policy uh compatibility with blazer web assembly apps in Don 8 so you don't have to uh uh enable unsafe EV out if you're I'm gonna I'm gonna you can you can render components outside of an HP request now like you can just take a Blazer component and render it to a string or to like a a stream like a text file um without having asit core in the picture at all this is useful if you want to do like templating of content like you want to generate some HTML just using Blaze BL as Blazer components as your templating model um this is laying some foundational work for static site generation support post.net 8 uh it's pretty cool you can should check it out you can basically build a console app that just renders Blazer components to to to text what's really good about that if I may is you let's say you have a podcast I don't know anybody would would have a podcast and you update your content once a week so your page updates once a week you could render that on your desktop to HTML and then just copy your HTML up to Azure AWS wherever your static site is and you're done that's it y That's the in fact that um the quick grid website is actually a bunch of the pages of that site are statically generated like we just pre-generated them using from the Blazer components at at build time using a a community solution uh from J Sakamoto who he built a Blazer static site generation solution uh we're hoping that uh with this new capability in the framework it will make that type of static site generation uh easier and more first class probably actually I think needs to be a framework feature something that we just we just provide um I just show it real quick it's it's real fast demo so uh where is it let's get off review vs and let's bring it up here is this HML so this is just a console app solution explor is hiding okay so this is just a console app um but the it's using the new HTML renderer API so that's the thing you use to render components wherever You' like um and then down here below we are calling a render component a sync and just pointing it at our component type that we want to to to render the only thing that's kind of um interesting and tricky here here is that you need to render components in the context of a component dispatcher so that's what this invoke async call is doing it's sort of setting up that context so that we can then call render component async but then you just render a component so here I have a razor file uh just a simple little component and if we run this you know we can render a bunch of HTML to the console output without any asit core any HTML uh context uh in the uh in in the application so uh I I'll put that sample in the the chat in just a bit so you guys can play around with that um for people that have existing Blazer apps just want to clarify that you can just update your existing Blazer server and Blazer web assembly apps to netet 8 without changing any code just retarget to don8 update the N get packages and that should just work if that if you find if you found that's not true let me know because that should be true it's a it's a bug if if it's not so you know it was a Steve that you were upgrading you know from from doet 7 to doet 8 that from a Blazer perspective that should have been silky smooth super super seamless that's that's the intent if you decide you also want to move to the Blazer web app pattern to you know take advantage of the new Full stack web UI features that does require some code changes but that that that is doable as well we have docs in our migration guides that show you how you can evolve a Blazer server app to be a Blazer web app or evolve a Blazer web assembly app to be a Blazer web app um if you're not using Blazer you can still start using Blazer like if you have an MVC app or a Razer Pages app you can add Blazer components to your existing application like you can just add Blazer component based Pages alongside your MVC views or alongside your your razor Pages you can even render Blazer components from your cshtml files there's a tag helper that we provide even before N8 like it was available in in earlier versions where you can just take a component and render it from a CSH HTML file that's that's already supported um in donet 8 we did add a razor component result which is an i result that you can return from like a minimal API or a um MVC controller to just render a component as a result of an MVC action or in response to a minimal uh API request and you you can also always render a Blazer component from any web application I mean any web application by just rendering them as custom elements Blazer supports Uh custom Elements which is an H HTML standard of defining custom tags uh at like the JavaScript layer you can register a Blazer component as a custom element and now that component can be rendered from a JavaScript based app like an angular app or react app you can even technically render them from like AET framework app like if you have a web forms app and you want to render a Blazer component in it register it as a custom HTML tag and you can do that if you uh use the the web assembly based uh uh hosting model so lots of ways that you can integrate Blazer into your existing apps even if you're not using Blazer today and with that I'll just bring up this is the summary of everything that's new inet 8 all the full stack web UI features that we went through lots of framework enhancements quick grid generating static HTML from components sections the off support lots of improvements on on web assembly as well so we we are deeply invested in in Blazer we think the future for Blazer is bright I would say that these days if you're building a web app withn net my recommendation to you is you should use Blazer to to to build that web app that is the that is the recommended solution obviously lots of people have MVC apps and razor Pages apps and they'll continue to develop those and if you have lots of of engineering investments in those Frameworks that's totally fine they're not going away they're still absolutely supported but for a new app I would absolutely recommend using using blade laser for your web app development because you get the full endtoend Webb development experience all within one one framework and you should give it a try today download install.net 8 build your first Blazer web app it's loads of fun and uh let us know how you how that experience goes and I will stop there I think I went a little bit over time sorry about that but I'm happy to to stick around and answer some questions uh Dan real quick I don't have a question but I have a comment I was talking with Jeff poo to today who is one of the early adopters of aspnet MBC I remember uh interviewing him on net rocks as soon as MBC came out and he is fully in the Blazer web app.net 8 camp now um he had done a couple or at least one Blazer app for uh a a client and then seeing what's going on inet a he's like well there's no reason to start a new project with anything but a blazer web app now so that's cool that's great to have a Jeff is a as a Happy C I was chatting with Jeff actually a few a few days ago we did a podcast together on his uh clear measure podcast and yeah we were talking about some of the apps that he's built like I know he built an auction based app for a while like during the pandemic years where he was able to help like state fairs do like remote auctions using a a Blazer server based application and yeah it's cool to see some of the stuff that that he's done oh thanks thanks Sean for just reinforces the idea that you know your go-to start Greenfield uh template should be Blazer web uh Blazer web app in net 8 so I don't think it's possible for you to go too long Dan uh this was a great talk I really appreciate it and the demos were awesome um a question just came in uh could you speak a bit about offline first database development any work being done about local data caching during intermittent connectivity and then syncing back to the server when connectivity is restored perhaps it would be greater need more with hybrid Blazer Maui apps okay yeah so like where you have data on the client and you need a synchronization solution so like like you might have built a pwa uh with blazer which means that you know the Blazer files can be downloaded to the browser and cached and you um you have service worker and all the all the infrastructure in place so that app can actually run offline and you might be collecting data with that app and then later you need to syn it up to the to the server um we haven't done anything in the net platform to assist with that scen uh scenario we do have um support for well so in the browser you have a bunch of of data storage solutions right like there's indexdb there's local storage so you have different options in the web platform for storing data and then in order to interact with those storage mechanisms you typically need some amount of uh JavaScript interrupted day like like Blazer doesn't provide apis out of the box for like interacting with indexdb but the community does like there's lots of there's n get packages out there that you can use that provide like a dotnet wrapper around those local storage mechanisms Carl do you have one is is a I do yeah if you look at Blazer Train episodes 80 and 81 uh and the GitHub repo that I posted in the chat I've actually created a repository that will include index DP so rather than having to write SQL statements you use a repository pattern so you've got a basic interface to do crud stuff and when you use the indexdb repository with the same interface that You' use for API calls or ND framework or whatever uh you can write to or did you endot I wrote my own synchronization yes okay so Carl has one use Carl's thing well I I I haven't gotten a lot of feedback on it um some people have said it works great and I think it works good but the whole idea like you said is that when you're offline you're logging these uh transactions right the I added this record I deleted this record I edited this record and you're accessing you're working on n xtb then when you go online poof it syncs automatically and all of those transactional uh actions get updated yeah yeah yeah so um I I know that that's I I know there have been other like I think Microsoft for a while shipped a thing called the sync framework and I don't know what happened to it I remember years and years ago seeing it being advertised like back when I used to working on campus you know yeah back in Redmond I remember that advertis yeah the problem was it was sort of uh it was tightly coupled to SQL Server I think was no was it okay yeah I think and and this is an interface it's a repository pattern so you can use whatever you want so that's that's what I would look at so do we have anything in the net platform no like we haven't tried to to solve that as a provide an outof the boox solution for that but I would look to things in the community like what Carl is mentioning uh to solve that problem the the the fundamental pieces that you need for it should all be available to you all right pretty cool another question came up because apparently somebody's very hungry the food app that that was uh you demoed is that available someplace where uh maybe on the Amor GitHub for that or is that already posted out there I'm putting it in the chat right now I spent some time before this presentation finally getting that repo updated so that the main branch is actually theet 8 version now and uh cleaning things up so yeah that's the that's the repo with the recipe app um there are a couple branches of it like there's a Blazer server version there's a Blazer web assembly version that are older I don't think I updated those to net 8 yet but the main branch should now be the Blazer web out version okay very cool is there any way to from the browser to get the current state like appearance of a Blazer app as static HTML with no interactivity like capture the HTML of the screen get the current state of a Blazer app a static HTML I want to build a PC render the HTML handle it to it tell them make this look pretty then hand it back well I mean you can always just like control U and like just view the uh the source of the page and then uh hand hand that over so the browser will will will give you the HTML that was rendered from from the server if you're looking for some like tooling that will export it uh as a as a file uh I mean I'm sure there's some some apis in JavaScript where you can just capture the Dom and then uh try and generate the HTML version of it I I'm not less sure about that um but certainly just like using the browser Dev tools you can pretty easily capture the the render HTML from the browser James I don't know if that helps is that is that is that is that well it usually just gives you like the simple the simple block with you know everything El everything the Jer the Blazer is going to put into there so you just get like the one you know the one Dev with the you know app you know ID app and yeah well I um I don't in terms of automatically doing certainly certainly from the browser Dev tools you can you can grab the the the content um you could I'm trying to think if what else how else I would do this like it way sort of export what it looks like I think the easiest thing honestly just render in the browser and then like use the browser features to get the to get the content that's the best thing I can think of if some if people on the call have other ideas feel free to to chime in I've never seen anything like that all right any other questions you know something I would like to see um is a Microsoft supported nougat package that has the all the interfaces to the JavaScript apis yeah so if you wanted to do you know call the document API you're want to call media recorder or something full coverage code generation that generated all those interfaces and just ready to use I mean it would be fantastic what's the matter Chavis script not clear enough for you well I mean I'm fine I will write the typescript files but lots of times I find that I'm just writing essentially an interface to the JavaScript API yeah dude I feel your pain I feel your pain you know we we so originally that was the uh the idea um just never quite came to full fruition because the the the the runtime that Blazer on particularly on web assembly is based on is the mono based uh runtime um I mean it's all for honestly these days like it's all just one big doet runtime team and they just have different runtime implementations for different platforms that we that we care about the fact that it comes from the mono Heritage is just basically history to us at this point but that that's where it Origins came from and the people who worked on the monor run time were from like you know zamon the Maui folks and they had a culture of like you know when we go to a platform we build tooling to generate bind ings for all the platform apis that we care about so that you can easily call them from from net so when we were doing Blazer in the early days there was projects to through tooling generating bindings to the JavaScript apis from fromet net and I'm guessing there's probably still some branch and some Repro kicking around someplace where this effort started it ended up um we ended up scoping back from it um part of it was because we were nervous about shipping it and having them not be very um uh just not very usable like often uh uh machine generated bindings can be a little bit rough a little bit uh you know more for machines than for for people and we saw a lot of value in sort of human crafted JavaScript interop libraries that really you know satisfied people's end user scenarios as opposed to just being something you generated from typescript definitions so we were worried about putting about out a whole bunch of apis that ended up not being you know H having very good uh what's the word I'm looking for just not having very good usability characteristics so we we we paused on it and then we just never resumed um I think there have been a couple efforts over the years to like generate tooling from the community to generate tooling that would uh generate JavaScript interupt bindings based off of typescript definitions I think uh you know David Pine worked on something along those lines for a while um I'm actually a little surprised that no one in the community has just been like you know what I'm just going to do this I'm just gonna build a tool that sucks in all the typescript definitions for all the JavaScript apis and spews out a whole bunch of packages and just call it good um someone wants to try like package because I don't really need the code generation to happen on my end I just need the the yeah if someone just build the tool that can generate all do the Coden for all the new get packages that then people can just like use those interfaces yeah yeah just get that file and then use it because if you go to you know a typescript file and you control click on say the media recorder that typescript file that is it takes you to isn't that big I mean yeah yep yeah no I I agree it's uh it's on uh it's on the backlog of things that uh I think would be interesting to to Still Still tackle I think we had hoped also that um by enabling the community like that there would just be enough new get packages that would be built up by the community that wouldn't be needed anymore to actually have Microsoft Shi these libraries that we would just have a good ecosystem of them and we do have a pretty decent ecosystem of JavaScript and trop libraries but they have varying it's kind of like it's a little bit like the JavaScript ecosystem as well right like there's there's a lot of packages they have varying levels of quality varying levels of uh of of of M maintenance on them and there the coverage is still pretty patchy um it'd be nice just to cover everything so good feedback I'll take that back to the team and say you know can we do this finally that would be it'd be amazing I think I suspect there's also a like interchange Type U benefit from doing that like um the the do the people that work on the core framework libraries in net have this notion of like you know key interchange types like data types that represent chunks of data that often involve interactions across different systems and you really don't want to have that type have multiple versions of that type you really just want to kind of everyone unify on this is the type that we use to represent a good or a string or you know whatever it is um I suspect by um normalizing the API set for what it means to interact with the web platform through through net that that will enable a much richer ecosystem on top like everyone knows like oh the way you interact with the storage apis is using this common storage abstraction kind of like the way you interact with the file in net is using the common file abstraction there's not like five different ways of interacting with the file there's just one um I'm guessing that would help that ecosystem build up a little bit uh quicker and more more nimbly this has been an amazing discussion very cool yeah Chuck have a good evening um yeah thank you Dan so much I greatly appreciate you coming out and doing the talk for us and uh uh this this has been awesome greatly appreciate thank you for having me thank you for letting me participate in your uh in your community and your user group um don't be strangers if uh this doesn't have to be the end of this conversation like you can find me on on Twitter or X whatever it's called these days I am on Mastadon as well um you can always of course find the entire team on on GitHub if you have questions or if you had issues like just go ahead open a GitHub issue start a conversation if you have ideas on how we can make Blazer better we also want to hear those there as as well so feel free to share your proposals you know get something started with not just us but with the rest of the Blazer uh Community thank you Dan to you and Steve and the entire Blazer section of the ASP net core team this is an amazing technology and the you know three years ago when I first got wind of it or four years ago now I knew it was going to be the stuff and to see it come to fruition slowly and now you know it's the def facto way to build uh donet core asp.net core websites it's just amazing so congratulations and thank you thank you it's amazing to see how far it's come and yeah it's not new anymore right like I know sometimes I still hear people say like oh Blazer's a little new I'm like no it's not like we Shi Blazer back in like you know 2019 was when it first shipped the first stable release the first like preview releases were like 20 18 even back in 2017 so this is a pretty mature framework now the ecosystems built out the The Experience built out so I think you you you're in uh you're in good company if you're building your next next web app with [Music] blazer

Channel: Tulsa DNUG

Views: 3,843

Keywords:

Id: jpv9zPLO_KU

Length: 99min 18sec (5958 seconds)

Published: Fri Dec 15 2023