.Net Foundation .Net Community Standups, 31 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ASP.NET Community Standup - Mar 31, 2020 - Blazor Update with Dan Roth and Steve Sanderson

Description

Join members from the ASP.NET teams for our community standup covering great community contributions for ASP.NET, ASP.NET Core, and more.

Community Links: https://www.theurlist.com/aspnet-community-standup-2020-03-31

A

A

A

Yeah I'm here too I'm.

B

Here but they're saying no, sir, no people are saying there might be sound.

B

B

A

Jonathas community.

B

Jones people say they can't hear you.

B

And everyone on YouTube says they can't hear you.

B

And twitch, just a pile on Twitter, hang on well.

C

Some people are saying they can hear him on yeah.

B

One person says they can hear, but.

C

People and some couple people on Twitter saying they can't hear him now.

B

No, that's just a lot of time here: John Thank.

A

You Donna and Damian can people hear me can.

B

People hear Steve.

B

Hearing everybody except John.

C

Apparently, everyone can hear Steve. We should just let Steve like like.

D

Hey wait. Let me try this think that as a high, that has a 7% probability of success.

D

Now we hear John, okay,.

C

D

C

D

C

D

Take three John and typing people here: dude people do here the typing. Okay, so first of all, Simon crops got this verify tool. It is a verification tool that works with a bunch of testing frameworks and one that he pointed out is support for B unit, which is neat so B unit I had not heard about before supports for rendering a blazer component and verifying verifying the output. So.

C

D

C

Think B unit just went through a rebranding, I think recently used to be like the blazer component test framework or something like that and I think eagle, renamed it to be unit which got her name. I prove sounds good.

A

So good good night, oh and.

D

Here's that B unit as well so yeah and I gave the heavy disclaimer before you got on Damian I know nothing about testing with blazer I. Think it's a great idea. I hope it goes well for everyone.

B

C

You want to know about it. I think did a whole session that the recent dotnet comp focus on blazer talks about blazer components and a lot of it was based on his work on this community project. So definitely go check that out. If you want, like the full spiel on on using B unit, to unit test your components and doing like integration style testing he's got a lot of great stuff. There yeah.

D

You know what we're at that I don't know if we talked about this recently, but all the content here, I cleaned up the formatting a bit on that this weekend and there's all these links to all the shows and all the stuff there. So there you go it slides and and all that stuff, so everything's right out there yep so cool. Let me put these in order, so I can be OCD and let's move on Jason Bock writing about mocking injected types using blazer, so supporting any talks through different scenarios.

D

You know end to end and kono based testing some injected types. I was looking this past week at injecting ijs, runtime and I guess so for testing. You would again I have not done this, but if you want to mock out something of the results say of a J s, runtime Paul he's talking through how you would mock that I.

D

Don't know interesting stuff again.

C

This is something yeah.

D

Steve you link to this on Twitter this past week. I thought this was pretty neat, so this is a blazer signature pad.

A

Yes, nice, isn't it so I think I haven't actually tried it, but seeing from this animated screenshot, it appears to be generating a base64 representation of the image in real time, while you're drawing so I. Suppose you can then just do whatever you need to with that image data. It's pretty cool yeah.

D

Neat and yeah shows the base64 down below and all that so I need stuff. Alright, cool Carl Franklin on the road except at his desk. So this is the Carl Franklin Roadshow, so he's been doing. I was there was one last Thursday I think and you and I were both on it.

C

Yeah yeah we hopped on chatted with folks. It was great yeah these. These were in person that he was traveling around going city to city and doing these workshops, but, of course, with the current situation that wasn't really possible anymore. So now it's the the Blazer desk show I think he calls it now or you can just join the live stream and and get some some nice training on getting started with blazer. It's.

D

It's neat. You know people have been pivoting to these live events. This one was great. You know it was cool, did like there was doing a going it like. That's something you don't have at a live event. It's the whole kind of back channel and it was kind of cool people were asking random questions and and yeah. It was neat to neat to see the Q&A going on stuff. So alright, my last link here is Eid Charbonneau's laser free ebook. So this just came out with 16th.

D

This is a fill out, a short little form, and then you download this book and it's a beautiful PDF and it's got ninjas and it's got tons of code and beautiful design and stuff so congrats to Ed and- and you know, if you're looking for some compelling reading, I can't think of anything better.

D

Alright and as always, we publish all these I'll send the links out in the show, notes and stuff, but for now I will.

C

D

C

Great job on the book and.

D

Now, hopefully, we're seeing beams and by the luck of the draw Damian is huge.

D

How is everyone.

B

D

Alright, so I guess, let's jump right into it. I heard there's tons of demos there's their slides, there's um it's a party. What do you got for.

C

Me let me pop over here, I'm gonna spend I. Take the screen that's showing up now. It.

D

Is yeah alright.

C

Great, so we thought we're gonna, give you another blaze or update its blaze or update time. We haven't done one these in the in a little while we're gonna talk about all the things that the Blazer team has been been up to recently and, of course, the big task for us right now is blazer webassembly.

C

This is the entire focus of the Blazer team. Currently we have an upcoming release in May. If you haven't been tracking the Blazer webassembly release. This is a release based on net core 3.1. We actually just slipped the blazer webassembly project template into the most recent dotnet core 3.1 sdk preview, that came out with the recent Visual Studio 16 6 preview released.

C

So if you have, if you're on the Visual Studio preview channel, that came with a preview update to the dotnet core 3.1 SDK 3-1 300, some preview moniker- and that includes the blazer webassembly template right there in the in the SDK and eventually that will GA and would be available for download on the dotnet site. For now, you only can get that SDK through visual studio, but a or I guess you could go to the to github onto the the dotnet core SDK page, but in the future that will also be available.

C

It's just a standard SDK download, so that was pretty exciting. This release a blazar webassembly just a reminder. This was this is the first release of blazer web assembly, so it would be a current release, not an LTS release like the rest of dotnet core 3.1. We like to ship things at least a couple times before we bless it with an LTS, long term support support lifecycle.

C

So don't expect that for this initial release, all that means is that if you adopt this initial release of blazer webassembly, once donna 5 comes out, you'll need to upgrade to dotnet 5 in you know a reasonably short period of time. I think there's like a three month window and our goal is to make that is as easy for you as possible. The packages for this release are all 3.2, so you may be seeing things about blazer, webassembly 3.2, that's the main release.

