ASP.NET Community Standup - Blazor in .NET 7

[Music] [Music] do [Music] [Music] [Applause] [Music] hello hello welcome to the blazer community stand up for august today we have with us john galloway hello dan raw hi folks and making bob hello and i'm today so today in this police community stand up we have a lot of exciting stuff to show off that's going to be coming in at 7. so a bunch of features and all that kind of stuff and dan's going to walk you through a lot of that uh stuff about to start off uh let's do some community links get that out of the way uh and then we can jump right into the content so all the amazing stuff that dan mckinnon um they all have to show off so let's get started i'm just going to share my screen here and these are the community links for this month so the first link here is the preview post for preview seven uh this was launched last week or the week before and essentially this goes over a lot of the functionality that's coming in preview seven uh please note there's gonna be two more release candidates before uh document seven gas uh pretty soon so let's get started uh so uh this has a summary of a bunch of amazing features we're going to be talking about some of these features so i don't want to delve too too deep into this uh just yet but yeah if you're interested definitely check out that blog post to see all the great stuff that's going um or coming in dotnet seven seven uh the next link here is a podcast with steve sanderson and here steve talks about blazer wasm and wazi and a bunch of other amazing stuff for those of you who may have tuned in i believe a few months ago we had steve on the police community stand up and he introduced wasm and blasi and all that kind of stuff so if you're interested in learning more delving deeper into it definitely check out this podcast you have to just watch it just to figure out how he optimizes tomatoes like that's like the most important part there like forget blazer and wazzy like like what about the tomatoes for sure i think he likes greenhouse with like sensors and stuff i think that's what that's related to but you'll have to have to listen to it to find out no spoilers sand no spoilers uh okay awesome uh so next thing here is a pwa or progressive web app updater and essentially what this does is it allows you to show your users an interactive ui element which allows them to manually trigger the update for the progressive web application now uh the reasons for this uh delve into essentially how browsers work and all that kind of stuff but sometimes when you do ship uh an uh pwa it doesn't automatically get updated for your users until certain conditions are met so by using this uh this package you're essentially able to let your users know some updates are available and they can update their application and get started using your latest greatest functionality right away so that was pretty cool uh next thing here we had uh dotnet maui for dot net conf last week i believe uh here there were a bunch of recorded sessions where we talked about.net maui and all the great functionality that's coming forth and this talk in particular is by dan roth and here he talks about how you can actually integrate your existing web applications or go from your web applications to native mobile applications using maui and blazer so if you want to learn more about how that flow works check this out or we also had a pleasant community stand up on this topic a few months back which also delves into the internals and essentially how you can set everything up there so that's all the sessions in that dotnet conference were great you haven't watched any of the other sessions too they're they're they're pretty they're pretty fun lots of cool stuff you can do it down absolutely i think there's like six or seven hours of recording so a lot of stuff to watch a lot of stuff learn and uh see so it's pretty great uh cool uh the last link i wanted to showcase today is this talk by chris centi and here chris talks about how you can build beautiful blazer applications using tl1 css so essentially how you can integrate tailwind with blazer and get started that way so if this is something that you're interested in exploring definitely check out this talk as well so that's basically it for the community links for today and from here i want to uh cool uh from here i want to hand it off to dan who is going to tell us some of the stuff that's happening in dotnet 7. got it hello yes hi everyone thank you tonay pull my notes i know what i'm supposed to be saying here awesome yeah dotnet seven is like releasing we are getting really close to the end like danae said we just shipped the last preview release before we start shipping out uh release candidates um so we're gonna talk about what's happening in blazer uh in that release and actually you know to be clear this is just a part one there's actually so much stuff happening in blazer and dot h7 that we couldn't cram it all into one blazer community stand up so we're all we're going to do a follow-up to this next month we'll do part two in this uh community stand up we'll go through more of the like blazer framework improvements at the framework bubble and then next month the plan is that we'll cover more of the the the runtime level features like things happening in the webassembly runtime so make sure you check out both but we'll certainly be showing you a bunch of cool stuff today thanks to the help of folks from the the blazer team that are on the call um dotnet 7 preview 7 just shipped earlier this month and it's got a whole bunch of blazer improvements that you should definitely check out just really fast i'll go over them here but then we'll we'll show you them today and then also next month hot reload improvements the hot reload support particularly for blaze or webassembly is pretty significantly improved in.net seven the set of the different types of edits that you can apply to your running blazer webassembly app is just significantly expanded in the the.net seven time frames that's cool uh ahead of time compilation for blazer web assembly has gotten a lot of performance improvements in dot net seven it's just a lot faster than even it was in dot net six which is pretty amazing because it was already really fast and done at six uh if you're not familiar with ahead of time compilation this is how we can take your net code in your blazer app and we can ahead of time compile it to webassembly so that runs at run time much faster than it would if you were just using the il interpreter based execution of your webassembly app so your code was fast before with a6 and now it's going to get even faster with the new aot performance improvements uh web crypto we've added a bunch of additional uh crypto algorithm support when running on webassembly and dot net 7. we started work in.net 6 on enabling being able to build custom html elements with blazer it was just an experimental preview package in dot net 6. in dot net 7 we're going to be we are shipping that and shipping it as a stable and supported feature this is a great way if you want to take a blazer component turn it into a custom element and then use it really anywhere like you can use them from then like an angular app or a react application it's a great way to encapsulate a blazer component so that it can be reused with maybe like maybe you have existing apps that you've already started at javascript but you want to start moving to blazer this is a way you can start integrating those two different frameworks we did a bunch of improvements to data binding we have the new get set and after modifiers we'll be showing that one today uh virtualization got improvements in.net seven uh virtualization is how you can show uh like if you have a table or a grid that has like tens thousands hundred hundred thousand rows and you only wanna show part of the the table so that you can speed up rendering and speed up the the ui interactions we have a built-in component in blazer for doing that uh we improved uh how the uh element spacing is done and also how it interacts with scrolling we've also added a new uh programming model to the navigation manager for um interacting with the history stack in the browser so if you if you navigate and you want to pop something onto the history stack you can then inspect that state and use it later we've also done some improvements to the uh blazer loading page so that you can see the how the the progress of the page as it loads and we have some new templates that are empty blazer templates uh this is so i mean i know everyone loves the uh the classic purple gradient and the uh the existing blazer project templates but sometimes you want to start with a clean canvas a clean slate we now have templates that uh that let you do that you can add whatever css design framework you want and whatever content you want without having to delete a bunch of files uh if you haven't already downloaded the latest.net 7 preview you can get it at get.net 7. um it's worth also calling out that in the same time frame that we've been working on.net seven we did the work for uh blazer hybrid support uh for document maui as well as for wpf and windows forms this is you know the way that you can take your blazer components and now host them in a native client app so that you get the best of both the web uh and also a native client app experience this is important to remember because like this the whole blazer team was pretty much focused on this effort for about half of what uh took uh of the the.net seven development uh time frame um so all the things that we've delivered and done at seven really only only happened in the last few months since uh dotnet maui shipped in in may as well as the the blazer hybrid support um it's it is the maui work also took all it's taken a little longer honestly than we originally anticipated so some of the our original ambitions for what we had hoped to accomplish in dot net 7 have been scoped back i can highlight a few of those like originally we had hoped to land like multi-threading support on webassembly and dot net seven uh unfortunately we've made a lot of progress on that and there is runtime work that uh is still still happening on multi-threading support but it's not gonna actually land in.7 we hope maybe we could have like a preview of it based on.net 7 but it looks like even that's going to be too risky to squeeze in at the end of the release so that's going to turn into a donna 8 feature so there are a few features like that that end up being scoped out of.net 7 just due to the balancing between the blazer hybrid work and the dot 7 work but even so there's still a lot of great stuff that's happening in dot net 7 and in fact we're not we're not done yet we still have more that we plan to land so the stuff on the left side of your screen that's what we just talked about those are the things that we've already delivered in preview we still have more features that are coming in the upcoming release candidates um in the in the months ahead we're doing a bunch of work to improve how authentication works in blazer particularly blazer webassembly will enable you to pass more custom parameters uh to the underlying uh authentication libraries particularly when doing uh per request authentication like if you want to set different parameters for a given authentication request you'll be able to do that in the dot at seven time frame that'll allow you to do things like you know force the user to log in if you want uh instead of having it just auto login if they've already logged in previously or if you want to request different scopes for a later authentication request that will now be possible we've done a lot of work on the runtime side to improve javascript interop in particular for when you're running on webassembly and you really need high performance javascript and drop we have a model for this today that's um uh encapsulated in this interface that's this ijs uh i think it's unmarshaled runtime interface which was kind of sort of supported honestly in previous.net releases this allowed you to like you know hand objects back and forth across the javascript runtime without having to deal with with serialization but there were parts of it that were kind of like undocumented apis that we would tell some people about if they really really needed it but it wasn't really an api that was done yet in dotnet seven we are we are baking that layer of the javascript interop system in blazer so that you can do those type of unmarshalled patterns with a fully supported api so that will be coming in a future preview release um not canceling navigation events and be able to intercept navigation events i think this is our top requested blazer feature for for a while now we'll actually be showing that momentarily on the tooling side we're adding support for css hot reload for blazer hybrid applications that will be coming in the upcoming visual studio release as well as a bunch of really nice uh web assembly debugging features like just my code support is coming a bunch of the debugging attributes will now be honored a much more high fidelity uh dominant debugging experience when you're running on webassembly mixed mode aot is something that we still hope to land i will let you know this one still is is a bit at risk we think we could we think we'll be able to land it but we're not sure yet this may slip to dotnet eight this is the ability to um select which assemblies in you in your app you actually want to ahead of time compile to webassembly so that you can um adjust that trade-off between much better runtime performance but it went to aot it also increases the download size of the of the app so instead of ahead of time compiling everything which can significantly increase the download size of the app um this feature will allow you to just pick the assembly that are on the hot path and ahead of time compile those we're still hoping we'll be able to land that 4.9 but we'll have to see so fingers crossed on on that one watch the related issues and the the acemic core roadmap and then lastly we are shipping a preview in.net 7 for being able to use net on webassembly without blazer in the picture like today when you run.net code on webassembly you have the whole blazer component model there so you have you know a ui stack for rendering html but in some cases all you actually want is just to be able to call into a.net library like maybe you have existing javascript code that you then have and you have a dot library that you just want to reuse from uh the the browser um we've had a bunch of internal partner teams that have come to uh to the to our team with requests in this space like um uh one was the uh was it power virtual agents team uh they built a web studio that allows you to build intelligent chat bots and they use in expression language the power power expressions i think is what it's called um that was all implemented in in net but they wanted to bring the the studio design experience to the web um they had so they had a choice either they could go and get a bunch of javascript devs to rewrite their uh their expression language uh in in javascript or just reuse their existing.net code and so that's what they've they've done they had to do some gymnastics in order to get that to work currently uh with dot net 7 and this preview support we're trying to make that a more first class feature so look for that in upcoming previews as well as i mentioned if you want the latest updates on our roadmap for acemic core and blazer in dotted seven you can find that at the link below aka.ms slash aspinat roadmap we try to keep that up to date uh with what we're planning to land in the current release all right and with that i think it's time to go to some demos and actually see these features in accident in action i think we're going to hand it to mckinnon first thanks dan so yeah so the first feature that i'll be demonstrating today will be the cancellation of navigation events and blazer so in order to show off this feature i've created this pretty simple demo app that demonstrates what the problem is that we're trying to solve so this probably looks pretty familiar it's just like the finally project blazer web assembly app the only thing i've changed is i've replaced the counter page with this create profile page so just pretend for a minute that this is like a fully fledged social media app and this is the page that users will land on when they want to create a new profile and i think i'll zoom in a little bit just to make that more visible so let's say my name is like john doe and uh i'll just select a random birthday and suppose that i just poured my heart and soul into writing just the best bio i could think of for my social media profile and i've spent the last 15 minutes writing this out so it would be a real shame if i lost it so i better submit before i lose it but actually you know what this fetch data page is looking kind of enticing so let's take a look don't do it no no okay yeah interesting forecast okay let's go back and submit our profile now what it's gone we've lost our bio we spent the last 15 minutes working on it it would have been amazing if when we tried to switch pages we got some sort of like pop-up that said hey you're gonna lose your changes if you do this so if you or a loved one has suffered from this kind of ux before we have just the solution for you and that is this new blazer component called navigation lock so the code that you're looking at right now is just the code that controls the page that we're just looking at and it's pretty simple it just renders this profile form component which is a component that i've written that just you know renders the main content of the page and then now we also have this commented out navigation lock so i'll go ahead and uncomment that and what this component does is as long as as long as it's being rendered on the page it has this uh this callback registered on before internal navigation and this will be executed before navigation occurs basically so we already have this event on navigation manager called um location changed you can kind of think of this as location changing so it allows you to control an ongoing navigation so we have that parameter assigned to this callback handle before internal navigation async i'll just expand that here and all this is going to do is it's going to asynchronously invoke some javascript uh the window.confirm method to be exact and it's going to prompt the user are you sure you want to leave this page and depending on whether they click ok or cancel we're going to either continue or prevent that navigation from happening so my changes are saved and i think hot really should have taken care of that so let's go ahead and try again so our name is john doe i'm just going to paste the bio and then i'm going to switch to the fetch data page and awesome we get this nice little pop-up are you sure you want to leave this page so if i click cancel now i'll stay on this page and i won't lose all my work of course i can still click ok and then it'll continue but when i come back it'll be gone and then if i try to switch the page and there isn't like you know any dirty state it won't prompt me because that wouldn't make sense or if i um or if i like submit my profile and then change the page it'll be fine because it's submitted and it's saved so it's very customizable you can kind of do whatever you want with this feature um like you don't have to use even the built-in browser like dialog system you could develop your entire like custom um like confirmation prompt and blazer if you want or maybe you don't even want to prompt the user you just want to like save behind the scenes and then continue the navigation um it's very customizable and uh yeah so that's that you might have noticed though sorry go ahead this feature mckinnon was trivial to implement right like this was just we went through a lot of iterations on this feature we've had this request for for a while people wanting to implement these user experiences but there were there's quite a few complexities in doing this right in a way that uh that doesn't cause grains i'm curious what was with any are there any gotchas in this model that people should be aware of or any any uh uh there is a subtlety and i was just about to get to it so i'll cover that real quick yeah no worries so yeah i was going to point out this property this parameter name is called on before internal navigation so this callback will only execute for internal navigations within your app so like navigating between pages for example that's an internal navigation um if you did something else like click the x button on the browser tab or change the url to some external site somehow you wouldn't get this call back and that's just a limitation of how browsers work they don't they don't let you wait an arbitrary amount of time to decide whether or not you're going to let that action continue but if you do want some sort of like just some like simple pop-up that shows like hey you're going to leave this page are you sure you want to do that then we do have this other um parameter confirm external navigation so you can add that parameter and you know set its value to true and then if you try to do an external navigation you'll get just the default you know standard browser prompt so i can show that real quick as well so if i just like type in something random here and then i try to go to bing.com it prompts me and this is just like the you know built-in browser like leave site prompt and then i can click cancel and i'll go back so you don't get quite as much customization for external navigations as you do for internal navigations but you still get something yeah i think there's some questions in the chat about the approach i'm wondering maybe we can address some of those like the uh adam i think was asking why yeah why not just add this event to the the navigation manager yeah so we do we do actually have apis on navigation manager that do let you register and unregister these callbacks manually this is more of just like a convenience component because it covers the most common case but you can absolutely our navigation manager call i think it's like register location changing handler and then you can register a callback that lasts as long as you want yeah i think some folks on the looks like some folks in the chat are wondering like why is this a separate component why not just hook the navigation manager and i think what you're saying is well you can but it'll be a little you'll have to do some more manual stuff that this component will just handle for you so this is this is the easy way this is the time to make it simpler for you if you wanted to like in this class you could like override uninitialized and then register and then you know implement idisposable and then unregister it but it's just a lot more work than just having a single line of code that handles it all so yep cool um if there are no other questions i am happy to move on to the next feature yep i think we're good for now awesome so let's say rather than having developed this social media app and blazer we instead had written it and some other like spot like javascript based swap framework like reactor angular but our team had just heard about blazer so now we want to start rewriting some of it in blazer and adding new features in blazer so the scenario is we have this app but we want to replace our profile form page that was previously in react with the blazer component this is a scenario that we actually do currently support we do have apis that allow you to um like use the like blazer javascript object to add and remove blazer root components from your javascript page or javascript application um but those are like fairly low level and a little tricky to use so we do have an improvement that will make that easier so to demonstrate that i have this react page create profile and if we were going to do if we're going to implement this in.net 6 we would probably do something like this so we would have uh we would like have this component did mount function this isn't react by the way that would like manually add the blazer root component to the page and then cache the component and then when the when the when the react component is about to be removed from the page we then manually dispose the laser component and there's just kind of like a lot of code dedicated to controlling the life cycle of this blazer component it'd be really nice if we could almost just treat the component like you know your standard html element right so that's exactly what this feature lets you do so instead of having all that code we could render this profile form by just doing like profile form and that's it that's all we have to do um actually there is one more step and that is let's go back to our blazer app i'm going to slightly repurpose this so instead of being its own standalone app it's going to serve the blazer bits to this react app and we're going to modify root component configuration so instead of having our you know standard rear components we're going to have this profile form component registered as a custom element and that custom element is going to be named profile form basically so that's the dash is important i believe right like i think i think i've used this before and if you don't have use the naming convention with the dashes then i think the was browsers complain or something like you have to name your custom elements that way yeah so as part of the html standard custom elements must have a hyphen in them um because i i'm guessing the reason is just that i would otherwise maybe conflict with you know new elements that get added in the future so i think this is just a way to distinguish between what's a custom element and what's a you know standard like html element i'm pretty sure that's called kebab case yes that's that's my interjection for the day while i'm talking i just have to say i i think this is so cool like i love technologies that integrate well together that so you don't have to choose right like so it's really nice that you don't have to rewrite your whole app or iframe or do something crazy to be able to integrate and use technologies together this is really neat yeah absolutely so uh yeah let's go ahead and run this uh this you know laser and hosting the uh blazer bits and then we'll also run the um the react app and then i'll show you how to integrate just gonna wait for this to start before i start the react app and there we go okay and by the way i should mention that this custom elements feature is already available as an experimental feature it's like an experimental package um but now it's being shipped as part of the core framework so this is something that we're promising to support and can do and continue to support for the uh for the future yeah if any of you are like i swear i think i've seen this before yes you may have even seen mckinnon show it show it before but this is now going to be fully supported are there any like big changes like or maybe you'll talk about that already like like did anything curious it's pretty much pretty much the same so if you're already using this feature on dot net six to have custom elements and you're hoping that you'll get it as a fully supported feature in dot seven the answer is yes and very little that you'll need to change in your code to actually make it work yeah very little it in fact it might be like zero code changes actually except for this like reversing the custom element and it looks like i think it's probably started yes so we can go ahead and take a look at our react application i'm gonna refresh just to make sure we're there and awesome we have our blazer component rendering from within a react application and this isn't just like static html that's rendering too it actually has all the full blazer functionality so like for example if i try to submit an empty form we've got all the blazer validation logic and everything too so um this is pretty cool and uh yeah so you might have noticed though that the title looks a little strange that's because if we take a look back at our profile form component it does take a title parameter and if you don't specify it that's just the title that renders as the default so then the question is well how can we specify that title from this html element and as you might expect just an html element attribute so we're going to say title is equal to and then we'll say create a profile and just to show that it's this exact string being used i'll save from react save that come back to our app look at that awesome so that's an example of how you can use laser components and react or angular or any javascript-based web framework um using html custom elements i i i suspect i think the the theory here is there's there may be a bunch of net developers you know ace net basement core developers that you know needed a front end and so they and javascript was kind of the only thing you had for a long time so started building with angular and react and maybe maybe they have a little now that blazer is available maybe they have a little javascript regret and they're like i wish i wish i could use that blazer thing but i've already got this huge app over here that's implemented in all this javascript i can't just throw it away like that's my business or or whatever this allows you know if you want to start adding blazer to that application you you can do that you can start uh mixing or use it as even potentially as a migration strategy like if you want to start whittling away you know having the blazer stuff take over more and more of the ui you could you could do that this way but if you love javascript that's also totally fine you know we love you but we have a lot plenty of people that use javascript with acemicore um i think this this really uh resonates with people that really would like to have that that full stack c-sharp.net experience all right that was awesome yeah thank you i think that sounds great all right we're gonna move over to tanay now i think today's got some stuff for us for sure first of all thank you mckinnon that was awesome looks amazing uh let me just go ahead and share my screen here cool so uh today i'm gonna be showing off a bunch of features that uh the intern for team sarah hi sir if you're watching uh developed over the summer so this is just a bunch of amazing stuff that provides enhanced functionality for the existing templates and uh just uh the default applications and all that kind of stuff so i'm gonna get started by just a photo if i don't mind today i'd interrupt like we were very sad that our our awesome intern sarah wasn't able to join us we had this schedule so that she could could join and we had the conflict with like the the.com focus on maui and unfortunately her her internship ended and she had to go so we are we are trying to do her justice by demoing her features sarah wherever you are thank you so much this this this is for you awesome yeah thanks stan um okay awesome so uh let's get started here and the first thing that i wanted to show here is the empty blazer templates so essentially what these are as the name kind of suggests uh is a blazer server and blazer web assembly templates but without a lot of see the boilerplate or a lot of say the setup uh code around them so i'm just gonna go ahead and create a new blazer server app empty and i'm just going to accept the defaults except configuring for https and let vs create the application for us and the main purpose of these templates is to allow you to get started building your application without a lot of the say the other stuff which you may not need if you're pretty experienced with blazer already for example if i go ahead and open the pages you'll notice that we don't have a counter component or a fetch data component or anything like that so the overall setup is a lot simpler if i open up index all we have is the hello world we don't have any other data survey prompt or anything like that and likewise if i open up the css file for instance then it's going to be super simple it just has some basic uh ui uh basic css for the laser error ui so this is just so to ensure that none of the functionality or anything like that is lost and if i go ahead and start the actual application just give it a second then you should see the application uh starts up it's super super simple it just has the hello world you can get started uh get building the application of your dreams or even use this for say uh trying to reproduce a bug or anything like that so we have these templates for a blazer server and laser web assembly so uh available on both ends there and if you want to start using this you need to be on.net 7 preview 7 and i believe that should be available as a vs 17.4 anything to add there then no it's just this is if you want to like there's no bootstrap in these templates there's very little content so you have to you don't have to go deleting a bunch of files like if you're if you're trying to start a new app and the stuff that we have it's sort of like the the demo aware if you will in our project templates it's just getting in the way these are a cleaner place to start you can put in tailwind or whatever your favorite css framework is in there and just have a nice blank canvas to get going so hopefully that that just gives you a a clean place to start if you're looking for something a little bit more minimalistic that seems especially useful too because there are a lot of like really nice frameworks that include a lot of styling and templates and all that right so that seems like a good case for those yeah i i think a lot of people when they see for example that we have bootstrap including in the templates they wonder oh does this mean blazer is somehow tied to bootstrap do i have to use bootstrap with my applications like no not at all like we we've been using bootstrap for a while uh just as a convenient starting point for for our users but if you want to use a different css framework there's nothing in asmet core or blazer that's tied to any one particular css framework so feel free to use the one that makes you most happy for sure um so yep so i think uh as part of the community links we also mentioned the talk from uh christine t where he talks about how you can integrate directly with tailwind css so for example if you want to do that you may choose to start the empty template so you don't have to first take out bootstrap and get started on uh tailwind and so on so that's one potential use case for this as well uh cool so i think that's uh primarily it for the empty templates uh i'm not going to open up the blazer webassembly mp uh template that's essentially the same thing as the server template um but what i do want to show off next is the blazer website the application and the new default loading animations so i'm going to create a blazer web assembly application here i'm just going to accept the defaults that's all great and get started cool so um essentially if you're familiar with blazer you may know that for webassembly application when you're first starting the application and you don't have anything cached it has to load a few assets and background just so that it can run the web some new runtime and all that kind of stuff within the sandbox environment now while this loads uh in the default application you may just see loading at the top left corner you don't really get an indication of how long things may take what the progress is like or anything like that and essentially what this uh new animation and feature allows you to do is get a direct look at the progress uh of loading so i'm just going to start the application i haven't changed anything yet this is just a default laser web assembly application at this point and just going to start it up and just call it uh and everything loads up and it's great for the purposes of this demo i am going to do a bit of trickery uh and essentially what that will involve is i'm going to go into the application here just going to clear the site data and likewise go to the network tab and disable cache there's one more thing that i will do which is throttle the connection so this is going to simulate a fast 3g connection and this is just to show uh just for us to actually see the loading animation uh because without it everything is going to essentially load instantly and we can't see the beautiful animation at work uh please note that like yeah um this demo is going to make blazers seem uh slower but in reality it's more so due to the internet connection at hand rather than the framework itself so if you're on a 4g connection 5g or say a broadband internet connection or something like that then you likely won't experience this this animation to that extent so i'm just going to clear the cache and refresh the application and as you can see you see loading to start off and it's going to go through the animation and as around the network tab we can also see all the assets which are being loaded in the background and this loading animation is essentially representing how many of those assets have actually completed loading at this point in time so if it goes on it completes the loading and you get a beautiful animation uh so your customers and users know exactly how long they need to wait to get started using your application this this app is also significantly slower not just because you throttled the the network but also because it's a a dev build like when we when we build blazer web assembly during development we don't run any of the trimming to remove all the unused assemblies and all the unused code we don't do any runtime relinking to trim down the webassembly bundle itself this is just like everything from the build output being downloaded to the browser when you're not throttled that loads almost immediately because it's on localhost like it's there's nothing it's very it transfers very quickly um when you're throttling the network then you have a very large app that you're trying to run through a 3g connection if you were to actually publish this blazer webassembly app all those optimizations then automatically kick in when you publish the app becomes much much smaller and then downloads also much faster over 3g connection so that that simulation was uh both throttling and also the uh an enormous blazer webassembly app that didn't have all the publish optimizations done to it yet yep makes sense thanks stan for the clarification there um okay cool so uh another thing i did kind of want to add to this is this is fully extensible as well so i'm just opening up the previousum blog post here and you can see a couple of css custom properties which are essentially variables that you can use to actually get a handle on how much progress has actually happened so the framework itself will be the one that setting these variables and will update the variables as additional assets are loaded and all that kind of stuff uh the reason why i wanted to point it out is i wanted to show how easy it is to actually change the cast uh change the animation and change the style to whatever it is you need for your application so we kind of discussed this already but uh blazer the default template uses bootstrap so i went on the bootstrap website and i looked at some of the animation styles which are available so it supports a bunch of different progress bars by default i can just use the progress bar css class uh it can support labels different heights backgrounds having multiple bars as well as say having an animated stripe bar so let's go ahead and actually implement this animated stripe bar instead of the circle animation you were saying so all i'm going to do is just copy this code here and head over to visual studio and i am going to open up the www root folder and index html here we see the svg animation that we currently have i'm just going to take that out for now and instead replace it with this a new animation or a new progress bar now close off the div i think some stuff may have got a bit misaligned i'm just going to format the document there you go uh and um all i did was essentially take the progress bar that bootstrap gives us and put it into the application here i'm going to make one more change i'm just going to open up app css and within app css you can see how the existing progress animation essentially uses this laser load percentage css custom property uh to determine how much has actually loaded so i'm just going to take that out i'm going to remove these circle classes because we don't need them any longer and i'm essentially going to set the width of the loading progress uh to this custom property that we already have we don't need any of these other styles so i can just remove those as well and essentially this css class loading progress is now going to have a width that's equal to our custom property so if i go back to index.html and add the css class here and save and run the application we should see the new updated progress bar that uses bootstrap instead of the svg animation so i'm just gonna do the same thing i did before just slow down the actual loading artificially and you have to clear the application cache as well but essentially if i do this we should see the updated progress spore that uses bootstrap instead of svg so uh really the point of this is really show how easy and extensible this feature set is uh for whatever you may want to achieve for the purposes of progress so that's basically it for this feature as well any html css you want to use for that progress bar you that's totally up to you it's not like baked into the framework in any way it's the only thing you're getting from this framework are those two css properties that we're populating for you so you can use them as part of your your styling there were a few questions that were brought up during the showing the progress and the download that obviously makes people question you know like how big is it what's this size i think you talked through some of that before but what do we what do we tell people is a kind of standard size now for uh a minimal blazer webassembly app if you like strip everything out that you don't need and publish it with all the optimizations is about a megabyte um so that's that's kind of the overhead that you're looking at for the privilege and pleasure of having.net being running in in a browser um i mean compared to various javascript frameworks like angular react views felt whatever obviously they can shake down to much smaller minimal apps than than blazer can because the runtime's already there like they they get to they get to cheat a little bit by having that baked into the browser so megabyte is about the overhead you're looking at if you're seeing that your app is getting significantly larger than that you're like my app is like eight megabytes um then i would first make sure that you're publishing with all the optimizations like make sure you're doing a dot net publish with the release configuration to make sure everything's kicking in make sure also that you are using the if possible the pre-compressed versions of the files that we produce for you as part of that publish that may require a little bit of um work on your server whatever host you're using for those files like you want something that when it says like hey i support um broadly compression that you hand them the pre compressed broadly files azure static web apps for example will just do that for you don't have to think about it if you're on github pages you may have to do some some tricks with a little bit of javascript to make that happen um the last bit is make sure you look at your dependencies like if you're just naively adding nuget packages to your blazer webassembly app and some of those assemblies are like two megabytes you know really big and they haven't been uh none of the work's been done done on those assemblies yet to support uh trimming to support aisle uh linking like to trim out on use code then that two megabyte assembly is going to get downloaded to the browser so you do need to think about your dependency graph when you're building a blazer webassembly app to make sure the size stays reasonable i think i saw like on the the youtube chat someone was saying i was trying to do a bunch of crypto and i pulled it sound like they pulled in a bunch of crypto libraries to make that happen and it got big and yeah if you're if you're downloading a bunch of crypto code you know 10 megabytes of web3 whatever stuff to the browser then it's going to get get large you'll you'll want to think more carefully about like well maybe can i get away without that dependency maybe in some cases you might actually want to do some javascript interop until i call into like subtle crypto apis or browser functionality that's available to you um those are the um architecture and engineering tradeoffs that you need to consider on the blazer webassembly side cool okay thanks all right there was this one other question in the chat that i did want to address uh essentially uh does this work close across platform yes absolutely uh you can definitely use these uh templates across whichever platform you're running.net on so windows mac linux i know people saw the announcement that like.net is now part of like one of the ubuntu distributions now like you know net on linux so yeah absolutely totally cross-platform and all the tech that blazer uses open web standards we're not like doing anything proprietary no plug-ins nothing it's just it's just the open web everything mckinnon showed that was just custom html elements is a open web spec for how you can can implement uh custom elements in the browser we're just using that technology all right i got some stuff to show can i i'll awesome show some few things additionally okay so i have a this is a blazer web assembly app that's a smith core hosted so it's got all three of the projects right we got client server and shared and i've got it running over here on the the right hand side so we can look at a few things the first thing you might notice is there's this uh history entry state text down here at the the bottom what's that all about um that's actually not being rendered by the home page you don't see it on index.razer over on the left that's coming from the layout if we go look at the layout you can see on navigation manager you can now inspect the history the state on the history stack from the from the browser we just exposed that for you so that you can use it and then if you want to populate it we now have apis where you can add state onto the the history stack when you are navigating so to show that in action let me go over here to the counter page and on counter i added another button i added this navigate with state button uh and the click button the normal the click me button is the same thing as it always was i'll show you the code for all this so here's counter dot razor so we got the normal uh click me button where the count goes up and then we uh there's the button and then we have the second button that will be navigate with with state and what that's going to do down here at the bottom it's going to call into the navigation manager and it's going to navigate to the home page but it's going to pass some options so that we can add some history state for that for that navigation so if i click navigate with state then we get to the home page and the home page layout renders and we're able to inspect that state using the the previous api that we saw and see it on the page so if you want to persist a little bit of state when you're doing navigations in in blazer there's now a a first class way of doing that so that's new feature um this is actually laying some groundwork we needed this feature for some of the authentication improvements that we're also doing in net seven we'll be hopefully showing more of that uh next time next month so stay tuned for that part uh what else can we do so blazer has a really powerful data binding system so let me show you the show you that real quick on the home page let me go back to the home page in the app if i add an ad code block right here i'm just going to add a string field that has an empty string in it and then up above let's add an input and this input i'm going to at bind to that text field okay and then below let's go ahead and display the value of that text field very simple data binding scenario data binding will then take the value of this input field it will bind it to this uh this this input ui element bind it to the uh the text string field in in c sharp land and then we can render out the value on the on the screen okay so if i save that i think that probably will require a quick rebuild and then we should see our input hopefully i did this right okay so now if i start typing and then if i trigger the on change event for the input then it binds and then we see the value rendered on the screen right so that's that is normal classic blazer data binding and if we wanted to change the event so that it's not happening like on the on change event but happening on um let's say on every time i type like on input we can do that as well and now when i start typing so seven eight nine every time i hit a character it just shows up on the screen so that's data binding that's been there forever it's not a new feature it's just a part of part of blazer but a very common scenario is that after you've like you know type some uh some text into an input like this and that you want to then uh trigger something to happen after the data binding has occurred and you could kind of do this with blazer using some tricks with like properties like maybe you you could set up like a a string property that just has a getter that returns text and then in the setter well that will get called when the data binding occurs so then here you could do stuff so you could say like um the text will equal the value and then maybe we like you know add an exclamation point on to that to the end something like that and now instead of binding to text we're going to bind to capital t text which is our property and would i did i got something and the fat arrow needs to go away thank you thank you thank you and make it correctly indented and we'll save that okay so now when i start typing yeah so every time i type a character i get an exclamation point at the end so that works for doing some code after the data binding has occurred but only if it's synchronous like if i wanted to do anything async like maybe after i type some something in this text box i want to actually save it in a database or like make an api call well properties only support you know synchronous getters and setters uh so it wasn't really a good way to do that um fortunately now.net 7 there is so what we can do let's get rid of this property thing let's not do this anymore and let's switch this back to lower case t text and now what i'm going to do is i'm going to use the new bind after modifier and then here i can specify like a method something that i want to call after the data binding is done like uh save the text something like that all right and then below let's define an async method uh save text and then in here let's do something async so let's i'm just gonna create a task.delay just to simulate doing something like you know calling an api or whatever we'll do it for delay for two seconds and to show that this is working i'm gonna set up a little like uh boolean and we'll reset it to false before we're saving and we do the save and then we'll set it to true and then up above let's add a little if statement so if we have saved then we will print out save like that okay i think that looks good yeah i'm gonna save that okay so now if i like type a character we wait two seconds and saved okay so the after the thing that we put in this bind after this will get called after the binding has occurred in this case we're just waiting for two seconds and then putting a little notification on the screen to say that that actually worked okay so that's how that works to show a slightly more realistic scenario let me go over here to fetch data now the fetch data page particularly in the hosted blazer web assembly app this does an api call to the backend server calls an api controller which generates some random weather forecast data it sends it back and then it uses that data to render the this table of weather forecast data that's what this this code's doing over here on the left what i added was an input at the top so that i can search through the weather forecast summaries like the text on the right now this will look this isn't filtering like actually what i want to have happen is i want it to actually request the new data and then i'm going to use that the the search string to filter down so i've i've set up the input so this will happen every time i type and then after we're done binding we're going to update the weather we're going to get new weather data so down here below in my update weather method you can see i'm making a new hp client call to get the the weather data from the weather forecast service and then we just have a little uh helper property here we can do that so we can see it that will then do the the actual search for me okay so if we now type in here like type in a c it will make the new request request the new the new um uh weather forecast data and then do the filtering so that we only see summaries that start with with the letter c okay so that's pretty cool yeah so that's that seems to be working fine so that's the after modifier it's a way to run particularly asynchronous code after data binding occurs um now let's say i um you know i have this input and it's um you know it's configuring which event i want to use it's kind of annoying that i have to type that every time i want to use an input that uh that triggers it on input what if we actually like encapsulate that in the blazer component so let me uh comment this out and we'll uncomment my custom blazer my input component this is a component that has a bindable value and then we're also setting the after modifier on that bindable value so you can use the after modifier even with components as well if the component has a bindable parameter to see how that's implemented in this component it's really simple so here's our component it's just that input and then we to set up a bindable parameter you have to declare these two parameters you declare the the parameter itself and then a um a parameter that's named whatever the previous parameter was then changed it ends in the changed suffix and that's your callback for when the the value has changed if you have this pair of parameters you now have a bindable uh parameter for your for your component now what was really hard to do or tricky to do in earlier versions of dotnet with blazer was if you had a component that had a bindable parameter and you wanted to kind of chain it down like it had some ui element inside that component that you wanted to chain the bindings up through doing that was was difficult um like in particular like you you basically had to take the bind and split it apart into setting the value and its corresponding event but even if you did that there was potential consistency issues that that using app bind handles for you that splitting apart the bind you lose that that functionality so we wanted to fix that and make that easier in dot net seven and so we've introduced these two additional modifiers at uh at bind get and that bind set now bind get is is pretty straightforward that's what's going to like say you know get me the value from that you want to populate into the to the element bind set is saying i would like to take over the actual uh uh setting of the of the value with a with a custom method so here i'm i'm actually pointing directly to my event callback and just chaining it through so that when the input changes then or when the event triggers then we're just triggering the event callback for our corresponding components so much much simpler pattern if you're building components like this where you're trying to bind to elements and you're having to hack a bunch of code to make it work hopefully this will make your life a lot more straightforward so if we go back to the fetch data component and just save this so it populates into the component this should work exactly the same you know no difference you know we can filter down to the the summaries based on what we've typed so that's um set the set and get modifiers for for data binding new and done etc all right last thing i want to show and this is technically not a net 7 feature this is a this actually even this what i'm going to show you next actually works with dot net six if you want to try it out with dot net six but it is a um preview experimental feature um dan yes uh sorry sorry uh sorry to interrupt you there uh before we move on to the next uh there are a few questions regarding uh this functionality uh would it be okay to ask them now okay we can try yes okay awesome so the first question here is is this one-way or two-way binding this is two-way in the sense that like if you um uh the value from the input is um is being bound to the whatever you're using a c sharp like usually a field or a property or whatever and then when it changes you're it's triggering the the value to then to then be set so you're going both ways this is a two-way binding okay makes sense thanks for clarifying that uh the next question here is will bind after work with custom components or is this specifically for inputs it works with any component like that's actually what i'm showing right here so my input is my own custom component and so you can use absolutely the after modifier with uh with this bindable component parameter as well it does the same thing it'll just basically wait for the bind to complete and then we'll call your your method whether it's sync or async okay fair enough and last question i think we want to tackle here is is there any way to throttle the bind after so the the bind after method will get called like once the binding has occurred you will get called if you want to like debounce things in that method that's logic you'll have to add yourself like if you're like in that saved scenario like every time i'm typing right i'm triggering a bind and then the bind afterward would get called if you want to avoid running logic like you know repeatedly saving every single time you type you want to like wait maybe a second or so before you do that that's logic you can add in your app that's a like debouncing techniques okay fair enough uh yeah i think that's all the questions that we want to handle for now there are a bunch of questions in the chat and of course uh feel free to leave your questions in the chat we'll uh we'll try to answer as many as we can after we're finished up with the demos awesome yeah i'll try and fly through this last part and hopefully we can get to a bunch of questions um okay the last thing i want to do is this table that you're seeing this is just like a plain html table like ideally this would be a proper data grid that i can like page and filter and sort and all those those nice things now there are lots of really wonderful you know industrial strength data grids from the various component vendors out there telerix and fusion devexpress and so forth there are a bunch and a bunch from the open source ecosystem as well that you can use um but sometimes you just wanted to get something done done quick and for that i'm going to use the new quick grid component that we are providing as an experimental feature now quick grid is a basically a reference implementation of a idiomatic data grid in blazer that's implemented for very fast rendering it's not shipping aspire.7 so you can't uh it's not a supportive feature technically but it is available to use however you would like uh and for quick jobs like this it uh it gets the the job done um so if you want to try out quick grid what you got to do is you want to add a nuget package so in my project i've already done this nougat package explorer we can see right here microsoft acemicore components quickgrid that's the the package that has the experimental quickgrid datagrid i've already got that and so i'm just going to delete this table and let's add a quick grid so i'm going to quick grid i'm going to add the namespace first so that that populates there we go so there's quick grid and now quick grid will take has an items property that has a couple different models for getting data but one of them is just you give it an i queryable so i need an iq variable to hand to quick grid i don't have one yet so i'm just going to change this forecast property from my enumerable to i queryable and then at the end i'm going to call that as queryable so now we've got one that we can use great and nope not yet um and then let's do items equals forecasts so now we've passed in our queryable to the quick grid and now i just add some columns so um there's a property column that we can add that's based that will basically render a column uh for a property on the model type that you're handling uh handing in as part of your high query so let's add a property column for the date property on our uh on our weather forecast and then i'm going to want a few of these let's just add four of them for the second one we want the we had the celsius temperature and then for us for americans they can't read celsius we'll do fahrenheit and then the summary as well and that's it so there's our quick grid data component and save that and do i need every run if i need to reboot okay there we go so there's quick grid now this isn't quite looking right yet like i'd like to format these dates a little bit and these titles are just being pulled from the property names so let's fix that real quick uh for the date format we can set the format property and put in a format string right here and that should fix that up so that we just have like a short month days type format yeah um a little bit more space so we can hopefully see that from here we go and then for the titles we can set the title properties on each of these uh columns let's set this to temp uh celsius and then i want something similar for fahrenheit let's do temp fahrenheit and then we can save that so hopefully that will clean up these column headers there we go okay that's looking good and then we can do fancier things like if we want these columns to be resizable like right now i can't resize them we can add resizable columns up here at the top and that should give us this little widget thing so now we can move the change the size of each of the columns uh we can add sorting really really really quickly by just adding the sortable property let's do it for the date and let's also do it for the one of the celsius temperatures and that should allow us to click the column headers so now if we sort the date yep we can revert invert it we can sort by uh hottest the coldest temperatures so it's pretty really simple easy to use um last thing um instead of having this text box at the top i'll be nice if i could just have like a little filtering capability on the grid and that's really easy to add so on this last column for this for the summary i'm going to add some content here let's go into this property column let's add some column options and what this column options thing does it will add a little widget next to the column that you can click and then put some ui in there for filtering or whatever else you you want so i'm just going to grab my uh my input from above and shove that into the column options and have it do exactly the same thing that it was doing before but now integrated into my grid experience okay so you see this little hamburger menu thing now in the summary column click that we've got our text box and if we you know type stuff in here or let's do it hot yeah now we can filter down to a particular particular temperature and it's still calling the the api every single time getting new data that's why it's kind of bouncing around if you wanted to just filter the local data you could absolutely do that too um this is just some of the things that quick grid is capable of doing if you want to learn more about quick grid what i'll point you to is ak dot ms slash blazer slash quick grid and there's a little demo site that uh steve sanderson uh on our team set up with all sorts of great examples of using quickgrid uh here's a a full sample of quickgrid that has um i think this is uh olympics uh metals metals data you know it's got pagination it's got sorting it's got uh filtering a little filtering widget just like we saw before so if you want to do like uh united states you know we can filter down all that type of stuff so you can check this out um quick grid supports various data sources like in addition to iqueryable if you want to like pull data from a remote remote source you can absolutely do that you can do all sorts of different types of columns the property columns the simple one there's templated columns you can optionally add columns using just normal laser c-sharp syntax sorting filtering pagination components are are provided as well virtualization it supports a row-based virtualization i don't think it supports column-based virtualization and that's important here like quick grid is not um intended to like there's certainly features that quick grid does not support it's not built to be like uh a complete and fully featured component like some of the ones that you'll be able to get from the vendors it's a reference implementation that can get the job done for quick quick jobs uh if you need all like all the fancy features definitely uh you know go and look at the what the component vendors offer but it's pretty cool if you're building your own grid components definitely look at the code because there's a lot of neat tricks that we show in here on how to how this was implemented and yeah this is if you have even even on.net 6 if you want to try this out you can try this out on.net 6 says as as well and that is what i had to show for a quick grid and i did not mean to start excel so um back to my slides there we go all right so ted grid's on your mind i know yeah excel is not implemented with quick read um so if you want to get dot-net seven again get net seven is the url to download the preview release preview seven is out the door uh the first release candidate is just around the corner um the final release for dot net seven is scheduled for november of this year so end of year is when dot net seven will be done for the latest details on our.net 7 roadmap for acemantcore and blazer aka.ms slash asp.net roadmap it's on github it's all public we try to keep that up to date if you're following along with all the dotnet 7 preview releases uh we announce all the new features on the dot net blog if you'll want to see an asp.net view of that blog aka.ms slash ace minute blog and then the url for the quickvid component and that's what we've got for you today for part one and uh we can stick around and answer some questions that people have unfortunately we have no questions today just kidding we have 25 25 queued up okay uh awesome so let me just hop over to the questions here and the first question here is uh does quick grid use reflection um that's a great question i mean i believe yes that it does use some some amount of like it has to inspect the uh the properties i i shouldn't i shouldn't tinaya or mckinnon how much you've looked at the quick grid implementation like ideally we would have steve sanderson here to to let you know if you've seen um some of steve's demos like the blaze uh blaze orbital ace orbital yeah demo he that that's kind of where quick grid like uh came into being um so he did most of the implementation work i assume it uses some level of reflection under the covers but i i can't say authoritatively the code is fully public it's in the um asp labs repo um which we can put a link to the chat if you want to go see where that where that's at i assume and i do see some some references to reflection yeah so right there that's common with these grid components that use that like iqueryable pattern with you know inspecting properties yeah that's the beauty of open source if you aren't sure you can check the code yourself uh okay awesome actually and i'll take that back because i searched the repo but i'm realizing now that's the whole asp labs repo so if it doesn't then steve somewhere is rolling his eyes and saying no of course it doesn't use reflection like [Laughter] uh okay awesome uh next question here is uh sorting filtering does this work with something like oh data yeah yeah so it does like like you saw on the website and we showed in the demo you can you can sort you can filter there's paging components that are included with the quick grip package that you can just use that's in the uh on the sample demo page you can see examples of that there um for odata for a remote data source you'll want instead of using iqueryable probably you'll want to use um actually i'm not sure i don't know if the odata client uh may actually provide an uh an iquariable implementation over a remote odata source if it does then you should be able to do that you can you can take like an ef core db context like the i queryable implementation from uh any framework core and just hand that to quick grid and it will then leverage the database to do all the paging and filtering and sorting okay makes sense uh let's move on to another question here um okay sorry just quite a few questions i'm just trying to filter some down uh okay uh can the quick grid a property column take the column name from the attribute so uh for instance through a data annotation i don't know if it has a [Music] um i mean um by column name assuming it means like the title like setting the title through the model yeah that would be what i would interpret as well yeah yeah not that i'm aware of um i mean again it's not it's not intended to support every feature uh but to be a uh you know a baseline reference implementation i mean kind of along also along the lines of what people were asking before about you know how big is blazer web assembly is it fast like how does it feel the um quick grid demo side is a blazer webassembly app and if you go go to that link and try it out we think that you'll find that it's you know pretty snappy that's actually quite quite a good experience for uh for that application um so that's that's also one of the reasons why we built it so that people who are worried that well is it going to be able to handle my data grid scenarios with you know tens of thousands of rows like yes actually and there's examples on that website of grids with tens of thousands of rows okay fair enough uh okay so you just give me one second i'm just going through a lot of questions and comments and all that kind of stuff as it's coming in uh let's move on to the next question here is uh okay so this is going back to the bind gets that after uh functionality that than you mentioned earlier uh this user here is asking if i only want to change a model's value after the server validation should i use bind after after server validation okay so that's interesting so it sounds like they want to um value changed like so remember like blazer is inherently a client app model like laser webassembly is absolutely running on the client that's running in the browser even when you're running blazer server apps it's conceptually a client model even though the the the code for your ui is actually running server side so server validation would mean something like you know you have a form and you're typing some things and then you you like submit an api request to the server and then maybe it comes back with like you know 400 sorry that that request is bonkers like no uh failed validation some for some reason on the server like the request failed um in that world um data binding i think would already have occurred like you you trying to think here like you you you want like after is definitely happening after the the data binding has happened like it's that's why it's called after like data binding has happened and now call something so if you want to prevent the data binding from occurring then then after it's not not going to going to help you that's not that's not what it does okay [Music] uh my next question may be confusing of some things about like standard nvc patterns of like i send you a request like an mvc app you would have a forum where you post uh you know a forum request to the server the server runs validation and you usually in your action method have like you know check the validation state is it good okay now save it to the database you know that type of type of thing with blazer it's a it's it's a client model like you you have a form you can run client-side validation first and then you can then send an api request with your data and then the server may reject that api request and say no in invalid but the data binding was part of what you used to collect all the data so you could even send it to the to the server so it's a little bit of a different way of thinking about things when you move from if you're if you're used to server rendered ui patterns blazer is more is more of a client-side pattern it's more akin to like writing in javascript or writing like a wpf app or a winforms app from that from that perspective okay makes sense uh okay so the next question here is for the blazer runtime uh is there any limitations in terms of the architecture uh the browser is running so can it run on x64 arm processors and so on it can run on all those it does it's i mean blazer is targeting the web platform the only architect you know runtime architecture it cares about is webassembly can you run webassembly then can it can we run over some javascript and then great that's all that's all we need so what the architecture of the browser then had to target in order to run on that particular device you're completely abstracted away from that okay so sorry i'm just going through some of the questions that we have um okay this one is pretty straightforward uh is signal r still under the hood in blazer server yes uh i love it keep keep those kind of questions going those are great i can answer those type of questions all day okay uh so on the same line kind of sort of laser server more generally uh are there any improvements to laser server and dot net seven so this is a great quick great question so like um if you've been following our roadmap there were a bunch of blazer server improvements that we had really hoped to get done in dotnet seven and even sadly some of them were improvements we had hoped originally to get done in dot-net six and they got moved to.net seven some of these things were like um uh like pause and resume support like having more control over the circuit state circuit's what we call the the thing on the server that maintains the state for every connected user to your blazer server application unfortunately all that workout we got pushed out of dotnet 7.08 again it got pushed out of the current release we just ran out of time unfortunately given the amount of work we ended up having to do on on.net maui there's still things that we hope and plan to do for for net 8 subject to planning and resourcing and changes of course all the normal caveats but uh yeah so not not as much in the blazer service space that we had originally set out for i'm trying to think if there was anything i know we've been we've been exploring a bunch of really fun interesting ideas like we've been exploring um compression uh in the to reduce further reduce the payload size for the uh the messages that blazer server passes across that signalr hub connection for managing the ui to make it faster lower latency all those those nice things i don't believe any of that's landing in.net seven um there's a bunch of interesting uh discussion around can we create a more hybrid model between blazer server and blazer web assembly uh like maybe one of the issues with blazer web assembly admittedly is that it is larger um what if you could start out an app as a blazer server application and then you download the the app as a blazer webassembly app in the background and then you swap it over at a convenient point that might give you the best of both worlds of both blazer server and blaze or webassembly you know fast startup and then full client side uh execution those are things we're talking about for now for the dominant eight uh time frame also um we had work originally planned to enable um sort of these micro front-end scenarios where you can mix um blazer apps on the same page like maybe you want to have part of your app that plays a webassembly and part of your app that's blazer server and it's all on the same page right now that's still not possible because the both scripts will like populate the the global namespace of the of the application but that's something also that we wanted to do and still want to do and that we will look at in the the date time frame ah yes will it be possible in the future some kind of switching between laser wires and laser server at runtime we hope so we we we will be exploring that idea uh for the the next release okay uh cool i think we have time for about one more question so uh this user is asking uh when will blazer web assembly be available for dotnet maui so we don't have any plans to do that i mean technically you can do that today like there's nothing that prevents you from hosting a blazer webassembly app in a maui app using a web view control presumably that's what what's what you mean like a blazer webassembly app is just a web app i mean it's root there's a piece of javascript that runs and then does a bunch of fancy stuff with webassembly but it's still basically a javascript app at its root you can with maui today there's a webview control that you can use and you could put an angular app inside of your maui app if you wanted to host some existing javascript code that way you could take a blazer webassembly app and publish it and deploy it into a maui app and that would work the the downsides of that though is your laser webassembly code is now running inside the browser which means it's running inside that browser sandbox so it doesn't have access to all the cool native client features that you would normally expect from a dotnet maui app it's not running in the native process it's running in the browser on web assembly in a completely separate run time the beauty of laser hybrid is your blazer code your.net code your components are running in the native client app on the normal.net runtime they can call native client functionality using normal.net platform apis you can you know touch the file system you can make network requests you can if you want to do stuff with the windows registry if you're running windows you could do that because it's a native client app and then it's just rendering to a web view control through like a little local interop channel so we think that's actually a much better approach like if your goal is to have a data client app the blazer hybrid pattern we think will be will give you a lot more benefits your code will run way faster way more functionality it's a it's a really the best of both worlds both native and and web um if you want to host laser web assembly in a native client app that's something you should just be able to put together i know there have been open source projects that did some things to try and make that a little bit easier um that you could go check out i forget their names but they're probably listed on the um awesome blazer repo aka.ms slash awesomeblazer which is just like a a catalog of every cool blazer open source project out there if you go searching through that you'll probably find stuff there related to that to that pattern okay makes sense uh i think we have a couple more minutes so i'm going to quickly try to uh get you a few more questions here if that's all right uh but this user here is asking does blazer work well in visual studio for arm yes as far as i know i'm not aware of any issues i don't actually have an arm device so i haven't i haven't tried it out myself but it's certainly fully supported like visual studio on arm support thing and all the normal visual studio scenarios uh should work there and like honestly blazer and um uh it is it's not really tied from at least from a web assembly perspective it's not tied to the architecture when you're running on the server like using blazer server then you're running on ace mic core and you're running on you know the normal.net uh the core clr based runtime and dominant 7 supports running on our arm devices so that should be fine uh if you know of any issues on arm devices like please let us know like file visual studio feedback tickets or github issues and we will absolutely address them okay awesome uh this user is asking does police provide an offline mode yes it does so if you're a particularly if you're a blazer webassembly app so blazer webassembly apps are true client apps which means they get downloaded to the browser once they're downloaded as long as the app doesn't further need a network connection then they can function offline and the way you typically set that up is by making your blazer webassembly app a progressive web app that has a um a service worker that handles uh caching the files locally so that they can be used when you're when you're offline so yes you can you can build blazer particularly these are webassembly apps that function completely offline after that initial load and assuming that they don't need any like api calls later in their in their life but yeah they can function offline sounds good and yeah if you want to create a progressive web application if you're using vs it's just a tick box or checkbox you can do while you're setting up the actual application and this way it ensures that all the additional dependencies and all that kind of stuff is included with your application um cool so i think that's about it for the time we have today and uh thank you so so much to everyone who tuned in uh today i hope you all learned a lot of great stuff about what uh what's going to be available with laser and dotnet 7 and thank you everyone for joining mckinnon thank you very much for your demo dan as well and john thank you so much for hosting [Laughter] awesome well uh it's been great thank you everyone and have a great day bye folks bye folks bye [Music] so [Music] [Music] you

Channel: dotnet

Views: 39,901

Keywords: .NET, dotnet, Blazor, ASP, .NET 7

Id: mDKvgpD8YM0

Length: 85min 26sec (5126 seconds)

Published: Tue Aug 23 2022