Building a Full Stack Web UI With Blazor - Live With Microsoft Principal PM!

uh hi my name's Nick centino I'm a principal software engineering manager at Microsoft I'm joined by Dan Roth today who is a principal PM for Blazer at Microsoft so this is going to be very exciting uh Dan you're going to be doing some live coding in Blazer so that's right yeah it's great to be here thanks for having me Nick I've been enjoying watching you do some uh Blazer coding on your channel a little bit yes a little bit of it I'm still I'm definitely uh definitely a junior for Blazer stuff but uh for me it's really exciting because we were chatting a little bit before uh you know pressing the go live button but like traditionally for me I'm a you know C developer for a very long time but I do a lot of backend development and other than that it's been like desktop development so I spent a lot of time with win forms and WPF but if someone was like hey can you make a website for me as much as I mock JavaScript and stuff I'm kind of like I'm not really I'm not the person for that it's like it's not my forte so um I think blazer for me is just like this really exciting opportunity so I'm I'm personally really excited to learn from you uh during this uh this stream as well yeah my I I I still remember actually the first time that I sat down with like the early Blazer prototype that Steve Sanderson was uh was working on it was just like a demo that he did for a conference presentation and I remember working with it and being like I can do front-end web development now with such a you know right I know um enabling experience to to you know be a write in C right get really great interactive experiences happening in the browser without having to uh to write JavaScript since that wasn't my forte I mean I actually think javascripts come a long way since the particularly since those early days when we really started working on on Blazer uh so if you're a big JavaScript fan no no worries but uh you know being able to work end to end in net and c I think is just really a great experience absolutely I fully agree with that so yeah it's uh it's one of those things especially for me you know I I always tell people if you want to get good at something you have to spend the time doing it I have not spent the time with JavaScript um I've spent a lot of time with C and.net now I have to spend more time with blazer so that I can actually learn the technology learn some of the nuances how to do things properly the patterns so I have to carve out time to do it but um it's one of those things where I'm like at least I know if if I do it I can leverage all of my net knowledge and not feel like I'm restarting from scratch so there's there's always more to learn and it's nice when you can reuse the skills and knowledge that you already have yeah yeah absolutely yeah and I know so you you had a couple of I think you said a couple slides prepared and then yeah let me let me we can use that as a starting point then we're gonna cool and um yeah what I think you know what I wanted to to highlight today is just talking about this move move to uh full stack web UI development that that we see happening in the you know the web development world and also that we've been working on with with blazer so Blazer obviously is a you know it's a front-end web UI framework and it comes with with net like it's in the net platform and inet 8 like which we just shipped this past November not that not that long ago uh in donet 8 we significantly expanded Blazers capabilities so that it can handle the needs of modern full stack web web development um I think there are a lot of opinions out there about what's the the right way to to to build a web app um one common way uh is to do all of your rendering of the web app from the server like doing serers side rendering andet has had support for this for forever like we've done serers side rendering with net U Back In Net's Origins with like asp.net and web forms and then MBC and now as net core we still support this this pattern and you know the nice thing about service side rendering is you you get a request from from the the user and then you handle those those requests using your server resources you can connect to your database you can connect to any backend systems because you're already there in that that backend environment and then you generate the HTML payload for for just that request you know the perfectly you know constructed response to to give a a UI experience for that user that would is is best for for that user so serers side rendered apps tend to they tend to load fast because you're not having to download a a lot to the to the client to just render some some UI um and you're doing you're using all your server resources to make that experience as fast and optimal as possible now the other there's another camp that will say no you should do everything from from the client you should you Leverage The the browser and the client side resources to to build your your web app You Know download a whole bunch of JavaScript into the browser right is the way this this style goes and in this world um you you're right there in the client so you can handle all the UI events like when the user clicks on buttons or does things well you're running code right there on their machine and so you can handle those UI events really smoothly and fluidly get a really nice rich interactive um experience you can take advantage of the client's uh resources like it's memory and its storage and it's CPU um and you can even get into the Dom to like you know manipulate it and have those really nice smooth uh updates and uh and UI changes um so you know right which way should you go like which what type of web app should you should you build um well I think the answer is that that there's strengths to to both approaches you get you get a lot of performance and and uh you know good user experiences out of rendering from the server and you can get rich interactivity by leveraging the client I think many web apps actually benefit from from both patterns within even within the same web application so what we uh what we did in doet 8 is we you know took those advantages and we merged them together into into Blazer so that you can use Blazer to take advantage of both the server and the client when building web apps you can do full stack uh web UI development to deliver the best possible end user experience um and that involved making sure that you could um take your Blazer components and Route requests to them so you can take a request goes to your component it renders an htl response and then it's done you know there's no websockets or web assembly involved in that that style of approach um but you can also have your components run on the client and handle all the rich interactive experiences from the client handle UI events manipulate the Dom and and so forth all within a single component model within a a a single framework so that's what full stack web UI uh in Blazer and d8 is really all about which is awesome it's like like you said it's like kind of The Best of Both Worlds because if you're setting out to go develop something and you're feeling like you have to pick from one extreme you're like well I know I get all these benefits but you have to acknowledge there's pros and cons to everything so you're kind of just signing up for saying well therefore I have to have all of these cons uh and that's just how it is but if you can have something that allows you to have both um yeah I think it's uh I think in almost everything we find like some of the best Solutions are somewhere in the middle of extremes so yeah yeah you uh you want the flexibility to make the right choices that work for your web application you know some pages might just be content that's based on stuff in a database in those cases server side rendering is is great you just generate the page and you're done and it loads very very quickly it's very very efficient in other cases you have an app that's a you know more app-like experience right like you have Rich user interactions in that case you probably want to be leveraging the the client more so Blazer gives you that that flexibility all with donet all with c and the the benefit to you by by leveraging everything in you know one language and one framework one one build system is it's just much faster to get your web app done and to to stay productive you can like you we were talking earlier you know there's only so many hours in the day to go learning Technologies if you can if you already have a net skill set and you can leverage those skills uh as far of doing your your your web app development that's a that's a huge win and being able to keep everything consistent within one system also really uh can help so we we focus a lot on productivity you know speed to to to De of development in the the Blazer development experience so I thought actually which let's let's I know we said we promis do some live coding here so I thought we would go in show what the getting started experience with laser looks like all right so let's into visual I know there's a couple people talking in chat I had to refresh the chat and I lost one of the messages someone had it seemed like a pretty specific request for being able to set something up in code so uh just a reminder for folks if you've sent a question in the chat so far it might have been lost uh folks that are on LinkedIn uh I can't chat back to you so I can see your messages coming in but I can't chat back just a heads up so you can still ask questions um I will try to be aggregating them and stuff for for Dan as he's going through um so yeah just a heads up if you've already asked stuff in the chat please ask again and then I will try to aggregate as as Dan's going through any any questions that we have now that we want to respond to or are we are we no not not so far I think just people saying hi uh some people saying you know you're very Lively and it's awesome to see you here so it's yeah all positive things so far it's great to see you all too thanks for joining the stream okay so let's build a Blazer web app so this is the new blazer web app template in net8 it's just a single template if you've done some Blazer development in the past you may have seen like a Blazer web assembly template and a blazer server template in donet 8 we've merged those things together taking the the benefits of both those older Blazer hosting models and just created a single experience you just create a Blazer web app so let's go ahead and create that and this will apparently be my 28th Blazer web app for for this this set occasionally clean those out and I'm just going to select all the defaults you can see I'm using 8 and I'll leave all these default settings we we'll come back and look at what some of these settings mean maybe a little bit later sure let's go ahead and create that and there's our Blazer web app project let's just go ahead and run it so we can see what it does and that often will probably pop over here on my my other monitor but once that's built and running there it goes and what that should do is give us a really basic web application so what do we get we got a couple Pages you know a homepage which just has some static content just HTML and then we have a counter with a button that we can click and the count goes up so there's that interactivity like there's no like full page reload happening here we're not doing like a form post and then you know refreshing the page we're handling those UI events and updating the Dom so we can do rich interactivity there's also this weather uh page that's just um displaying a table of randomly generated uh weather forecast data let me show you a little bit what that looks like in the uh the code so here's our project and each of those pages is implemented by one of these Razer files which is each Razer file is a component Razer is the language that we use in blazer for representing the rendering logic of a Blazer component and I seem to have messed up my window layout there we go okay so here's the homepage uh component and like I said it's mostly just HTML like laser is HTML CSS and C we have a couple of uh Blazer specific things in here there's this app page directive at the top and that's just making this component routable like when we browse to the slash like the root of the app we see this this page that's how we're lining up the URL space with our components there's also this page title tag like what is what is this thing right here well that is an example of using a Blazer component from another component this is a a built-in component and what it does is it just sets the the title on the page so like you can notice up here in the tab the the title for the page is home page title component just takes care of that for you that's just a built-in component that's provided by Blazer on the counter page we've got that button how how is that implemented so here's the uh the counter. Riser file again we've got a route so SL counter is what allows us to browse the SL counter in the browser and get see this component um but then we've also got an interactive render mode set up we'll talk a little bit more about this I think in a in a bit but for now just know that this is a directive that says hey this component I want to be able to handle UI events like when things get clicked or when user is dragging stuff around or whatever I want to be able to write code that handles those UI events so that's what that's that's doing we set the page title and then normal HTML render modes you said oh sorry I think there's a little bit of a delay I apologize but for render modes I think um you were saying that this is set for the component but there is the opportunity to to mix and match render modes is that correct on across components yeah like in this case I'm I'm adding a render mode to just the counter component and it's actually like baked into its implementation to say that this component is going to be using interactive server rendering which just means it's going to handle the UI events server side will like pump the events to the server the component will handle them on the server and then uh dictate Dom updates across the the wire um that's how that actually in this case that's how it works but you can uh decide to apply render modes on like an individual component basis like this where where you're tying it to the component or in this case it's like the whole page and it will Cascade down to any child components or you can apply it to like a component instance like you the at render mode I mean this does this wouldn't make any sense to actually do in this case but like imagine that page title was some other component you could put render mode right here and then specify which render mode you wanted to use on the the component instance that you're using and most of the time that's probably the the right way to do it you don't you generally want to have your Blazer components be render mode independent that they can be used with regardless of the render mode that's being uh that's been specified um when you have a page the really only place to put the render mode is actually on the in the component implementation itself so that's why we do it that way in in this particular counter component got it yeah but because we have that render mode then we can do fancy things like have this on click Handler where whenever the button gets clicked it's going to call our increment count method which will then increment this C field this is this is all just C code that's being added to the generated C Class for this counter. Razer component like you can think of Razer as just like a language that makes it easy to generate HTML that eventually just gets compiled to C to define a class so really there's a counter class that this Razer file is defining and this code block is saying Hey I want to add some members to that class razor compiler let let me let me do that so these are we've added a field you know current count and we've added a method uh increment count normal C code um we increment the the count that increments the field and then the component will automatically render with that new value whenever you handle UI event Blazer just as a heuristic will always rerender the component and that's why we see the uh the UI update in the the browser okay so that's kind of in this case if we were talking about server side and client side um the in the at code block at the bottom this work is done on the server side is that a way to look at that well you can think of that that block of code is going to become part of the of the component class like it's just a component type like any other C type um and then where that component class gets run could be on the server or could be on the client like it could be run from the browser it could be run in your server environment um and so the code that you're putting in that code block will will go with the class right it's a it's a complete unit um some people actually uh you know bristle a little bit at seeing these code blocks in their razor files like they they look at them and like uh I don't know it looks like I might might be adding um like logic bus logic to my my presentation layer um we take a slightly different philosophy on it like like we think of classes as being like a single unit of uh concern and so any code that's related to the the UI for that that particular component we think is actually fine to to to put in the same class like classes should have a single purpose um but some people really prefer the pattern where the the HTML and the C code are are as separate as possible I think this comes from like even back in the old uh classic a ASP days when there was a really strong push to say like you have markup and you have your code and they should not should not mix if you like that pattern you actually can do that too like there's um a refactor gesture here where you can say please extract this code block into a uh a code behind file and that will generate a like counter. razor. CS file all it I I'll do it let's go and do it yeah so that it's semantically exactly the same so now you can see we have that counter class and it's a partial class and all the code in the code block was just moved into this partial class all that's going to happen is that the the partial class for the counter. Razer file and this partial class will get combined together using the normal C partial class infrastructure but some people prefer this this level of Separation I actually like the other pattern so no thank you that helps yeah go back to that delete that file and everything should be back to normal okay um so some things about like using components and um the development experience when when you're developing your components you you do get hot Lo support so if I go in here and like add some some excitement hello Dev leader save that and by the way as you're doing this part there were people that on especially on Reddit because Reddit is a place where there's a lot of very strong opinions uh Reddit is one of the places where people are saying look we got to talk about hot reload and especially on Twitter people were saying we got to talk about hot reload I think people are having and I'm Just sh I haven't had this experience but I think people are having challenges with hot reload or it's not working as expected so I just wanted to mention that when you talk about hot reload there's probably some people that are like we want to hear we want to hear what's coming up with hot reload I'm not sure if you've had this feedback in in other forums about hot reload being challenging we do read Reddit and we do get this feedback in uh for through a variety of channels we we we we we hear you we hear you who are who are struggling with with hot reload like as you can see it does you know work in basic cases just fine like I just you know there I hot reloaded it change and it updates in the browser and what that's doing is it's applying the code change to the running app and then allowing the component to rerender with that updated code that's what hot reload is doing underneath the covers it's pretty pretty fancy piece of uh technology uh but we do know that um uh it it it can break down as things get more complicated or as the app gets larger and we need to improve that and we we hear you loud and clear we know that there's performance problems sometimes like if your app gets really big the hot reload stops being so hot like it starts being a little a little slow um and we have actually some pretty big uh re architecture efforts in the Razer compiler and in the Razer tooling to address those performance problems we also know that there's a bunch of um like there's there's certain edit types that the net runtime knows how to apply to the running application and then there's edit types where it's like I just don't know how to do that yet like no one's no one's taught me how to like update a capturing Lambda or a particular type of generic method in the runtime and have it that work without breaking the the running app because remember you're you're patching the running app while like while it's running um so we're constantly uh working with the runtime team to push back that boundary and say let's let's support more edit types you know since we've shipped hot reload we added support for generics we've had it support for capturing lambdas which are actually really common in in Blazer apps there are obviously still edit types that aren't supported yet like um I think like adding abstract overloads is one that's pretty common in Blazer like if you overlight a override a a Blazer life cycle event like uninitialized or whatever I think that's not a hot reloadable thing adding routes is not a hot reloadable thing there there's there's cases that we'd like to also support uh and I think we've also hear from people that you know sometimes it just breaks like there some just bugs where the it doesn't do the right thing and we are you know actively monitoring those issues as they come in if you hit a a problem like that where hot reload just seems to have broken U please use this uh Magic button right here in visual Studios that's the visual studio feedback button and say hot reload broke for me this is my app this is what happened this is how I got into this scenario as much um Repro information uh information to reproduce the problem as possible is really really helpful for us um we know it's been a bit of a journey you use it right like that's the point is go ahead oh sorry yeah I was saying but you guys actually use that right so like if people I think thank you for calling it out if people are struggling and having challenges like they should use that they should report the feedback it's not like it just goes to Microsoft this big giant company and they don't care about people like it's like no like there is literally a team the team that you're working with that is going to be looking through feedback like that and trying to make improvements that's that's fair to say right ABS yeah those feedback issues will actually go like right into our like issue tracking systems we have you know uh they go right into the the the product team's uh backlogs and there's a whole infrastructure to like you know make sure the the the timeliness on the responses on those issues is is reasonable um I'm not it's still possible that you'll open the issue and we'll try to reproduce it and we're not able to reproduce it and we'll still have to close the bug because we're like we don't we don't know how to we can't fix the problem if we can't actually reproduce it so that can be a an issue particularly with tooling issues I know I've hit that a lot where like you know you get into this just the right sequence of steps that causes a problem in visual studio and if you just deviate one step it doesn't produced anymore and that those can be hard to to to get resolved in in a way that we'd like um so be patient um you know we we we want to respect your time but as much as possible if you hit problems that you're you really want to see fixed the best thing to do is to submit that feedback through the visual Visual Studio feedback tool right awesome yeah thanks for for letting people know that because it's uh it's I I feel like it's one of those things where people just hey Microsoft's a big company they don't care but it's like that's just not true it's uh it's easy to assume that because because the company's big but there's like there's people that genuinely care about making this stuff better so yeah thank you absolutely yeah and we we there's a lot of stuff to care about but uh we we we do care so please send us the feedback and to show you that hot reload does work like I can for example add a counter component here to the the homepage this is again that type showing up and I can hit the hot reload button and now I've got a counter that just poof you know pops up on the the homepage so there is there is hot reload functionality of course we want to to make it better similarly if we wanted to add like a weather uh component here on the the homepage we can do that too so now in addition to the components showing up on their specific routes they've been added as separate component instances on the this page um you can flow data into your components um using component parameters like if we wanted to change how much this counter increments by we can add a property here on the component let's call it increment amount some really basic Blazer 101 here and then we'll make this a parameter all right so now this this property becomes a parameter that you can pass data into when you're using this component and I'm going to use this uh increment amount parameter uh right here to say that's how much I want to increment by all right and then on the homepage when I use that counter component I now get intellisense for an increment amount attribute that I can use to pass in that that parameter value like let's say I wanted to increment by 10 H reloaded that in and now the counter component on the homepage is incrementing by by 10 so that's an example of component parameters you can also you know inject Services into your components there's lots of ways to flow data into your components parameters is just one dependency injections and another there's also ways to like Cascade values down your componentry there's lots of fun ways to flow data around your your Blazer components um speaking of data I thought i' also just quickly show um uh data binding so here on the counter page let's say I have like an input like just a text box let's add that and let's put a P tag below it and actually I want by the way as you're doing this part and I realized there's a delay in my my speaking um uh there's a question that was there's a known issue with cascading values being null after crossing the render mode boundary is that issue getting addressed at some point I'm not I'm I'm not familiar with it I'm not sure if that's a scenario that you're familiar with that's a that's a great question we don't have so I mean render modes are you know you can change how a component renders right to say this component actually should run in the browser this one should run from the from the server and when you um when you add a render mode there's this there's this boundary that gets defined right where like the stuff outside of that render mode might be rendering rendering just statically from the server and then suddenly you're now rendering interactively on web assembly in the in the browser and so if you have a a piece of data like a a cascading value is basically an object that you can flow down that branch of the component tree and say like this value should be a parameter that anyone in this sub tree can can bind to like the parameter I just uh defined was only bindable by whoever called who you know created that component instance a cascading value can be bound by anyone down the the sub tree um but that that object instance actually has to be available down the the whole tree like if you imagine trying to flow that object from something that's running on the server now to web assembly well how do it how does it get there that means you need something that would like serialize it and dilize it out again as an instance we don't currently do that in the the Blazer framework like a a render mode boundary is a boundary where you can't flow cascading values through in in the framework today we have heard from a variety of people that that they would like that to be a feature it's not a feature that we have planned for doet 9 um it's something that we'll evaluate as part of our backlog for for for Net 10 but it's a pretty comp licated problem to get right like we don't know what's in that object like that object is is it even serializable like you can imagine the constraints that that would impose on the types of things that you can flow around and so it's it's a tricky problem to to address I as much as possible I would encourage an architecture that avoids trying to flow cascading values across uh render modes render mode boundaries okay awesome yeah thanks that that helps so some basic data binding sounds like we have some people been doing blazer for a while so they're proba like Dan I know all this stuff but that's okay for the people who have never seen Blazer before you've never seen data binding I'm going to show that to you um there by the way there's a cool trick in Visual Studio where you can do alt shift W toh do a surround with which is kind of nice so know it's it's hard to discover because there's no like UI gesture for it but all Shi w super nice feature for just adding a div around things and then you can change it to whatever you want like if you want it to be a P tag or whatever um now apparently just messed it up so anyway okay so I've got an input and what I want to do is have some like text like string text T we'll just initialize it to an empty string and let's uh render the text right here that's what that at sign's doing and I'm going to bind the value of this input to that text variable like that okay uh let's add a little bit of little margin at the top using bootstrap so it looks a little nicer great okay so now um when I type in this text box like hi Nick and then I Tab out the onchange event for that textbox fires and this at bind directive basically says set up a two-way data binding between the UI element the the input and my C code the the text field so when the input changes the text field should change and when that happens the the component renders so I I triggered an onchange event it changed my C code and then it rendered it to the screen similarly if I were to change the C code and then render that which should then uh be bound to the UI element like UI element should show the the new text and I can also like make this happen on a different event then on change like if you want to say like find event should actually be on input uh then you can get the whole like you know this is so cool like you get the as you type a binding experience so there's some some basic Blazer component development parameters data binding event handling reusing components um that's the sort of the you know simple stuff like but what if you um what I thought I'd show next is like what if you actually want to connect to some data like I have a database and I want to store some stuff in it I want to have some form and they got to have validation and all that stuff oh that sounds like a lot of code to to write um in Blazer you can do all those things and we actually provide some Visual Studio tooling to help you scaffold out that that code so you don't have to hand write it you know line by line so what I'm going to do next is um let's actually stop the app and I'm going to add a class that I've already got set up over here let's add an existing item by the way I think this is a good opportunity too because when we're talking about Blazer being something that can really help you with like end to end being able to make a full stack application like it's great when you can start to see some of the things in the front end so you were kind of showing us like with some of the binding in the UI and how these things work like that's great and it's like I think if you keep your mind there you can start think how you conceptualize how you might go build a UI but then you get to a point like you just said well now I got to wire it up to data and if you're thinking about your Blazer application if you've been spending your time in your components and your controls it's like well wait a second yeah like where where's the database live it's it's obviously not right here in my component so like how does how does that start to F into this big picture of you know like front and back end yep yep yep so let's let's let's do it and it's actually pretty simple to get to get set up so I have a um an entity model that I just set up here for a movie it's got an ID a title release date The the genre of the movie and the price and I want to be able to store a bunch of movies in a database and then display them in like nice table and i' like to be able to add movies and remove them and edit them and all that basic crud operation stuff like create read update delete of that of that data um like to have validation all those nice things so I'm just going to rightclick on this Pages directory and I'm going to say add a new scaffolded item scaffolded item and I'm going to pick in the razor components category this razor components using NTI framework crud uh scaffolder and this is going to allow me to uh use Visual Studio to write a bunch of code to generate a bunch of pages based off of that data model so I have a bunch of templates that I can pick from here you know the create edit delete pages if I just want to generate one of those if I select crud it will generate them all um then I can pick my data model class which is that movie class and then I need to have some connection to the database and we're going to use Ned framework core for that um you need a a DB context to represent the connection to the database I don't currently have one so I'm just going to let the tool generate one for me that looks like a perfectly fine context name and we'll use SQL server for this particular uh sample you could use sqlite or Cosmos or whatever um data stores that uh en framework core supports and then we just you know sit back and uh relax and let Visual Studio do a lot of hard work for us it's going to examine that data model and then generate a bunch of code based on it to display those movies and allow us to to manipulate them so just give it a second to to do that scanning it's building the never go ahead does scaffolding uh concept ex I know you're showing it obviously for blazer because that's what we're working in but I've never I've never even heard of that or seen it is that a a concept that exists for other things outside of Blazer in Visual Studio or is this like a Blazer specific like sort of workflow NOP the scaffolding is uh well the scaffolding tooling is a generic set of tooling where you just want to like generate some code and so you can actually write custom scaffolders for whatever you want the scaffolding functionality uh is comes I think heavily from the web development space like we uh have supported it for a long time for MBC style apps we have like the model view controller architecture for your web apps and you want to generate controllers and Views based off of a model U I think even or originally the the the big Innovations I think came from the Ruby world like the Ruby on Rails folks uh really leaned in heavily to to scaffolding as part of their development experience and that I think heavily inspired what we did with MBC and now we're bringing to to to Blazer very so we got a bunch of code now sitting in this movie Pages folder that we didn't have to write which is always nice so always are nice to have someone else write the code for you um I'll just walk through just quickly what's in these pages on this index page this is where we're going to display that list of movies you can see that we're now using dependency injection like we've got this uh at inject keyword that we're going to use to add a idb context Factory for our DB context type uh and it's a basic this this this syntax you can think of as like a property definition like this is the type of the property and then this is the uh the name of the property that you can then reference in your your razor code um so the DB context Factory you can use to create DB context instances and then we're going to create one of those and give it to our quick grid component this is a a new built-in component in in Blazer and donet 8 it's a fully featured and fast data grid control that you can use to display lists of data it's can do virtualization sorting paging all those those things and it's basically going through every single property in our movie data model and displaying a a row a Col sorry a column for each of those of those properties now I want to run this so you can see what this looks like before we do that we actually need to set up the database um there's a really easy way to do that in visual studio if you just double click on this uh connected Services node you can see that Visual Studio has already figured out that I'm using a database um that was um configured as part of scaffolding and what I need to do is just um set up uh the schema in that database for my movie types and you do that using Entity framework core migrations um migrations is like a way to um have some code that uh describes you know moving from one schema state to another like if you add columns or change types of things uh Entity framework core can generate migration code that represents those changes and the first migration will also set up the database for you so let's let's create a a migration we'll call it initial and am I running I don't think yeah running got to make sure one thing about this tool in visual studi is make sure that the your app's not running because it it'll get locked up and then it can't actually find the DB context to use uh so there it found our DV context and I told it the migration name I wanted to use pick whatever name you like that's nice and descriptive and then it will run the EF core tooling to generate the migration code I'll just give that a second to run there it goes okay so now you can see down here we've got our uh migration folder and it's got the the code generated but we haven't run it yet so we need to to run it we up update the database with using that migration so I'm going to run this update database command again this will look for my DB context and all its Associated migrations give it a second to do that retrieving the migrations for our DB context class okay and then now we'll run it so this will then set up the database and we should be able to mess around with our our movies done okay so now if we run uh looking back at that index. Raiser file you saw that the the root page was at slov for the PO over here my other window again so the the route for those pages is at slov so if I go to slash movies then we should see a little table and we don't have any movies yet because the is empty but we can quickly add them and we've got this create page which has a form that lets us specify all the the fields for our our movie um let's add ET 11 done this enough think I've now finally memorized the release date of ET say it's a sci-fi movie and give it a price uh and if I mess up one of these things like let's say I don't actually um specify a title and try to create then I get validation and I get a nice validation warnings so let's add that create and there we got a movie showing up in our in our database we can look at its details we can of course delete it which I'm not going to do because I want to actually add a couple movies let's add one more let's add Ghostbusters uh June I don't remember this one I don't know 1984 maybe uh comedy and we'll make up another price okay there's gonna be someone in the chat I'm sure that's gonna go check all of these and say nope Dan that's wrong that's the wrong the 80s I love 80s movies 80s movies were the best uh okay so that's how you can quickly just like connect to to to some data um the other task that I think people often want to do that can take some time that bler I think Mak pretty easy is also set up security like I want to have be able to log in users and authenticate users and have them be able to reset their passwords and all that stuff and that's can be pretty daunting given you know the importance of having a good security setup well we can actually pretty easily add uh security to our Blazer web app again using a scaffolder so if I go back to my project and just right click and say add new scaffolded item in the identity category we have a Blazer identity scaffolder that we can just select now we could have set up off uh authentication when we created the project like there are options that maybe you saw them like in the the Wizard the dialogue there was like what type of authentication do you want and we selected none to start out with um so you can also do it on Project creation but this is really nice because it means that if you didn't do it during project creation you can just add it later so let's add Blazer identity now for this we need to select a DB context class again um and actually this DB context needs to be an identity DB context which has like the identity stuff set up in it so we can't actually select our existing DB context here because it's not an identity DB context yet so I'm just going to create another one and we'll name this one differently identity context and then we'll just merge them together so that they're they're the same uh we'll use SQL Server again and you can choose to generate a custom user class this is like if you want to have custom properties associated with each User it's generally a good idea to do that so I'll go ahead and do that too and then again we sit back and relax let Blazer do all the or Visual Studio do all the hard work for us us and this is going to add all the you know Blazer components and pages that we need to have an authentication system in our in our Blazer web out that generate the code and there it goes that's awesome I really didn't know this scaffolding stuff existed yeah it's it's uh I mean and and the nice thing about scaffolding is it it's it gives you the code like it just puts the code in your project so after it's scaffolded party on like you can change it and tweak it however you'd like customize it it's a it's a nice starting point for common chunks of code that you you end end up needing to write like all the code for inter interacting with the database or setting up forms um so on and so forth okay so we now have this account uh folder which has its own set of pages and these are all Blazer components for doing all the standard authentication things now I need to do the same thing before I need to um update the database with the uh identity schema so to do that I'm actually going to merge the two DB contexts that I have I'm going to take my old one and I'm just going to copy its DB set from off that one and put it in the new one like that and then I'm going to get rid of the old one and rename this one like that and say Yes Visual Studio go ahead and update that anywhere that it needs to be to be updated and I think it also set up a separate connection string yeah like I don't want this extra connection string in here so we'll get rid of that and then this is I think it's a really good example that you're walking through here right because you're able to continue to extend the application like you said you didn't do identity in the beginning you can still add it you can scaffold more things after but it's just making code you still have to understand what it's doing because like you're saying right now like these things are you have separate DB contexts that set up different connections and stuff you don't need all of that stuff to be extra if you don't want it to be extra and duplicated you can go refactor it and combine things and clean it up and and you probably should and understand the code that's being generated so so I the I I removed the it added another connection string for another database I don't want to have two databases so I just removed that connection string and then I updated the program CS file to just use the connection string that I already had so that's what I did there okay so now if I go back to the connected Services tab I can should be able to add another migration and this one let's call add identity and this should find my DB context class think cross I didn't mess up anything ah what did I do wrong build did I forget type someplace I don't know let's try it again it builds fine sometimes Visual Studio gets a little out of sync with the state of the project only because it's live right that's how how it works yeah live stream messing with the visual studio bits it worked that time I don't know why it didn't work the first time so there I found my DB context class and then it's going to add another chunk of code to say oh go from this state of the database schema to the new state with all the identity tables like storing passwords and user profile data and so forth and then of course we need to Now update the database based off of those those changes so we'll let it find our DB context again and it's Associated migrations and while this is going there's a a question that came in from LinkedIn and it's actually Dan I think it's very similar to like one of our first interactions on Blazer and I'm just going to kind of uh I'll try to not read it word for word and summarize it a little bit but essentially someone's calling out that especially for beginners that are getting into Blazer like it comes back to the fact that we have centent and server side stuff going on and sometimes it's like intermingled and like wow that can be powerful to let you develop in the same spot sometimes it's like understanding where things are executing can become a little bit tricky so for example you're accessing a database right but if if you happen to have code that's trying to do that and it's running on the client side obviously that's not going to work so like are there and maybe not for rate this moment but I don't know if you have thoughts around um like are there ways to make this more obvious in how you're structuring your code or your design pattern so that you're like like uh your your mental model of how your application shaping up is like kind of puts you into the pit of success that you're not going to accidentally start writing code that will let you call like database stuff or server side things like in client side code yeah that's that's I think it's a great point and it's absolutely true like we we talked earlier about um giving users the flexibility to take advantage of the full spectrum of server and client um um functionality um but that doesn't mean you always should and you need to actually be you know think carefully about what what architecture actually makes sense for your web app and where might doing using certain features might add more complexity than they they're worth um you may have noticed that the default settings for a Blazer web app are very server Centric like they they they only enable server interactivity we don't actually enable the the web assembly client functionality with the default template you have to like flip an option to to turn it on and we'll see that in just I'll show that in just a second um but when you add a client uh logic into your app you now have two processes you have code running on the server and you have code running on the client and you need to think about well what code do I actually want to be downloaded to the client probably don't want to download all the code like certainly don't need to download all the code that's like touching the database like that that can't even run from the client and you want the client code to be small so that it doesn't take too long to to download and your app loads as fast as possible um all these concerns that that come to to to play so yeah once you start saying you know I do want to leverage client functionality I think that is a an additional layer of complexity that you need to think about like there are good reasons to do it um but it it it's something that you you pay for a little bit with with complexity um in the framework itself you know we we think about this a lot like we we want the component model to be flexible we want it to put you in a pit of success not a pit of failure um and I think there are is probably still room for us to do things to help people realize like oops you've just written a component that will only run on the server and then you've tried to run it on the client and those types of things Blazer doesn't I would say it's not it's not great right now in terms of in helping you do that I think you even had like a YouTube video that you did where you were struggling with some of the render modes and what you know like one one of the things that can happen is um we were talking about dependency injection when you have two different processes one on the client and one on the server uh you actually now have two different di systems like there's the dependency injection set of services on the server and there's a there's a separate set of services that are on the client uh and sometimes you can even have components that run in both places like you you pre-render them on the server and then you render them again client side after they've uh you've gotten the the the runtime downloaded and the web assembly stuff set up and ready to go and so you actually need to think about well when I'm on the server which which service do I want to inject into this component when I'm on the client do I want to use actually a different service like maybe when it's running on the server I can just talk to the database and that's fine but when it's running on the client I actually need to make like an HP client call through an API endpoint in order to access that that that same data and so you provide like one of the patterns that's often used in Blazer components is you inject um interfaces like inject abstractions into your components and then you inject separate implementations depending on where that component is going to run that's a that's one of the common patterns that we uh we recommend yeah so these things come into play like it it it's in Don 8 we added a lot of tools um there's still probably more work to be done to help people use those tools correctly and not accidentally you know Hammer screws and and you know those types of types of things no thank you very much I think that helps a lot you're absolutely right that was you know I had the the the render mode kind of issue and it was it all came back to dependency injection it's exactly as you explained and once it was more obvious to me I don't I don't know why like in hindsight I'm like yeah it's very it seems very obvious now it's like it's literally think about it as two applications right but I think the fact that it was all grouped together my brain was just like well it must just work somehow why isn't it just working and it's like if I would have stopped and just said Nick like you know that you have stuff on the server there's technically something else running literally could be on a different computer and most likely will be like they need to be separate and I think once I just kind of like let that go into my head I was like yeah now it Mak sense so it's um I I I don't think you should feel bad like like it's it's one of these tensions that we have with um with building a framework like Blazer where we we want people to be productive we want it to feel intuitive where things just seem to natur flow um but sometimes when the system is actually complicated uh explicitness actually can be helpful so there's there's always that tension right between making everything explicit so you understand what's going on but then it's a little bit more tedious to use a little bit harder versus making everything simple but then you don't really always understand what's going on and sometimes you you trip or you you get bitten by things that you didn't really get was was happening and that's a design tension that we we we deal with all the time all the time um but okay like for oth actually it's interesting when we talk about like the implementation of the components and being tied to particular render modes like to be fair in in these examples that I'm showing there are some I know if it's cheating but we did make some uh assumptions on the component implementations like in that that uh index page that we were looking at like this one you know we're injecting the DB context Factory into this component um obviously you're not going to well you're probably not going to have access to a DB cont on the client so this component now is a effectively a server based component you can't like flip this one to web assembly as it's written um we could potentially do more to try to abstract these components in that way we we we went with this approach because it was closer to what most of the server side rendering Frameworks have traditionally done like MVC your is traditionally a server side rendered framework and you just going to get the DB context and and use it to do crud style patterns so we decided you we'll just make an assumption here that this is is going to be server based but at some point I think it would make sense to think about how could we write this component code in a way that's not too complicated but could also still work from from a client um tricky because then you need some sort of API endpoint and all these these types of things um similar thing with the identity code like if we went through and looked at the identity code the identity code uses ASM core identity to handle authentication and that's all Cookie based like you you log in like here let me let me actually do a login flow like if I um I need to register a user for let me add a a user in here type in my very secure password just making up a password to put in a dummy user so register new user and then this is the like email confirmation flow normally in production you'd actually want to send an email to me and I click on a link but during development you can just click on the link here and then now I should have a registered user and I should be able to log in all right so I'm going to log in here now that used as core identity to say yep that's a valid username and password and now I'm going to put a cookie on the response and that that authentication cookie can then be used to to know that this is an authenticated user well okay you need to set a cookie um you can't really set a cookie from client so that means that the asate core identity based Blazer components actually are also server Centric like they need to need to function from the server because otherwise they can't do the the off thing um so there are cases where you can't really write a component or it's not convenient to write a component to be fully generic to run in any sort of render mode that you can imagine but if you're writing reusable component libraries as much as possible you should do that because that makes your components useful in as many contexts as as possible long story short there about component design and you know trying to design your components for for for render modes okay so we have a full op system now we just scaffolded this code in we can you know look at our user profile change our email address reset our password do two Factor off all the you know full nine yards on on authentication system that we were just able to scaffold into to our our application so that hopefully gives you an idea about how you can go from nothing to quite a bit like a full interactive web app that's connected to data using forms um add authentication with with with with fairly uh low effort on the the the part of the the helper um cool so I know we're getting getting close to the hour I I we wanted to also show some uh some new stuff right like doet n is coming down yeah if you if you still have time I think that would be awesome to do I thought that this was a this example of going like basically from nothing the sample app right to being able to scaffold in uh database interactions uh I'm I'm actually blown away by the like the the identity stuff just being able to like basically SC baffled in and having all of the functionality that you would probably want in any modern application to be able to create users you know change your your password multiactor authentication and stuff there like that's it's just incredible that what the stream has been going for 53 minutes and you haven't been you know just heads down trying to do this as fast as possible and you're still able to get that far it's it's just it's fascinating so yeah I think new stuff would be super cool to hear about um so yeah if you still got time that would be awesome let's let's do a couple quick dot andoy things and I also had promised to show the the client story like actually running code on we haven't run any code on web assembly yet but let's let's look at that too so I'll do that with net 9 as well so I'm just going to close down visual studio uh and I'm going to bring up the visual studio preview um donet 9 is still in preview so it's it's in active development right now and to use it you really need to use the latest uh preview version of of visual studio so that's what I've got installed here I've also gone and installed uh net 9 from the net website so I'm going to create another Blazer web app project we'll start again uh but this time that looks like a good name uh I'm going to use donet 9 which is in preview it's a preview six I think I think we're working on getting preview seven out uh in August I think is when that will come out um and I uh let's look at some of these settings that we uh kind of glossed over before like before the default for the uh interactive render mode is a server and that means that um the app will be set up to statically render components from the server but also can interactively render components from the server like the counter component where you click the button and the account goes up and the way that works is over a websocket connection we set up a connection with the server we pump the UI events to the server and then the components render and then any Dom updates that need to be done get sent back across the network on that websocket connection to the browser and bla Blazer uh handles updating the the UI so that's that's interactive server rendering but Blazer can also do rendering interactively from the client using web assembly and in the web assembly mode what we do is we download a um a net runtime implemented in web assembly to the browser web assembly is like a a low-level bite code that's now part of just part of the web platform it's not a it's not a Microsoft thing it's a web platform concept browsers can now run JavaScript and they can also run web assembly so we built a net runtime in web assembly that you can just download with your app and it's as small as we can make it it's about a I don't know like a MAG or so size so you it's not tiny if you're thinking about like like if you're trying to build a um a front-end web app that is as small and loads as fast as possible you're probably not going to want to use Blazer web assembly because there is this overhead of having to bring a runtime with you but for many apps it's perfectly fine like if you're building like an internal line of business application then it's it's it's great um there's also even this last render mode option where you can say I want to enable both interactive server and interactive web assembly Rend in now why would you want to do that this basically is saying I can do both the websocket approach and I can do the web assembly approach and the reason why that's kind of useful is well there might be different parts of your app that you want to run on the client and other ones you're like you know what this this is just easier to run from the server and there's also a trick that we can do to make loading that web assembly runtime Faster by first starting out the user with the websocket connection while we sneak down the the runtime in the background and then once it's downloaded in cached we can actually flip them over to use web assembly in dead so that's uh that's the F that's back to that conversation we were having about complexity that's probably the most complex render mode we have because you literally have to think about your component running on both the server and the client in both interactive render modes but it also has this this interesting benefit of helping to with the the page load time so let's go ahead and do that we'll do the fanciest thing you know use with caution the only flip this option on if you really think you're going to need it uh and we'll go ahead and create one of these and see what uh client develop looks like um and as part of this I'll show one of the new net9 features which is we now have an API that allows you to detect what the render mode is at runtime like we'll just you can write code to say like hey am I running on web assembly or am I running um interactively from the server like these types of things so in this solution we now have two projects instead of just one and that's that those two processes we were talking about before the client process the client project is the code that's going to be built and downloaded to the browser so anything that goes in there is going to be public to whoever downloads your app so think about what goes in there and don't add a whole bunch of crazy dependencies into the client project because then your client project will get huge and you don't want that I mean we do do a bunch of things to make it as small as possible like we will trim it and we will compress it by default when the app gets published um but still be smart with your dependency graph um the server project is the an asmi core app that's going to host the the web assembly bits and also the any of the interactive server stuff and the serers side rendering okay so the only page we have set up right now for running on the client is the the counter now I'm actually going to go into the counter and make a couple changes here I'm going to add another heading here to say the render mode is and then I'm going to use this cool new render info property that's on the component base and I'm just going to print out its name and then also um while we're at it why don't we also do an if check right here like if the renderer info is interactive like if we're in an interactive State then uh let's do our let's render our button because that button requires interactivity right uh otherwise let's just put like a placeholder here like wait for it you know something like that okay so just a placeholder so this is basically saying if this component renders not interactively just render a placeholder for the button because the button won't work right if the component is rendering interactively whether it's web assembly or server then render the button and they can click on it all right let's go ahead and run this and see what we get build build build run run run Visual Studio do its thing and pretty similar to what it's what we've seen before still got the the standard three pages there's our our counter page okay so we see the render mode and we see currently it says server and this case server means interactive server if it was U being done statically it would say static and if you looked really carefully you might have seen static briefly blip before it turned to server you have to go back in the recording at some point you might have missed it on the live stream but uh you know go back you might have seen static sh really fast and that's because in Blazer we always uh in donate pre-render your components they will render statically first from the server and then render interactively after the the that first render and the nice thing about uh pre-render is you get HTML into the response right away and it shows up in the browser right away which is great for things like search engine optimization and those types of things okay so but right now it's now fully interactive the websocket connection has been set up if we went into the like U the browser Dev tools and remove all the filters actually let me let me clear out let me do that one more time uh oh what I just do I want this okay so let's go into here little trick to clear out the state of your site that little C cach button is pretty useful Let me refresh okay bunch of stuff's being downloaded what's happening so let's let's look at this so right now it's it's it's saying I'm in interactive server mode I can click the button the count goes up if I look for websocket connections we can see that we have this uncore Blazer one up at the top that's the websocket connection that we're using for interactive server rendering okay and if I click on that I can even see the the messages that are being sent on that uh websocket connection I'm going to clear them out and then watch as I click the button click click click every time I click the Button getting a little payloads going to the server getting some Dom diffs that are that are coming back so we're using interactive server rendering right now now you may have saw when we were looking at the code that the render mode for this counter is actually interactive Auto so it's picking server or web assembly depending on whether the web assembly runtime has been downloaded in Cache yet and if we go back into the browser Dev tools and instead of filtering on websockets if we filter on WM or web assembly we can see that in the background we were downloading the web assembly runtime so that we have it set up and ready to go in case you want to to use it and that's what this like this net native WM that's the actual runtime itself all this these other things are like your basically your net assemblies that have been repackaged uh for for the web um it might look a little big right now like way bigger than we talked about before and that's just because we don't do any of the trimming or compression during development we only do that on on publish so don't freak out if during development you're like oh my goodness it's like 20 megabytes of stuff no it'll it'll shrink down to like one or two megabytes when you actually uh publish okay so now if I refresh the page and I don't clear out the cache like I had done before the web assembly runtime is now cach so Blazer should detect that and should use it instead of doing server rendering so if I refresh you can see it's it again we saw that static did you see it like really briefly that was the pre-rendering of the page and now it says I'm now running on on on web assembly if we look at websockets that uncore Blazer websocket connect is gone so we're we don't have any websocket connections to the server now this this websocket connection that you're seeing is just a visual studio thing for like dealing with hot reload and refreshing the browser you you that that one doesn't appear if you're in production but the important one is that underscore Blazer one that one's not being used at all uh and we in fact we don't even see any web assembly files getting redownloaded because they were cached previously you can see them in the uh browser cache storage if we go poking around in here all these files down here that's your web assembly runtime that was already downloaded and and cached for you and the counter still works because we're executing client site now okay so that showed a couple things that showed how you can actually do client side rendering with blazer on in web assembly it showed the new auto render mode where we can like you know switch at runtime between server interactive rendering and client interactive rendering and it also shows the new um render uh info API that we have available in net 9 so that you can detect which render mode you're actually running in at runtime and write logic accordingly so there's a a quick do nit 9 feature there's a bunch of other new do net9 stuff I'll put up a a slide with sort of a summary of all the things that we're currently expecting that's not currently expecting to deliver for for net 9 there we go so a lot of quality and fundamentals work like security and performance work um we added that new uh uh render mode API for detecting at runtime uh we added some stuff where you can like if you're in a interactive context you can take a page and sort of say you know what that page actually still needs to be static don't make that one interactive um we're working on our entra off story for net9 so that uh you can easily set up authentication using Microsoft's uh entra authentication Services um we have we're working trying to get some samples out for that first and then the the visual studio tooling will come later um for Blazer server users out there like the where you're using that websocket connection U we've done a bunch of work on the the payload size that we send on the websocket connection to compress it to be even smaller and the reconnection experience for when you lose the websocket connection to the server is is much better in net9 um we've done a lot of work on optimizing the how we handle static uh files like the static web Assets in your in your app not just for Blazer but actually for for all of asp.net core U we will now pre-c compress and fingerprint um all of your the static files like any you know CSS files or JavaScript files like so that like we use bootstrap today and the bootstrap CSS file is like I don't know like 400 kilobytes or something something enormous maybe it's not that big but it's it's lots of kilobytes and with the inata 9 it shrinks way down to just like 10 kilobytes when it's uh being actually sent over the wire because of this infrastructure um making the web assly runtime startup faster is also part of that uh uh startup time uh performance work and then a bunch of uh developer uh experience improvements um we now support uh Constructor injection uh for components so instead of using at inject you can actually just Define a Constructor with whatever uh Services you want to inject and that will work uh hot reload we talked about we are doing more hot reload work in the net 9 time frame and expect to have some really big uh big wins by the time we get to November um Blazer web assembly debugging is another big area of feedback I'm guessing some people on this call may have uh hit problems with it's a bit of a trick to debug. net code that's running on a web assembly runtime that's executing in a browser like how do you do that um we have bunch of infrastructure that we use for that and it's getting much better actually in the the latest Visual Studio releases um there's some preview versions of that new debugging experience that you can turn on now even with the latest uh Visual Studio preview and and try it out uh and the razor tooling is getting also uh a bunch of uh attention so that intellisense and completions and the performance of it are are much better uh lastly for you Blazer hybrid users out there we didn't talk about this at all Nick I don't have you seen Blazer hybrid are you familiar with uh Blazer hybrid stuff heard of it I've not used it personally there one question in the chat that is about uh Maui Blazer hybrid though so um they well I'll just I'll ask it and this might kind of segue into some of the stuff you might want to talk about but uh what's recommended approach for authentication and authorization uh in the new template for Maui Blazer hybrid especially in like net 9 that's a great question we probably that's a whole I don't know if we're going to give get to that one we think we should probably talk to that person offline but uh to to understand that question for people who aren't familiar with blazer hybrid um Blazer hybrid is a way that you can build native client apps using your Blazer components um like a desktop app or a mobile app or like iOS Android Mac OS um and way the way it works is you take your components and you run them natively in the app like they run natively in on net in the process they're not there's no web assembly there's no like web sockets involved here but they render to an embedded web view control control uh like on a Windows desktop app you have like web view 2 and you have some net code that's running your Blazer components and they render to that that web view uh similar pattern on like an iOS or Android app and what this allows you to do is to build a UI once using Blazer components and then share those components across mobile desktop and web um prior to to net9 you could set this up like if you wanted to literally Target mobile desktop and web you could you could set it up but you had to set it up manually um we now have a project template that you can just use that will give you both the web project the Blazer web project and the uh doet Maui Blazer hybrid project already set up and and and ready to go um the tricky bit then with oth is well you now need an authentication system that will work across all those different types of clients you need an authentication system that will work on the web and on Android and iOS and windows and and and and and mac and that is um that is tricky um the I I think I I I know that uh the I'm the the Beth Massie and Elon Lipton are the uh product manager and the main uh architect engineer that work on the the Blazer hybrid stuff now um they are actually busy working on providing uh guidance and samples on how to do that so I would I would look for some content uh coming soon awesome no that's that's great uh there was another uh question just about render mode in general um and I I think even I might be able to answer this one a little but I think it sounds like so render mode seems to work well with a small Blazer project and I'm assuming what this person is saying is that like as your project gets bigger and you're talking about render modes and things like that like basically does the complexity just like get to a point where you're like I I can't continue to build things because I can't tell like which like how things are rendering differently um and I'm assuming the answer is like yes if you're not paying attention to how you're designing things if if you're not putting thought into how your different components are being built and leaking through different things that shouldn't be able to you had this scenario where it's like hey look here's a component that like that can only be like server side it literally requires a serers side um dependency but you have to go refactor it to put the abstraction in place then inject in like different implementations that kind of thing so like I maybe do you have thoughts around like has there been feedback about the complexity getting too great and having these these different like all of this flexibility built in um you know honestly what I I I don't think it's a complexity concern that that person is probably raising like one thing that I think can happen with render modes like render modes were designed to enable you to scope the the areas of interactivity as much as possible like if you really only need interactivity in like one spot on one page of your app and the rest of it is actually perfectly fine to be rendered statically from the server and render modes are great like they they allow you to do that when you get to larger more complicated apps that are very richly interactive um like you know think about if you want to have even like interactive elements in your layout well that means really every page at that point is going to be interactive and if if you're in that style of app it actually may make sense to say you know what I'm just going to enable interactivity globally for the whole app and I'll pick which which interactive model I want either server or client or web assembly and I'll just go with that and that actually for a lot of apps may make sense particularly if if it if it's just inherently so interactive you remember when we were creating the project there was this option to say do you want the interactivity location to be per page or component or do you want it there was another option that we didn't really use but you could say actually just make it Global like use it for the whole thing um for those um apps that have a lot of interactive features you might just want to do that and say like you know what the whole app really needs to be to be Global and it depends on honestly what your app's trying to do for apps that are more content Centric hopefully Global isn't needed like like a lot of pages are just rendering content why why do you need all the interactivity um but for like a You Know Rich line of business application you might get tired of having to slap render mode on all the places um when you decide you know what I I'm using it everywhere so that that may be what they're talking about is that um for complicated apps that need a lot of interactivity trying to just slice out little places of interactivity might not might not be the way to go that's why we provide that that Global interactivity option it's much more sounds really good if you did Blazer in days of of your where you had like the old Blazer server and Blazer web assembly templates those templates were effectively globally interactive and you can get back to the having that model by using the globally interactive option awesome um I'm checking the chat I I don't see any other outstanding questions it's been good there's actually been people in the chat that are helping other people in the chat which is awwesome that's one of the best things to happen while streaming so it's like you have this couple of questions building up and then other people are like oh no don't worry I got you and uh that's been really good so thanks folks and especially in the YouTube chat that's been great um but yeah Dan I I think this is really awesome so um I like I need to spend more time with blazer like I need to do that and when I look even at this list for the net 9 stuff coming up like there's stuff on here that seems exciting to me um just even like I see Constructor injection I can think about using the at inject part at the top of the files and like if there's Constructor injection like that I just I love working with the pendency injection and the more stuff that feels more natural in terms of how I'm used to it like that excites me uh the hot reload thing has never been an issue for me I guess my blazer um development's been pretty limited but from what I've been hearing from people I think that's going to be one of the the really exciting things for people to get their hands on so there's a lot of cool stuff coming in uh I I don't know Blazer laser is exciting for me like we were saying at the beginning like I am a net developer I'm not saying that there aren't languages that you know you can use and might do better things in certain situations um but I just love working in CP and.net so having tools that allow me to do that and take my expertise in those areas and then apply them into scenarios that are a little bit awkward for me like building web applications with a front end like at least I can lean on something that I'm familiar with so that's yeah that that's why I get excited about Blazer the team works pretty hard to try and you know make the Blazer development development experience delightful uh we know obviously there's there's always areas for for improvement so we appreciate the feedback that the you the community gives us you know come come come to GitHub into the AIT core repo and and you know air your your issues let let us know what the things are most important to you that's that's how we uh track our backlog because Blazer's fully open source and part of theet platform um you can follow along for things that are that are coming in the future on the ASM core road map which I've provided a link to at the bottom there we're getting pretty close to wrapping up net9 at this point like we're getting almost to our last preview and we'll start start shipping release candidates here in just uh you know a couple months uh for the release coming up in November and then start planning for for uh the next version if you want to try whoops if you want to try net 9 the easiest way to get it is to go to.net nextt and that'll have the link to download the the net 9 version of the SDK and if you're just getting started with blazer for the first time just go to blazer. net that's the the Blazer homepage and we have docs and tutorials that we'll quickly get you started awesome well Dan this is super cool um I know you're pretty active on Twitter you got a you got a you got a pretty big following on Twitter um so you're Dan Roth 27 on Twitter is that right or I guess we call it X now X is the the name of the platform previously known as Twitter that's right yeah so but if people want they can find you on Twitter uh I know I'm actually pretty surprised there's a lot of net like not just people interested in using net but like a lot of the net team and stuff is pretty active on Twitter but um you know like I like going to Twitter and seeing stuff like truly for Microsoft employees being able to engage with people and stuff like that so I don't necessarily just want to promote that everyone go swarm you on Twitter necessarily and say hey Dan like fix this but um but you are there on Twitter and thank you for promoting especially earlier in the Stream and and obviously this is recorded but the fact that people can go into Visual Studio they can submit bug reports they can go onto the GitHub they can uh report issues like and that you guys are looking at it right it's not again it's not just Microsoft doesn't care it's very much the opposite like send information more detail is better uh the more detail and Repro steps it just helps you guys be able to figure out what's going on and and truly get to a root cause yeah I would any know it's not just us that that cares like there's a very active net and Blazer community that you know participates and contributes to to those repos um I've been helping with generate the release notes for our doet N9 previews and part of that is also you know recognizing the contributions that came from the community you know in the forms of pull requests and code contributions to the to the to the framework and it's is really impressive the the stuff that people contribute there and the time and care that they take into contributing to the stack so so thank you to everyone that helps make the the net platform and and Blazer great awesome okay well thanks again Dan uh folks I know there's a couple more questions that are rolling in but uh might be a good opportunity to uh to take it up on Twitter I guess um and if you even if you you know tag me on Twitter if you can't get a hold of D we can try to make sure we can get it through to the right channel if you need questions and stuff answered so um Dan thanks again um this is really cool and I do appreciate the time thank you thanks for having me thanks everyone for watching I'll see you guys on GitHub or on Twitter or wherever you do your social media okay take care every e e for