C

We gave it that version number to distinguish it from the rest of the dotnet core 3.1 bits. It doesn't mean, there's a dotnet core 3.2 coming out. It's just trying to distinguish blazar web assembly from the rest of rest of the 3.1 release. After may, blazer web assembly will then move to become part of dotnet, 5 and it'll. Be part of the normal release. Train I'll have a little more to say about that later. If you're trying out the dotnet 5 previews, you won't find blazer webassembly in there. Yet that's cause we haven't inserted it.

C

We won't be looking to do that until after the may, release is done. We just wanted to make sure everyone's attention was on on one release. We didn't want to confuse people with having you know two different versions of blazer webassembly floating around, so that will happen after after may couple.

B

Of couple things dan, if I may yeah.

C

B

Go back to the PS so just worth pointing out that well, we still are able to do servicing, obviously of 3.2. So after May there might be a 3.2.1 & 3.2.2 in order to fix critical issues in Blazer webassembly. So just because we page ended on their fire doesn't mean we won't be serviced in 3.2.

B

The other thing is worth pointing out is that if you are trying to use both dotnet 5 previews right now and blazer webassembly previews, it can be a little difficult because of the way templates show up in visual studio based on which sdk you installed them from and so I went through this yesterday, I've got the 5, you know: Don n53v one installed I, went to the command line and then ran a command to install a build of the template packages, and then I went to vs and I went to choose blazer webassembly, and it wasn't there because I was in the preview vs, but I had I was in a preview of vs.

B

That was one behind the current I. Think I do updates a 16-6 pb2 from preview 1, but it was showing up in the non preview version from the preview SDK, because I installed it with the.net 5 preview SDK, rather than stalling the templates with the 3.1 release SDK, because the preview becomes the default once you installed the preview SDK right. So if you got in the command line, you talked on it you're on the.net 5 preview, so the templates get installed into that high.

B

So there can be a little bit of just making sure you're going from the right place and you've got all the right versions installed and you're kind of understanding where things are coming from. So yes,.

C

That's great point that we have heard some people stumble on that who have been trying out the dot m5 previews, the the templates get installed per SDK version and so, depending also on which SDK you have active on the command line. You may or may not see the blazer webassembly template if you have the dot and 5 sdk active versus the one where you actually installed it on.

C

I have tried out taking the dotnet 5 sdk and installing whatever the latest preview of blazer web assembly is into that sdk and things do work so that that should yeah. That should be a way to set yourself up as well. If you want to do that, the SDKs are built to be backwards compatible. So it's okay to use a newer SDK with like older templates, like the the blazar webassembly templates, yeah.

B

Working the problem was when I first did it I had a my version of visual studio preview wasn't new enough and it affected those templates showing up in the file new and then when I update it to the latest Visual Studio previewed and they suddenly showed up so yeah.

C

I think that was a BS issue right that got.

B

C

In that release yeah, so if you were on preview one of sixteen six, there was some weirdness with how templates were showing up. That was just a bug and that BS preview, but that got addressed with with 16 and so things 16 6 preview. So things should be getting better and.

D

With good good.

C

D

Mac also, we've got it's 8 6 preview, 1 just went out, and it's not quite in that, but but I think in preview. 2 8, 6 preview 2, which should be out very soon, will also get Blaser webassembly preview support without Blaser debugging without laser wise I'm debugging, but like everything else, is.

C

Included yeah I understand the plan for 8.6. Vs remark is that you'll be able to develop, build and run blizzard webassembly applications I, believe file, new project like be able to crate blaze and webassembly apps will be supported in the 8.6 release. I think the only piece that's missing there is the is the the bugging support that involves a bunch more infrastructure on for like script, debugging I, think the s or max does is laying down the the the foundations for but I hear. That's that's planned. Next.

C

After after 8.6, that's one of the areas of focus to be delivered so that'll be great, so on a Mac he'll be able to get the full v/s experience as well with blazer webassembly, alright. So here's what we've been doing for the blazer webassembly release we've been pushing out previews at a pretty fast clip.

C

We shipped one in January and in February, and just most recently in in March lots of great stuff coming on the Blazer webassembly train I'll go through the features in just a second and then we will show them what's going to be happening in the future.

C

So we'll have another couple: preview updates in April things aren't gonna get start moving faster and faster in April, as we get closer to the GA release, though the releases will actually compress a little bit now that we're aligned with the SDK update that's going out with 16:6, so there will be a preview for probably mid-april what we're looking at for that release. Preview 5 will be just like a week later, so it'd be mostly just bug, fixes and then a release candidate at the at the end of the month. After that, we hope to.

C

If all goes well, we hope to then gee a blazer webassembly 3.2 in May. What's in this release? Well, here's all this stuff, that's already in blazer webassembly, available in preview, so support for dotnet standard 2.1. We have this standalone and the a submit core hosted versions of the blazer webassembly template. We support il trimming using the.net, il linker so that we can strip down your app and make it nice and small. We have support for WebSockets now, which enabled support for the.net signal our client.

C

So you can just write net code end-to-end when you're dealing with real time scenarios. We recently integrated with a spinet cores static web assets, infrastructure for blazer web assembly I mean, if you think about blazer web assembly. It is just a bunch of static files like it's like a normal static site that you would write in JavaScript, except on with net and and c-sharp. So we plug into the same static file infrastructure that a spinet core provides. We just recently supported added support for authentication using token-based authentication by uh open ID connect.

C

We have integration with identity server or you can use third-party providers and also azure ad and azure ad b2c progressive, Web Apps. We we added that in the recent preview release and then just last week we turned on debugging in in Visual Studio for the first time, so you can finally f5 your app hit breakpoints and do debugging from within your BS environment. Also, we also have support and Visual Studio code and, like we mentioned Visual Studio for Mac, is, is in the works.

C

We've also been working with the dotnet team on a more fleshed out set of extension methods for HTTP client to handle JSON processing using system text Jason. We've we've had our own little helper library that we've shipped with Blaser webassembly for a while that hatches a few methods to help you, you know get and post jason, but the dotnet has been building. You know the full deal. A full set of extension methods were really excited about that and, of course, supports dotnet standard.

C

