ASP.NET Community Standup - Blazor in .NET 6 RC1

[Music] so [Music] [Music] [Applause] [Music] do [Music] hello hello welcome to a very special blazer community stand up for september uh today we have two amazing guests with us dan and mckinnon and we also have our co-host john and we're going to be talking to you today about all the amazing new features we have for blazer in rc1 so this is our first release candidate in preparation for dotnet 6 and it has a bunch of amazing features that i'm sure you'll love to try out so without further ado let's start off with some brief introductions and take it from there so uh my name is tinay i'm an engineer on the blazer team and we also have dan with us dan do you want to introduce yourself uh yeah i'm the program manager on the asp.net team for for blazer um and our web ui technologies so mvc razer pages all things razor related in asp.net core that's awesome uh thank you and mckinnon yeah my name is mckinnon and i was an intern on blazer this summer and now i'm an active community member awesome thanks mckinnon and john hi i'm john i'm a pm on the.net community team and i sneak into a lot of these community stand-ups i'm happy to be here and get a front row seat well thank you so much john for joining us so um let's start off with some community links this is where we essentially share a bunch of amazing stuff that's happening in the community and from there we'll go into some demos and some just seeing all features that are not all but at least some of the features that are going to be coming in rc1 so uh thanks for sharing my screen and let's get started so uh the first thing i wanted to share is hi john um is the asp.net community stand up for the razer editor this is the community stand-up that happened a couple weeks ago and it essentially uh is the research tooling team talking about all the features that are coming in visual studio 2022. so with vs 2022 they have a brand new editor which has a bunch of enhancements from completions to uh to like definitions to highlighting new colorization and a bunch of other stuff that should really enrich the developer experience so if you want to give that a shot that's available right now with vs 2022 preview and it's sure to provide a much richer experience so this is definitely something i'd encourage all the blazer and razer developers to check out i love the new code actions like this controls for a using statement and razer is like oh finally finally we did that feature yeah it's it really simplifies a lot of developer flows and i'm really excited for uh everyone to try it out cool uh let's move on to the next link here uh this is a blog post that talks about integrating graphql with blazer so for those of you who may not know graphql is kind of like a query language it's an api to actually access knowledge and do so in a declarative fashion so this article talks about what graphql is as well as how to integrate it with blazer so all the different packages that you can use how to integrate it and how it works well together and now the reason why i'm highlighting this particular article is it shows uh how blazer can work really well with other frameworks and technologies so that you can leverage the best aspects of each and create the best user experience for the end user that you may have and moving on to the next one this one is the blazer browser extension this is actually an open source project available on github for you to check out and it essentially allows you to create a browser extension using blazer so you can bring the power of c sharp and blazer and razer all the great stuff that you may know and love already into your browser extension to create a lot of really powerful applications so uh the setup process is actually pretty simple and straightforward so that's always great and yeah definitely encourage you to check this is awesome i'm really excited to see this i played a while ago with creating a um a browser extension and it's complex it's a bit complicated um and i i looked at trying to do it in blazer back then and somebody had written a blog post in japanese and i kind of followed some of it but it was it it was not a super easy fit back then i think blazers was still like not at a place where it was super easy to do it and so this is really great to see this i'm definitely going to be trying this out yeah for sure this looks really awesome um okay so let's go on to the next article here uh this is the article um that talks about actually creating a blazer application but doing it in a totally serverless fashion so uh from the last community standup i kind of discussed this with how you could put up a blazer warzone application uh onto cloudflare pages this is slightly different in the sense that okay it's still a serverless application but you can have full functions and so on using azure functions so the advantage of this is you can actually access databases and external data stores and do all that kind of stuff that you would normally require server for but in a totally serverless fashion so for those of you who may not be too familiar with the serverless movement essentially the way it works is that you have something called cloud functions and um instead of actually having a server that executes all the functionality you simply ping the api it runs the function for you and returns the result so this can let go of a lot of the maintenance and upkeep that you may require for a project that you may just want to set up once and forget about so this is often a great option for those cases as well as of course a lot of production cases where you really want a simple straightforward workflow that you don't really have to think about too much and this is a great option for that so definitely if you want to learn about serverless architecture as well as how to use blazer and services sorry about that no worries um okay so that's this article uh the next is a new playlist library called have it i hope i'm pronouncing that right but uh this is essentially for bootstrap buy components within blazer so if you look at the sidebar here they have a ton of bootstrap five components that you can try out so i'm just gonna hit the drop down here and we can see a full drop down component that's made using bootstrap five and blazer and they even provide all the code they even provide all the code that you need to actually set up the component uh and just get working with it right away so i love showing off all these various libraries for blazer to show that you can use a variety of uh visual frameworks to actually get the job done yeah did you get that one on the awesome blazer side i don't think uh i don't think they're there i was just going to check if folks aren't familiar with the uh the awesome blazer repo it's just a github repo where the community maintains a list of all things blazer related it's at aka dot ms slash awesome blazer and there's actually a really nice listing of laser component libraries there and even like a table that the community maintains sort of comparing the different libraries and what they're capable of um this one i don't think this one is there yet but we should get it added yeah for sure um i believe this was actually just launched a few days ago i may be mistaken there but if that's the case yeah let's definitely put up a pr or something and get this up there okay cool and let's move on to the last community link i have for today and this is the blazing chat application this is a full chat application that uses a bunch of different technologies including blazer to get everything working uh correctly and this is actually a 35 part web series so they have 35 separate episodes that goes through a bunch of different laser specific features from authentication uh to file uploads to virtualization and lazy loading and all that kind of stuff so if you're kind of so new to blazer you can try out all or learn about all these various functionalities how to use them and you can get a pretty nifty application at the end of the day so that's always a plus so uh before if you wanted to use signalr from a browser you had to do the mix of net and javascript but with blazer it's dot net full stack that's great yep it's awesome um and that's basically it for the community links so uh without further ado let's get on to the actual demos so we have a bunch of really amazing demos uh that we've prepared uh so mckinnon do you want to start things off that's great awesome thank you cool um so hello again my name is mckinnon and as i mentioned earlier i was just an intern on blazer this last summer so today i'm going to be talking about some of the things that added to blazer and some other cool features that are coming to blazerand.net six so let's start with the ability to render blazer components from javascript so so what's the motivation for adding this feature well a big blocker for a lot of people from moving to blazer is they already have a huge app written in angular or react and transitioning to blazer would mean rewriting their entire application from scratch and blazer and so what this feature lets them do is instead add new functionality using blazer and then if they want to start replacing some of the old functionality with blazer so they don't have to completely start all the way over so there are three different ways to use this feature first is what's shipping as part of the framework itself is this low-level kind of javascript api that lets you manually control the life cycle of the blazer components that you're using in your page in your page and then manually like set the parameters of the components so this is a very like flexible way to do it but it's also a little bit harder to manage and for that reason we created a blazer custom elements package so basically lets you turn a blazer component into a custom html element so that way the life cycle of the blazer component is tied to the life cycle of um the the element's existence in the dom and then the way you pass parameters to the to the component is just through the html elements attributes and finally kind of the the highest level of all this is we've created the sample that shows how you can actually generate angular and react components that wrap laser components and this is something that i'll also be demoing today so let's jump into it and show first how the javascript root components api works so the scenario that i'll be talking about today is let's say we're writing a very simple kind of to-do application and we have the to-do list managed in javascript but the to-do items are supposed to be laser components so i have this very simple to do item blazer component here it has two parameters uh which are the index in the list and an event callback that gets called when the remove button on the tutor item gets clicked and this the studio item also allows you to kind of specify the custom text in the to-do and toggle whether you're editing that text or not so there's also some internal state management going on there just to show that that works as well so let me go to my index.html and this is just a very simple to do app written completely in javascript and html so we have just a button that lets you add a to-do and we have a div that renders the to-do list and when you click the add 2d button it calls this add2d function and this is where we make the the the new root components api calls so first we just create a new element to insert into the list that will contain our blazer component and then we call blazer.rootcomponents.add and then we just pass in the the uh the html element that we're attaching this laser component to we pass an identifier which i'll get to in a minute and then we can also pass the initial parameters to the blazer component so in this case if you remember our tutor item had an index parameter so we're passing in an index and that's just the current length of the to-do list so um so now back on this identifier in order to enable use of a blazer component using this api in program.cs you just have to call builder.rootcomponents.register for javascript and you pass in the component type as well as a string that serves as the identifier so that you can specify which which component you're trying to add and that's what um that's what this identifier is right here so once we add the component we uh we afterward um can call set parameters and that will update the initial parameters that we provided it so here we're providing the on remove callback we're not providing an index so it'll just retain the last index that it had and one thing you might notice which is pretty cool as we're just passing a normal javascript function here even though the type of the unremoved parameter was a net event callback so what's actually happening here is the javascript function is being wrapped and sort of converted into a.net event callback this is neat because it not only allows us to communicate from net to javascript by passing parameters um from sorry from javascript to.net but uh event callbacks allow communication the other way so it allows.net like your blazer component to send information back to javascript so in this case when the item wants to be removed it can tell our javascript application hey this you know tutor item should be removed and then the javascript um application will update that list so uh the final api call that i'm going to show is dispose well or method i guess but so this will actually unmount the blazer application from the page and then we just call set parameters on the items after it to update their indices so once again most people don't write javascript apps this way but um but this is kind of demonstrating the lower level api and how you could use it so i'll just demo this real quick just to show that it does in fact work so so this this means that like if you have like a bunch of javascript code and you want to have like a like a button where you say in javascript when i click this button i want to actually render a blazer component you can write javascript code that says yeah sure no problem we'll render a blazer root component right here so you can integrate your blazer components into existing javascript code uh instead of having to like you know try and rewrite things wholesale or you know create separate apps or have to you know i actually talked to a bunch of customers there in this this world where they have some apps that are like angular and react and then they hear about blazer and they have dot-net back-ends and they're like yeah blazer it'd be great oh but now do we have if we need a common widget do we have to implement it twice like once for our angular app and once for our blazer app how do we deal with that this enables you to just write that component once and then use it from blazer or use it from angular and vice versa it's super cool and this is just the low level capability right mckinnon this is like the the framework level we'll show the the fancier stuff on top yep that's right just after this demo i'll show how you can take this to the next level and automate a lot of this kind of lower level management um so yeah but first let me just show that this does in fact work so i'll click add to do and now we have this blazer component that's being rendered that's the to-do item so maybe the first thing we do is wake up a little bit a little small browser all right let's add another one we could say um do chores i don't know uh and then maybe uh eat breakfast or something so uh so as you can see i can click edit and confirm and it'll and the the blazing component is managing its own state but then if i click remove that's invoking our javascript callback uh that will remove the item from the list so that's there's some questions in the chat let me see if we get so that that addrent at the top when you clicked on that that was javascript code that you ran that title did not render a blazer component and the to do elements those were all now.net being yes in the the browser that was all this would that blazer webassembly or blazer server that you were showing there uh this is this is blazer web web assembly so the question is this possible either now or in the future with server side it is yes you can also register components for javascript from your blazer server application include the blazer server script client side and then have blazer render blazer server components into the page as well both are are equally possible same model yes that is nice okay the thing i i think seeing this because this is mind-blowing i i wonder about like am i bulking up my page a ton is this like unwieldy like you know what i mean because i've got javascript maybe components and stuff going on and i've got the blazer stuff going on this is but i mean when you're showing that it was it was pretty responsive it's not yeah i don't know i just i wonder about that you know there is i mean there is load time hit here right like you're going to load angular and blazer so yeah you'll be for the productivity of being able to use both you'll be paying the cost of having to to download both in the case of blazer webassembly in the case of laser server laser server is pretty light to download right like the only thing you're really downloading to the browser is a little bit of javascript to set up the signalr connection so there's not a ton of overhead i mean it's still overhead because you're doing blazer and angular but not a lot over what you're already doing with with angular yeah there's been some discussion on that in the in the comments you know about like how you know how small is stuff now and all that and um but you know people are um people are saying with with the like pre-trimming and everything the apps are pretty small now and i can see even if if i've got a line of business application or i've got an application that somebody loads up and works in all day and it's it's mostly angular and i want to start using a little blazer like adding another you know few megabytes in on one load and then they interact with this thing you know like in that kind of circumstance it doesn't really matter in that kind of case yeah some folks are asking how much blazer gets loaded well i mean you're going to be running the entire component model right so you you will need in the case of blazer webassembly you'll need the.wasm and the core framework libraries linked down to as small as as possible in order to just support whatever component is you're trying to or components that you're trying to render but you will need to bring all that in so you'll need everything you need to run to run blazer and make this happen so there is some some overhead there um for some apps that may not make sense you may decide you know what i i don't want to pay for that but for other cases it's it's a way to start integrating blazer into existing apps and maybe if you're trying to do a migration strategy you could start sort of whittling away at things well both both scenarios are possible it is funny too because i i get it and i i agonize about this on the apps i build too but then i also see like a lot of apps are downloading many megabytes of images and special fonts and all kinds of stuff on first load it's like well you know like a few megabytes of actual functionality that you're going to be using in the page is it's often a small percentage of that for many cases i mean we understand that in some cases like you're on a mobile phone with a slower network and you're really worried about keeping that that load size small then this might not be the right way to to go have a book blazer and angle like at some point that uh becomes too heavy for certain use cases but it's like uh places where you have a great internet connection and and it's really just not an issue then this is a a super productive way to go and like you're saying the ability to not have to rewrite everything to start using some angular that's i mean excuse me some blazer with like an angular application or a react application or whatever really cool but that's that's just the beginning right mckinnon that's just that's just level one that's already that's right yeah so this is just demoing like how uh how you could use kind of the bare minimum low-level api i guess something working but most people don't write javascript applications this way they usually use something like angular or react so so one thing i did over my internship was i created a sample that shows how you could sort of wrap up this kind of lower level functionality and create angular and react components that wrap laser components and kind of create the seamless experience where all you have to do is edit your blazer component um click build and then now you can instantly use it within an angular react project so i'm going to demo that now let me pull up this angular app i have it's it's it's um basically the angular equivalent of what i just showed in pure javascript and html but um but i'm only going to demo angular today because the react demo is almost exactly the same so you'll just have to trust me that they both work but here we have this this app angular component and we're rendering a to-do list just like we were before and the only part we have to fill in is rendering the to-do blazer components themselves so let's go back to our to-do item component so the way this kind of sample is structured is we have these two additional projects that we've attached to our solution and they allow us to both mark a a component as something that should be used in angular and also generate the angular component at build time so the way we can mark the studio item as something that should be generated as an angular component we just add an attribute called generate angular and uh and now when we click build it'll actually generate an angular component for this tudo item and then to to actually use this item within our angular project kind of like we have this register for javascript uh method we'll also have to call uh register for angular we don't have to provide an id here because uh by default it just uses the naming conventions of angular which are kebab case so all lower case and separated with a hyphen so once we've done those two steps that's all that's it that's all we have to do so we can go ahead and build this and let's go back to our angular application and you can see now we have this tutorial item component and it's a pretty simple component but it has our index and our on remove parameters that we specified in our to do item and then also extends this blazer adapter component which was also copied and this kind of contains all the shared functionality for all uh generated angular components so if you really wanted to you could just write this little bit of code yourself but the advantage of generating it at build time is that you don't have to manually maintain two copies of the same component in two different frameworks so let's go ahead and use this 2.2 item component so we will add it to our declarations list and then in here we can just render the tutor item so we can do 2d dash item there we go we have autocomplete and that's another thing that's another cool thing about about using a system like this is that you get auto completion for component names and also component parameters which i'm going to show in a second so we can do something like um the tapping's a little weird so so if you start typing a parameter name as you can see we have index that's the first thing that was suggested and um so so we can specify index and it'll just be the current to do items index and likewise we can specify our unremove callbacks so there we go we also get completion for that and for that we have this function lowering the document that removes the two items so we can just call that remove to do item and since this onremove callback passes an integer which is the index of the item we're moving we can pass that into remove two to item and we can access that just with the dollar sign event so there we go that's it that's all that we'd have to do and now we can run this uh angular application so that that looks like an angular component because it is that's an angular component but under the hood that's actually a blazer component and you generated the angular component around the blazer component using the javascript um rendering components from javascript capability that you saw before exactly yep wow that's right let's go ahead yeah just let me go to the angular version of this and so likewise if i click add to do item now we have a tutor item and again you can almost forget that it was that was even a blazer component when you're in when you're in angular because you don't have to think about the fact that it's um doing a bunch of stuff behind the scenes so and and once again i can just type something random here uh and then yeah so it it it works basically so we're called upon yeah so folks so folks are aware like so this was a um proof of concept sample app that mckinnon put together and it's fantastic this isn't actually like a built-in feature to dotnet six like the the underlying capability of rendering components from javascript that's in the box we're shipping that that's fully supported part of the long term support release yada yada um this code generation concept on top is a sample application that we that mckinnon has put out that you can look at and use as inspiration um it's not like we haven't practiced this as a as a framework feature but we're hoping that the community will take this and sort of run with it and be like oh man like what can we do with this let's make this like like for really real like really do all the you know all the features over blazer components and make sure they have great projections into angular um we're hoping that that will be a an inspiration for to some creative community folks but uh yeah it's certainly nick you can write this code like this this code works today because mckinnon wrote it and how is that code generation stuff so for instance if community folks want to get in and and continue to extend where is that yeah so that's in these two projects here um namely in js componentgeneration.build is where some of the component generation itself is located so here for example we have this angular component writer class which is which is pretty simple it just it it just formats kind of the underlying representation of the component um as an angular component um it's less than 100 lines of code so you can easily do this if you wanted to for another framework like maybe view for instance so um so yeah it should be very customizable and you could use it however you want to and yeah go ahead well i supposed to say that we figured that you know some companies that may have particular patterns or some organizations and projects um they might cater this code style of code generation to their specific scenarios to the things that they really need um turning this into like a broad like works for everyone all the time thing that's probably a more ambitious project but something that would totally be possible yeah and so if somebody wanted to do react you would basically take this and adapt it using the react mckinnon did react yeah he did react we actually do have react support it's already there okay wow that was quick [Laughter] that's awesome kennen uh i believe this should be the link should people want to check it out right now uh and yeah that's awesome thank you so if there aren't any other questions about this i'm happy to move on to the next part of the demo sounds good all right sounds great let me uh so start this you'll be surprised people have opinions about javascript and javascript frameworks in the chat yeah so i do have a little bit more than i'm going to demo and everything on this slide will be kind of combined into sort of one thing that i'm going to demo at once but i'll start by describing what some of these features are so the first thing is the ability to modify the html head from blazer so previously if you wanted to do this you would have had to do the javascript interrupt calls um yourself like kind of manually and that's a little bit hard to manage and plus it's it's very difficult to get that to work with pre-rendering but this new feature works with pre-rendering and it makes it really easy to manage and this lets you do things like modify the title of your page um maybe add some metadata for link previews optimize for seo things like that uh the next thing that i'll be showing is working with the query parameters of the uri so um this will involve like reading parameters um as reading query parameters as component parameters and also writing back a new query string to the uri and while we're at it i'm going to show some kind of smaller html input improvements so we have binding support now for date only and time only and we also have support for multiple select inputs so not just selecting one element from select but being able to select multiple or all of them so uh let's jump right into it so i'm gonna do this a little bit reversed uh to my first demo i'm to show the functionality first and then i'll kind of take a step back and you know show how it works in the code let me refresh that okay ooh it's a bit big okay yeah so um this is basically just the uh the project template for blazer server but we worked a little bit to show some of these new features so one thing you might notice is this little title up here uh it says home and i didn't just statically hardcore that as home it'll actually change if i go to fetch data for instance it'll say weather forecast um so that's a dynamically rendered title using uh this new feature but the media's demo is in the counter page which is no longer a counter it's this kind of mock flight finder application so um so so the first thing that we have here is like some some date inputs and those are bound to the new uh date only struct and uh and this time is bounded to a time only direct so we can set maybe today's the departure date and maybe we're coming back on the 22nd maybe i'd like to depart at 8pm and then i can select maybe all the airlines so this is the multiple select that i was talking about on the previous slide so i can click search and lucky us there is exactly one departing and one returning flight if i were to unselect maybe southwest and search so you can see that works if i unselect spirit no flights so um so so i've been kind of messing with the ui there have been a few other things that have been changing uh if you've been paying attention uh the the title hasn't been changing dynamically so uh so not only can you like connect the title to what page you're on but you can like update it from within a page and also the query string has been changing as i've been changing some of these options so if i like select only delta you can see the query string short and shortened a little bit if i select all of them it shows all of my selected airlines so if i were to like copy this whole uri and paste in a new tab uh all of the inputs have automatically updated from that query string so that's um that's mostly it for the live demo and i'll dive a little bit into the code and show about or show how some of these features work that was a lot of stuff like that was like five i think or new features or something like that so that was the the like modifying the html head like you were modifying the title right there was multi-select for for the the select list query string parameters binding to time time stamps okay i just want to make sure everyone understands that there was like a ton of new things in earth quick little demo that mckinnon just like it's like here's yeah this all works let's let's let's go look at it now go ahead all right sounds good um yeah so so i'll start with showing how the html head modification feature works so um so the way this actually works is normally when you have a a blazer application you have a single root component that gets rendered to the body of your html page and every blazer component just gets rendered from that root component but the way head modification works is we actually have a secondary component that goes in the head and then there's there's a set of components let me go to uh let's say like index for instance so we have this like page title component for instance that will render to the root component in the head and the root component in the head is called a head outlet so if you create one of those um and like i guess now it's layout.html so you see we have this head outlet here and every every time we render a a page title that content goes to um this head outlet basically and then there's also another um component called head content which lets you put other stuff in the head but i'll get to that in a second um so you this this might look a little unfamiliar because this is a server app and we have host and a layout normally you just put everything in host cshtml uh but now we've structured things a little bit differently so if you want to use this feature and an existing project you're going to have to do something similar but new projects will will already have this like updated project uh layout basically but um what happens is our host all it does is render the real component that goes in the body and then we use this layout page which contains everything else the reason we have to do this the reason we have to do it this way is because we need the uh the body of the application to run before the head because the the app root component decides what content goes like gets rendered to the head outlet so if the head outlet renders first it doesn't think there's any head content to render and by the way this only applies during pre-rendering by the way because everything has to be rendered in one pass so so we need the body to decide what content goes in the head before the head renders basically to make sure i'm following this we had a question um from egil who works on b unit and he's he was asking if this is enabled through js interop the way i'm understanding it is no no it it does not use js interop and the main reason for that is uh because that that's uh that gives a lot of limitations with um with how with uh pre-rendering support so yeah this doesn't use js interrupt um it it does a little bit after pre-rendering but but for the most part no it doesn't work that way and at the once you're dealing with the live dom there is a little bit of javascript to just manipulate the dom if we like are setting titles and stuff like that right like but it's rendering a title tag into the the head in order to make this happen is that right yeah yeah exactly so um yeah that's that's more or less how how that feature works let's go to counter so we have this page title on the counter as well and this kind of shows how you can dynamically change the page title content and it'll change the actual title which is what you would expect and like i mentioned earlier there's another head content component where you can put other kind of arbitrary html and render that to the head and that lets you do cool things like maybe dynamically changing style sheets and link previews and crazy things like that so some of you may remember actually that uh about a year ago mckinnon worked on this this problem uh last year right we were working on uh head modification and we put out an initial nuget package that that one was based on js interop is that right and that's right we learned that well the js interop approach has all these limitations um and so we had to have mckinnon come back and and do a do a revision do an improvement and so this is the the fruit of that labor exactly yeah um so yeah and i guess another thing that i didn't really show during my demo is that it this does actually work during pre-rendering so i'll just go ahead and show that does in fact work so i'm going to show the uh just the page source here and this is kind of what the pre-rendering output would look like so if i find the title here it is here's our title and here's our meta type that we rendered so so it does work with pre-rendering um just thought i'd show that for the record sorry as far as source goes this those input elements those are standard html5 like date and time and stuff right so i think that that's uh like a forgotten and and under appreciated thing is that these input elements have their built-in support for date and time and all these and um and range i mean there's all these these really nice html5 input elements and they're they're um they have full accessibility support they integrate really well with it so like people always are like running out and get you know doing custom elements for for all those sorts of input things and it's it's it's great to like to work this way and and so anyway i just want to call that out those are really cool sounds great thank you yeah and um so yeah yes one thing in particular that's new with these state and time inputs is that you can bind to the new date only and time on only um structs so we have departure date and return date are both time only which is a new thing uh or sorry are both date only and then we have time only which is what the preferred departure time is and you can bind to those directly and and i also mentioned that we have support for multiple select so if you have a normal like html select element if you specify the multiple attribute then you can bind to an array so here we're binding to an array that's the names of the airlines that you selected on that one and i think uh that also works with the um input select uh built-in component right like it now will what is it like it will generate multiple if you bind to uh to an array is that right yeah so so so we also have a component um called input select and with that one you don't actually have to specify the multiple attribute at all uh at all it'll determine if it's a multiple select based off the type that you're binding to so if you bind to an array type it automatically makes it a multiple select um it's kind of how that works yeah wow very nice yeah this is amazing thanks uh yeah so that's that's mostly it for that and the last thing i'm going to that i'm going to talk about one quick question sorry but was there was it difficult to implement the date only on time only support no it not not in particular no it wasn't yeah for people since that is a new feature what's really cool with that is it's always been date time and we've always had to pretend like some if you're only tracking a time then you're like like throwing away the date part of it and if you're doing time math things can get wrong if you actually have a date associated with something you're doing time math on and all that sort of thing so this you can just say date only or time only and it tracks just one of those things right and there's a big blog post about this recently and they talked about naming is hard and how they went through all these different ideas and what to call them and and these are the best ones yeah i just got to say that uh like you asked if it was hard to implement let's just make sure we all understand this wasn't hard for for mckinnon take that into account this is definitely going to come in this is amazing thank you thanks everyone so um yeah but but i think that's pretty much all the show for the input stuff uh i think the last thing that i'm going to demo is the query parameter um reading and writing basically so so if you have a blazer component parameter for a a like page component you can add this supply parameter from query attribute and now this parameter will be automatically populated from a query string parameter so in this case since our parameter is called return date uh it'll look for a query parameter called return date and then update its value based on that if you want to use another name besides return date you can specify that manually by saying name equals and then you can do something else that may be a return date in kabob case or something um so so yeah but that's only that's only reading from the query string updating those parameters like from your code don't actually change the query so in order to do that we have other apis that that help you build new uris with a modified query string and then you can navigate to that new uri so navigation manager has for instance a get uri with query parameters method and you can pass in a new dictionary that has the new query parameter values and that generates a new uri for you that you can then navigate to and that will update the uri if you're not updating sorry go ahead nice does that that get your eye with query parameters i think there's a singular one too parameter that took me a second when i when i first encountered that method but that method actually will take the current uri of the browser and then tack on or basically add or remove or modify the query parameters based on what you you specify there in the parameters that's right it's going to give you a new uri back for you to do whatever you want with but it's going to basically modify the query string of the existing browser url and give that to you to then to then navigate to if you want to a few questions here one is if there are multiple values for a given key does it just comma to limit those or how does that work um yeah so what it does is it actually just specifies the same parameter multiple times so that's actually what we have with uh selected airline names right here this is an array and because it's an array it'll it'll have like for instance airline name equals united and then it'll do end airline name equals southwest and and then it'll do like all of your selections just kind of as multiple parameters cool uh yeah and then one one here just you know like anything that's in the query string is not only viewable in the browser but it's also passed along the entire way it's in logs and everything so you never want to put anything secure in any query string you'd use a token or whatever sort of thing right security sensitive secrets yeah yeah or anything that you then like you have to treat it also as a um you know untrusted input so you make sure that you think about it one thing i learned and i wouldn't rely on this but one thing i learned a while ago that i thought was interesting is that https actually i believe query string and um and the path is also like part of the https and and you know like i wouldn't call it like it's not a full-on security but it isn't encrypted um there's a good question about like binding query string parameters to like a complex type um i don't i don't think we do that right we only bind them to simple types is that correct no yeah so we only support like built-in types plus some other types like date only time only um and date time i think so basically things that have a a string type converter style style representation yeah so there's no like you know supply parameter from query and you pass in like a product object that's not this is not a full model binding system it's just give me i want this query string value and do some convenient conversion for me to the appropriate simple.net type that's right but that this could support i mean with those things in mind you could support like deep linking or like bookmarking or whatever because it does preserve all those query string parameters yeah that was the demo right like you uh you like basically preserve the state of the form in the query string right so you could bookmark the the the flight info or whatever and say hey check out this flight or something yep definitely um and then question here about um validation like so it's going to bind those things in is there any other validation that i mean it's either gonna bind or not yeah so that validation is something you'd have to do yourself yeah it doesn't there's no like uh data annotation based validation being enforced on on these parameters so you'd have to wire that up separately it's not like a a form input okay and there's a question if this if this demo is available or will be available everyone wants your code um this this specific part of the demo is not but i could definitely put it on there if people want it um but the the other demo with the um angular component generation is and that's the link that was linked earlier but yeah that's about it for me if uh whoever's next wants to take it over i had one thing like you showed um uh rendering components from javascript and you show generating components for angular and react um did you show custom elements i don't know did we do custom elements yet uh i i actually don't have a demo prepared for that just just because of time constraints but that's totally cool i'll just i'll just definitely get it yeah so so in in this next uh this upcoming preview and done at six uh uh release candidate one which any moment now hopefully like i'm i'm actually watching the live status to see like when is it released yet is it really still any very soon shortly it should be released um on top of that same functionality that you saw mckinnon uh work with we also have an experimental package that you can use for taking blazer components and building standards-based custom elements so if you're not familiar with custom elements like the the html spec has an interface defined that you can use to to create custom html elements like natively in the the browser historically you would create those using javascript but using this new blazer capability you can now create standards-based custom elements using blazer and we provide a experimental nuget package actually that you can now use for that the package is microsoft dot astronet core dot components dot custom element custom elements so you basically add that package and then you can register a blazer component as a custom element instead of registering for javascript you register as custom element and then you can use that component as a as a custom element in any framework you want like you could use that with angular you could use that with react because custom elements just work anywhere that's kind of the nice thing about the custom elements approach is he gives you a sort of framework agnostic approach to building some functionality that can be used uh in multiple places um this is so very this is similar in some sense to our support for fluent ui um one of the things we did with a partnership with the the fluent ui team at microsoft is they had already built a bunch of fluent ui web components custom elements using just javascript and you know html stuff and they they went the other way they wrapped those in blazer components so that they're easy to use from blazers i guess that's kind of similar to what uh mckinnon was doing with his angular and react code generation but now here where you can actually create custom elements using using blazer components so that's something else you should check out we'll have a blog post uh showing you how to do that and there's a sample uh in the asp labs repo that you can check out that shows you how to do that too yeah there it is on the screen um that won't be if you have to wait for the rc1 bits i think most of the packages are now up but uh yeah soon soon very soon all right um cool yeah i can that first of all i mean [Laughter] we love having you uh as an intern you've done another fantastic wave of improvements to blazers so thank you so much for your contributions and what uh you know fantastic uh demoing and presentation you're like i should just leave like you can do all the demos you do fantastic job um you know you're really great so thank you for all that stuff i hope you guys enjoy that set of new features we just had a couple things it's been a little while since we talked about blazer updates there were a couple new features that i don't think we've had a chance to show in the community stand up that we just wanted to make sure that folks were aware of so i was going to show those really quickly let me share my screen let's see this one there we go okay so let me know when you can see i think you can see all right great let me get a little bigger so first feature i just just gonna show two quick features one i'm gonna show the support for required parameters um which was i think we we did this last we showed new blazer features and.net six like in preview four so we we kind of looked at all the new stuff that we haven't talked about here yet and and cherry picked those required parameters is one of those so required parameters is if you have a component like here i have a counter and i've added a parameter to the default counter that allows me to set the the increment amount this is sort of the the first blazer app that everyone writes when they try and blaze it for the first time it's messing around with the counter um and right now the parameters in general in blaze are optional you can specify them if you want but if you don't then that's that's fine and so this this counter does have a default value that it that it specifies for this increment amount so that just works if i use the counter like here i've got a counter tag doesn't specify the increment amount but it still functions let me go ahead and run this so we get the app up and going all right so we've got our counter now on the home page that works just fine okay um so but what if we wanted to make it so that you have to pass increment amount so i can specify increment amount here dan would you mind zooming in just a bit into visual studio better about that perfect thing all right great let me put this back here oh man i can never like my arrow keying with the windows gesture is always slightly out okay so now we've we've set the uh the increment amount and that's great but if i don't specify it like if i had another counter you know that still works and but i don't get any help if that thing is actually supposed to be required so you can add a new attribute to the parameter that is editor required okay when we save that if we go back now hopefully you'll see that for my counter component that i'm using where i don't specify that parameter i now i now get a nice little diagnostic letting me know like hey this component really needs you to specify that parameter and you didn't specify it so so please do so this is really a design time enforce feature like it's not going to enforce that parameter really really really got set at runtime but it's a great way to make your components more usable if you have a set of parameters that the users really need to specify so you can add some diagnostics by just slapping editor required on your component parameters that's required component parameters yeah we have a quick question in the chat someone's asking what just happened the code updated without a refresh oh hot reload hot reload right so uh this is six well we showed this last time so i assume people have heard about hot reload but if you haven't heard about hot reload we now have the ability while the app is running in.net 6. and this is not just blazer this is all the app models uh blazer nbc razer pages maui wpf winforms we will take your code changes and detect them and then figure out exactly the diff that needs to be applied to the running app apply that that delta to the running application and then let the app just just keep running so in blazer that means we can apply like component changes ui changes uh we'll actually detect that the app got updated in that way and re-trigger a a component render so you can actually see the results of your ui changes in near real time like it's super fast super snappy you need to need visual studio 2022 and.net 6 to really leverage this feature uh it also does work from the command line so if you're in like on a mac dot net watch now well by default try to do a hot reload not not every change can be hot reloaded there's some runtime changes that just can't be applied to the runtime uh you uh i uh the il that's being executed in which case uh the runtime will let you know and say hey that's a change i can't really hot reload you're going to need to restart the app for that uh with dotnet watch you can tell it just to do that automatically and then visual studio there's a similar feature as well so that's yeah dotnet hot reloads right um it's it's there are some just so people know when with the rc1 bits there is some wrinkles with hot reload and razer um with rc1 that you may see the that they may we may the plan is thinking we're going to try and patch those soon after the rc1 and vs 2022 preview 4 release goes out so if you try it this week you may get a bit of a bit of a bumpy experience we apologize for that donate watch actually works just fine and there's some issues with the integration in vs that we need to get fixed but we should have those fixed soon like hopefully within a week or two after the rc1 release goes out sorry about that you may need to control f5 i do have one of the fixes on my machine that's why it works a little bit better um okay so that's uh required parameters the other thing i want to show is the smaller app sizes like there was a lot of questions about you know how much are you really downloading with this app now with dot net six we've done a lot of work to try and make blazer webassembly apps much smaller we did this in a couple different ways one is the dotnet il trimmer he is much smarter in dot net six we annotated all the core framework libraries that make up.net six so that they can be um more efficiently trimmed and then the trimmer itself just knows how to do more stuff uh so dotnetil trimming is better in dotnet six but even more cool is that there's now this tool chain that we ship and it's integrated into visual studio now so if i click on let me go up here to acemic and uh eastman web development you'll see you used to have to do commandline.net workload ad you can still do that so this is this is a tool chain you can acquire from the command line by doing dominant workload install wasm tools uh but now it's also available from visual studio this is the new checkbox so when you install the asp.net workload in visual studio look for this checkbox check it and that'll give you all the stuff for doing ahead of time compilation and what i'm going to show now which is uh runtime relinking where instead of only being able to trim the managed code of your blazer web assembly app we can now look at the runtime bundle the webassembly bundle itself and figure out well how much of this stuff do we need are you are you using all the globalization features in in.net no okay well get rid of that we don't need that to download that with the application it can make it much much smaller okay so let's just show that uh let me i'm just going to do this from scratch how much time we got we got so i'm going to create a new project we'll do the whole whole nine yards this may take a few minutes but let's see if we can do it also create a new blazer webassembly app blazer app 22 sounds great we're going to host it in h net core because i actually want to publish this app so we can see the full published download size all the optimizations happen on publish so if you look at the size of the app during development you might be shocked and appalled and be like oh my goodness it's so big no that's only during development we do all the optimizations once you publish like trimming and compression and runtime linking and so forth okay so we've got our blazer webassembly app and i've got the tool chain installed let's go ahead and do a publish without uh anything so i'm not going to do any additional configuration of the app so let's do just publish to a folder finish all right and then we're going to watch the output while this happens now i have the dot-net webassembly build tools installed so if this works correctly the on it should detect that and it will do a couple different things so there it's it's doing the publish watch carefully so they're optimizing assemblies for size and it's running emcc so that is the inscription tool chain for uh dealing with webassembly stuff so that's the.net webassembly build tools kicking in and looking at the runtime to see well can i take anything more out of here now by default it doesn't actually trim much from the runtime but we can tell the runtime things to say i don't really need this and it will trim more yeah go ahead uh john well when i did this before you warned me before i did my last demo to do this build well before actually like don't do it live during my demo because now chewed up my computer for 15 minutes yeah well so so that's particularly true with ahead of time compilation because ahead of time compilation it's going to like take the whole app code and turn it into webassembly a head of time compilation does take a little while so it's that's not usually something you can do with a live demo um with runtime relinking because i didn't turn on ahead of time compilation here i'm still going to use dot net assemblies and the dynadial interpreter the only thing i'm really asking it to do is like please um give me the uh an optimized version of the runtime when i publish this app trim the webassembly bundle as much as you as you can okay so it looks like that see that that's done like it doesn't actually take that long to do runtime relinking that could take a little longer so and there's a question we do support aot but it does take take a little bit of time yeah yeah and again that's a published step okay so let's go and now find our published app and we'll use this as a baseline to see where we're at so i'm going to look at the release build.net 6 and let's look at the publish output and we will run blazer app 20 uh 22.server.exe okay so we're running the published output let's get i always do that whenever i copy and copy from the terminal it shuts down the server because control c is the adjustment we're shutting down the server okay so let's see where we start hold this back the other one all right so this is a default you know.net six with runtime relinking um and let's make sure we clear all the caches so that we don't accidentally misrepresent the size okay ctrl shift r let's see where we start i can't see the size okay so right now by default we're looking at two megabytes that's where we start out with the default laser app that's with all the stuff that's in there it's bootstrap all the features okay but can we make this better so the runtime got did get trimmed but only got like trimmed a little bit with the default setup because it's using still it leaves enabled all like the globalization features and all that stuff let's see how small we can make this how small can we get this blazer webassembly app so i'm going to do a couple things i'm going to go into the settings and i'm going to turn on invariant globalization okay this is basically saying for this app i don't really need globalization features like localizing numbers and and uh sorting and all that stuff i'm just going to use an invariant globalization for my audience some apps that may be totally impractical but for a bunch of apps this is totally fine uh you may not need any of the the globalization functionality so that's one thing i'm going to do and then let's also just like whittle this app down like i'm going to get rid of app.raiser let's only have a counter component let's get rid of fetch data and index.razer we're just going to trim this guy down let's make the root component of my app be the counter so dot client.pages dot counter okay and then what else let's get rid of bootstrap as well i mean that's just that's this extra weight for we're trying to see how small can we get blazer basically so let's get rid of bootstrap as well okay time to publish again let's see if we can do better this time so we had two megabytes before was the the total transfer size again this will take a minute but uh we'll hopefully see some some improved uh results you know one of one of the the things that is a downside of ahead of time compilation is that the app tends to get bigger right like you tend to get get about a 2x size bloat on the app as you turn the very fairly compact.net instructions into webassembly instructions and that's that's actually normal like anytime you take.net instructions and turning them into their native counterparts you typically need more instructions to represent the semantics of the dot net instructions but fortunately with dot net six you start out from a smaller starting point um you have less stuff that you're gonna get that 2x multiplier on so that's that's goodness so let's just just run and we're doing that yeah a few quick questions there so this is not server side this is not server side this is a blazer webassembly app that's hosted in an ace minute core app i hope i wanted the hosted version because i needed a little server to serve the file so we can actually see the uh you know what the the transfer size looks like oh crazy um [Music] so this stuff is still really hard off the presses oh oh shoot that's because i have the server running that's fine that's fine you got it already running so i had it running let's do that again i've done this before one more time yeah um yeah so yeah there's not server side blazer this is client side blazer running in the browser on webassembly but we're hosting it in a um uh ace minute course a server application okay now we can try and run this again language server.exe and hopefully if i did that right and pop up a browser and we can go to 5001 again okay so we got a much more minimalistic app because we're trying to go as small as possible let's get the give myself a little more space okay let's get the browser dev tools up application clear the cache let's just make sure that all the stuff that you cache with blazer and now ah we have a 1.1 almost about a one megabyte minimum blazer web assembly application so much much smaller and a lot of the savings is coming actually from this the reduced size on.net wasn't i should have shown that before but by default the wasm is like 800 kilobytes transferred but now if uh with all the trimming you can see that it's only like three hundred and fifty three kilobytes we ripped out all the globalization features are actually fairly heavy there's a lot of data and logic that's needed for them this allows you to pull all that stuff out so much smaller applications with laser web assembly in dot net six that's what i had so you started what was it before two megabytes is what we had when i just took the default project and just published it with the uh runtime relinking enabled i think if you don't have the dominate webassembly tools it'll be a slightly larger like maybe closer to 2.1 um with the runtime relinking and if you turn on invariant globalization you get down to about a megabyte if you want to see a published version of this app um anthony chu actually put an app up for us all at minblazer.anthonychew.com i think is what it is i'll put a link to that in the chat and you can show all your friends wow look how small blazer is it's only like a megabyte it's a fully functioning uh blazer application yeah john if you could put that one up there yep i will do that netapp's actually hosted on an azure static uh azure static web app i think it was to nay you mentioned like serverless uh blazer applications ultrastatic web apps is a hosting solution provided by by microsoft and azure for blazer front ends you know webassembly based front front-ends with a uh azure functions back-end so full serverlessofferingwith.net front-to-back this is interesting steve who was on before um so he he said you can remove timezones.that yeah yeah we could do that as well yep that would shave us off another uh he says 44 kilobytes so maybe get may almost get us to the 1.0 i'd love to see that let me see actually get to a nine i want to get to below a megabyte we have other tricks that we're still looking at to to further reduce the size for dot next we probably won't get to some of these other ones but look in future releases for this size to get even smaller it's it's kind of a fundamental for us that we keep pushing on how much smaller can we make the this app size we're looking at like different compression algorithms uh and things like that to reduce the size even further wow that's really cool all right so i'll stop screen sharing and that's uh that's the release out somebody said if you update visual studio you will get it so v has vs the vs release release did they uh this this is completely anecdotal i have no idea this is what they're saying this is what the interwebs are telling me well uh the dirty sneaker right is that a lot of the release activity happens you know it takes a little while to push hundreds of packages and all the stuff that we we uh need to release in order to do a given.net release so that happens over time so you can kind of see it start to trickle in like you might see things show up on nougat you might actually see things show up in certain blob stores and so forth but uh the i don't think the i don't see the official release announcement yet but very soon very soon it's almost there on the.net blog look on the dotted blog look in the internet blog we'll have uh details on the great new features okay that's awesome thank you so much dan uh we have a couple more questions in the chat if we have a little bit of time let's try to answer them uh so first of all someone's asking if we can split the wasm into multiple dlls so i believe this is hinting at hot reload uh sorry um lazy loading so the the dlls are already split i mean those are factored files so they they can be cached individually and downloaded as as needed all the benefits of http 2 or really help you out there as you download that bundle of files the web assembly bundle is the dot net runtime like that's that's the runtime logic for running those those dlls that wasm module is is a single payload and it can't really be split there's no there's not really a good way yet for us to dynamically load multiple webassembly modules in a blazer webassembly app we have talked about it you know like you can imagine people often ask like oh can i do lazy loading with my webassembly ahead of time compiled app you know thinking that like i want to aot everything but i want it to be sort of in multiple chunks and i only download the chunks as i need them that's not a capability that we that we currently have as i understand it it's pretty much a limitation of the spec that just makes dynamically loading webassembly modules pretty difficult so you always end up with one webassembly module in a blazer webassembly app it can be bigger it can be smaller if you're aot it gets bigger if you run time link it gets it smaller um but you're pretty much only have one for lazy loading the we do have lazy loading capabilities for the net assemblies so you can mark individual dlls and say don't download this dependency until i tell you um that is a built-in feature and that that works whether you've ahead of time compiled the app or not you can sort of knock out assemblies and say that one's going to be lazy loaded um don't aot it i'm going to dynamically load it those things are are possible but you can't do it at the webassembly layer yet maybe in the future maybe there'll be some spec updates and browser functionality that will enable that okay that sounds cool um so if thank you uh then um so if people have questions uh feel free to leave them in the chat uh in the meantime just wanted to ask sorry sorry this one i think is interesting and and you know there's different implications for this but question about you know secure cdn for caching the runtime and i think some things are less simple about this than i had originally believed one is if like any kind of trimming is going to affect that right you've got basically custom builds of the runtime and then also um there's a lot less like reuse like the browser specs no longer will support loading from cdns and caching as much when we started blazer webassembly this was something we thought we would do that we might might have a central cdn someplace that people could reference and then you could cache those files once and then potentially reuse them across applications browsers uh shut that down pretty pretty pretty quick the reason why they stopped allowing that was because of all sorts of privacy and security concerns um so browsers now even if you have even if we had a common cdn for the runtime they won't allow that file to be uh cached and shared across cross origins um so that that won't really help for like us to create a central cdn but for your application you can set up a cdn for your app and your files and then everyone who comes to your application they can get those files cached in the cdn layer and get efficiencies that way all the normal hp tricks for caching apply to blazer webassembly apps just like they do for for any other static file because the blazer webassembly app is just a bunch of static files okay okay makes sense uh we also have another question here uh talking about mobile blazers so perhaps they're hinting at maui yeah uh maui is still chugging along so uh yeah we didn't show anything new in uh dotnet maui or dotted maui blazer apps but there will be an update for that along with the.net 6rc release so look for that soon um the functionality i mean for the laser integration we ship a blazer webview uh control it's just a dominant maui control that allows you to render blazer components into an embedded browser control um that functionality is is um is is pretty much done like it's it's a fairly simple piece of tech um the things that are still moving around is maui itself like getting the single projects uh uh experience to be really good so you can have wind ui and mac catalyst and android and ios all in one project that's multi-targeted and that tooling experience the maui runtime um all that stuff is still being heavily worked on um but yeah don and maui blazer is is is looking good so look for an updated version of that coming coming shortly with the rc1 release i i think that's a good question here um so how how do we handle a big app with a hundred plus pages and i i think going along with that you know we're looking at a very simple app with a couple of pages and it's a megabyte so how do we scale up size wise as well when you get to large applications well the first thing is that you might be surprised at how little additional overhead those hundred pages have like dotnet il itself is actually really compact um the big part of a blazer webassembly app isn't really your app like your code is actually pretty small the stuff that is uh the bulk of the weight is the webassembly runtime itself and the core framework libraries and those get downloaded once and they're kind of just there as you add more pages the the additional size increase is actually usually pretty small it it depends a little bit on what dependency chain you have like if you go find you know a megabyte dll and decide to depend on that from your blazer webassembly app well you're gonna have to download a megabyte dll so think hard about the size of your dependencies um before you take them when doing blazer web assembly that's just the nature of the game once you're now in this mode of downloading the app to the to the browser but the actual like components of like riding a you know a counter it's tiny like it's a teeny tiny little little piece you know a couple kilobytes is what you're really normally talking about there if you do need to break it up into islands like i said you can do lazy loading of the assemblies themselves so if you do have a big dependency you can say please don't load that up front uh i will tell you when to load it only when i browse to this page is when i need it and so that's when you'll you'll take the hit for downloading that that uh that library um and in general uh for community dependencies we i've encouraged folks to look at the uh the blogs on the uh dot net blog about dot net aisle uh trimming and link linkability of your your assemblies there are things you that anyone who owns a library uh can do to annotate your library to make it much more friendly to the trimmer so when we run the dotnet aisle trimmer we can much more efficiently trim your dependencies in addition to the actual app itself so that's that's another thing that we uh you know we need the community to start really looking at is thinking about the trim ability of the of their assemblies one other one i wanted a question that's i think is related because um can use apis with blazer absolutely and that's how our netlive tv page in the dot net site works is we actually have a blazer web assembly client and it's calling into backend apis that are interacting with youtube apis and functions and all this other stuff and so um so that is a really good way to kind of factor your applications and then so and that takes away the requirement for having all these other libraries and you know not just the code but also the dependencies um and then also i think you know this we're talking specifically about blazer web assembly but blazer server also as you mentioned before dan it's like much smaller download because you're executing that code on the server maybe 100 kilobytes to download the app and that's that's it like you it never gets bigger because all your code stays on the server so you can you can write million pages if you want and your app size will never increase with the blazer server app i mean in general for i would actually recommend folks um start out with blazer server because it will simplify a lot of your app development concerns like you don't have to create apis for a lot of stuff because well you're already on the server you can access all the server resources you're right there blazer server is really a great solution if you need to push the the load of your app down to the client then blazer webassembly makes a lot of sense unfortunately you know the component model is the same so you can just flip your components over to be blazer webassembly but blazer server is definitely worth a look loads very fast execution speed is great because you're running on a jit based runtime on the server the main downsides are like the latency of the connection like if you if you have uh very high sorry low latency requirements for your application laser server may not may not work very well because there's only so much we can do about the the speed of light but for many scenarios blazer server is great yep uh next question will be possible to start with laser server and then move to azim i i so first of all as part of managing your app of course like you can start with a blazer surfer app and then flip it to blazer web assembly but maybe what they're asking here is actually like a runtime like what if i start out as a laser server app and then download the blazer webassembly runtime in the background and then flip it to via blazer webassembly app on the fly that's something that we've been talking a little bit about maybe something that we'll look out for.net seven so we don't we don't ship a feature like that out of the box but conceptually should be doable you just need a way to to manage the state right like you need to know i've established some state with the blazer server app i need a good way to transfer that over now to the blazer webassembly app and then as far as the you know starting with the blazer server application and switching to blazer web assembly there's there's two parts to that answer i think right because there's the it's actually just a few lines of code that you're changing in your application but if you've taken those dependencies if you're assuming you're on the server and you're calling directly into a database and all these sorts of things then you need to refactor that a bit yeah you should you should you'll want to do that refactoring anyway like you should you should decouple your ui components from things like access to data and those types that's just good for testability regardless so you'll want to do that regardless okay that's awesome uh that's just about the time we have for today so let's uh first of all thank you so much dan and mckinnon for joining us today so many amazing and exciting features that are going to be coming to rc1 and it as dan mentioned it will be coming very very very soon uh hopefully within the next hour or two everything should be live and everyone should be able to try it out and yep so thanks dan thanks mckinnon and thank you so much john as well for uh coming on thanks everyone for tuning in thank you thanks for all the great questions and stuff too thank you mckinnon best intern ever best team ever all right thanks everyone thanks [Music] [Music]

Channel: dotNET

Views: 12,838

Keywords:

Id: cpt0Ljs35YA

Length: 80min 40sec (4840 seconds)

Published: Tue Sep 14 2021