What's new in Blazor in .NET 6 with Daniel Roth

[Music] hi welcome to coding of the workstream before we start we once again would like to talk talk to we want to thank we have had our sponsors speakers on that's why i think we should talk to them but not because they're sponsoring us though because they're awesome and so are our sponsor which is progress telerik because they have amazing blazer ui components and last time we checked they have over 85 components that's amazing it's a lot it is chances are they have what you need so we will link that in the chat as well definitely if you are seeing this on youtube please follow us on youtube the alert thingy down here just click it and you will get notifications whenever we post a new video definitely but we have a guest today we do we have daniel roth welcome hi there you are how are you i'm doing great how are you doing we're doing good yes we we have a heat wave we talked about that i heard that you you got it a little bit warm in seattle as well we we hit over uh well over a hundred like not even just a little bit like a hundred and eight hundred and nine which in the seattle area is is unheard of i think we've only had over 100 degrees uh this is fahrenheit by the way people who otherwise we would be spoiling um i think we've only had that happen like three times since like the early 1800s in the seattle area it keeps us cool but for whatever reason the right parameters maybe a little global warming thrown in there or whatever like really spiked us into the 100 range and we don't have air conditioning here no one i don't ever we have a little like like wall units and stuff like that but uh not central there so it was hot it was hot yeah and we're usually joking that seattle has the same weather as back in sweden because we have a lot of rain and it's never sunny and all of that but we didn't want your heat wave [Laughter] well it's not advice like i think a lot of people had a lot of heat this this this summer got warm yeah definitely it's always something to complain about in seattle whether it's hanging in the gloom or it's too hot or it's too humid i grew up in the northeastern part of the united states in massachusetts and new england and so we had all four seasons got the cold in the winter with the snow and ice and the hot and humid and the summer and so we got all the spectrum and came out here and people here are a little bit more a little more sensitive a little more tender to the temperature changes yeah yeah it's nice though it's cool that cold that's not cold exactly that is true and we also have some news don't we yeah because your book came out my book came out and this is going to look really funky on the green screen because it is green it is and it has raccoons look at that at least we can see the raccoons the book is transparent i know right now it's a feature not a bug now chances are that this is the only blazer book with the raccoons on the cover pretty sure it is blitzer raccoons look at that yes exactly we should make that a thing that's great we're not here to talk thank you thank you again i know getting through it but i've never had to write a full book before i can only imagine that was a a a hard labor to get through it was and it was also so satisfying because i learned so much i mean you you know the the the um you know how to do things in blazer but if you're writing a book you really need to deep dive yeah and suddenly you should be given jimmy you can correct me on all the things that i'm um no but it is it is a lot of work i watched him write it and there was a lot of profanities that didn't make the cut the book so that's good there also was a lot of good things though yeah actually getting to know how everything is connected that's cool it was way more work than i thought it would be but a lot more fun as well so so there's that a lot of book authors like it was so much more work than they originally thought yeah i actually got a a linkedin message from another publisher saying oh would you like to write a book for us as well i'm like nah nah i have one blazer book yeah let's just give it a couple of weeks at least this is my life's work let me at least forget how much work it was before you ask but it is a good book i i was the technical one of the technical reviewers so if he can teach me to write a freaking blog engine i think it's pretty good all right i'm gonna have to read it you have to take a look but you didn't like my my that up my favorite chapter what's her favorite chapter was a javascript interrupt chapter what's up with that it was super interesting i know right it was interesting you're also like oh man the calm interop and net that's just my favorite thing and like sit there reading those docs reading about comments we're not here we're not here to talk about my book we're here to talk about blazer the new stuff yeah dotnet six just arrived it is coming well it is coming in pieces every month yeah exactly new installment it's like better than netflix like there's a new new payload that arrives with new features and work yeah but we're we're getting we're past that halfway mark now marching to the the final release in uh november that's when dot net sticks will will ship and um i think we just shipped preview six so that happened yesterday so if you haven't had a chance to check that out go check out the blog post go download it give it a spin file issues on github tell us what you like tell us what you don't like um also it's simshipped with an update to visual studio 2022 uh visual studio 2022 preview 2 is what came out on the same day and it includes net 6 preview 6 in the box so if you've already installed the visual studio 2022 preview release then you've got you got the latest dotnet six bits as as well um so those are marching together which is great lots of new tooling features happening on the visual studio side as well so yeah it's coming we're over halfway through so preview six i think the plan is there'll be one more preview branded release preview seven and then a couple of release candidates in the in the fall at least if you're in the northern hemisphere and then november november is when it's supposed to to be ready for production i mean some of those release candidates i um in the past i know we've said that release candidates uh have go live like uh our go live releases that if you want to put them in production we'll um we'll support you with that i i don't know if we're doing that this time around but uh that may happen as well so look for those release candidates too that that'll be a good time to to try out the the bits if you haven't tried out.net six yet you have never listened to that anyway you were in production i usually ate of blazer i usually listening to listen to the go live license that well that's good did you win with blazer well well we weren't in production there were eight days after the general availability so you were working with it since since the day you could get your hands on it so you could get it into the production that's true that's true if it works for you it's been it's been really really working really really well nothing has and not no major issues at all and you've been running in production since like i said day eight yeah um which is pretty amazing so well done they're from the early days yeah i remember yeah good stuff good times yeah so should we take a look at next steps yeah let's bring in the let's bring in the slides what is coming what is happening in dot net six we're gonna i'm gonna look specifically at the blazer features there is lots of stuff coming in dot net six way more than we could even cover in the time that we have allotted for this today so make sure you go and check out all the things in asp.net core blazer's part of basement core so this is just a piece of that but all the stuff in the dot runtime frameworks maui all these things are coming in at six but today we're going to just look at the the new blazer features because that's what i work on i'm a program manager on the asp.net team and i specifically handle our blazer development as well as some of our other ui investments in acemic core do some work with nbc and uh you know get my fingers in other places as well but mostly these days is is what i'm doing so we'll take a look at all the new stuff um if you haven't been keeping up with dotnet six um this is a kind of an interesting release for us in that it's a very uh open planning uh process like uh i think in previous donut releases we would talk amongst ourselves we look at what people are saying on github and come up with a plan and then unveil it to the world and say this is what we're doing we've tried to be much more transparent and inclusive in what we're doing in dot net six from the beginning part of that was defining these high level themes for net six and having them published on the themesof.net site having them published publicly on the the internet be like main themes for netsix uh they're pretty pretty broad like making it easier for new developers to get started with net expanding support for building cross-platform native client apps dot net maui is what that that one's all about ensuring that.net has everything you need to build apps that run natively in the cloud ensuring that enterprises that are using our long-term support releases our lts releases have a really nice smooth upgrade path we were just talking about um you know breaking changes of uh are kind of a thing of the past hopefully mostly i mean we do we do some targeted breaking changes still but we try really hard to make our donut releases as highly compatible as we can so that you can just keep accruing value from the platform as it moves up you just float with it upgrades should be as seamless as possible we're doing work to strengthen the dot net ecosystem we're making development with net faster and more productive we'll see some of that today and then we're just also doing this broad bucket of meeting developer expectations is basically finishing work that we've started in previous releases like in.net 5 um stuff like single file publishing and linking and such these are longer lead efforts um making sure we're delivering on your expectations as a develop developer for those features um based on how we originally pitched them uh to you all now you can like this website is public so if you wanna go to themesof.net this is the actual site right here so themesup.net and these are all we'll put that link in the chat as well so easy access so all the high level themes are here and you can drill down into these and look at the different epics and user stories that make up each of these themes if you are a blazer fan or a asp.net core fan there's this uh we that work is kind of spread out across multiple themes so we to make it easier to find we created this uh high level road map issue on github that kind of collects all those issues together so you can just click on that and that will take you to this uh roadmap github issue which has all the stuff we're doing in acemic core and of course blazer because blazer is part of ace net core so here's all the the links to the github issues for what we're doing in dot net six um this site of course is a blazer site so that's that's to run the release and manage our processes so that's how you can find the ace big courtroom map just themes of.net and you can see all the individual github tracking issues there so what is coming in blazerin.net 6 lots of stuff um we're not gonna have time to cover all of everything here even even with the time that we have but i will try and cover in in bold and then a few extras a few bonus ones at the at the end uh dot head hot reload we'll talk about the ability to really quickly make changes to your running app um apply those changes while the app is still running while keeping the the state of the app without losing any app state state persistence during pre-rendering we'll look at that error boundaries web assembly ahead of time compilation for much better uh runtime performance for blazer webassembly apps i've done a lot of work to decrease the download size of blazer webassembly apps in particular look at blazer hybrid apps or dotnet maui blazer apps uh that'll be at the end uh custom event args require parameters and a whole bunch more stuff that's still also coming that you can uh i'll let you go look at the the roadmap to learn about these things uh we are getting to that uh that painful point in the release where you know we're getting near the end and we had all these ambitions and aspirations of all these things that we don't do and reality starts to sink in that we might not get to everything um so in previous presentations uh i had this entire bulleted list the ones that are sort of grayish are looking like they might uh fall below the the cut line for dot net six just because of time and resources we'll see we'll do our best get as much stuff in as we possibly can with that last batch at the end might not actually make it um well i i for one rather will i rather wait until they are ready then get crappy ones so i think this is a good call we we we try to maintain the the quality bar as opposed to just shipping the feature as a you know broken or half fake thing and it's also important for like like we talked about compatibility and breaking changes we don't want to ship something that turns out like the api shape isn't quite right and then that creates a compatibility problem for us in the future so we try to try to hold stuff back until it's really ready to go that last batch might not be quite we have a question for you actually go for it regarding this where is the developer productivity improvements debugging library load and hot reload well hot reload is on the first line i think that is the first one don and harvey though is the big one and that is actually where we're going to jump into first in just a second um live let's say the live reload is is something that i'm not sure exactly what that one's referring to that might refer to the um previous workflows we had where we would like restart the app like we would do a full rebuild and a full restart of the application on file changes and then refresh the browser for you um kind of more like an auto restart feature i think is how i referred to that one in the past that's still there and that will continue to be there we actually use that a little bit in conjunction with hot reload to smooth out the developer experience uh and debugging yeah lots of debugging improvements actually are coming in dotnet6 that aren't on this slide like more of the debugging features that you expect to work with dotnet debugging um will continue to light up in the blazer web assembly debugging story um there's the bug debugger display attribute is one of the attributes i just got an email from the runtime team that they uh have that out in pr to add it to the stack so you can do use the custom displays for the debug for values while you're while you're debugging so things are also getting better in that space as well nice let's do it i agree uh developer productivity improvements let's see okay so let's take a look at hot reload so this this is an app that we built a while back that is kind of like a little mini picture editing app for doing image processing um it's a blazer webassembly application and as you can see i've left myself a little to do here to actually show the pictures it doesn't currently show any any pictures and to do that i'm just going to go into the code here's the the razor code for that part of the application and let's just change this text uh list images after work and i'm just going to save [Music] and i'm going to actually start the app again because it wasn't actually working there it goes well we are live so something is bound to go wrong hold on hold on let me restart this let me start this application [Music] so what i'm doing behind the scenes so folks can see oh just popped over here is i'm actually running this app using.net watch from the command line and what's that's why is this guy showing up that shouldn't be a beautiful refresh okay great we're back and working okay so behind the scenes what i'm doing is i'm actually running this app um using uh dot-net watch you can see it right there and so dotnet watch is a tool that you can run on any dotnet project really and it will watch the files as they change and as you save them it will kick off or rebuild and restart the application for you but in donet 6 we've added support for dot net hot reload to.net watch so you can see that right here it's saying the hot reload is enabled for this app so we're running and so that means not netwatch when it sees file changes it's actually going to try to apply those changes directly to the running application while it's executing without having to restart it at all which is really really fast and i'm doing this with netwatch right now all the functionality i'm showing you is making its way into visual studio in fact if we look up here at the top there's this button here that's grayed out right now that says apply code changes and it's you can barely see it but it's a little plain it normally shows up red if you're running under the the debugger that's the like apply a hot reload hot reliable change to the app in visual studio and it is there um there's some issues with it right now with the visual studio 2022 preview 2 where it's not quite working in particular with razor scenarios it will it'll like apply the changes but it won't actually refresh the browser and show the new pixels that type of stuff those are all things that are being ironed out in visual studio 2022 so like preview three i'm hoping that will be the release where we can actually start showing this whole hot reload flow using just the visual studio set of features but for right now i'm going to do it with dot-net watch okay so let's let's do this again i'm going to add some code here and save and that should just change in there there we go yeah all right and it's really so fast like so fast for reals watch this i'm going to hover my mouse button one two three save and it's like almost instantaneous i i don't even understand how this is possible well it's some clever runtime stuff so we're calculating these little il diffs for the the the code that's uh that's that's been written to figure out exactly what needs to be changed in the running application and the runtime has capabilities where you can say please apply this little delta to the running application while it's running leaving any state that you have in memory untouched so that's why it's so quick if you've used i didn't continue in the past it's a very um similar set of capabilities that this is being built on it's just a much more fluid developer workflow you just edit your code you save you see it in the running app immediately that's that's done in hot reload now this is obviously just like a markup change but we can do fancier things let's actually add some code in here to uh to show the full list of images i'm gonna add a little for each loop and we'll format that so it looks nice and ready three two one save boom almost immediately yeah this is insane i don't know what unicorn tears you found and and i i agree with this person that is going to make design so much easier instead of using the developer toolbar and stuff like that it will just update instantly i mean my day is basically half my days spent waiting for visual studio to start over again compile start up a web browser what am i going to do what the whole day work write more books right [Laughter] that's a lot of fun to work with so and by the way this is not just blazer like the this uh concept of donna reload is coming to all of the ui workloads in donet 6. so if you're thank you building razer pages apps or mvc apps and doing cshtml it works there if you're doing desktop application development maui development xaml development hot reload is coming to all those weak workloads in as consistent uh a way as we can we can make make possible yeah we got great news about this blazer developers really need some dev experience as they have in in reactor and angular and all of those and this looks really good this is just a piece i'll show you some more stuff later in terms of just developer productivity um we're doing a lot of work in the razer editor itself to actually make it easier to to write your code um but this is this is certainly a big part of that that story i want to explain a little bit about what's happening here in this code so we we have this uninitialized method if you're not super familiar with blazer that that's the life cycle method for a component that happens when the component is initialized and set up and we're doing an http request back to the server and this is a blazer webassembly project so it's running in the browser it's making the http call back to our acemic core back end to pull down some json data and deserializing it as a array of editable images and then we're just looping over all those images and rendering this image list item component so here's one of the i think this works productivity improvement i can just f12 on this or go to definition i think uh this also works yeah so go to definition now works in uh razer with component files that's a new new razer editor feature um you can see that right now all this component is doing is just rendering a div with the current image name nothing nothing too fancy we can start adding some some more markup in here to actually show the image so here now we have a div with some classes this is using tailwind css i know tailwind can be a little little controversial you know something i love this model some people don't um yeah we just had our last stream we had uh ed charbonneau on um talking about tailwind and css and all of those the pros the cons of the yeah yeah mostly cons i believe in this case but but that's in ed's case but mostly personal yeah preferences we did try to keep it somewhat informational as well but it was very interesting though it was for me the point here is that blazer is based on html css open web tech if you can use whatever css framework you'd like we typically use bootstrap in our default templates that has its pros and cons as well you can use darwin you can use raw css it's all just open web tech underneath the covers nothing nothing proprietary and that's basically what we came to the conclusion it's basically the same thing under the hood so it doesn't matter what you what you choose so here now we're actually going to render the name of each image and also an image tag using the url for the image so i'm going to again three two one save and this shows up changes this annoys me because you didn't you changed a component that is used on the other comp the other razor component not the the actual component yeah and it just worked yeah they're all there all the components are there is the whole tree you can poke in any part of the tree make a hot reload here mess with this component there hot reload that there yeah and it will um you'll interact with i believe it interacts with the blazer renderer to make sure that it just re-renders the part of the tree that was uh was updated nice i'll buy that hot reload now i don't wanna i don't wanna bore people by typing a whole bunch of tailwind css and potentially offend all the people who prefer rosters so i'm dropping in a bunch more markup that makes it look nice and pretty so we got all the images now showing up all right so that's that's hot reload with markup changes um including razer syntax like you can do razer syntaxes for hot reload you can also do hot reload with just your your c sharp code like if you're in a cs file you can change that too uh in this case we have this humanize last modified method this is just a c sharp method that lives on the component class everything in this code block you can think of that code block as just tacking on a bunch of code onto the generated class for this component every dot razer file turns into a c sharp class at the end of the day and the code block is just adding a bunch of members and methods to that to that class so humanize last modified is being used right here to generate this green text at the bottom like when the image was last updated and we can change this too like if we want to say instead of updated let's let's change this c sharp string and say that this was changed three two run save and then just goes all the way through the app so you can modify all your c sharp code hot reload that into the app no problem that works as well um the last bit is css so if you're dealing with your styles like very common pattern writers you go into the browser and you mess around with the browser dev tools and fiddle with the styles and get that code back into your css files then you forget something and you have to do it all over again you mean that yes yes exactly that with css hot reload we can make changes to our css files and they will get pushed into the running application and applied to the to the live dom for us um where should we do that let's do it in the that will make life so much easier i wanted to do the layout i think yeah main layout so here's a an example of a component specific css style sheet so this is just a normal css file that's been scoped to this one component to mainly layout.razer you use this file convention to do that and here we've got some css variables that we can mess around with this is sort of the theme color for the app we can change it to red let me change that and now it just propagates all the way through if you know maybe we want dot net purple because blazers all based on.net so you can make changes to your css files and they'll just get pushed into the running application as you're doing that it works with normal um like top level css files as well as component scope css files perfect so will dotnet six also be available for vicious duty 2019 no it will no um yeah so we are like there's a bunch of things that are that are being done in the tooling in visual studio 2022 that will be needed for full dotnet 6 development um maui development will require it like there's compiler work and such like the dotnet 6 will require vs and it will ship with vs 2022 so it'll be in the box so once you get the new tooling uh you should be good to go it does sit down at 6 development so yeah you're going to need to upgrade start planning [Laughter] all right cool all right next feature i wanted to show is error boundaries um new feature in dot net six so error handling in blazer today is uh i mean it's just c sharp so you know try catch right no problem add enough try catches and you should eventually have your errors um but uh the feedback we got was it's a little clunky it's a little hard to sort of centralize what you want to do in the event of an error um can we can we do better so error boundaries are a way they're components an air boundary is a component that can capture unhandled exceptions from the component tree and then allow you to react to them however you like like by rendering uh custom content uh if you're familiar with react i think react also has a similar concept we take a lot of inspiration from the javascript ecosystem when we do stuff in in blazer so if you're familiar with that feature yes it is inspired by that feature um so let's introduce some error we need some some error that we can play around with in this humanized last modified method i'm going to go in here and just throw an exception format that nice okay so if the image id happens to be one then we're going to throw an invalid operation uh exception i think that would be this happy kitty down here yeah that is uh one and so if i save this and we should what happened to my daughter watch are we still running yeah we're still ready i said i'm kidding what happened i have to refresh on this one no ideas one that looks it's because kitties doesn't throw exceptions they're just awesome all together you should have put it on the dog still in preview if you need to throw a catastrophic arrow [Laughter] you went there catastrophic all right yeah there we go i don't know why they didn't that shirt have hot reloaded and resulted in an exception but it didn't but uh so as you can see now i'm getting the normal blazer edited uh error experience where this is the uh the yellow bar of death right of later from how the handle the exception occurred and took down the app if we go into the um the console we can see there's our exception boom invalid operation exception um but we can use error boundaries to handle this exception in a more reasonable more scoped way uh in our application and the way you do that is using a new component so let's go here around our image list item component that's where we're throwing the exception we're gonna just add an error boundary around that so here we go and i'm going to hopefully this time if i save it not going to work no that's the browser save it see [Music] that it is restarting okay good so now if we look at our kitty our kitty has disappeared yes the kitty has disappeared and we've been it's been replaced with some error content some air ui content um now what is where's that error ui content coming from well what a error boundary does is if everything's good it will render its child content which is you know the inside of the the element if an exception happens then by default it'll render some uh error ui and then you can customize that so let's if we look at what that default error ui is let's go and select that red box and it's just a div like that's that's all that the error boundary will render when an exception happens it's just a single div with a particular class and so then you might wonder where's all this like red and yellow stuff coming from well that's just some some fanciness with with css like in the css for the app we have this uh some styles assigned to that particular class to give it a background color give it an icon even the text even the text is being added with with css by default all you get is a div so we can do better than that like we can actually customize what ui you get from from the error boundary let me show you what that looks like so that looks like this okay okay so now um what's happening here we have our error boundary we have the child content we're explicitly specifying it this time so we're saying we just want to render the image list item and then we have what we want our error content to be in the event of an error and here i'm rendering my own div with a sad a crying cat and then if you want to like mess around with the exception message and so forth you can do that it's passed in as a context variable so if i say this and this change is not a hot reliable change that's why it's taking a little longer it's actually doing a full full restart and we get our custom ui now for that particular entry so that's what our batteries are we have a question about that um they are awesome is there an api for it to catch the error catch the error well you get the error handle to you in the in the air content so so this this context parameter you now have a a sort of a ambient variable called ex which is the actual exception so you can then like the the air boundary itself is catching the error and then giving you the exceptions decide what's uh to do with it there is also an api where you can then like reset the state of the error boundary like once it gets into this state where an exception has occurred from from then on it will continue to only render error ui forever uh until you tell it to stop until you tell it to reset and they die for for doing that as well that you can like if you're um uh like maybe you had an error that happened when you were like browsing away from a page i'm browsing to a particular uh routable component like to a page you can hook into the air boundary to say reset yourself when you've navigated because when i come back that exception might not happen and i still want you to try and render the real content stuff like that can we log exceptions log exceptions so there is a logger we use the same i logger abstraction in a blazer that we use in all of asp.net asp.net core so you can you can get that as a service and and log um more interesting question is like where do you want to log to so like there's no built-in logging provider that's going to pump logs from the browser to some external store someplace so that part you'd have to do yourself but uh yes you can plumb into the ilogger abstraction to log exceptions and we also have another question within the error content can i check for type and things like that yeah that's a great question i mean you get the instance right so you have an exception so you can do anything with that instance that you would normally can do with any dotted instance check its type uh for to to do particular things based on the type of exception but it's a little different than like um like having uh ex uh type based uh catch catch uh catch phrases in a uh try catch um so you just basically get a an exceptional instance that you have to decide what to do with all right awesome let's check that's some good questions yeah good questions everyone let's look at uh state persistence uh and pre-rendering all right so do that i'm gonna remove my error here let's go back and get rid of this back with a kitty back i'm gonna get my cat back the big question is is it even a demo if you don't have a cat i don't know kind of worth watching yeah the app restarts are sometimes not catching so i'm just going to do a manual restart there's our kitty back okay now it's a really good demo because it's catching the error oh did you no i'm sorry i could say i'm going to stop but we both know we're gonna do that you're not going to say anything to bridge over oh nice to something else now yeah i totally dropped the ball on that one thumbs up catching all right we need to go to the next step i think okay this app is blazer web assembly so it's it's being rendered client-side and we can see that by looking at the uh the actual source for this page like here's the here's the source pretty bare bones not much ha not much here was actually downloaded from the server we got the head we got a body that has basically nothing in it other than this this this weird comment that's like a placeholder for where do we want the blazer rendered stuff to be put but then client-side in the browser blazer kicks off all it renders the components and it inserts that content into the live dom but the original download from the server pretty pretty bear but sometimes we want to do better than that and we want to actually have content come in that initial request that's better for things like seo it's better for anything that requires static analysis of the the page it's good for getting pixels on the screen faster how can we do that well the nice thing about having dot net on both sides of the wire is that we can pre-render our components from the server we have an 8-speed core back-end it can run.net code you can run blazer components let's run the blazer components first from the server put that into the page and then we'll fire up blazer on the client once we've got everything down client side so we can we can do that very easily let's go into our server project and the thing that's rendering this this page initially is this host csa html file and this is just a razor page this is server-side rendering of html blazers does client-side rendering of html and you can see right here is where we're putting that marker about where do we want our our blazer app to be to be rendered we're using the component tag helper to do that and we're saying please render this app component and right now the render mode is just webassembly like do everything client side on webassembly but we can change this to be webassembly pre-rendered and save that and that should work and make sure that it's actually going to get picked up by the app that uh let's see the file watch kick in there so you know from bugs i'm just gonna restart it manually and then let's see what we now get on the source from the server so great okay so now if we look at the source downloaded we got all the the divs and images stuff being being rendered server side first so that um they show up uh much quicker on the client and you know search engines can can see all this content and so forth um unfortunately it doesn't quite have the user experience yet that we might want you may have seen it when the page initially rendered let me open up a new tab and i'll browse to the app again now watch carefully so we hit the server we immediately get the content and it poof it just like disappears and we see that loading spinner and then the content comes back why is that uh well there's well the reason why that's happening is because when the blazer webassembly app loads client side it has to go get the image data again the image data was retrieved on the server for the initial render but then you have to get it again client-side because nothing transfers that state to the client and while it's in order to do that it has to do an hp request let's go look at the code for the index component here's our index component right and when that component gets initialized it does that hp request that we saw previously um while that hp request is doing its job actually while this whole uninitialized method is doing its job the index component just renders a placeholder it renders a little loading spinner and we're exaggerating this a little bit you may have noticed there's a two second delay so that you can really loading spinner most of the time i wouldn't recommend that no don't put delays into your app this is just a proven point most of the time this problem shows up as like a flash like you you set up pre-rendering and then it pre-renders great but then there's this like flash while the the app loads client-side yeah you wonder if you actually saw the image render or not yeah or you're like are you glitching out was that my screen yeah what was that um so that's what's happening that's why you see that that flash but we can fix this problem now in.net six really easily by doing state persistence uh into the page from the server during during pre-rendering what does that mean so well we have a new service and it's called component application state we're going to add to our index component there it is we're also going to implement idisposable i'll show you why in just a second and what this service allows us to do is to hook an event so that we can persist state during the pre-rendering process and that state will get persisted into the page so that it can then be picked up on the client so that it doesn't have to go and get it again it already has the state that it needs so it uh can do a basically a no-op render at that point you don't get the the flash just use what was rendered initially from from the server now to use this service we're going to need to change our code and uninitialized that looks like this all right so a little bit more going on here but not too bad i'll walk you through it so non-initialize now we're using that component app state service and hooking this on persisting event and there's our persist image data event handler when the when we get notified we call this persistence.json method to say i want to i want to put a little bit of state please save this for me i'm going to i want to give it a name it's pre-loaded image data and here's the the data i want to serialize basically like a json payload then we pop into our normal uninitialized logic we're going to check first to see is there already state here that i can use if there is we'll use it if not then we'll issue the normal http request that we were doing previously and then at the end we're implementing dispose so that we don't uh you know accidentally leak uh these extra event handlers all right now how does this data make its way into that pre-rendered page uh if we go back to the page itself host.cs.html uh you may have noticed there's this other tag helper the persist component state tag helper that's what's gonna put the the whatever state you want into the page so that it can be retrieved from from the client so let's go ahead and save this and see if my reload's gonna kick in restart and let's see what we get now there it goes okay so if we go look at the source we see our pre-rendered content as before that's good but now at the bottom there's this new fancy comment called laser component state that's where we're serializing the the state that you had on the server into the page so that it can be retrieved client-side you know big old blob in there uh and if we now go to the app and do the same trick we did before where we open a new tab it just just loads there we go refresh refresh it loads fast i mean that's how you can handle that flashing issue and take advantage of uh pre-rendering in your blazer web assembly apps so blazer server apps too you can all this this is this issue is less um less common in blazer server but you may also hit it there as well awesome so we do have a couple of questions for you go for it um does webassembly pre-rendered work without asp.net asp.net um hosting uh no no you you need a host you need you need you need net code on the server and so you need something that's going to be able to take your blazer components and run them and where we have that logic is is in a smart core um this is a it's important to remember that blazer is part of asp.net core like the component model itself is part of the asp.net core shared framework so they are integrated together they're meant to be used together like where you can see here we're using razor pages with blazer all in the same application that's very much intended blazer's not like a separate replacement or offshoot of our web stack it's part of the integrated website so you'll need an acemic core uh web host in order to do this this new pre-rendering seamlessly work with client-side spa authentication ah because there are some issues today there are still issues often not yet yeah that is a no there's discussions on github but what we don't do there that yeah that's a problem like if you're doing authentication um pre-rendering is still still problematic that's an area we still needed to work on yeah good question um thank you for being patient on that one we know that's a problem um probably not gonna happen in dot net six at least i don't think so we'll see i mean there's already a bunch of stuff that we're we're scrambling to try and get squeezed in but uh yeah no no no problem okay i think we did get an answer to this one right can't you just check if it was pre-rendered and i think we got an answer to that we do have a comment that's just my thought i just couldn't remember what name was view status yeah yeah i mean to be fair to be clear the difference here is this is only being this is only part of the prerender like there's no like cookie that's like pushing state back and forth here if you um if you navigate away can i do this um let's go to let's go to one of these images and then if i go back well actually that worked just fine that shouldn't work i thought that should show i guess maybe maybe not but well the the point is if you if you if you do a client-side navigation back to that page where there's no longer that state um being you know served to you nicely from the server then you're gonna have to go get the state again and you'll see that uh the the loading splitter which should should show up [Laughter] but it's not being flowed back and forth across all pages that's a big difference between what we're doing and what you're doing with view state and also if you state um it's kind of automatic whereas here you're being very explicit about where you want to put there don't don't put something in uh that component app state thing that uh that you don't want there you don't want it to be huge obviously that'll impact your first load do a reload on a non-navigated page or route okay okay let's try that one non-navigated page is that like this so the the dog so we're on the we're here on the test tennis player and doing a reload and if we go back to here yeah still i don't know why we're not getting that loading spinner i thought there's something fancy in preview sex that i don't know about that's interesting um well we tried right yeah let's move on um next feature is advanced features uh i wanted to talk a little bit about custom event args uh i'm gonna kind of go through this a little bit fast because this deals with don javascript now i hear that i love javascript and that this is this you'll probably like this this demo but for those of us that avoid javascript take take heart in knowing that the scenario i'm about to show you is very advanced this is for very particular cases where you want to um interop with particular javascript javascript apis in a custom way there are um in blazer you handle ui events events that get raised from the browser from javascript all the time like on click on input all those types of things and there are custom events that you may want to be able to handle and you can do that in blazer what's new in.net 6 is that you can do that now with also having custom event arcs for for those events um when you handle event in blazer we typically give you an event args object that gives you all the data related to that event so you can interact with it when you have custom events there was a way to do that previously to to tell the razer compiler that you want to define a custom event or handle custom event but there wasn't a way to do custom event arcs this was from my understand that is now possible and this app is doing that um for this image processing part of the app we wanted to have a little canvas here that we can select parts of the application uh in order to do some like uh fancy image processing processing like pattern matching um to show that i'm actually gonna make one little edit where i'm going to go to the client and here's the actual editor component this guy right here and you can see in the the the editor component that it's registering an event handler for this on region drawn event this is a custom event that's defined by the application uh that event is uh defined in this eventhandlers.cs css file the way you tell the razer compiler that you want to deal with the custom event is you define this event handlers class and you put this attribute on it and that will just work that will work with dot net 5. um the part that's new is being able to define a custom event arg type so you can get data uh from from the javascript world into your your event handler okay so if i go back to the image editor um here's where we're handling that event this guy right here and i'm just gonna comment this out real quick and save so we're not going to do an image processing yet so there's that i think that no no okay no we're good okay so you can see we have a little no that's the one i was trying to avoid let's get this restarted again okay so now like you can select parts of the image and what i want is to get all the image data and i want the points from these regions that are being selected on the image so that i can run some dot net code on that data do some image processing um so that's what's happening here in order to make that work we do have to write a little bit of javascript code and that in this case is in this um this is an interesting pattern we have uh there it goes uh this there's this edit image.razer.js file that's accompanying this edit image component there's nothing fancy about this convention yet in dot net six but we are looking at potentially adding this as a feature where you can have component specific javascript files in addition to component specific uh css files so that may come later in dotted it's not available yet but this this demo is kind of mimicking that and most of this javascript code is just vanilla javascript it's just you know dealing with the canvas and drawing those dotted lines and regions onto the to the canvas but the interesting part is the on draw end code right here where we're handling what do we want to what do we want to occur after we finish drawing a region and here at the very bottom we're getting an image array buffer for the canvas data and then we're getting a an array buffer for the selected region and then we're raising a custom event this region drawn event using the the canvas and then you pass in this details object to say what data do you want to push over into net land visual studio was not letting me resize this for some reason there we go um so the way this works is that these properties they you can do it one of two ways you can either just put data there that you want to be json serialized and you'll get json serial deserialized in your event object or if you're really advanced this is i think jimmy you were saying you've done some of this code where you can actually do unmanaged interop where you pass like uh references to to memory in in the javascript part of the application and just pass that reference over to netland so that you can operate on shared memory it's a little bit more efficient um now it's you know we're talking about uh webassembly specific code here in a very advanced uh scenario but that's what this one is doing is it's getting a direct reference to the array buffers um that were uh extracted from javascript if we go back to our event handler here's our custom event args object and we just are matching the names of those uh properties that you saw in javascript so source image and source region and we're getting this ijs on marshalled object reference for that data so that we can then interact with it so this is now possible in dot net six if this goes like over your head you're like whoa that looks like on manage interop and i got javascript i don't want to write javascript don't worry you don't have to do that but if you're doing advanced scenarios where you're trying to interact with native browser capabilities or javascript libraries where you need to surface event args that is now possible so i think we can even show that real quick so that's actually working if we go back to our event handler let me add just a couple right line statements and here all right so now i need to show you this even if the question was answered but love it so um at least two people jimmy so at least two people not um there is on marshall then interrupt we do tell people that they can use it and we will do our very best not to break it thank you there are some aspects there are some aspects of unmarked interrupt that people are i think that person is referring to is that um there's some we have some dot comments that like this api is currently still subject to change like in dot net six we are trying to to pin it down to have via something that you can really take a dependency on and know that yes this is now official public api surface area um that's still a bit of a work in progress so don't don't get too excited um there are some things that we're doing um in preview 7 where you should instead of doing this uh dance with unmarshaled interrupt you should just be able to pass the array buffer back directly and we'll just give you a byte array and we'll handle the unmarshalled and drop under the covers for efficiently trans transferring that byte array into dot net code for you so this code should get simpler in in future demos where you don't actually need to do your own unhandle uh uh unmarshalled interop uh but yeah that's a it's a known thing that the the unmarshalled interop apis are still a bit influx okay thank you all right so if we go back to the app now and now if we bring up the console let's clear that if we start picking up things no let's do a refresh application all right like i guess uh that's some issues to deal with the file watching in donna watch i'm not sure what's going on there so let's do this again so if we go to the image and we go to the console and if we select a section you can see we're able to get the um unmarshalled bytes from javascript and then display how many bytes that there were actually received on the hunter the blazer side so that's custom event args for custom events and yeah unmarshaled interop is something that we are working on getting to be to be stable now what do we do with those bytes well we have this logic here for running a patch match algorithm on the the images um this is this is uh we've already had enough stumbles in this demo sequence that this is this will just drop in the bucket but there's actually an issue with this part of my demo in in dot net six where the um something's happening in the runtime where the image processing is no longer functioning correctly i'll show you what what i mean just for kicks and giggles if you've seen this demo before you you'll know that this this has worked in the past and it will work again unfortunately it looks like we have broke broken it so if i go back to the the the tennis player what you should be able to do is to select this ball and then when i release the mouse which i haven't done yet the the pics the the bytes should be sent into some dot net code a net implementation of a patch match algorithm and that should then um uh should just disappear like we should be able to remove the ball from from the image that's not unfortunately oh i forgot [Music] that's not what's supposed to happen exactly again it did disappear um the thing i will show i will show is like usually what we do is we like can remove this like entire logo uh i'm gonna you know unclick this and the ball usually takes like a you know a fraction of a second removing that large section this timing is still correct because it is still running the patch match up match algorithm it's it's mangling the image for some reason that i'll have to i'm working with the devs to figure out why but it takes a little bit of time like it's not particularly fast in laser web assembly um why is that well blazer web assembly runs on an il interpreter based runtime there's no jet net runtimes you have jit based execution so you're turning uh dotted managed code into native instructions on the fly so they run much faster with laser web assembly the webassembly standard doesn't really enable us to write a jet so we're just interpreting the code and as a result it runs much slower but ahead of time you're spoiling the reveal [Laughter] we also have a thank you for the demos on the open heart surgery that's very brave thank you for everyone's patience uh okay so to you use aot so there is now webassembly ahead of time compilation in.net six what does that do well we can take your net code at design time at build time and turn it directly into webassembly instead of doing it on the fly with the jet we're just going to do it up front as part of the publish of the of the application and now you have a large webassembly bundle that you ship instead of a bunch of dlls and that runs much much faster um it does have a penalty of being larger whenever you take dot net managed instructions il and turn it into its corresponding native instructions the il instructions are actually fairly abstract and so the native versions of those of that same logic tends to be more code tends to be more logic so going from managed assemblies to native is going to get bigger so this you are trading off download time like load time performance for runtime performance that's something to be aware of in our tests what we've seen is it's about a 2x size increase um so you know yeah so apps will get a little bit bigger but they do get much faster i do have a an aot version of this application that will run the patch match algorithm we won't be able to see the results but uh we will at least see the performance of the results so let me uh shut this guy down so what was it was about like three seconds yeah two and a half seconds um to do aot just so folks are familiar with the process you're gonna need to install some extra bits into the sdk first and they come in as a workload this is a new concept in the.net 6 sdk there's this new command.net workload and we can just list them so these are like additional components to the dotted sdk that were a little too big or they have their own sort of life cycles um a little too disruptive to actually throw into the the the sdk sync so instead of making the net sdk like you know two gigabytes of stuff uh we have this new concept of workloads where you can optionally install additional parts of the sdk as needed laser web assembly aot is one example of this maui is another example of this like all the stuff for android and ios if you're not working with android ios you might probably probably don't want to deal with installing all those bits um in order to make that more convenient for developers we we model them as optional workloads so to install an optional workload you do.net workload install let me make this a little bigger so you can actually see it and then you just type the workload id uh currently the workload id for blazer web assembly is this one which is huge and atrocious and long no one's gonna remember that um in preview seven this will get shorter this will just be wasm tools that will be what you need to install but that's the additional piece that you need to um to to set up your machine with in order to be able to do webassembly ahead of time compilation i've already done that so i'm not going to do it again the other change you need to make is in your client app in the actual blazer webassembly piece you need to signal that you want to ahead of time compile the application you need to set run aot compilation to true once you've done that it won't kick in on on normal builds it will kick in when you publish when you do a dot-net publish usually with a release configuration aot will kick in and then you should sit back relax go get dinner go get it watch a movie um it takes a little while it's not a fast um process to ahead of time compile your application um like i think with this app last time i had time compiled it took like 5-10 minutes um so it's not something you want to do on every single build um it's running the inscription tool chain in order to uh using the encryption tool chain in order to do the conversion from.net code into webassembly code um takes a little while so you know that's why it's a publish time step when you're ready to go publish the app and then it should work i've already done that so i'm not going to make you sit and watch 10 minutes of of publishing so i have the picture picture my bin release net six publish okay and then picture picture server dot xe um the server process isn't ahead of time compiled here that's a separate whole separate conversation this is just the webassembly bits that have been ahead of time compiled uh to webassembly all right so let's go ahead and run that do you expect improvements on the resulting binary size and the build time for net six for the binary size yes and i'll show some of the size improvements that we've made in just a second for the build time performance for aot um the main thing you can do is the the la the the if you can reduce the amount of code that you're gonna ahead of time compile then it will it will not take as long right now we'll do everything like we'll ahead of time compile the whole application uh we are looking to see if we can add some features where you can selectively pick parts of your app and say i only want ahead of time compile this part not the rest that's really tricky to do because now you have like dot-net in il interpreted code that's like interweaving with webassembly code so letting people arbitrarily slice and dice what they want ahead of time compiled and what they don't is a heart problem that's why we're starting off right now with just doing it all um but that would of course reduce publish times uh because you're ahead of time compiling less code making the tool chain faster is a little bit trickier because a lot of it depends on third-party components that that we don't have a lot of direct control over like we're using inscripted and the lvm is used under the covers there for a lot of the optimizations lvm is not exactly known for being a fast tool chain um so there may be some opportunities for us to engage with those open source ecosystems and see what we can do to speed that up but that's a that's a harder part of the problem to deal with so we're going to try and make it so you can aot less longer term we'll see what we can do about speeding up the tool chain okay so if we look at the this should be the aot version of the app now if we go look at what was downloaded from the app this is going to look huge because this is um no this is this will look slightly bigger not huge this is this is still still trimmed and all those good things let me see what we got and the key thing to notice here we got all the images you will still see dlls but the wasm file which is right here you'll notice that that has gotten quite a bit bigger like it's couple you know megabytes now and that's because we've taken all your il code and shoved it into that single.net wasm bundle and then linked it all together into a to a single file so we're not we're not taking individual dlls and turning them into webassembly bundles we're taking all the dlls and linking them into to one webassembly bundle and the good thing is still way smaller than facebook though yes yes let's see what this does now and so 0.6 seconds you get about you know 5 to 10 x perf improvement when doing uh cpu intensive workloads now it's really dissatisfying to not actually see any real results i do have another another app that i can show which is this conway game of life which is like a grid automaton style application let me let me pull that up so that this is going to do wonders for my zx spectrum emulator yeah i would say so because now it's a little bit too slow yeah especially if i want to add sound as well then it can't do it so i don't know if you've seen conway's game of life but this is a 100 by 100 grid of cells and there's like some simple algorithm that you run over each cell to determine if it lives or dies and it results in this like really kind of fancy motions and animations for the cells with the interpreter we're getting about it's hard to see but about five generations per second of being able to calculate through this entire grid that's the interpreter version if we switch over to the aot version [Music] this guy the different improvement here is not quite as dramatic as with the image processing because there's a lot more dom manipulation going on here but this will ramp up to like um 10 12 15 generations per second once once it gets fully warmed up so you know 2x 3x per improvement here this the performance of this app is being much more dominated on the diffing algorithm as it interacts with the dom elements which has a bunch of javascript to drop but still the the idea here is with laser webassembly aot you get significantly better runtime performance for your applications at the cost of some load time performance and uh publish time performance when you're actually doing the the the publish of the application so that's aot all right and uh mentioned like making apps smaller the one nice thing about this tool chain that we now have for doing ahead of time compilation is we can leverage it to uh re-link the web assembly runtime um whether you're doing aot or not um so your app might not be using parts of net.wasm like maybe you're not using a whole bunch of globalization features or the debugger or whatever uh previously we could do linking on the managed assemblies like the the managed code the dot net code of the application and trim out all your unused c sharp effectively that you're not using in the app and that actually has gone a lot better in dot net six like we're able to trim a lot more from the dlls than we previously could in um dot net five but even better if you have the webassembly aot tool chain installed we will also um unpublish um uh re-link the the webassembly runtime itself and trim down.net.wasm to be a smaller bundle so things that um like really big wins there is if you turn on in invariant globalization in the application we can strip out a whole bunch of logic that's used for globalization concerns that if you don't need then you can just remove it and get a much smaller app size uh as an example of this there's a app that i published onto this is an azure static site that anthony chu helped me uh publish and this app has the you know a blazer counter this is a full blazer application and if we go look at its download size i'll clear this r okay so the whole app here is 1.1 megabytes transferred i think a a default blazer webassembly app in dot net 5 weighed in at about 2.2 megabytes total uh this the equivalent app in dot five is this is about 35 smaller than the uh the same apps and dot five so things the apps are getting overall smaller in net six um if you turn on aot they will get bigger but you're at least doing a 2x increase over a much smaller initial starting point so that's the that's the good news there and if you're counting just the javascript on facebook for example i think you're in about 15 megabytes or something like that so just put it in perspective what we're talking about here yeah you want to keep things we do want to keep things as small as we can we that's why we do this work to do uh size reduction um one thing that people in the dot net community can do to really help here is the is is making if you own a popular dot net library is doing the work to make your library linker friendly there's now a whole bunch of attributes that and and things that you can do on your library that allow the the il linker the thing that strips out unused code to be much more intelligent about how it handles your library actually by default if you don't signal to the.net io linker that your library is linker friendly then it won't even touch it it will just leave it alone so if you want your library to work well in blazer webassembly apps or other other app models that need small app sizes like all the mobile workloads like they want to be small you should do the work to make your library linker friendly all right i did want to show some razor tooling improvements let me hop out of this project let's just create a new new blazer application blazer server and we'll do.net six so um razer has a long history in asp.net we've been using it for a while and uh we have an existing razer editor that we've been shipping for for years that we had been uh you know poking at and tacking things onto to try and make work with with blazer uh it was kind of showing its age it had some issues performance issues reliability issues formatting oh my goodness like all the all the issues that people complain about with the the poor formatting of razer files uh in the old razer editor uh we have heard that feedback loud and clear and so for actually the last like year and a half we've been working really hard on replacing the existing razer editor with a completely new one that's based on a language server the language server protocol it's got its own language server that we can then reuse across our visual studio properties so in visual studio 2022 you have the new razer editor by default like it's on and it will be the default razer editor uh when we when we ship on uh visual studio 2022 and dotnet 6 later this year and there's a whole bunch of goodies now that are that are enabled there we've seen a couple of them already like let's um let's take a look at index.razer so we already saw like go to go to definition if you want to just hop to the the definition of your components you can just f12 or uh right click and go go to definition on that component so that now works you can rename components in the the new razer editor so we can f2 or call this you know my survey and then do that and so that will also not only will rename the tag it will also rename the component file so that it matches and give it a second it will finally recognize the component there's a little there's some little performance here that's getting going too soon there it goes there's lots of work happening on performance and the new and the new razer editor actually a lot of things are much faster in the new razer editor than they are in in previous uh previous incarnations uh it's still five months out so yeah uh if you have a uh an unknown and you want to create a component from that tag there's now code actions that you can use so like say please create a component from this tag and we'll create my component for you if you uh i like this one in a particular namespace let's call this foo so now it's this component will be in the foo namespace if we go back to index.razer it's now that component's no longer recognized because the foo name space isn't in scope but we got code actions to add using statements for the the component we can resolve these there should be i'll give it a second yeah yeah use we can add at using foo so that you get the using statement for that for that component um same thing from c sharp code like if you have uh uh c sharp code that you're writing in your code block like would be an example i don't know like i put uh [Music] it's a with a good type that's probably not in my file network credential that one red then can't type also for c-sharp as well so we'll be able to add usings for those things as well which is nice um you can rename things across files even when they're closed that all works there's also this this gesture like some people don't like the code block in the the razer file they prefer to have it in a partial class like in a code behind file there's a nice code action here to extract block to code behind so if you do that we'll go ahead and set up the uh the partial class for you with the code that you had added there in the parcel class so if you want to move stuff over really quickly that's really easy to do now i actually like the inline syntax you know so i'm on team inline do you have one that does the other way around takes the code behind and puts it in i don't think we do i don't think we have that that refactor um because we tend to do that but i have it set up that way by default so it's usually the opposite direction that uh yeah um so we have a couple of questions for you if you want to hear them so we have are there any plans for better hdp context support in blazer that's a great question so hp context is used to give you context about the requests right like it's it's for in an aseptic core app a request has come to the server and you want to do something with it uh and the hp context allows you get the request the response deal with headers http all those types of things um blazer is meant to be a client-side ui framework it's very analogous to like angular or react like you're you're conceptually running client-side in the browser now you might say well hold on dan what about blazer server blazer server has this websocket connection that it's using and it's running server side and yes that is all true but we try to keep the component model agnostic to the hosting model like where where you're running your components um shouldn't change how you how you write those components so we actually try very hard to make it so that you know the hp context isn't really shouldn't shouldn't be a concept in your component code at least um whether you're when you're even when you're running in a blazer server application so that's why uh if you're like i wanna get access to hp context why can't i do that well it's because you're really conceptually writing client-side code now there are things you can do in blazer server and in blazer webassembly where you want to get something from the request contacts and flow that into your application like flow that into your client-side logic and there are way patterns for doing that like in your host cshml file that's where you can get the hp context like a cshml file is executed in the context of a request so grab the context there extract all the stuff you need out of it and then use normal component parameters to flow that data into your application into your your components that's the way we would recommend doing that and there's not really any any requests happening because in the case of blazer server everything is going over signalr so there's only one request it's all helping locations at that point yep but if you need some contacts from that broader uh websocket connection that was originally established the way you should do that is by plumbing it through through the uh the host cs html file can you also jump between controllers and pages like in mvc can you jump between controllers and pages um i'm not i'm not trying to guess what that one is referring to you can so things that you can do you can have blazer components that get rendered from pages and views from from razer pages and mvc views that's what we saw earlier with the component tag helper blazer has its own client-side routing engine so that if you want to intercept browser navigations client side and route those navigations to components to be rendered you use the blazer client side router if you want to then link out to some other page like a razor page or an nbc view that's at a different url that's not part of the set of client-side routes you can absolutely do that i don't think we don't have any like uh link generation features for for doing that but you can still set up the you know put in a normal anchor tag in the in the url for going to those pages and views absolutely um i'm not sure if that's exactly what you're asking but those are things that are that are possible today all right i gotta get i gotta show i gotta show maui we have to get to the to the last last little thing i didn't get to show you that we've never this is a brand new feature in preview six is also required component parameters like if i want to say that this title is required we can of course f12 to go to definition and we can put this new um editor required attribute on the parameter and save that and then if we go back to index.razer so here we have an instance of my survey that has the parameter but if we add another one my survey and we don't put that parameter on there we're going to get a nice design time warning letting us know that we're missing a required component parameter this is purely a design time feature um there's no enforcement of these parameters having values at runtime like we're not doing runtime checks to see that the title really have a value and was it not null but this can be a nice usability improvement if you have components that have parameters that really need to be specified so that's a new thing as well okay now is it is it possible to say that i want these two parameters or i want these two parameters no yeah yeah getting the the the the current feature is fairly very scoped to a single parameter that you want to say is required we did have some discussions about like you get into like uh like data annotations right where you can do all sorts of fancy like i want to validate that that parameter was set or if that that thing was set with this value that was gonna be set that's logic that you'll um we don't have a declarative model for doing that correct fair enough not enough okay so what is dotted maui and what are we doing with it in blazer let me let me hop back to the slides real quick this one okay so everything we've seen so far was a uh a web application like right these are things that are running in the browser but sometimes building a web application isn't enough um that's getting rarer and rarer these days given how rich and mature the web platform has become but sometimes you need full access to the native capabilities of the underlying device we have lots of ways of writing native apps with with net wpf win forms xamarin and the new and uppercutting.net maui with blazer we think that one compelling way to write a native application is to write what we call a hybrid application where you use a mixture of web technologies and native to get what you want this makes a lot of sense if you have existing like say laser code or web based code html css and you want to reuse it in a native application maybe you want to have a very consistent look and feel across your website and your native apps or you just want to use your skills like you're a blazer dev you know how to write laser code you don't know this xaml stuff how can i write a native app cheaply and quickly using what you already know a hybrid app approach lets you do that so i think this is a very compelling way to do native app development is using this combination of web and native and basically what you're doing is embedding a little browser a little webview control inside of a native application so that you can do html you can do css while still having full access to the native capabilities of the device in a net application um we think this looks something like this you have a native app shell you have a webview control in that in that native application and then you have your.net code running directly in the native app that is running blazer components locally there's no there's no server happening here there's also no web assembly we're just running components in using.net like you would run any net code and say like a xamarin or maui application and then we just push the dom updates into the webview control any ui events that happen in that browser control you they get pushed back out into your.net code and you handle them locally all within the application it runs fast any anything you want to do with the the underlying device you can just do using normal.net apis using the domit platform um yeah so that's that's what we call a hybrid app with blazer and we've been working specifically with our friends on the.net maui team to enable hybrid blazer hybrid apps with dotnet maui.net maui is is our new uh multi-platform app ui framework where you wanna write uh user interfaces that can work on desktop and mobile windows mac ios android using primarily native ui uh controls um dotnet maui is like the you can think of it as the logical um the successor the the the evolution of xamarin forms but expanded to to more platforms expanded to desktop and also with a updated and modernized architecture what we've done is we've worked with the maui folks to create a blazer webview control that you can host inside your.net maui apps on mobile apps on desktop apps we're primarily focused on desktop and dot net 6 but mobile apps are absolutely supported and they do work and what this allows you to do is reuse existing blazer components untouched in a.net maui app and light up those components with with native functionality let me let me show you what i mean we'll do a quick a quick demo so i'm going to open up an existing maui application that i've got here one okay and i'm going to yeah let's go ahead and just just run this so i'm going to run this first on android nicely yeah come on light up the hot because i've got the wrong starter project this one i want to run this on android and this is the part whenever you're doing mobile app development uh demos where you have to you talk for a little while while the way to the emulator all right so this is this is a maui application and you can see this looks like a normal blazer app i've got a couple extra things that i've added in here um and it is literally the same code as you would have in a blazer application like if we look at the counter component we have a counter.razer file in our maui project and it's just html and normal razer syntax that we're running inside the the the maui app but it's running natively it's running cl uh native in the native application and you can compose it with things like native ui like up here at the top you can see there's this like this is so native label that's uh that's not part of the the blazer part of the application that's actually done with uh like a native uh uh xaml based control like a native label so here's here's what the ui actually looks like in the implementation so we've got a stack layout that's native components we've got a a native label control that's all dotted maui native controls and then we have a blazer webview control which is also a native.maui control it's just a webview that's knows how to host blazer components inside the application we point it to our html file that we want to use as the root html of the application and then we point it to the root components that we want to render within that app in this case i'm pointing to this component type main and that's over here in main.razer if you've ever seen the blazer app that looks like app.razer and every single blazer app that that's ever been created from from the the project templates this guy is then just routing to these other uh routable components up above index and fetch data and and counter all right so we can get a mixture of native ui and web ui all within the same application like the things like the counter just work click the counter that goes up goes up we got fetch data that all just works this is mobile we can also see the same application running is as a desktop application this is going to use the new win ui support for for windows so i'll go ahead and get that up and running too what about javascript interrupts and stuff like that would that work here as well same model yeah so just like in uh in any blazer app when you use the ijs runtime abstractions to basically tunnel javascript calls into whatever javascript runtime you're interacting with uh you can do the same thing in a dotted maui blazer application um we're gonna we're basically setting up a little interop channel locally between your your blazer components and the blazer webview and we'll tunnel the javascript calls across that little interop channel it's like it's like blazer server really but instead of it being across the internet it's all squashed into a single project you can think about it okay so we got the same ui exact same code being shared here in a native desktop application we got our native win ui label this time instead of an android label but then our html and css and this button is fun so this is showing how you can do anything here like like sky's the limit you want to touch an api that does you know fun stuff with the the underlying platform you can i'll show you the code for this button you probably saw it earlier so we've got a button with an on click handler that's going to call get message and then here we're like creating a temp file on disk and we're going to like write stuff to that file and then we're going to launch notepad because we can launch random processes with with this model we're running locally on windows and then we'll read out the whatever the user typed into that that file so let's see that working so we can click on this there we just launched notepad from a you know blazer application and we can put it on coding after eric box and we'll save that and close this and then read in that file from our blazer components all within that application so you can do native functionality anything you want we have a pretty nice sample that um i have on my github account called that's a weather application i'll just close with that when we're talking about blazer server we can do like direct sql calls directed to a sql server for example would that work here as well so the blazer code here is running on the device like it's running in the mobile that mobile app on the mobile device or it's running on my windows desktop machine on this device um if you had a sql database on your local machine or i guess like can you are if you're asking can i open an arbitrary connection to a sql database someplace that i have access to yeah you can arbitrary network connections sockets uh anything that the device can do you can do with this model yep i wasn't expecting that i'm not you know i don't know if you should be opening up direct database that's a completely different show stuff you really shouldn't do here's an example of how you can reuse code um blazer code with native applications like this is this is a web application this is i think this is blazer server so we can like click on things we can see the current weather in boston we can look at some like favorite locations um this is pulling down some weather data from azure let's go check out the weather in south korea we can like change from uh imperial units to to reasonable rational units so that that looks so that's a web application and all the components for this web application are implemented in a common library this blazer weather library is referenced from our blazerweather.server uh project if we're looking like where is it yeah projects yeah blazerweb so there's the there's the project reference and all my components actually live in here like i have all the logic for the blazer app is in this one library and we can now then share those same components with a.net maui application and get exactly the same ui to show up so here's the let's do win ui first okay so here we have now a native desktop app using exactly the same ui as my web application all the same functionality works but we can of course now light up native things in this app that we couldn't do otherwise like you may have noticed down here at the bottom it's kind of small but there's this little dot-net bot i just showed up in my system tray we have system we're interacting with the system tray from this desktop version of the app we can trigger like native notifications from from this app you can do some of that stuff from the web but like system tray integration i don't i don't believe there's a web api for doing that um and then of course we can do mobile so let's uh set this as the startup project and let's fire up the app in the android emulator this up so here we have one set of components that are running on android there's the app it's got a nice responsive design on desktop and on web so that's dotted maui blazer apps that's also coming in in dot net six yeah any questions about that but we got we got a comment it's beautiful yeah it is beautiful it is oh it is i have to know that gentleman that's one of our uh dev leads on the dot at maui team hi jonathan jonathan did a lot of work to help out with this application so he may be a little biased but he does wrong he isn't wrong so we we got a couple of comments talking about blaze or mobile bindings earlier why would i even want to use that when we have this so for the most part this is the productization of mobile blazer bindings if you haven't heard of mobile blazer bindings that was an experimental project that we kicked off you know about a year or so ago where we were playing playing around with a lot of these concepts like building hybrid apps it was based on xamarin at the time because that's that's what existed but same idea webview inside of a xamarin app hosting blazer components directly in the application all the hybrid concepts from mobile blazer bindings are being productized here with dotnet6.net maui there is a piece of mobile blazer bindings that is a little extra a bonus um in mobile blazer bindings there was also a model for you to um author native ui controls like that native label instead of that being in xaml it enabled you to do that in razer directly you have basically blazer components that wrap the native controls that you could then um interact with using uh razer files that part's not coming to netmaui in dot net sex maybe it'll come in a future release you know planning for future releases hasn't even is just now getting started um so that part will still stay in mobile blazer bindings for now uh what we expect to have happen is that the web view the blazer web view in mobile blazer bindings will be swapped out for the maui one mobile blazer bindings will be updated uh to to be based on maui and then the native control stuff will stay in that project for the time being fair enough yeah and if there's any winforms and wpf devs out there who are wishing that they could get some some blazer action uh we also have blazer webview controls for winforms and wpf it's not just for for maui the model is fairly generic it's not specific to maui i have one last project that i'll show here this is a wim forms app running on.net 6 where we added a blazer webview control to the winforms app so there's a blazer webview controls not that it's not the maui control obviously this is a windows forms control um but we can run this and have a this is again a webview control hosted in the winforms app this time where you can use razer html and css to write modern ui inside of a winforms app same thing for a wpf app we have one there too why why would do we have these things well if you're building these applications uh if you have legacy winforms wpf apps and you're looking for a path to modernize uh one one one option you might consider is starting to write your you know any new ui that you want to build write it as blazer components use a blazer webview control inside your existing desktop app and then when you're ready to move to maui as the as a modern stack for you know getting to mobile getting to to mac getting to other platforms those components just move as is without you having to change anything so this is a potential modernization path for people that are interested in taking existing desktop apps and getting them to maui and blazer and web at that point as well can you force releases or updates to clients with maui um so the deployment model i think that's asking like how do i how do i ship my app after i've built it i'm guessing is what that's about that depends um mostly on the the platform that you're dealing with like you can you can ship maui apps to like the app stores and ship updates that way with win ui on windows they use msix extensively right now so you can use the msix model for delivering your app and delivering updates we are trying to see if there's some things we can do to simplify deployment of maui apps like um there's some tech that was built for electron apps i think the project's called squirrel that is used by a lot of electron apps for shipping uh shipping the apps packaging dealing with auto updates and those types of things there is some efforts uh that were that we're looking at internally to like could we have a technology like that that we can make available to maui developers too but all the existing packaging and auto update technologies that are already there they will work with with maui as is nice i actually thought that the aot was the thing that i'm going to be most excited about but i'm equally excited about the uh the app building i can build apps you can there's a modernization i wanted to just get the schedule up so people who aren't familiar when we're shipping november 2021 is when it's coming and then from then on it's a it's a yearly cadence this this releases an lts release so long term support for net six um that includes blazer server blazer web assembly dotnet maui dotted maui blazer apps dotnet seven um it will should come in november of 2022 that'll be the next current release and just a new release every year so even more stuff coming in future releases as well um who knows what the future may hold we are looking forward to it absolutely and we will talk more about blazer next time i think yep because next um next week we're continuing to build on our website uh because we have decided to rebuild it from scratch using blazer it's time it is time it is time currently it's just a bootstrap thingy we haven't done anything and i've heard that you are taking over the css part you are putting the css part in my laptop and it went out my mouth in my ear so i heard it this is what happened and it's now on internet it's on the internet yeah yep yep but we did have some really good css talk uh with them with that edge chaminar yeah there's a lot of stuff happening there too are you guys going to try to make fun of six do you think or do you think you're gonna stick with don f5 for the for the rewrite so when we when we start we started this uh we're on episode three of this already i believe yeah it's going to be there yeah we only did two yeah and at that point in time i was just about to have a class and to hold the class with net5 so i wasn't prepared to risk it to install.net i know i know but it is a couple of months ago i mean yeah and then we can see how we would migrate that stuff i'm guessing it's not that big of a job next next finish yeah change some packages then you're done it should be that's the way it should be i mean there are some rough edges obviously right now with dotnet6 it's still in preview so keep that in mind but as we get into the release candidates coming up here soon things should get stable very very fast and uh that might be a great time to to make the move you start with dot net five then when our release candidate comes out so let's try done six and i i actually just installed windows 11 on my my demo machine yeah and i have visual studio 2022. so so you are prepared and you don't care about that yes definitely definitely but i don't think we actually need to wait for the release candidate because it's just our own page so it doesn't it it's not a client that will will uh get angry if something doesn't work it's a little bit bit like uh ivan drago if he dies he dies kind of like that you got it you got a a rocky reference here too yeah that's fun stuff yeah we're looking forward to uh dotnet six thank you so much for joining us it's been so much fun yeah definitely thank you for having me thank you for patiently watching through all my uh my stumbles and the demos things are lots of fun stuff to play with um obviously there's great things to give feedback on as well so as you try out the bits you know let us know about things you like and don't like on github just file issues and that's tremendously helpful helpful in helping us land a really solid and high quality release this november awesome so much looking forward to that we got a lot of thank yous and thank you as well exciting yeah the chat room is excited too we are and i will do a shameless plug but for you for me so maybe whatever shame you have done a book i have done you have done a book you should show your green screen the green screen book look at that it's finally out it's finally out i actually got this i believe it's like two days ago i've seen on the internet on twitter people like oh i just got the book i just got the book and i'm like i don't even have it yeah that's uh oh we do have a quick question here where do we find more information on ahead of time um docs are coming they're they're in the works uh the the blog posts are probably the best place to start right now so check out the blog post on the asp.net blog so devblogs.microsoft.com asp.net just look for the the.net 6 related release announcements um pretty soon we should have official documentation documenting webassemblyot runtime relinking and some other stuff that's coming as well like support for linking in native dependencies um in the you know next month or a month or two in the months ahead certainly by the time we get to november awesome so um let's uh let's end the stream let's end the stream yeah i'm busy in the chat room here because stacy said that we should uh definitely check out the book it's awesome so thank you for that and thank you everyone and hope to see you next week as well yeah bye bye

Channel: Coding After Work

Views: 7,767

Keywords: Blazor, .NET6, .NET, Microsoft

Id: _7pw_63BrLo

Length: 105min 55sec (6355 seconds)

Published: Fri Jul 16 2021