So if you want to use it outside of blazer applications, you can do that as well like from your from your server or in mobile and desktop apps as well. So that's that's pretty cool that just came out last week. Now we still have a few more things to do. During the April timeframe, we have more debugging improvements that we know we need to do the fur.

C

This was just the first release of Blazer webassembly debugging there, of course, a bunch of rough edges and limitations that we're working through right now we're hoping to get a bunch of those improved in the in the previews that are upcoming. We are planning to do broadly pre-compression. I. Think Steve might talk a bit more about this, but this is one of the techniques we're using to try and further reduce the the app size. Was there yeah I think he said yeah, and then we of course need to enable globalization and localization support.

C

So you can use like Residex files to localize your applications, and then we want to enable see the end hosting of your replacer webassembly apps, this one's kind of on the line. If we're going to get this one done for May, but we're hoping to so that at least we have the infrastructure in place that if you want to host your files on a CDN or that we could post the core framework libraries at runtime on a CDN that you can then use that from from your application.

C

Those are the things that are still in the works that will hopefully wrap up in the April timeframe. The.

D

Brightly pre-compression does that use the same stuff, there's the compression middleware that has broadly support. Yes,.

C

The middleware will do pre compression at runtime so like as the requests come in, you can say like except this encoding like. Please give me some broadly. If you have it now, then the middleware will take care of not pre compressing but compressing like doing response compression at runtime. What broadly pre compression is all about is well. If you're, if you have, if you do this little earlier, like I, say you do it as part of your build or as a published up. You can then crank up the settings on broadly to make it do.

C

You know compress a lot more it'll take longer to do the the compression step right.

B

C

Get a much smaller payload, so the idea here is to pre compress the static assets with you know, probably cranked up as high as you can go. That takes a little bit longer, but maybe it's a one-time thing you do is while you're publishing and then shrinks the app size even further I.

B

C

I think Steve will talk more about this and show more details, but that's the general gist of the idea, all right so yeah with that, let's just give it over to Steve and he will show us what these things are all about. Steve. Why? Don't you take it away all.

A

Right I will so let me just start sharing my screen now tell me when you see that you see it all right great, so are we gonna start all right, so I am going to spend the next sort of 30 minutes or so or however long this takes cuz I don't actually have specific timings.

A

So if people want to interrupt me, then they are welcome to do so going through six of the feature areas that we've recently added in blazer, we're simply so I won't be showing you everything in the whole of blazer over certainly I. Think most people on the call are probably seen some of the basics before so I'm, really just going to show you stuff that is pretty new and the first thing that I'm going to show you is some earth related features, authorization and authentication so that you can start securing your webassembly application.

A

So the first thing to show you with that is that we do have some template support for creating a + webassembly app with authentication. So now, if you're using Visual Studio, then when you get to this point in the final new wizard you'll be able to go into change authentication and then you can choose one of these settings, except at the moment you can only choose one of them. There is literally only one off type that we've got support for inside the vs UI, but there are other types that we support as well.

A

The other types that we support. You can only do on the command line. At the moment we are working on adding support for them inside vs later, but for now, I'm going to show you what we can do if we use this individual user account setting. This is going to use SP net core as a back-end server, which hosts all the user accounts in its built identity system.

A

So I could create a new project through this wizard, but to save a bit of time, I've already created a project and I'm going to switch to that because I've already customized it slightly and I'll be able to show you a couple of extra things. So let me just start this up initially, when that comes up, you will see that that looks like a normal blazer webassembly application.

A

You may have seen this project template like a thousand times by now and be kinda bored of demos based on this, but don't worry, I'll show you other things soon. The main thing that's different now is that we've got these links up at the top to register and login. We've also got the ability to automatically make people go and log in if they go to certain pages as well. So let's say that I want to log in.

A

Firstly, that's going to take me off to the S peanut course: server side, identity, login you are, and you can of course customize how that looks and what features it has. It's got a lot of capabilities. You can use it to configure things like external authentication and two factor auth and things like that, but I'm not gonna, do that.

A

Just now, I'm going to log in as a user account that I've registered earlier on when I do that it's gonna, take you back into the webassembly application, and now it knows who I am, as you can see, I've also added a bit of code into my main home page to list all the claims from the user account. I know you probably don't want know what most of those mean, but I'll come back to that in a second.

A

Let's just see the code, that's doing that if I go into this index page here, you'll see that I'm using an authorized view, and that is by default, going to render this markup only if the user is logged in because I didn't specify any other conditions and then I'm simply going to iterate over all the claims that the server is telling me about for this user and display them. So this is what the server is telling. The client is giving us all this information. Some of it is kind of meaningless to humans.

A

It's all internal protocol stuff, but one of them that is worth noticing is this one here so I've configured. My server to supply a list of roles to the client- that's not something that happens by default, because maybe your roles are secret, but if you want to you can make the server send that information to the client and then you can do stuff with it on client if you want to, but when it comes to doing any sort of security decisions, any authorization decisions.

A

The first rule that you always have to remember, of course, is that all real security enforcement happens on the server anything that you do inside your client can be bypassed if the user once and that's true for all client-side technologies. So you really need to do all your actual enforcement on the server. So let's have a go. Let's imagine in this case that this fetch data data, this weather, forecast data I, want to lock it down a little bit.

A

So let's go and have a look at what the authorization rules are by default, or what I've already put on my weather forecast controller on the server. So this is where that data is coming from and you'll see that it's got this authorized attribute on it, which by default means people can see this only if they are logged in, but I can want to lock this down a little bit more I'm gonna say you can only access this data if you are in the admin role as far as the server is concerned.

A

So let's start that back up now and see what effect that has on the application. So when that comes up, which I'm sure will be soon, oh.

A

Yeah there we go right so now, if I go back there, I am in the admin role. Currently so I'm allowed to see this data and it works as you'd expect.

A

But what, if I, wasn't in that role, so I'm gonna log out now and I'm gonna log in as someone else who is not in the admin role, so I'm gonna log in as this other user Bert who's, not an admin, just a regular civilian, and so you can see that we haven't sent the admin role to the client and if I go to the fetch data page. Now, let's see what user experience we get.

A

We get an error message, so that seems like a pretty poor user experience, but let's try and understand what's going on so if I look in the browser's debug console we'll see. The reason why we get in this error is that the server has responded with this 403 not authorized response, which is great okay, because we want the server to perform its actual security checks there on the server. So it's good and right that the server rejects the request, but it's not so great that we showing this error message, the user.

