ASP.NET Community Standup - What's new in Blazor

[Music] [Music] so [Music] do [Music] [Applause] [Music] all right we are live howdy dan hello john hello blazer friends it is a wonderful day i just realized i had not tweeted the thing so i'm tweeting the thing oh man i know so we have both been kind of busy i was on dev intersection moderating a thing this morning you were speaking yesterday for telerik blazer week thing blazing into the summer yes yes we did a whole week of blazer talks be sure to check those out they're pretty cool lots of good speakers but then also part of it is we just wrapped up build and had some cool announcements at build and so that's part of why we've got you here today yeah we're going to talk about all the new stuff coming to blazer and net six the things we showed at build maybe a few extras that are coming down the pipe uh very cool um so normally sofia runs the community links for the blaze blazer shows she's unfortunately out sick today so i will be the pretend fill in sofia today sick as in she's like ramping up her immune system she got herself she is gonna be fully vaccinated have that aura of protection around her you know germs just deflecting off in all directions it is quite wonderful oh one thing i need to do i need to call out we've got people from japan we've got egypt we've got mexico we've got poland we've got turkey this is one of my favorite parts of the week always is seeing all our friends from all around the world it's so amazing so thanks for saying hi everyone all right let's get right to the community links and let's do this boom all right so these are sofia's community links with one edition that we added in because we do that kind of stuff uh these are let me send these out in the chats all right here we go safiya picked some good ones for us this week so first of all oxeed talking about their migration from an mvc5 app to blazer so this is really really cool it's neat to see you know we always love hearing customers uh you know what works for them we love building things but of course it means nothing people aren't using it and it's great to see customers actually you know doing the cool things so here uh they talk about this is their their application that they you know depend on this is a sas app for financial performance management and uh with six years of history and so they've migrated this over so they started with a file new project you know got used to it figured out the routing and stuff and then you know just started moving things over there is some documentation about how to integrate a component into an mvc application and so that's a you know a potential way to do a migration yeah um i mean migration might be even uh not i don't i would even think about it that way like like mvc and blazer they're all part of asp.net core so they're meant to be used together you regularly do use them together like for pre-rendering and uh you just want to have some static rendered content or a server rendered content so these things are meant to be used together so if you have an mvc app don't feel like you have to turn it into a blazer app but you can absolutely add blazer functionality to your existing pages and views using like the existing component tag helper and so forth so yeah and we i was just to say that i love the fact that you know people starting to share you know things that they're building with blazer on blog posts like this if you have a story like this where you're you know working on a product or something and you chose blazer and building with it um feel free to write something like that we'd love to share it and share it with us so that we can uh let other folks know about what people are building with blazer well so funny you should say that dan uh so that was our next link this is our community showcase and you can see there in here there are ones tagged with blazer so this is really cool and you can go in and you can read these uh so if you write a blog post or something and you're doing something cool with blazer definitely let us know we like you said we would love to hear about it one easy way you can do this and this is right on the dot net website there's this customers link way down at the bottom there's this add your story all of it and you click on that and it's a very short simple form you give us you know give us some information and you know we can add so it doesn't have to be a lot you you can see this this oxy blog post there's information here that's useful but it's not like a huge arduous task to do something like this so um so uh anyways go through and fill this out and uh and let us know and you know then you can also let us know to contact you uh it doesn't have to be a huge thing either you know we've had people uh we've had guests on the community stand up talking about how they have a small little startup and it's one or two people and they're building something with blazer that's pretty great too so yep uh one thing i did skip past a little bit here was they did talk about some of the challenges they had or or things to consider so you know state handling is definitely something that changes significantly so that is something to think of um component disposal and then also just considering the changes in uh performance as you componentize your pages so yeah and yeah they're good they're bad well and just testing right so they simplified their component nesting for one thing so i see i was a i don't know how to pronounce the janiscoo 7 is sharing that ravenfall is actually using blazer on their their websites that's interesting oh that is cool to share in the community maybe on the community page so feel free to submit that one yeah yep all right let me see where are we uh okay so yeah again please fill this out we would love to get these we would love to feature uh you know feature what you're doing uh b unit went 1-0 so this is exciting the unit is yeah so i think the the team uses b unit sum for testing right i i think i mean b unit is just it's a pretty standard uh unit testing framework for blazer components um so that that is pretty darn cool it's very uh we've had them on the show uh showing how how this works um so you know just very very cool stuff what i really want to know is it is it eagel or eagle i think he said it's eagle like like an eagle like like a yeah okay okay great when he was when he was on the show i'm pretty sure he said just say eagle and you'll be fine even though we're saying your name wrong we're very sorry but thank you for all the work that you've put into be unit i know that's been uh that's been a work of a labor of love for a long time and what a great contribution to the the blazer and the net open source community yep yeah very very cool and it's really neat like the the how easy it is to write a test it's like it's just pretty straightforward it's kind of what you would think um so that's pretty neat uh we also got tweeted to us uh simon croft was like hey uh what about verified laser could you let the community know about that i think this might be a good one even to have uh as a guest on the show um so this is a neat thing this works with b unit and it does verification testing so this is this is pretty neat for being able to say like here's what i expect to see um and you know pretty pretty lightweight easy thing uh he also simon simon writes a ton of open source stuff and uh so this verified test there are a lot of different things he supports um so just you know like raven db and xaml and cosmos and you know like all the things any framework and stuff but it's neat to see um c support for blazer and then also if you're writing verify tests it's neat that you can integrate those across very nice yeah yeah let me accept some cookies here all right well so we've got blazing into summer 2.0 with uh with this guy so that's cool and that was yesterday right i wish it looked like that though so this i mean this is really cool some great some great things there's live streaming on code it live and there's uh there's on.net live with cecil and so this is all week long a lot of great stuff all right almost done here uh so this is jeremy likness 10 blazer features you probably didn't know i'm going to go out on the limb and say dan you probably did know this might be something i don't know about yeah oh man there's always always new stuff coming i always can learn more yeah well one really neat thing is just because blazer is a net thing we pick up new features kind of for free along the way i mean there's work to integrate of course but dot net five and c sharp nine that's pretty cool it's always neat to be able to simplify your code use you know use modern kind of more fluent patterns so that's really neat um like for instance this new initializer is cool oh yeah yeah um mark down i had not realized that okay so what's he talking about here there's an actual supported markdown tag not not in the not in the product oh okay he's just saying you can do some marketing you can you can create markdown all right all right okay very fun demo to do where you want to create a little markdown editor in blazer very nice okay grpc also similar sort of thing here he's talking about the ability to use some open source grpc libraries um so integrating in so he talks about like grpc oh excuse me no that that's graphql which is coming next grpc we do have that support um so there's uh grpc support and being able to integrate with the um uh with grpc web which is nice really adds on a lot more support for it the performance of grpc is is amazing it's amazing fantastic with like a blazer web assembly app with a grpc back in is a jpc web specifically back in is a great pattern it's really cool to be able to like follow james newton king on twitter and just see him tweeting like boom we just made it you know a billion times faster it's like how do you do it and then then next week it's again like much much faster and it's like yep very neat uh graphql so this is cool uh so here he's talking i believe about yeah hot chocolate and graphql.net so that's pretty neat uh ef core of course jeremy likness is going to be calling out the of course so that's exciting one scenario that i'm excited about coming up like we're not quite there yet so there's some there's been some prototypes floating around the the interwebs like i know the uno folks have played around with this but having like a sequel light database that you can actually ship with your blazer webassembly app and then put ef core on top of that and basically have like a local database client side in your application those are things that we expect will should be possible with with net six um wow not not in the not in the framework quite yet but uh like supporting native dependencies like sqlite is something we are working on yep very cool uh progressive web apps i mean the stuff you can do and that's been built in for a while since dot net five i believe i don't know it's really cool standards of the web that's that's all it is so neat so and it's really easy to do like you check that checkbox and i mean you can integrate how much you add on the amount of features you added in um like that's variable but it's it's um i don't know it's just really cool to be able to like turn it on so quickly um and then just a few more here css isolation one neat thing that's being added with with dot net six also a css isolation coming to uh razer pages and mvc as well right pages and views so you can have a cshtml.css file and those styles will then be scoped just to that to that page or view it can be a convenient way to manage all your css content and i've done things in the past where i just would add a special class or an id to every single page in my application so that i could write scoped css and this takes all that away which is neat so basically does it for you yeah yeah that's how it kind of works under the covers yeah okay just a few things left so we've got virtualization so that is neat uh really great performance with like large paged data sets server side pre-rendering and finally of course uh exciting thing hot reload i've been using this lately i love it like it's just it's it's so great to have that integrated hot reload that just speeds up my my productivity quite a bit so all right i am all done that is me so i will re-share these links out and we are ready let's talk about what's new in blazer all right let's do it let me share my screen here all right well we're just gonna like recap a bunch of the new things that are coming in.net six to blazer a lot of these things were discussed at the recent build conference so if you haven't checked out the dot net sessions there from scott hunter and then a bunch of me and a bunch of my colleagues as well uh you should definitely go go and do that lots of cool stuff coming but we'll show a bunch of it here and maybe even go a little deeper than we had a chance to at uh at build um if you haven't been keeping up with net six there are a bunch of high level themes that define the.net six release and these are all actually published on the public themesof.net website i've got it right here put it over there there it is in dark mode if you prefer dark mode and this is actually a blazer site and you can go through each of the themes and drill down see all the epics and user stories these are all linked to the github issues and you can follow in real time uh everything that we're doing for the.net 6 release so we're trying to keep the the release planning and execution as absolutely transparent as we as we can so feel free to look at these issues chime in comment give a thumbs up or thumbs down for things you like or don't like uh it's meant to be very community friendly uh just to go through what these themes are we're making it easier for new developers to get started with net expanding support for building cross-platform native client apps dot net maui in other words ensuring that donet has everything you need to run natively in the cloud ensuring that enterprises relying on long-term support or lts releases have a really smooth upgrade path strengthening the dot-net ecosystem making development with.net faster and more productive and then lastly just making sure that we've we continued to deliver on the promises of the.net platform it's kind of our catch-all theme for things that we've started in previous releases that we want to keep progressing on things like linking and aot and and our webassembly investments as well um this site is so amazing i just have to say like i just to be all of us get overwhelmed with there are so many things there's so many announcements there's so so many blog posts it's hard to kind of keep it all in your head and i was just going through this over the this past weekend just reviewing things that i'd missed or heard about and forgot but being able to see the high level themes and then drill down in and go to the exact github issue and the github issues a lot of time have checklists and it's just it's a great kind of all up view that you can drill in and understand more deeply cool for for web specific stuff i mean the themes are cross-cutting for the entire platform but we did try to roll up all the web related items in this asp.net core roadmap for.net six issue so this is where all the web and blazer and acemicord related items can be found so if you're looking specifically for blazer this is uh the main area that you should be uh checking out there was one that i found also is that yarp um which is kind of related but that i think was in a that's in the cloud development one uh yeah i mean there are so you know there's some that all under different themes the the a spirit core road map just links to issues that are potentially under different themes or different user stories and tries to pull them under one place so that you don't have to uh grapple around i mean yarp technically is built on it's built on top of asp.net core but it's not actually you know part of a basement core itself i believe so uh it's kind of a it's a yeah you know i've been pulled under the road map it's i mean we do our best to track everything as cleanly and clearly as we can i'm sure you'll find inconsistencies and such and if you do let us know and we'll try and get them cleaned up so that the community knows what we're doing for blazers specifically lots of stuff coming to blazer and dot net 6 like way more than we have time to go through even in you know an hour community stand up like this the ones that i'm going to touch on today are these these first six we'll take a look at hot reload we'll take a look at state persistence during pre-rendering error boundaries web assembly aot smaller download sizes for blazer web assembly apps and also blazer hybrid apps and so the easiest way i think to look at them is just look at the code so let's go ahead and jump over to visual studio let me get up vs again and my application for these demos i'm going to do a bunch of them with this picture fixer app this app is public on github it's under steve sanderson's github account um i can put it up real quick so people people are interested that is at github.com steve sanderson ms slash picture fixer which is man that is a mouthful to say the ct and the x so that's this is where the app is that if you want to play around with it yourself this is built on dot net six preview four and the first thing i want to look at is hot reload this this app is supposed to be like a little simple image editor uh for editing a list of uh of images and you can see i've left myself a little to do right here this is a blazer webassembly app so all the rendering is happening client-side and let's go find the code for that to do and let's let's uh do something about it so i'm just going to make some changes like hello blazer community stand up i'm just going to hit save and almost immediately the change just shows up in the browser it is super fast let me let me do another one like uh dotnet hot reload [Music] box and then i'll put my mouse over the save button three two one click and like you can't even tell the time difference it's so fast because what it's doing is it's calculating um like little dot net il diffs for the application and pushing those into the runtime while the app is running the app doesn't restart just basically patching the the execute ex the the code uh at runtime uh and then the components re-render and now you see the updated changes and the nice thing about this model is is that all your app state is preserved like if you're if you're in the middle of a big form that you're working on in the ui or a deeply nested tree like if you've gotten to a very specific spot and you want to make a change you can make that change without losing any of that application state so so super nice so a question from guy creative as king is the is that signal r um is that signal r the so in this that's a great question so in this case there is a channel you need some sort of channel of communication between the tool like visual studio where we're doing the builds and stuff and the actual runtime so we're pushing we in in the case of a blazer webassembly app it's a little tricky right because we have to push the changes into the browser like we got to somehow get it to the browser and then into the webassembly runtime that's running in the the browser and that there is a a channel of communication that we use for that i don't remember if it's using specifically signalr for the tech for that um it might just be a websocket a lightweight wet socket to handle that so i'm not entirely sure of the details in this case when you're dealing with a um a core clr based process like a blazer server app or an npc app razor pages application in that case there's no you're not talking to the browser you're talking to the the runtime process that's running locally on your machine and dev so no signal ours involved involved there so now this is a much lower level abstraction like we're talking about like you know net runtime level functionality in order to make this work cool cool all right so let's uh let's do some coding then we need to make our list so we're already doing an http request to get a list of image data from the server basically we just want to loop over that to get that printed in our app so i got a little for loop here that i'll just copy in and we'll format that and then save boom immediately we see the list now this this list is being generated by this custom image list item component we're passing in the image and that's over here in this razor file and as you can see right now it's just a div that's very boring so let's go ahead and start sprucing that up we'll add a class and what do we want let's do a background white save okay good let's do some margin save good let's do some padding save these these are all um tailwind css style classes by the way you don't have to use tailwind css with blazer you can use bootstrap you can use whatever css framework you want but for this app just happen to use uh tailwind let's add a little drop shadow save that's a little subtle let's make it a little bigger ah that's good and so on and so forth so in your markup and your components you just edit and save and that and save and you see the changes happen in real time as you make them so really nice for getting the look and feel opponents all settled i don't want to bore you by writing a whole bunch of markup in front of you so i'm just going to actually do a a big hot reload and copy in a bunch of markup there we go and three two one save and just update some now it looks all nice and pretty we've got we've got our images showing up so the help the text about the image and the last uh the date when they were last updated all right so that's hot reload for your razer markup but a.net hot reload isn't just about markup like this isn't just just about the ui you can do any c-sharp code um let's do some c-sharp hot reload so we've got a humanized last modified method right here that we're using to render the the updated text at the bottom that's coming from this method down at the bottom it's got a bunch of c-sharp logic for um building up this string and we can edit that too it doesn't just have to be markup let's change this to like last changed you know three two one save and it just updates the the text at the bottom of the of the little cards i guess so you can do c sharp as well no problem lastly you can also hot reload css changes into the apps it's not just all about the code you can also do styling um let's go fiddle around with the theme for this app let me find the main layout there it is it's got its own component specific style for the layout and there's a nice css variable defined for the theme right now it's using this greenish color let's change that to red and we'll save and now the whole site's updating with the new css style again the css changes are being pushed into the live dom of the application so no no need to refresh the browser you just make changes and off you go so that's our effort to make dot net more productive faster due development this is not specific to blazer what you're seeing here done hot reload is across the board for net six so web with acemic core mvc razer pages blazer blazer web assembly blazer server don and maui mobile desktop hot reload for all of those dot-net workloads coming in.net 6. it's interesting there's a chat thing from janiskus mentioning scss and i like you could hook up an scss build but that gets a little more complicated right because that's not a dot-net build process but yeah yeah we don't we don't have built-in support for like the the some of the css build build tools but you can wire them up yourselves it is a good question like how will that compose with hot reload um i would think that if they're regening the same css files that the same the same detection logic that says like oh there's a there's a css change let me hot reload that in it should work for the build output for those scss files but i can't really say for sure i haven't actually set that up myself but uh it should work and if it doesn't let us know and uh we'll see what we can do to unblock that scenario too um so one one interesting thing a lot of you know a reason that i liked her scss and tools like that in the past was for things like variables and here you've g like now we have support for for variables like you've got the dash dash you know header height and things like that so there's a little bit less of the thing you know places that i really felt like i needed scss in the past the web platform keeps moving forward yeah you're gonna stand still it's just good that's good just uh raises all all boats right as it goes up uh okay let's let's let's do the next one let's talk about air boundaries is the next picture i wanted to show so error boundaries are components that can capture unhandled exceptions from the component tree and they allow us to to react to those exceptions and this is really nice because error handling in blazer today can get a little messy you end up having these try catches all over the place it's really hard to consolidate what you do when those unhandled exceptions happen error boundaries make that much much easier so to show this i'm actually going to deliberately introduce an error into our application i'm going to go into our image list component in that humanize last modified method and i'm going to add an exception so if the id is 1 then this should throw an invalid operation exception okay and i believe the id one is this happy kitten at the at the bottom okay so let's save that and boom yeah okay so already we're getting the dreaded yellow bar of death from blazer letting us know that we've had some sort of exception the app you know blew up and basically the uh the dev tools we should be able to see that in the console yep so there's our exception okay so how can we do a better job of handling errors like this well we can use the new error boundary uh component so i'm just going to go into index.razer and around my image list item component i'm going to add an error boundary i'm going to do it like this copy that in save myself some typing and that's it so this is the air boundary component what it does is that if everything's going good then it will render its child content we'll just render what's ever inside of it if everything if an unhandled exception happens in this part of the component hierarchy then it will render some default uh error ui in place of the content inside of it okay so let's go ahead and save that and see how that goes and i don't remember if i need to do a restart okay that's doing that in this case this was actually this is interesting this was a what we call a root edit where that particular change isn't currently supported by the dotted hot reload runtime infrastructure so that actually involved a full app rebuild and restart so you still you can still stay in the flow like if you need the app to restart um the tooling will actually do that for you uh just takes a little longer than the dot hot reload stuff and if we look at the bottom we can see that just our happy kitty is now replaced by some default error ui now what is what does that actually look like in markup if we go poking around inside the the dom and take a look what got generated here you can see it's just a div like it doesn't even have any content by default the error boundary component will generate a div with the class uh blazer error boundary well then where's all this like fancy red and the icon the text come from that's just css styling that was added in the app we actually put the css styling in the default blazer template now we scroll down here at the bottom there's all the css stuff that's setting the background adding an icon even adding the text was all done with just css now you don't have to always deal with your error content just with css you can add custom markup uh the air boundary component supports that and i'll show you what that looks like so let's replace our air boundary component with this all right so now we have an air boundary component with explicit child content uh rendering the that's not the only one that's the wrong wrong snippet that won't work that's for like if you were doing it in the layout all right so now we've got an air boundary component with explicit child content that will render the image list item component if everything's going fine otherwise we have this error content property that we can set we can get access to the exception if we want to do something with the exception that was thrown and then we can render whatever we want this can be whatever razor syntax you want you can render custom components i have logic in there and here i'm rendering my own div with my own uh text and a little emoji so now if we scroll down at the bottom there's my custom error content you can see it's only affecting that part of the page like all the rest of the app can continue to function so that's what error boundaries are they give you a nice clean and simple way to handle errors in your blazer apps going forward uh so a question here i'm not sure i totally get can you customize the default error boundary uh i mean you can customize the the default error you content ui that comes out of it using the error content property on it so if you want to change what it what it looks like you can fiddle with that um there is no default error boundary defined in a blazer application itself you add them you add them where you want them where it makes sense uh and you should do them you know fairly scoped like you don't want to have like a really broad error boundary like in general if an unhandled exception happens unless you really know what to do with it uh you probably don't want to risk the app continue to execute in a you know in a bad state so you put them in scoped places where you want to be handling errors okay a few other questions coming in this is one that came to mind for me too what if there's an error in the error content wow that would be bad don't do that okay so you want it really to just be kind of like and it's all the way down okay yeah i can't remember how i know the question does it loop and i can't remember if it actually loops um yeah it's that don't have errors in your error content okay here's something like requests or like you know fancy lighting there yeah here's one that we've got a good answer on so can we create mobile apps with blazer yes so absolutely we'll show that in just a bit so maybe hold on for a second of course you can create mobile web apps like blazer apps work on mobile blazer web apps work on mobile work on desktop they work everywhere any modern web browser a blazer app will function just fine but we can also build native hybrid apps with blazer and we'll show that in just a bit very cool okay one other thing i want to show just or mention real quick uh people are saying hey i'm brand new to blazer uh this is going kind of fast or whatever that's great that's what this show's about but i've got at the bottom of the screen here we've got a let's learn event on june 25th and as an introduction to let me see if i can do it without it scrolling i wasn't sure if i could make that work um but so this is an introduction to blazer for brand new beginners there it is it it kind of just fits so yes um so you know join us for that that's a two hour introduction to blazer yeah that would be great go to blazer.net also that's where you should get started um and there's great docs that you can read through there's also a really great uh like online workshop uh the the blazing pizza workshop at uh aka dot ms slash blazer workshop if you're looking for a place to sort of start learning uh your blazer skills cool cool welcome to blazer for those folks that are brand new yeah sorry this is going a bit fast but uh lots of great content out there for for new folks as well okay so that's air boundaries um now i'm going to talk about uh state persistence uh during pre-rendering so everything in this blazer web assembly app is is running client-side so all the ui that we're seeing here is actually being generated in the browser using our.net code running on a webassembly runtime and we can see that by looking at the source you can see there's very little source that got downloaded from the server this is what the server sent us all the fancy ui is coming from client-side logic now that's fine but sometimes it's very advantageous to be able to pre-render that content from the server so that the server gets all that markup initially that's that's great for a couple reasons it's good for like uh uh search engine optimization uh anything that does static analysis on the website it's nice to have the content there in the initial html page so we can look at it it's also great for the perceived initial load time of the application because once you got that html the browser can immediately render that html while the blazer runtime is being downloaded in the background and start it up for interactivity so blazer webassembly um supports pre-rendering we can we can pre-render our blazer webassembly app from the server by having done it on the server too this is the beauty of having fullstack.net for for web development and it's very simple to turn on we let's just go to our server project this is the asp.net core server hosting our blazer webassembly app and we'll find the host page so this is a cshtml file this is a piece of razor code that runs on the server to generate that initial html response and you can see it's got this component tag helper that's where we're saying this is where we want the blazer content to go once that gets fired up on the client and currently we've we're using the default render mode of webassembly that we want this to run client-side on webassembly but we can change this to webassembly pre-rendered so that will then tell the server run the components on the server first to generate some initial html then send that down to the client and fire up webassembly later that's what that does okay i'm going to save that i think i need to do a quick i think in this case we need to actually do an app restart have that be picked up but no problem all right cool so that should have worked and let's see if we're seeing different stuff coming down from the server and we are okay so now instead of just you know very minimalistic markup we're getting all of the initial markup for the page by just turning on uh pre-rendering so that's cool that's great uh unfortunately for this app it doesn't quite have the user experience that we want yet uh if we watch what this app does let me let me um let me open it up in a new tab we'll do it right here so i'm going to hit the app now watch very carefully so initially we we see the content it's there and then poof it just like disappears and then it's back again yeah why why is that happening well after the initial html gets downloaded from the server the pre-rendered content blazer then fires up on the client and when the you know the initial component on the client loads it needs to go get the image data from the server again just it got the image data initially while it ran on the server and then it has to get it again when it's on the client because nothing transfers that image data to the client so it has to request it again that was that http request that we saw previously while it's doing that it renders a loading spinner and when it renders that loading spinner it blows away all the lovely pre-rendered content that we do this is terrible terrible oh my goodness so we're kind of exaggerating this problem a little bit with this not by this having this in here but normally the way this shows up is like as a flicker like you you see the content then it disappears and you see the content that that flicker is really annoying for fortunately in dynastics there's a nice convenient way to deal with this we can um capture the state from the server and persist it so that it can be reused by by the client okay how do we do that well there's a new service that we use called the component application state and so we're going to add that service to our index.razer page right here let me do that right now so we'll put it right yeah i'll put right there it's fine okay so component application state we're injecting this service and we're putting it in this component app state property we're also going to implement idisposable i'll show you why in just a second okay so down below we're going to now go to our uninitialized async method and we're going to update this logic a bit to add some logic for a persisting state um i'm going to copy that in i don't have to type at all all right so here's our new uninitialized method and what it's doing is it's going to hook an event on the component app state and that event tells anyone who's listening uh now is the time to persist state if you want to do it i'm about i'm pre-rendering the page so if you want to persist any state um do it now and so we're hooking that event and in that our event handler we're using the component app state to persist the image data and it's persisting as a adjacent blob right and then in the rest of uninitialized async um we check the using component app state if there is already persisted data is the image data already there if it's there we're just going to use it if it's not there then we'll fetch it from from the server okay so that's what that's all doing and then we implement idisposable just to remove our event handler so we're not linking event handlers accidentally in the application now you may wonder well where does that state get persisted like where does it go uh well it goes on the page the initial page that gets pre-rendered from the server if we go back to that uh host cs html file you may have seen that there was this persist component state tag helper below our component tag helper and that is going to render into the page as part of the prerendering the state that we asked it to persist only the stuff that you asked it persists and nothing more so if that all worked we should be able to save this and let's restart and go back to the app okay so now if we look at the output of the from the server we've got all the html content but we also now have this component blazer component state comment that's being injected into the page and this blob of data is the image data that we asked it to hold on to and if we try this out let's open up a new tab and we'll hit enter page loads and just and we never see that loading spinner again curious drive wins the award for saying view state first what is this music so it's a little different than viewstate right because we're not um the framework isn't automatically persisting anything here uh you decide what component state you want to persist also it's only really persistent for this initial page load for that um that pre-rendered state it's not like going back and forth with the server on every request um ed charbonneau was really kind enough to point this out and the live stream i did yesterday as well so in fact actually what happens is if you were to navigate away from this page and then come back to it within the blazer within the blazer app when you navigate back it will actually need to go to the server to fetch the image data again which makes sense like the image data may have changed so you need to you know get the live the the new data and then you would see a loading spinner while it's doing that but at least for the initial pre-rendered load you don't have to fetch it twice so it saves you that second leg okay does this work for a blazer server pre-rendered as well um for blazer server pre-rendered yes uh i don't remember okay i think so i have to i'm trying to think how that works so like on a blazer server if you rendered you would persist it on the page and then i'm pretty sure we we um reuse we the state flows to the blazer server client on the to the browser but remember in a blazer server app you're you're basically doing everything on the server so the uh everything's going across that websocket connection but i think we do flow it back so that it can be reused by the components again after the pre-rendered the rendering is done so yes i believe it is used okay check me on that though if i got that wrong i'm sorry all right dan's learning too all new new features i think i know how this works all right all right that's pre-rendering uh persisting state during prerendering uh pretty cool solves a common problem that we saw with previous blazer releases all right let's go into ahead of time compilation this is super fun so in blazer um actually to do this i'm going to restart this app using ice express because i want it on a different port we will do that get this running good okay now we're running on port 443 instead of the port 5001 because i'm going to run this app twice and i need that port to be uh to be free uh okay so if this picture fixture app the idea is that you can edit these images right you can click on one of them and now we can do some very simple image editing uh for example we can make the this tennis player's life a little bit um more interesting by removing the ball you know you don't want this ball here that's just making your life complicated and poof you select the area and it does a little algorithm to pattern match uh the image so that that part of the image goes away this is all implemented in c-sharp let me go back to the client project and it's running client-side in the browser this is an implementation of a simple patch match algorithm it was actually derived from an open source implementation from this person thank you for your contribution to the open source community all right so that's cool so let's let's play around with this a little bit let's see if we can remove this like url up here [Music] and gone awesome okay now we're gonna try so we're gonna go go big we're gonna try and remove this whole logo all right and here we go let's see if we can do that going going making a bit of time yeah it is a little sluggish it is doing it i mean it's the algorithm's not perfect obviously uh but yeah man that took uh you know 11 seconds in this particular run um why why is that well um i mean it is doing image processing which is cpu intensive and blazer web assembly apps they run on a dot net il interpreter like the the wasm runtime that we push pull down with your app it's doing dot il interpretation there's no jet so it is a little slow for cpu intensive work it's fine for most ui scenarios but for scenarios like this where you really want to you know crunch the cpu a lot it's not the fastest thing in the world fortunately it six we are solving this problem by introducing um dotnet webassembly ahead of time compilation or aot compilation this is where we can take your.net code and pre-compile it to webassembly so that it runs much much faster in the browser when you have a jit that's what's happening at runtime like the runtime will like take your your manage code and turn it into native code on the fly so you get that great performance there's no real facilities for jit on webassembly at least not at this point maybe maybe the standard will be updated and that will become possible so instead what we can do is use ahead of time compilation to sort of do the jit up front and that makes things a lot faster now to do that to do web assembly ahead of time compilation you need to do a couple things first you need to get the optional dotnet sdk workload for for using it so what you're going to do is you're going to want to get a elevated command prompt and i'll do that right here so run as admin and then you're gonna wanna run this command okay dotnet workload install this is a new thing for for dotnet sdk in dotnet six microsoft net sdk blazer webassembly dash aot we might make that a little shorter at some point but for now that's what the string is and that will pull down the tool chain that you need for doing web assembly ahead of time compilation i've already done that so i'm not going to do it again once you've done that you then enable it in your project using this property run aot compilation set to true now running webassembly aot compilation is uh is not a fast process it takes a while to do uh actually running aot compilation on this picture fixer app on my machine took like like 10 minutes so it's it's a it is really crunching and trying to link and doing all these sorts these optimizations so uh because of that it's not something you're going to want to do on like every build uh instead we do it only on publish it's a publish optimization step very similar to like the dotnet il linking that we already do um so you won't see it during dev on during dev builds you do you'll see it happen when you actually do a publish the other thing you may notice after you publish is that the app gets actually a bit larger it's larger in size why is that well the managed representation of the code is actually very compact.net il is is pretty pretty tight uh compared to the native representation of that same code this is no different than if you like engine or questioned or ready to run i don't even know what the latest tech is that we use these days for doing that stuff in.net um the the binaries tend to get bigger when you turn managed the uh assemblies into their native counterparts and that's no different here you probably will see about a 2x size increase when doing this um so this is a trade-off between some load time performance for your app and runtime performance whether that makes sense will depend on your your particular application but at least the option is there and available to you is it all or enough nothing like is it possible to just you know aot compiled portions of my application not currently currently it's it's an all or nothing thing all or nothing things so you aot the the whole app we are talking about having uh the capabilities of just aot and pieces because obviously the less that you aot the faster it doesn't take as much time uh to do that and then your app doesn't uh grow quite as much so yeah that is something we're discussing for dot net six the thinking is that uh we're probably not going to get to that point just yet but uh we hope to do that in the future so for right now it's basically the the whole app um but i've already done an aot done in aot on this uh this application so let's go ahead and run that so what is it release netsix publish and i want nope i need to actually i did that same thing in the previous time i did this demo uh we want to do picture picture server.exe here's the published version of this app and that's on port 5001 and let's get that up and running okay so same app all right and let's see if it's still working can we still remove the ball yeah we can still remove the ball let's do something big 0.5 seconds versus 11.4 seconds so you know like 20 times faster it's a lot faster which is great so if you need to do cpu intensive stuff in the browser using.net this is the way to do it now i bet you could keep cleaning that up like those little spots that didn't get curious it really just that's just a there's a nuances of the algorithm like it's really but yeah we could keep uh using patch match i think that's a good use for the rest of our time yeah um now speaking of app size like we are working on making blazer webassembly apps smaller than they are today i think in dot net 5 if you took a default blazer webassembly project like file new project and you publish it and we do all the linking and compression and all the tricks that we do today to make that app smaller it'll weigh in at about like two 2.2 megabytes or so um which is you know it's it's impressive that there's a full.net thing going on there but you know it's a little on the bigger side we've been working on trying to shrink that um i mean that also does include things like bootstrap so you don't there's some stuff in there that you don't technically need for like a minimalistic blazer uh webassembly app for dot-net six we think we can do quite a bit better as an example i worked with my friend anthony chu to publish this app as an azure static website and it's a very minimalistic laser application so it's got the counter right and a little bit of styling but if we look at the size of this application on the network before before i do that let me clear out all the local storage so we're not you know caching anything no cheating here all right if we reload that down at the bottom if you can see this app is 1.1 megabytes transferred wow quite a size savings um the equivalent if you compare this to the equivalent app.net five this is about a 35 uh size savings now if you're if you're comparing this to javascript obviously javascript apps can shrink way way down um our goal is not to be the smallest like we know we have an inherent overhead with doing dotnet in the browser because we have to bring a runtime but we're trying to make it uh a non-issue like good enough for pretty much anything that you would want to do now how did we get to this number uh we did a couple things um we have been really improving the.net il linker the thing that goes through your.net code and and trims out all the managed code that you're not using that has gone much smarter in dot net six we also are using the same tool chain the the webassembly aot tool chain uh that we use for doing ahead of time compilation to also re-link the the run time the the wasm bundle itself this app is using invariant mode so it doesn't need all the globalization data that typically comes with the.net platform and the logic that comes with that too so it just links all that stuff out so the wasm bundle gets quite a bit smaller we're also doing like smarter data sharding with the globalization data so a bunch of tricks happening in dot net six to make your apps much much smaller for like the fault template if you include like bootstrap i think it's like 10 to 15 smaller right now and we hope to get quite a bit further along like closer to 20 by the time we ship in november wow apps getting smaller that's something that's coming in.net 6. and then lastly hybrid apps let's talk about hybrid apps i think we can close this everything we've seen so far was a web app right right we're doing web applications but in dot net six of course the much anticipated dot net maui is coming uh don it multi multi-platform app ui i think is the expanded name i thought it now is much easier to say this is the future of cross-platform ui and client apps with net it's the evolution of xamarin forms with a updated architecture and improved developer experience basically you can build a single ui that works for mobile and desktop android ios mac windows and in dotnet 6 we are partnering with our.net maui friends to enable you to build hybrid apps using and dot net maui what does that mean well this means you can use a mixture of web and native all in the same app uh you basically take your blazer components you throw them into a.net maui app they run natively in the process they're not running in the browser there's no web assembly so they get all the benefits of a jitted runtime they run fast they have full access to the underlying platform but then they render normal web ui html and css to an embedded web view control let me let me show you what i mean i'm going to create a new project here so i've already got dotnet maui set up on this machine setting up.net maui you have to kind of jump through a few hoops if you haven't done that yet there's a good getting started doc on github that you should definitely look at if you're going to try and do this but basically you need.net 6 you're going to need to run the maui check tool to get their optional workload stuff and there's a few extra steps as well that you want to check they're getting started docs on so if you're having trouble getting your maui apps to work go look at the docs look at the docs i highly recommend maui check other people are saying it in this in the chat too like i was i was amazed at how how i tried doing things manually and then i ran maui check and it's like no you need this you need this and just fixed everything for me so cool so i've got the maui templates installed as a result so they should show up in visual studio this is the normal.net maui app but we're going to build a.net maui blazer app which is still just a.net maui application with some additional blazer functionality thrown in so it's still normal.net maui app it runs anywhere.net maui runs it has the same structure as a.net maui project the only difference is if we look at what it's doing in mainpage.xaml it has a blazer webview control and this is pointed at some html this is the html we're saying we want to render in an embedded browser control and then we tell it this is the root component i would like to render inside that html content and here we're saying we want to render this main component so where's the html it's in here in the www folder just a static html file it's pulling in our special blazer webview script and then we have a tag where we want that component to actually render on the page and then the component is in this razor file we got razer inside of a maui application so this looks hopefully it looks like the normal app.razer file that comes with any blazer application it's just setting up the blazer router and then up above we have our laser pages like the normal counter component the normal fetch data component exactly the same as what you would see in a blazer web application project but now hosted inside of a native app okay so let's see if we can run this i'm going to run the app on android and control f5 that um so this the the top project will work with android ios and mac um the for windows we have these other two projects currently this is something we're working on and getting these merged in to the core maui there should only be one project when we when we ship but right now we have these extra projects if you want to run for windows you actually need to run this package project that's something that lots of people stumble stumble over including myself let's see how they uh we're waiting for the app to build and deploy we'll just give that a second they're deploying and what we should see in just a second so while it's doing this i just like to recap because this is amazing i can use my as i'm mostly a web developer i can get by on other you know net things i can kind of write some xaml but i'm so much more comfortable writing blazer and css you know like all the the web technologies so here you're riding a native mobile app and then you're doing this using blazer and like and it can run on mac and ios and windows desktop and this is so cool that's right yeah you can use your web skills for building a native application which can be a big cost savings it's not just your skills you can also reuse your code like you could take your existing components and throw them into this app you can then light up native functionality so here's our you know the default laser app the one that we've seen probably for for a while hosted inside a native android application and now we can do native things like if we want to add some native ui to this guy we can do that let me go to the back to that xaml file and i am not going to try and write xaml on the fly free folks so i'm going to copy in a snippet uh so here now we're going to have a native label this will be you know in the case of android native android label and then our blazer webview control let's try and save that and redeploy one more time and see if we can get some native controls to show up usually the second deploy is significantly faster so this should just take a second uh but yeah you can use so you can mix web ui native ui now i know some folks have played around with the mobile blazer bindings project where we could actually compose in native ui using razer syntax in apps like this that's not comingfor.net 6. if you want to do native ui you're going to do it in xaml if you want to do web ui you do it in razer maybe in the future we'll look at the native pattern for for a blazer but for dot net six uh we're keeping with this uh just doing the hybrid support but now what i love that you're showing here is you can use xaml you can use those native controls and just use the webview so i could put a bunch of xaml in there if i needed to right i could kind of integrate for that absolutely you can have mostly xaml and just a webview control where you want it and still have all that code written with net using blazer components so we can mix in web ui let's run the windows one so we can see this running on desktop as well all right yeah make sure you select this when ui package project if you select the other one it it doesn't run um this this will all get cleaned up in the in the future previews we're working closely with the win ui team on that this is all now a win ui native shell we're using the latest windows ui stack we got our native uh label at the up at the top and i've still got our web content being rendered in this application and we can now do things like touch anything in the native platform that we want like one one fun demo that i love to do is let's go into our index page here and i'm going to add some code i'm going to add a just a string variable right here like and what i want to do is i want to be able to print this message string to the screen and then i want to have a be able to edit it like change it using using advanced native features right so i'm going to add a button right here uh on click and i can't type unclick and i'm going to put an event handler here that doesn't exist yet we'll add it in just a second and this will be our edit button and then down below let's add a little bit of code oh shoot i actually had like deleted this code in my i know so i got it back okay so here's our [Music] format that okay so we're going to when we click the button we're going to do like we're going to create a temp file on disk we're going to write some placeholder text these are not things that you can do from a web app by the way you can we're going to launch a process for our native advanced text editor and we're going to wait for the user to type something in there and then we'll read in whatever they type so that we can render it on the the screen i think i need a using statement up above as well because we're gonna do some io stuff that you can never do on the web let's save that and then let's rerun our windows application this time [Music] well it's doing that i know you you have to take off pretty quick we've got two really good questions i wanted to get in here one is can can you navigate from outside the browser in maui like can you interoperate the the navigation interoperate the navigation so you can actually share state between the i mean the blizzard components are running in the maui process along with all the other code that you have in dotnet maui and in fact there's like a shared um uh services container a dependency injection container that they're both both using so you can have a date that's going to both sides of the application um if you want to navigate well i don't know if they me like i want to click on something in the web ui and navigate to a different native page and stuff like that um you should be able to do things like that i like the exact patterns i can't uh dictate off the top of my head but uh going back and forth between web and native is absolutely possible okay cool but here's the here's the thing i'm going to edit this text hopefully oh man it popped up in my other screen i'll do it again close that there we go so we just launched notepad by clicking that button hi maui and blazer for the win and of course let's use our native features that's not what i meant to do let's use uh get some emoji in here great yep exit save sure and now we've got it rendering on this what so that's everything you can do anything from the native platform using this hybrid model you can reuse your existing web ui components i i don't have we won't have time to show this today but we do have a nice sample well a nice reasonable sample app that you can go check out um it's a weather application that we built completely using blazer and dot net maui it's at github.com my username danroth27 blazer weather and this is a full weather application set up as a web app and has a.net maui app so that it can run on android ios mac and windows it has native integration features like it goes and uses the system tray and triggers system notifications and all that stuff if you want to play around a bit more with this model check out this sample as well wow this is amazing um wow i i hope you got through as much as you would hope to cover that's that's pretty much everything right that that is pretty much everything um i mean you should go check out dot net six preview four is the latest release uh lots of other great stuff in in there that we didn't really have time to to show play around with the bits send us feedback and lots more to come in future previews.net six will ship uh at the end of this year november of this year and it is the next uh lts release for for dotnet awesome okay well thanks so much dan i know you you had to get to a meeting five minutes ago so i will let you go you guys are more important you folks are more important than my meetings thank you so much thanks everyone for watching and i do want to remind people that are new to blazer want to learn more we've got that let's learn event coming up let's see it's right here so i will leave that on the screen and please do sign up and and um you know join us and also check out i think blazer day is also coming up there's an event that's being organized by the community later this month yeah jumping 17th or something like that um i'll be i'll be there you should be there too and there's gonna be lots of great speakers talking about blazer at that event as well and we've got that blazer telerik event going on all week too new presentations every day from community so very cool all right well i will let you go thanks everyone follow us at uh for more community stand-ups we've got three going a week and and lots of good fun so thanks everyone bye folks [Music] [Music] [Music] so [Music] [Music] you

Channel: dotNET

Views: 17,185

Rating: 4.9812646 out of 5

Keywords:

Id: 8xLw-f1iFLw

Length: 67min 54sec (4074 seconds)

Published: Tue Jun 08 2021