A

It would be better to show a slightly more friendly message. So how can we do that? Well, let's see the code that actually issues this request here inside this fetch data component is down here and you can see it's doing some stuff where it gets an access token and it adds an authorization header to the request, which is how the server knows whether we're really in this admin role or not. But I, don't really want to let the user even see this page at all, if they're not in the right role.

A

So what I'm going to do is I'm going to add an attribute called authorize which by default means you can get here only if you're logged in, but just in the same way as on the server we can set roles equals admin I'm also going to set roles, equals admin on the client now and hopefully our server and clock and client will be collaborating now to understand what an individual user can actually do.

A

So now, if I'm on the client and I'm logged in as Bert and I go to fetch data you'll see instead of an error message and now get this nice access denied message now you might feel that's still not very friendly. If you want to customize that, then of course you can do so- you can go to wherever that message comes from in this case. It's here, so you can see you could just put whatever markup you want in there.

A

Okay, so that's good, but you might be thinking at this point well, given that a user who's, not an admin, can never see anything on this page. Why do we even include this page in the nav menu in the first place shouldn't we just remove this option from the UI altogether and the answer is yeah sure we can absolutely do that. That's actually pretty trivial to do so.

A

I'm gonna go to my nav menu here and I'll find the particular nav link, which is for fetch data there and I'm going to use the authorize view component. Yet again, this is a pretty useful component that you keep on using and again I'm gonna say that you can see this content if you are in the admin role, but only if you're in the admin role. So now, if you're, not that simply won't be rendered on the screen to you.

A

So now, if I, reload and I'm Bert you'll see I, don't get the fetch data link at all anymore. Now, of course, if I'm sneaky I, maybe I can guess what the URL is. So maybe I can still go to fetch there too, even though I'm not in that role, but then I'll get the access denied message, and even if I bypass that on the client, we still know that the sir is going to reject the request anyway. So we've provided a good user experience for well-behaved users and we've still secured things against evil users.

A

So that's pretty much what we want to do. Of course, you're not limited to using rolls. You can also use things like policy or whatever other kind of system you want to use for deciding whether a user is allowed to do a given thing, so that hopefully shows you how we can get the server and the client to understand who our user is and what they can do in to collaborate nicely and that's great, if you're, using guys peanut core in the backend. But what, if you're? Not what?

A

If you are building a pure web assembly application, that's got no asp net core server. Can you do orthe in that case, and what does it even mean like? What are you authenticating against in that case? Well, the answer is you: can you can authenticate against any sort of third-party system? You want and I'm going to show you an example of that right now.

A

So I've got an example: application here that does login with Microsoft, and this was extremely trivial to create because I used the project template which, as I said, you can only get you from the command line. At the moment the project template for doing single organization or with a third party earth service.

A

There are various options you can choose and the only thing that I had to change literally the only thing I've changed since creating this project is putting this gooey din here so I did is I, went to the azure portal and I Reza registered an azure active directory tenant and when I've done that it gave me this gooood, they said. That's your client ID. You can use that if you want applications to be able to log in to this, particularly our Active Directory turned so now. I could not want to keep that right.

A

Star get so I'll start up my application now and then this time when I hit login, because it's set up to log in with Microsoft, is going to display this other UI. And it's going to log me in and it's all integrated into the OS and the browser, so I didn't even have to enter any passwords. It just knows who I am and I'm logged in and now, if I wanted to, I could go to my azure ad tenant and I could start setting things up for individual users.

A

For example, I could start putting users into oops and giving them different roles or claims, and then that sort of thing would start showing up in my client-side application and if that information would also be embedded in the authentication tokens for when I send them off to make requests to other external api's. So that, hopefully shows you how all this stuff can wire up.

A

So that's that that's all I'm gonna tell you about was just now I'm going to move on now to the next feature area, which is progressive web applications, something that people have been waiting for for a long time and people have got a lot of uses for and I know.

A

Most people probably know what that is, but just for anyone who isn't completely up to speed on that a progressive web app is a way of building a web application so that your users can use it either as a web application or as something more like a native app and when I say more like a native app I mean it should work offline, they should be able to install it into their operating system.

A

So it's on their Start menu or their dark or home screen, whatever kind of device they have, and then it should be fast and responsive in the sense that it always loads instantly, regardless of network conditions, and also you can do things even when the user is not actively using the application in the background, such as receiving post notifications from a back-end server. So that's the kind of things that a PWA can do and we now have support for that in place webassembly.

A

So let me show you that, firstly, how you would get started if you want to the way we've set this up, as you can. Probably guess, is yet another project template option. So if you are creating a blazer webassembly application now, then you will see that we've got this lovely progressive web application option down there and you can choose that and that will set up something that works offline and has got the ability to be installed so again, I'm not going to use the project template.

A

I'm gonna show you a project that I've already created, because it's a little more interesting and it's got some more features in it. So I've made this a little application called currency, converter and I will show you some code in it. But let me just start running it first, so that you can see what it does and when that first comes up, you'll see it kind of looks kind of ugly on a screen this size, because it's actually designed to work on a mobile device. So I expect it to be rendered on scream.

A

That shaped a little bit more like this and it's a simple application. It just lets you convert amounts between different currencies. So, let's say, for example, I've got 10 British pounds and I want to know what that is in US dollars or euros or something else. Then I can just type that in and it will show up on the screen or maybe I've got a thousand euros. I can see what that is in other currencies. Okay, and you can see it's automatically fetching exchange rate during the background.

A

It gets that from an online service provided by the European Central Bank, which is really nice and easy to use and I think this is a useful kind of application and I would like to have this application installed on my phone and available all the time offline. So, let's think about how this works a little bit, let's go and have a look at some code.

A

So it's a pretty simple and standard Blaise webassembly application I haven't actually got a Rooter in this application because there's only one screen so I've just put the main part of my application logic directly into this app dot. Razr file and you can see I've got a little bit of some custom components such as this data store status, data store status, display cool mint, that's the thing that tells you when we last fetch the exchange rate.

A

Data I've also got this code here, which is going to iterate over all the exchange rates and it's going to print out the entered value in each of the different currencies and then below that I've got the little keypad that slides up so that it's nice and touch friendly.

A

When you want to type in numbers and below that, I've got this update notice, which you haven't seen yet, but we'll get to that in a little bit and then underneath that I've got a bunch of different callbacks and event handlers to listen to update the UI when we finish loading data to respond when the user clicks on one of the currencies and reset all the state things like that, we've got some event handlers for when you type different keys on the keypad and when you press different special keys and so on.

A

I've got some logic down here. That's going to format the number that you've entered in different currency values and we're doing that in a culture sensitive way. I'll talk more about that later and then finally, I've got a bit of J's Interop. That makes sure that whatever you tapped on gets scrolled interview. If your screen is not big enough to so it's 90 something lines.

A

That's that's mostly. All there is to this application. There are some other files, but this is the biggest one in there. So that's the main bit of complexity that you've seen now, but I want this to work. Offline, okay and I've, taught I've told you that I've created this using the PWA template. So, let's see does it work offline we can find out by changing the browser so that it simulates being offline and when I hit reload. Let's see what happens, what happens? Is we get an error message? So the answer is no.

A

It clearly does not work offline, which is disappointing. Considering that I've been telling you that PWS will work offline, so what's going on well, what's going on is that with this project template by default offline support is not enabled in development mode. It's only enabled when your application is published, and there is a good reason for that. The good reason is that, when you're doing an offline first PWA every time, you make a change to the application. The change isn't visible instantly. The next time you reload it gets applied through a background process.

A

I'll show you more about that later, but that would be super annoying in development. If every time you made a change, you couldn't just reload and see it, you'd have to go through an annoying wait for it to update it in the background thing. So that's why we've only enabled the offline in publish mode but I can quite easily show you what this is like when it's published, because I've deployed it to this little server. Here, it's a private server. So if you go to this URL, it won't actually work for you.

A

It's just on my local network, but I can get to it from here, and so when I go to this you'll see my application shows up ok and I'm online right now and if I change to be offline and I hit reload then do I get an error message. No I do not my application just shows up like before, and it works like before. So it's still able to run all my dotnet code in the same way as before and I've got my fully offline capable application.

A

Ok, so that's great now another thing that we can do with PWS besides working offline is install them into the operating system and if you're on a desktop, you may notice this little plus bone. That shows up in the top right, which is prompting me to install the currency converter app, so I'm going to hit the install button and what we'll see that now shows up in its own window and it still works like before as you'd expect.

A

But the nice thing for the user now is that when they look on their Start menu, when the Start menu refreshes, let's try again, then you will see the application is installed there and I can just start it up like any other application from my Start menu, and it will appear on the operating system. Taskbar thing there and as you as you know, already it works offline and it always loads instantly.

A

So it behaves very much like a native application, but to show you something slightly more interesting, still I'll show you the user experience when you are on a mobile. So if this works, I am going to make, my phone screen show up on the display just now. So, let's see if this works there we go. It does alright. So I'm on an iPhone here and I have not got this currency converter application installed yet, but I have got a bookmark so that just so that I can get to the site quickly.

A

So I'm gonna go to this same application, hosted on the same server as before, and I want to add it to my home screen. So I'm gonna press the little share icon at the bottom and then I'll scroll down and you'll, see the Add to Home screen option and when I tap. That asks me what I want to call it and I'll just give it the default name.

A

And so now you can see that I've got the currencies app here on my phone home screen and when I tap on that it opens in a nice full screen where there's no browser Chrome. But it's the same application. It's still running my dotnet code and it's all working correctly and it will work. Offline I can't actually go into flight mode and show you if I do that, you won't be able to see the phone it won't connect to the PC.

A

If I do that, but you can just trust me that it does work okay right. So that's how we can make our PWA and get it to show up in their phone and be available offline. But what about deploying updates? What happens when we want to change the application? What's the user experience or what actually happens so, let's say I'm going to do an update where it adds some new features to my application and the feature I'm going to add is support for some more currencies. You can see at the moment.

A

I only support these four currencies but I'm going to uncomment this code, which is the next version of my application, which supports nine occurrences in 12, which is very exciting and I'm sure my users will be delighted so I want to deploy that now. Remember, I have to do a publish in order to actually see this working in my offline, enabled phone application, so I'm going to run dotnet, publish that and that will not only publish it locally, but it will also add it to my local web server.

A

So it's deploying it in effect and when it's finished doing that, which is taking longer than usual, I will be able to open that on my phone and then we will see what happens it's much slower than usual. Today, okay,.

B

A

It's done it right so now I'm going to open it up and what we see is that initially we're still running the older version of the application, because offline PWS are not very much like websites they're more like native mobile apps, in the sense that you don't always just see the latest thing that's been deployed.

A

You see the latest thing that's been installed, so I installed this one that supports four currencies and that's what's available now, but I've also put in a little bit of code to prompt the user to tell them when an update is available and I could auto, install if I want to, but just to show you I can have the user choose when to install it.

A

So I've got this update button and when I press on update it will now get the version that has nine currencies and now I can start converting stuff with rupees or Swedish kronor or whatever else I want. Okay. So that's how you can roll out some updates on your application. Ok right, then that is I! Think enough for PWS. Let's move on and see some new features this next. One hasn't actually shipped yet so this will probably be the first time that any of you will have seen this demo. What about localization and globalization?

A

What about making your application work really well for people who speak different languages and have different preferences about how stuff should be formatted and passed. So, let's see how my application behaves at the moment, I'm just going to start it back up locally again in my browser, build errors. What up? Oh yeah? Okay, so actually I broke my SDK locally, which is why that happened, but it doesn't matter because I'm just going to show you this from the deployed application all right.

A

So, let's take that update and right first thing to notice is see how the date format is formatted in the British style with date month year and not, for example, the crazy American format, month/day/year also notice how the text is written in English and when I start typing numbers in there formatted in an English style with commas and dots like that. Okay, that's what you'd expect if you were on an English language website in the UK, but what? If you weren't? What?

A

If your browser was in a different language, well, let's find out what happens now so I'm going to change my browser language from English, United Kingdom to French, okay, that's what I just don't have set that preference there. Of course, that would be the default if my operating system was French and then I'm going to hit reload and we'll see what we get.

A

You now see that the text has switched into French, okay and notice also that the numbers when they get displayed are displayed in a French style with spaces to separate the thousands and a comma and the other texts have been updated and so on and similarly I'm going to set my application into Spanish now and I'll hit reload again and now I'm, seeing the text in Spanish and the numbers are going to come up in a Spanish style with the dots in between thousands okay. So how on earth does all that work?

A

Well, there are two parts to this. The first part: let's talk about globalization, okay, so that's to do with how we are going to be able to deal with things like formatting and pausing. So how are the date formats and the number formats working out in the way that we want? Well? This is a feature that's built into the underlying No or webassembly runtime, where it will automatically set the thread culture of your application to be whatever matches the current browser language.

A

Now, of course, you can change that if you want to, you can just write some code to change the thread current culture, but if you don't, then, by default it will match the browser language, and so, when you do number formatting using something like.

A

Let's go to this using a format: expression like this numeric with two decimal places that will automatically respect the current culture settings same when you're doing things like formatting dates. We've also made sure that all of the input components like the input text and input number of things like that they all respect the current culture as well. Okay, the other aspect to this is the localization so getting strings to appear in different languages. However, we done that well, the good news is.

A

We now support this pretty much out by default out of the box, you can just use whatever kind of localization system you want. That's based on satellite assemblies and we'll load device that allows assemblies, for example, in this case, I've added a reference to Microsoft extensions localization, which is the same localization package that you would use with server-side asp net core. Simply by adding that package I can use the same localization features. The only other thing that you have to do is inside your di container.

A

You'll want to call add localization on this occasion, I've chosen to put my resource files in a subfolder, but you don't have to, and then you don't have to specify that option. Okay, now, once you've done that you can use the I string like localizer interface in your UI, for example.

A

This is my data store status, display the thing that says when the data was lustre plated and you can see I'm, injecting a nice string localizer for the data store status display and now I've got the localizer I can display whatever text I want and if I haven't defined a translation that matches the user's culture, then it will just display this text, so I haven't actually got any English resource files. It's just displaying this text by default, but I have to find some resource files for some of the languages.

A

For example, here's my resource file for a French, and you can see that it Maps that string there to updated to this string in French, which I won't pretend to pronounce, and similarly I've got a spent Spanish one right here as well. Now I've chosen to group my resource data by the different UI components, so you can see I've got one for the keypad and one for data stored. It status display, but it's entirely up to you.

A

You can put everything into one file if you want to you can use whatever current regularity you like that string. That file will be selected according to whatever generic type you pass to the I string, localizer, okay, so that is how we are able to translate text very conveniently in two different languages and the runtime is smart enough to only load the satellite assemblies that are applicable to the user's current culture.

A

So if you've got if you're using fallback, for example, let's say that you've defined a resource file for Portuguese, but not for Brazilian Portuguese, then, if a Brazilian Portuguese user comes along, it will fall back on the Portuguese one. If you that, if you've got resilient Portuguese, then it would use that one and if you had got some other one altogether like French, then since that's not part of the fallback gene, it wouldn't even load that one at all.

A

So it does the most efficient thing it can, while still supporting the fallback rules that are standard to dotnet. Okay. So that's enough about that. Let's talk now about configuration. This is going to be a quick one. We didn't have any support for external config files and blaze a web sembly until very recently, but if you look now notice that I've got this app settings JSON file inside my web root folder and if we look in that you'll see, I can do things like define, feed, URLs and override them in different environments.

A

So I've got a development file here and I've got a standard one which would be used in production and I can set of whatever kind of flags or URLs or connection strings or whatever thing you want, whatever makes sense within your application and then you can consume that elsewhere in your application. So to show you how this affects data feed gets in this is my currency data store.

A

This is kind of like my business logic class for the application and using the dependency injection system I'm, injecting an I configuration and then I can just use the I configuration object to get data out of the config file, like that, so the point of putting stuff in a config file as opposed to hard-code in it it's kind of too many reasons.

A

One is it lets you build a single build of your application that you can then deploy to multiple environments and have it behave in different ways with different settings just by defining different settings files and that's great if you've got say, DevOps people who want you to give them a single build of the application and then they'll change the configuration. However, they want they wouldn't be able to do that if you just harder to conflict straight into the application.

A

The other thing, that's most that's very commonly useful, is simply to have different settings in different environments. It's very common to have different URLs for back-end data services in different environments, and this just now works trivially. Again, we've done some work to make it efficient, so at runtime it will only load the config files that are applicable to the actual environment that your application is running again all right. Moving on again.

C

There was a question in the chat that I was wondering if you could help out with they were asking about the localization work that you did. You.

B

C

Previously, they wanted to know if the satellite assemblies loaded were loaded dynamically in real time when needed, or were they somehow loaded upfront like how does the the loading of those resources actually happen? Yeah.

A

Good question all right, so one of the awkward things that we have to deal with is that in dotnet, historically and up to the current day, dynamically assembly loading is synchronous, so the runtime when it sees it, needs to load another assembly. Just does it and it just pauses your application until it's done that that's completely impossible on the web, because when we need to fetch stuff over the network, you can't do that. Synchronously, you, the browser, will not let you do that.

A

So the satellite assemblies do have to be loaded upfront, but we've done something to make it quite easy for you what we've done it is by default. We will synchronously load the satellite assemblies that are relevant to the users culture before we even call the application entry point.

A

So for most people that's going to be sufficient, but if you need to do something custom, where you change the culture as part of your startup logic, for example, you're going to be looking at something in local storage or a URL, or something just to decide what culture to use. Then, when you call, let's find the actual method, so I can show you when you actually start your application using run a sync. If the culture has been changed by that point, then we will dynamically load.

A

Whatever new set of satellite assemblies are needed before your application really starts up. So we've hopefully taken away the pain of figuring out how how the assembly loading works. If your logic for setting the culture is in your program, men, then everything's just gonna work in the way you want. So hopefully that answered that.

C

As long as it's up front, if people turn to try to have like some sort of UI picker within their application, that would be they would need to then handle that.

A

If you've changing the current the culture dynamically, it doesn't make sense not to reload the page, because all kinds of things in darknet will cache the current culture and they won't recognize the fact that you've changed there. So you will want to do a reload, okay right there. Debugging don't mention this before.

A

Of course, this is something that people have been crying out for for such a long time, we've had support for debugging inside the browser for a long time, but you had to go through a very complicated process in order to connect to the debugger inside the browser and people have said. Why is it so hard? Why can't I just press the f5 key inside my IDI? Why can't you just make it all light up for me and the answer to that has always been well.

A

It's a lot of engineering work to get this stuff to happen, but the great news is, we have finally done it. So I'm gonna debug, my application now pressing f5 and nothing else. So what am I gonna do. Let's say: I want to put a breakpoint in my application here when the user selects a currency, okay and I'm gonna press the f5 key just now.

A

I could click the play button if it was on the screen, but it isn't so I've, just pressed the f5 key and it's rebuilt the application, and it's now launching a browser for me and it's going to connect visual Studios debugger to the dotnet application. That's running inside the browser on webassembly. So when that loads up, which hopefully will not take long, oh of course I broke, did I break the build earlier.

A

Yeah I did I broke it. Oh you didn't I Arthur super annoying I might not be able to show you. You might just have to trust me that if I ever have a SDA, then that build would have passed, I, don't know I'm just going to try one thing: actually: I'm gonna kill Visual Studio and restart err.

A

D

B

A

But it's for a good cause. I was hacking at the SDK earlier in order to fix a publishing issue. So that's why I've done that.

A

See if I can actually get this thing to build and run.

C

Whilst he's hacking this, if people have other questions.

C

See those debug work in code-behind classes? Yes, yes, it does. So when you're doing a blazer web assembly debugging, you can debug any of the c-sharp code. Your razor code, while you're in the debugger we'll say that there are there are some rough edges like it's, not there's, there's some gaps between the current experience and the the full dotnet debugger experience. The way this works is actually kind of interesting.

C

The debugging will actually happen through Visual Studio script, debugging infrastructure and what we do is we put a debugging proxy that speaks the browser debugging protocol in between Visual Studio and the browser that augments the protocol with dotnet specific stuff. So it's actually all happening through like the stuff that you normally used to do: JavaScript debugging, but making it look as if it's doing net debugging, which enables a bunch of interesting things.

C

It means you can simultaneously debug your webassembly net code, your server dotnet code and even JavaScript code that you may be caught doing JavaScript Interop to call into.

A

Yeah, okay, good filling in that was so anyway,.

B

A

Noticed that the the breakpoint is a nice solid red blob, which is what you want to see. It means that it's connected and when I click on particular currency you'll see it's hit.

A

My breakpoint now and I can even do some cool things like I can hover over this and go and explore and see what value had just been picked by the user, so I'm not promising that every aspect of debugging works correctly right now, because it does not, but lots of things do work and we really want feedback as much as possible everything every single detail that you see that isn't right, however minor.

A

Please file an issue because we want to know about the full range of things that you're not satisfied with, so that we can prioritize and get the best experience by the time. This goes in may alright. Last thing: AB, sighs, okay, this is gonna, be quick, so we've been doing a lot of work to try and bring the default size for a place application down. Obviously, it's a challenge for a web assembly as a technology because we're bringing an entire dotnet runtime into the browser.

A

So you know if we weren't careful that could be a hundred megabytes or something it could be terrible. So we've done a lot of work right since the beginning of the project to try and keep the size down. If you go back in time by about a year, then a blazer webassembly up at that time would have been about two point: three two point: three five megabytes.

A

Now, of course it's all cached, so I'm only talking about the very first hit for a user who has got a completely clean cache and has never been to your site before they would have been paying about two point: three megabytes to download. Before now we did a bunch of work and in the preview to release that we shipped about I, don't know a month or so ago. Six weeks, I, don't know, we've managed to bring that down to about 1.8 1.9 megabytes, and we achieve that by making the linker much smarter.

A

So it's able to strip out more code and also by making some improvements to compression. But we've still got one bullet left in the gun that we are going to use to make things a bit smaller for the may release. So by the time this thing, ships in its next preview for release, we expect the default app size to come down to about one point: 5 mega bytes and that will be achieved using the very aggressive, broadly pre compression that Dan mentioned a billion now.

A

I can't show you that for real, because we haven't actually implemented it yet, but just to prove that this nuts, this is not just some crazy fantasy that can never be delivered on in the real world. I'm going to actually compress my application with bratli right now and show you what that would be so I've made. This old-school dos batch file here called something doc command, and that is simulating the same thing that we're going to put into the SDK in the next release.

A

So it's going to perform an offline bratli compression with the best possible compression ratio which takes a while, and this is why we need to do it. There's pre compression not at run time, so it will only. You will only pay the cost during publishing. You have to wait an extra 10 seconds or something so that's happened now and my application should be ready to serve so I'm, going to go to this location now and I'm going to make it actually load properly.

A

So I'm gonna I've got various service workers and stuff that are interfering with things right now, but I'm going to disable the cache and load that properly. So that's a completely fresh load there without any cash today and you'll, see that the app size is 1.6 megabytes, so you might say: well, that's not what you promised is it you said 1.5 well, the thing is that my application is not an empty application.

A

I've got a bunch of other stuff in, for example, all these flag images and various bits of CSS and stuff, and that's pushed it up to 1.6. But if I'm really strict it down to the basics, I could get it to 1.5, and so that's what we expect to be in your default project. Alright, so that is it. That's all. I've got time for but I'll hand back to other people and we can talk about any other stuff. Someone.

C

Just asked about the decompression cost when you do that like when you crank.

A

C

Up to 11 on the the compression, what does that then mean for the the client yeah.

A

Great question: so these kinds of compression technologies that are supported in browsers are very, very strongly optimized for fast decompression speed. So all the cost is incurred during the compression time, not during decompression. So that's what the compressor is doing is finding a representation that is both small and extremely cheap to decompress. So you won't notice any difference at all or I, don't know. Maybe if you had like an atomic clock or something you could notice a difference, but you know a normal human being will not tell the difference between on compress.

A

In fact, it's probably going to be quicker. Simply obviously they'll be quicker in terms of the download time, but it's probably less work on the CPU as well, because the amount of no I can't justify that claim forget, let's just say.

C

Imperceptibly slightly different, maybe but like not something that you would even really notice. Yeah, that's cool great to see. I was just gonna wrap up to give the people a quick view of what we're doing after the main release, because I know they've been a bunch of questions about this, so blades like I, said laser webassembly will move to be part of dotnet 5.

C

After may, like you, won't find blades or webassembly bits in any of the dotnet 5 previews yet, but once we're done with may will then insert and you'll start seeing blaze or webassembly there as well. These are the main themes that we're looking at for dotnet 5, a cross blazer, not just for blazer web assembly.

C

We have a bunch of component model improvements that we're planning to do to Bill help build out over great component ecosystem, so stuff, like support for required parameters, I a sink disposable enabling you to restrict parent and child component relationships stuff, like that, a bunch of niceties to make writing components better and a more productive, less JavaScript, more c-sharp. There's a bunch of cases today in Blaser, where you have to drop down to JavaScript Interop, to get your scenario done. These are simple things like setting the UI focus or drag and drop file uploads.

C

We want to make these scenarios out-of-the-box of c-sharp experience as much as possible, so we've got a bunch of little features in that space that we want to do. Many of the questions were about web assembly fundamentals, so a ot compilation that is not in scope form a. We don't expect to have that from a so. The runtime is still the aisle interpreter based runtime, but we are planning to look at that in the dotnet 5 timeframe.

C

The expectation there is probably that the first turn of the crank will be the wheel, a ot more of the of the framework libraries for you like the hot paths and then maybe post dot f5. We actually give you the full tool chain, so you can decide what you want to äôt details still to be to be worked out.

C

The other webassembly fundamentals are support for threading browsers, have been enabling support for threading, and we actually have some existing implementations internally of threading support blade on net on web assembly not coming in May, but something we hope to enable broadly in the.net 5 timeframe and then there's just a unification work with the.net 5 effort like the we want to move the the core framework libraries that you use for blazer web assembly to be the same ones that are used by all of dotnet 5. That's part of that whole one dotnet vision.

C

If you've been following the dotnet 5 effort, there are a bunch of functionality, gaps that we know we want to look at hot reload is one of these areas, or at least having a really good fast of inner loop. We're looking at that space people were asking about like CSS isolation, there's no out-of-the-box story for CSS isolation in May, we're gonna, look at it in f5. We don't know if we'll actually be able to deliver something there yet, but it is on our backlog to at least investigate.

C

We know: we've heard a lot of feedback about that. As well as lazy loading of different areas, that's also non scope or form a looking at in.net five and then, of course, we care about a sure. We want to make sure when you go to deploy your application.

C

You have a really great experience hosting and on the cloud, so we're doing a bunch of work to investigate making sure we have a great story with like telemetry and diagnostics like integration with app insights, we want to have a really great static site hosting story on Azure, so you can easily publish your blazer webassembly as a static, static site and then just making sure all the normal as your SDK libraries work great with with blazer webassembly, whether it's storage or event grade and so forth.

C

So that's looking forward a little bit, some things to look look forward to and with that I think we're done. John I.

D

Think we hit a record today. Actually we had what 300 um 325 people on concurrently like rival, rivals what we get at some like big conference, virtual conferences so and tons of.

B

D

Feedback on the demos and everything people are quite excited. One question that came out of several times is: people are hoping Steve that you can publish your samples because yeah.

A

Yeah the currency, app I will definitely publish that I just need to sort of slightly disentangle it from internal builds of things, but yeah, then I will publish it well.

D

There's a question on the webview desktop hosting model. If there's anything new on that, you know cuz you're just sitting around not doing anything, we wondered if you were.

C

I think I think they're referring to Steve's web window experiment. We talked about that at an earlier stand-up. This was a prototype of trying to do like an electron light like what, if you didn't need to bring the whole chromium shell with your app and what, if you didn't, bring node and you just use dotnet core, could you make your app smaller, more memory efficient and stay put out a really cool proof-of-concept that showed.

B

C

You could build native stop apps with a blazer and web web UI tech that are you know very small to download is particularly if you take advantage of like a framework, dependent dependent deployment and do much better in terms of how much memory they use. There's a lots of conversations happening internally right now on the dotnet team. Broadly about what do we? What do we think about UI and cross-platform UI in general, lots of things being discussed?

C

There's lots of interesting experiments out there in addition to web window, like the mobile blazer bindings for doing like full native UI, nothing concrete to say or announce yet like we're, still experimenting and discussing and planning, but hopefully in the soon we'll have more to say about what we hope to do in terms of product planning in that space.

D

Cool, let me see, I had a question out of all the stuff you showed I mean this was webassembly focused, do any of the things that feature or which of the features have any kind of impact on server-side blazer like, for instance, localization or you know like out of those server or so I guess PWA is kind of less applicable as it's not static files, but yeah.

A

So, besides bwa, so we had, we had off now that we already have a set of author naval templates for laser server. In fact, we've got even more options that localization globalisation, configuration and debugging. All of those things are just inherent to dotnet core. So when it's running on the server we just that old, it happens for free. As far as the blazer team is concerned, we did nothing for any of that. Just that's there already and size is not not applicable as a similar concept.

A

So so, basically, the good news is that all the stuff that you want on the server is already there.

D

C

Servers shipped with donna core 3.1, like out the whole end-to-end experience was already is already in the box, with the dotnet course read that one release right now all the work we're doing is just about enabling glaser, webassembly functionality and features on top of that three one foundation. Dotnet 5 is the next opportunity we have to really read.

C

You know functionality and improvements across the the stack, including the component model, because the component model ships in dacor 3-1 we're using the same component model for laser webassembly that we use with blazer server. It's all in the same foundation, all.

D

Right gosh I mean there been some questions, a lots been discussed, but I think you folks have answered a good amount of stuff on this. I haven't seen any other huge. You know standout questions to ask anything discussion wise. That came up in the chat that you want to call out like questions answered or anything I.

C

Mean the talk to most of the things around done in five, so äôt CSS isolation, lazy loading and we know those are hot topics. Those will become we'll be looking at those, at least in dotnet five timeframe. Those aren't coming in May, there's only so much so much time in the day. Only so much we can for Steve to like code before you know he breaks and.

C

It's not even actually only our team, like we have the whole.

B

C

Team, the tooling folks that aid with all this now, but just thank you to all the people that are trying out the Blazer webassembly releases, I've, been doing my best to keep up with all the comments that get posted on the announcement. Blog post as people jump on and try out the new bits and tell us when things aren't working and it's great to get that level of community support so that we can make the product as best as we can make. It.

D

Awesome well right, Damian anything else.

D

Awesome: okay, all right greatest, show ever dramatic, zoom outs and all that thanks. Everybody thanks. Everyone.

C

D

Right now, I offered ly switch to the thanks.

A

D

Wait wait, wait, I, get a mute.