.Net Foundation .Net Community Standups, 3 Dec 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ASP.NET Community Standup - Dec 3rd, 2019 - Blazor Update with Daniel Roth

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-standup-2019-12-03

A

All right, I think we're live. This is so strange for me being in the studio in the flash.

B

He's not a hologram he's, not a hologram.

A

B

A

John this is Dan Roth. This is very exciting. Welcome to the asp net community stand up, so I'm kinda thrown often like normally I just this.

B

Is what it's like being on the other side? We don t like right here and.

C

Right here in the room, really cool.

A

C

A

Day, we've got the asp net core 3 1 release dawn.

B

Net core 3-1, all of it a spec horse, winforms WPF, big all in.

A

There it has shipped today so that's big and then we've got blazer updates from you. There's.

B

Players are updates.

A

Yeah and also some crazy new stuff yeah.

B

That one's might work yeah, definitely on the more experimental side of things that were working on with blazer will hold a bowl in some of these experiments. Very cool.

A

So I want to get right to that so I'm going to hop over to my alright. So, let's see, if I can do this right, we've got a bunch of community links, so hooray, alright. So starting off! Congratulations to the carter team they're on their five-o release, so Karger is pretty cool. It's a it's a very kind of like lightweight framework. It's a it's built with like thin extension methods. It's inspired like by semana Sinatra style.

A

So like this routing style, and then they do have some other things like, for instance, I've got open API built in by default, so yeah pretty cool, so very kind of like lightweight you know. Things are defined directly to your routes, isn't Carter.

B

Like was that there's there was a there's like the son of somebody, who's.

A

Like so, it's all spelled.

B

Out so there's.

A

B

Ology involved in this Nancy.

A

That's right: there was Nancy.

B

And then Carter Frank Sinatra had a daughter called Nancy. So that's what that came from and then Sean Carter, so I took Carter. Okay, it's.

A

All very complex he.

B

Oh, oh, oh whoa, yes, Daisy declares he's the new Sinatra. His real name is Shawn Carter, so Carter its. That is deep. Yes for found, so there you go. We are getting a little well complain about some echo on the mic. I, don't know! If there's anything we can, we can do about that. We can look technical for a minute, a little some knobs and maybe I'll turn this one a little bit away from.

A

All right, moving on so, along with this kind of very lightweight style, is.

B

This guy, this.

A

Is this guy David Fowler yeah.

B

A

He has been looking at building, you know very, like you know, so if part of this was based on some of these things, where they compare different styles of like I, think this came from what was it called I?

A

Don't know, it was something where I was showing a bunch of different languages, doing similar things and the c-sharp one was pretty verbose and he was like hey. How can we get this smaller? So this is. This is a look at some.

B

Of them, this is about winning with fewer lines of code: okay, okay, okay, so the.

A

Idea, but the idea, what do you wanted to do is build everything on the primitives like this is all you know built on top of you know the asp net core stuff. It's it's not trying to be too magic there. So here you see, you know mapping again. So this is an entire, like you know, returning hello world from from around and then he's also got a SP network controller. So do you know just looking at how to make it as lightweight as possible, so.

B

A spec or put on a diet like yes, Celinda, not not from a runtime perspective, I assume, because a spec core is already pretty lean. There's runtime behavior, but just in terms of the amount of ceremony you have to do to get an app up and going right. Okay, so you don't say you know the whole.

A

Program and the startup, and all that it's really kind of making it as self-contained and lightweight so I, always love data experiments. Let's say in your mind,.

B

Mine I kissed is is the problem. You owe your numbers you're. My excited.

A

I'm Mike number two coming to.

A

B

A

B

A

I too quiet or too they.

B

Saying that you think you're, they think your mic is off. They.

A

Think I am off we'll see, I see, I, see myself, maybe in there.

B

Yeah those the numbers don't lie, we have, we have it on the screen, all right, well, I.

A

Don't know there's.

B

A motion to just continue on, despite that.

A

Despite the sound issues, hot likes it so we're going with it all right: okay, I, don't know it's. What do you see? People say the exact opposite, like one person's like yeah, totally works and someone else's like this is all I.

B

Think this has to do with the whole audio sensitivity thing like some.

A

People you have to have the best sound.

B

System at home, every little nuance will drive certain people nuts, whereas me like, as long as I, can hear it I'm, okay, yeah yeah.

A

All right, let's keep going okay, so integration test, so here George, is writing about integration tests with asp net core API. So this is kind of a pair of posts here. This is kind of more of an introductory level and he's just talking about what is it and you know how to cook it up with X unit so explaining what it is explaining in the test class- and then here he's talking about going through and creating a test using web application. Factory nice.

B

A

Would use yeah there you go so just kind of a basic. You know hello world style, so this pairs nicely with another post we've got from a frequent contributor. Andrew luck, so andrew is talking about some more advanced integration test stuff, so I like how the he they set each other up here. So here he's talking about updating your application to dotnet core 3. So this is a little more complex because you've got you've got some changes going on due to the Jenner generic host infrastructure, so some things you've got to do so.

A

Andrew I'm not going to spend a whole lot of time here. I want to give you as much as possible, but he does talk about the steps he need to do to update from a 2 X 2, a 3 Oh project, so specific steps and explaining how he how he got through those four.

B

People doing just general migration work, there is also migration. Doc's is da in the on the website, there's a whole section on migrating, and we have always a topic about migrating from whatever the latest version is to the next version. So.

A

B

A 2 to dis, rio, doc and a 302 3 1 doc that yet also reference and.

A

Andrew has been going through and referencing those and then sometimes he'll dig into specific other kind of questions or like going deeper into things. Little more detail, you're.

B

Right, those are very.

A

Helpful so skipping way to the end, I'll just kind of summarize what he brings in in here. Talking about you know some of the changes you need to make like, for instance, differences in constructors and stuff I think this is something where, if you're updating like you said, you need to go through those migration steps, if you're just doing and creating a new one, it's nice. So that's as simple as this first post that I called it yeah.

B

A

Alright, my friend he's great blogger for a long time here, he's talking about localization and asp net core razor pages. This is a beginning of a series, so here he's talking about kind of the basic set up for localization, declaring the different cultures and stuff I can.

B

See he localized already his spelling of localization I.

A

Know right now, all right, that's correct, localization, yeah! So here's you know talking about setting up like request, culture and stuff like that. Now this is the beginning of the series, because is when we jump down to the end he's he's saying like hey, you know, you will see that we do localize some things like, for instance, days and months, are automatically translated. However, they're not actually localizing static content. So that's the next in the series. Sorry.

B

I like how he ends with the cliff mmm Part.

A

B yeah, the sequel yep all right, so this is an speaking of series here. This is a series on creating a blog, and this is you know, creating a blog using is peanut core. All the latest stuff, this one looking at markdown, so I was hoping, he'd use, mark, dig and sure enough. That's a you know, really nice NuGet package for for markdown support.

A

So here it kind of goes through and just you know, does the setup for converting the markdown to HTML and showing you how that works so mostly pointing this out, because I think it's it's cool! That here is, you know, beginning a series and building out the entire blog, so nice yep or.

C

You could do dotnet new orchard core there. You could.

C

Every one's got to.

B

Cut their teeth, building their own blog.

A

In this case, the blog is like a nobody wants to make a food. You know like a food project.

B

A

Like this is a nice, you know, example.

B

It exercises a lot of parts of the stack how.

A

You doing I would recommend like that. That's a nice use case, but for a real application, yeah Richard Cory. We should get Sebastian back. You.

B

A

Trick core is like shaping up: it's ready for prime time I. Think.

B

He had a good talk at dotnet comp. If you haven't checked it out, yeah yeah see what he said: they're cool.

A

He actually helped me recently. I was doing a twitch stream and he helped me with some of the stuff for doing a headless, CMS yeah.

B

Backing an advocate yeah, which of course got some good headless features, cool.

A

All right so now we got some fun Blazers, so yeah, so Aaron Powell busted out with a crazy thing here, implementing search using webassembly, yeah.

B

I seen that in that I think he showed me this at ignite. This was cool. Go ahead, go ahead.

A

Well, so, I don't think that this was something that Steve Sanderson pointed out and I was like wow. This is neat I. Think if I remember right, he actually even includes this one. We include some f-sharp, if not I think he was also like. I saw another tweet on something with that at one point, but yeah so hooking up lysine, which we have sharp where's.

C

A

C

Oh, look at that so.

A

Here he's doing some f-sharp with laser I'll.

B

Just die L at the end of the day, so that's fine yeah. So if I remember this right, this is this is a static site. It's a blazer webassembly, app okay, but he uses leucine net to implement search functionality. Client-Side in the browser, I think even like when he first said that he built the index like in the adder.

A

B

Using yeah using the app- and we talked in a little bit about potentially pre building, that was like a builds yeah but still like having a static site with full search capabilities using loosing done. It was pretty pretty cool idea. Yeah.

A

So long in-depth pose very interesting grabbing a cup of coffee, okay, Jonathan Carter. This is just kind of neat as a web dev. This is a useful feature. So this is a browser preview extension for BS code- and the thing he was pointing out here is that has support for BS online, including live share. So in you can in your vs code you basically get a browser preview and that that works for stuff, like if you're doing, reactive or whatever, and you can see your your preview in the browser. That's.

B

A

All right, another Blaser thing I'd meant to group these together and they've got about order apparently bradley wells talking about blazer, HTTP, client factory and web api. Another series here so here this is the beginning of a series here he's got. The idea is this is a server-side blazer application and then he is using identity, server and web api on the backend. So his back-end application is calling into calling into that other application.

A

So he's talking about using HTTP client factory to do that so yeah, very nice yeah all right, I'm kind of rushing a bit because I want to make sure to give you enough time.

A

Yes, I think I already showed that okay cool, so Chris sainty talking about custom input components for blazer using input base. So this is something that I actually I was talking to you beforehand. Yeah.

B

A

This was something that had changed I'm, not even sure when exactly this changed. It was one of those things where it's like yeah I, know, blazer and then I started looking at something as I go I'm a little out of date here on some of the stuff. So so you you have support in the Box in an edit form for input, tags text, area, input select and but then, if you want to create your own input component, you can use that base to do that. Yeah, so yeah.

A

So in here he talks about, like you know, if you've got things like a like a real-world problem of having kind of verbose controls and control groups, you can make something that you know, for instance, can custom input component to group things together. Yeah.

B

How to plug into the validation system those components provide yeah yeah.

A

So then the whole form kind of works together and I think that's that's a neat example of the components you know doing more than just kind of simple HTML. It really starts to build up a more advanced system. So speaking of advanced components, this was when you just pointed out to me. I eated it might forgotten to include it. The links are components.

C

Think about the infra, district's components.

A

So this is the ignite UI for a blazer preview, so yeah O'brien's.

B

A

B

And for just six has some blues or UI components to try out already.

A

Nice to see him seeing thar it's advanced like live grid and stuff, so I think this is really neat to see. Once you give once you provide like a really nice component model, then seeing you know this support for like vendors building the so I can build my own components. That's neat or I. Can shell out a few bikes and like use these advanced components so.

B

Reusing the good work from people that that know you I better than me.

A

3-1 yeah so I don't know. You've also got this on your screen, so I don't know if we want to just pop over to you yeah.

B

We can pop over and.

A

I see I, see someone's.

B

Asking about the infra gistic skom ponents, to see if there, if there's a free, trial and I believe the answer is yes. Like last I checked the infra gistic s-- package is just out there on you get you can download and try it out as a as a free preview. Trial Brian feel free to correct me if I've misspoken, but a free free, all right yeah. So today we ship dotnet core 3.1 congrats, and this was honestly a short release like we just.

A

Shipped 301 timber.

B

A

B

Ago we were in these rooms, doing dot-com and sharing all the cool stuff. That's in 3, oh, you know, double informs GRP, see all that stuff. Dotnet core 3-1 is basically most mostly just bug fixes you get squeeze in a few feature enhancements into there, including some blazer stuff that we'll talk about today. The.

A

Idea is that it was boost to not change a lot right because yeah I wanted 302-b like this is the big release and then 3 1 is the LTS release, which is you know, maybe some small like bug, fixes and stuff, but really like no.

B

Breaking changes of any significance, or you should be a very easy upgrade from 302 3-1 cool and the beautiful thing about 3-1 is it has a long-term support policy associated with it so be supported for for 3 years? So, if you're, looking for something nice and stable that you can build on for for years to come, dotnet core 3.1 is where you should go so.

A

The advice I've been giving people that have been asking me like now is the time now should I get on it. So what I've been telling people is up till today, I said: go ahead and get on three: oh, because the update to three one will be pretty easy, yep and then, but now I definitely get on three one because, like this is the LTS version, it's got all the cool new features and the next to release is basically five right. Next.

B

Release that's planned is dotnet five yeah, which.

A

Is a little ways off yeah.

B

That that's scheduled for November of next year, okay, and then we that's when we start snapping to that yearly, cadence that Scott hunter talked about where we will ship a major update to dotnet dotnet cornet they've, called kind of it just becomes dotnet it with dotnet five yeah starting with November of next year. Donít five will be a current release, which means it will be supported.

B

I believe think, it's a three month window after the next major release and then even-numbered releases like six Oh, which would happen at your after dot at five, a toe and so forth. Those will be LTS releases. So that's the that's. The plan I think the nice thing about this. It gives you the.

A

Ability, let me try and say that didn't make sure I caught it right. So five-oh is supported until three months after six Oh ships, I.

B

A

That's that, yes, it's a current.

B

Releases what they call if you look at the dotnet support policy talks about current releases and LTS releases if you're looking for something, that's uh that you can just build on and have it not move very much and it's gonna be supported for a long time without you having to upgrade to the next version, then LTS releases are what you want to be on if you're looking to just always be on the edge like being on the new release and you're okay, with dealing with some level of churn from release to release you're okay with having to upgrade to the next version.

B

As soon as it comes out, then you want to be on the the current release and five-o will be a current release. Scott it okay.

A

B

Yeah, so three one just shipped I think we can do that and there's a bunch of some new blazer improvements that we've managed to squeeze in there into three one, not a lot, but there's a few things. So I've already installed the bits, if you, if you haven't installed on their core 3-1, yet super easy, you're gonna want to head over to dotnet and go ahead and click on download and the 3-1 download should already be right there. You can go ahead and install it.

B

If you go, look at all the downloads you'll see, there's thought in it course eryone and it is fact listed as an as an LTS release if you're using visual studio, like I, am I'm on a Windows machine. The latest update to visual studio 16, for which also shipped today that includes dotnet core 3.1.

B

So if you've got the latest update 16 for then you've already got three one on your machine and you can always check that by just dropping down to the command line and topped me typing dotnet version, and that should read three one 100, that's the correct version for the three one release. Okay, so I've already installed the bits. If you're on a Mac, you can get Visual Studio for a Mac 8.4 is the sort of corresponding release on a Mac.

B

It's still I believe in the preview channel, so you'll have to go to the vs dramatic preview channel to get it, but that also carries 3.1 with it. And so, if you have that, then presumably you also have the the latest 3.1 bits as well cool. Alright, let's look at some of the new things for for blazer apps, so I'm going to create a new project and I'm gonna select create a blazer application. This is my eighth blazer app today, apparently, I'm not go ahead and create a blazer server. App blazer webassembly is also updated.

B

Today we shipped up a preview update to blazer webassembly. It carries a 3-1 version. Number, but it's a preview version number I, think it's preview, for it is not part of the broader dotnet core 3.1 really. So you should not expect that you now have an LTS version of blazer webassembly. We have not shipped us a stable release of blazer webassembly, yet that's scheduled for mid next year. We're shooting for the May time frame of 2020 so expect more preview updates for blazer webassembly. You won't see it by default.

B

If all you did was install visual studio and dotnet kora 3.1. If you want the blazer webassembly bits, you have to run one line command to get the templates and then they'll pop up and show so.

A

How does that work with all LTS version number, all that kind of stuff blazer me LTS version.

B

Number applies. The dotnet core blazer webassembly is is a separate package. It's a package, you install separately, it's not part of the.net core our deliverable. So it's not part of that at that LTS, Support, Lifecycle, okay,.

A

B

We will move it in there and eventually it will have an LTS support policy. That'll, probably be a little while yet and like we'd like to ship a first version and give it some some time before we actually say: yeah.

B

Okay, we're ready to call this in LTS, so I would expect that the first version of blazer will actually be a current release in May, meaning that when Donna five rolls around will probably expect that you, you need to upgrade to blazer webassembly and donate five to continue to stay in support, but eventually later, maybe you don't at six timeframe. That's when we'll probably have our first blazer webassembly LTS release. That's the current thinking, anyway.

B

Okay, so let's, let's go ahead and work with the stuff, though that is LTS, which is blazer server, support, so I'm going to create a blazer server app. This is what you can deploy into production today and get a three year support policy, so things that are new first thing: I wanted to call out is support for partial classes. So when you have a component components, remember are just classes, so I have a counter component here in the in the app.

B

Let me make this a little bigger, so people can see there we go and can I zoom zoom going there? We go okay, so we have counter dot razor and when we build the app that razor file is going to get turned into some c-sharp turned into a dotnet class and compiled, and then you just use it as a dotnet class.

B

That knows how to render the the stuff that you're, seeing in your markup in the past, if you want it to separate out this block of code here, like some people like to keep their their markup and their sort of code logic in separate files like having a code behind file instead of having it all in one file. We think both patterns are perfectly valid, but some people really prefer the code behind file.

B

If you wanted to do that before you could do it and the way you had to do it was a class, so I'm gonna create a counter.

B

Razored CS and that'll make it nest nicely under a counter dot razor and then before you had to make this derive from like make this a base class, basically and have it, derive from component base.

B

And then you could then move the logic in, but you had to change the access of the access rules for the the members, because right now, they're private I have to make them protected because I'm gonna make. Basically this counter base a base class of my counter component, and then you would do a thing up here. That's like at inherits and you would derive from counter or base, and that worked you could you could do that, but it involves more changes than maybe you'd like.

B

We now have support for partial classes, where you can define that code behind file that that's separate, where you will put all your code logic as a partial class.

B

So all I'm going to do instead of like defining a base class that I derived from is I'm just gonna, add partial right here and I'm gonna leave the class called counter, because that's the name of the class that will be generated from my counter razor file, so save that go back to my counter dot razor file and just copy this code, as is unchanged put it in here and save it. Now, if I go back to counter dot, razor intellisense looks like it's still working.

B

It still knows about the current count field and all that good stuff. If I run the application, it still should still function and we should have a working counter now, let's see get this building there, we go and go to the counter. Tab. I can click the button and the count doesn't back to go up. So that's partial class support in in Blaser that works with laser server and laser webassembly.

B

We can see the sort of the mechanics of that if we poke into the project a little bit more and look at the the generated files from those dot razor files. If I go into the obj folder and dig down into this dot, razor folder, here's the actual generated c-sharp code for that counter, dot razor file and if we scroll down and pass all the using statements down here below, you can see public partial class counters, what we're actually generating so Brian Laguna's s. Can he have a code block and a personal class?

B

Yes, absolutely like the partial classes and what you put in the code block will appear in this class and then.

A

B

Class will get merged with that, basically by the c-sharp compiler cool yep, normal c-sharp rules apply okay, so that's partial classes, other things that are new if we look in the host CS HTML file, so this is just a razor page right. This is like the bootstrapping page of the app it's what's gonna render the initial batch of HTML down to the browser, which then has the.

B

If we look at the bottom, that that script tag which has the Blazer JavaScript, which sets up the connection back to the server, so we have that wheel time pipe that we can then use for managing the UI this. This is what's handling that initial render. Everything else is then done with components and all the components are put right here now before in in 3.0.

B

If you wanted to add a component to a like an NBC view or to a razor page, which you can totally do you had a way to do, think do we that and that was using an HTML helper. So it looks something like this: it was like you had a c-sharp expression cuz. It was an async call. So you had to await an HTML helper and it was renderer component async. He passed in a generic parameter, which was the component you wanted to render like.

B

Let's say, I wanted to put a counter right here, and then you had to specify which render mode you wanted to render, and this this is a little bit of an advanced concept. What is the render mode when the component gets rendered initially on the server there's three different ways where that blazer can do that?

B

First is a server server means just put a marker in the original HTML and then when it gets down to the browser, and after you set up the connection, that's where I want the component to actually be rendered after you get the the first dispatch from from the server okay static means. Please render this component actually on the server and put its HTML right into the the HTML output, and then that's it like. Don't don't bother with interactivity? Don't bother with it. You don't even need the connection at that point.

B

It's just basically a way to put a static chunk of HTML and 202. A page kind of like a like a better partial you could think of it that way, and then server pre-rendered is do both like it's like. Please pre-render the component on the server, but also then later wire it up for for interactivity. That seems like the best well I mean they all have their scenarios, but in most of the time you're gonna be doing.

A

Something that's a lot of c-sharp in my razor. That's not beautiful code. This.

B

This uh this line here, we decided, was a little bit a little bit.

A

B

On the ice, so that's why we invented this component tag helper, this just packages up that line of code in a simpler way. You specify the type of the component that you want to use. You specify your render mode just as an attribute and then you're good to go question.

A

There I mean what we're talking about beautifying code, that type of app is there a reason, since it's a string anyway? Is there a reason to make a type of app I suppose you'll.

B

Notice that it's not sent actually typically from the razor parser view a string. Look, it's got that gray background to it. It's actually c-sharp okay, so they put a string there. We could do have to do some funny stuff with the compiler or at maybe have some sort of converter logic like really what that that value in between the quotes is saying is take the type property of the component tag helper and set it to whatever is inside these two quotes, and so it is actually a net value that we're setting there.

B

That's why it's type of instead of just saying app, but maybe there's something we can do there to make it make it simpler. You're.

C

Not the first person, why can't I just say.

B

I'm stolen, why can I just say that, like that's, that's that question and it Louis looks like it would work, but it doesn't actually work, so you do have to say type of currently. So, for example, if I want to put a counter right here, oops I have to actually put type of counter.

B

We do that render mode and I'm gonna put server pre-rendered for newbs. We do do that. Nice yeah.

A

B

Defying thing, okay, so what I would expect to happen here then, is at the top of the rendered page. I should see a just a standalone counter counter component and then below. That should be the the rest of the app like the left. Now, the homepage of the counter page and the fetch data page should all appear kind of like as a big block below this counter, that's sort of hanging out the top.

B

Let's see if that's actually doing what we expect yeah, and so we have our weird counter sort of sitting here at the top. We just use a random component on our razor page or embassy view, and then we have the rest of the actual Blaser app below. So that's how you can use the component tag helper to just add components wherever you'd like from within your CS HTML files. So question.

A

For Michael on YouTube he's saying that's just syntactic sugar, basically it they are.

B

Functionally equivalent, it's just a nicer syntax and having to deal with you, know, expressions and a weight and yeah async and all that type of stuff. So the other thing that's that's nice now is previously. We didn't support passing in parameters to these top-level route. Components in your app like if, if I wanted to pass a parameter to this counter in three, oh, there wasn't a way to do that. There is a way to do that now, so that's a day, first define a parameter on our counter.

B

I'm gonna get rid of this current count field and just replace it with a property. I'm gonna call it current count and to make it a parameter. I'm gonna attribute it with parameter. So this is now something I can piece of data I can pass into the component to like initialize it and then, instead of lowercase current count, I'm gonna do uppercase current count and then I think in the markup I also have to change. It here seem that cm knows about the partial class making that tooling, where it was.

B

Why doing that feature no longer making the tooling recognized. So it was not. It was not easy. Okay, so now we have a counter that I should be able to pass in a parameter, and you can do that with both the HTML helper and the component tack helper with the component tag. Help are the way you do it is you do per am and then the name of the parameter that you want to specify. So if I want to do current count, then I can do that right here and I.

B

Don't want the current count to be H I'd like it to be 10. So that's how you can pass parameters into your root level components of your application. So if I save this I, think I should just be like refresh, which I have to rebuild it. Remember, oh, no! So yeah so now notice that the current count is now initially 10, like I pi, passing some data to initialize that that counter from the from the beginning.

B

Okay, so that's an easy way, not to initialize your components with component parameters, Oh what else it okay so I've got. It's got so many things, I have to remember all the demos. So we did a step.

B

Okay, so preventdefault common scenario with web development is, you have some sort of event, that's occurred and you wanted to prevent the default action for that event, like maybe you're typing, into a text box, the default action would be to actually show the text that you're typing in the text box. Maybe you don't want that to happen for some reason, and so you prevent the default action. I think.

A

I've seen that too sometimes I'm like a button on a form and you're like I, want to handle the button submit that, like don't you do, is say you want to prevent the default action for that form. Exactly.

B

And an in Blazer there are cases where we kind of do that, for you, like with anchor tags like most of the time, we're intercepting the the navigation and doing client-side navigation so we're in some sense preventing the default navigation for you under the covers with forms, if you're using our edit form, we have a whole model there for giving you an event that you you wire up when you actually submit the form, so we're doing a thing there as well, but sometimes you want to write your own components that also prevent default, and that meant diving into JavaScript, and we all know the Blazer is about writing at least less JavaScript.

B

If, then, if not new JavaScript, so we have a way now of doing a prevent default, and so I'm gonna add a new component here. Let's do a razor component and we'll call this one. It's going to be a kind of counter. We've already got a counter, though so I'll call it counter. Two and I have some some markup that I'm just gonna grab and then we'll take a look at it.

B

Okay, so here's our new counter and the idea here is you have a text box and it's just a number and you want it to either go the number to either increment or decrement, based on whether you press plot plus or minus okay. But if you type in like ABC, you don't want ABC to appear in your text box. You want to just show you know the next number or the previous number in the list. So you can see.

B

We have a little just a little bit of text at the top telling you how to use this lovely component. We have our input and what the about the value of the count that we want to show up in that input when we, whenever the user presses a key, we wire up I click, a key press handler so that we can say that if the plus key was pressed an increment, the count if the minus key was pressed and decrement the count.

B

But we don't want, like plus plus plus plus, to show up in the the textbox. So.

A

Handle that and do stuff, but you don't want to show so.

B

We need to prevent the default action. This is the syntax for prevent default. You specify the the event that you want to prevent default for and then colon and then just say, prevent default. This can also optionally take a value like you could say, like true like, please prevent the default or, if you had like some boolean expressions, c-sharp expression that you wanted to put in there to say all conditionally prevent the default. Depending on this calculation. You can do that as well, but the the simple form also works.

B

So if we we need to use our counter to, let's put it on the home page there it is so we should have a counter too now on the home page of our app, let's refresh all right, cool and go to the home page. Okay. So here it is, and so, if I hit the minus key, it goes negative I hit the plus key. It goes up and I hit ABCD. You know nothing else is showing up on the screen because we're preventing that default action, so that's prevent default.

B

A very similar scenario is what kind of related scenario is controlling how events bubble or propagate like? Sometimes you want events that normally would propagate you want them to do that, and sometimes you don't like. Sometimes you want to stop the propagation of an event before it goes up to other Dom elements again.

A

I've dealt with that in forms a lot right, yeah, something in a forum you're like I, don't want the whole form to submit just because I hit enter inside a text field yep.

B

Exactly so, here's an example of that I'm gonna just copy over all of this with this is a little bit more involved. But what we've?

B

What we've got here fundamentally, is just two divs all right: we've got an inner div and then an outer div, and then we have click handlers that we put on both of them and normally when I click the event would propagate out to the to the to the outer div, if I click on the inner div, but we have a checkbox up at the top that, depending on whether I check the checkbox are not will control the propagation. Here's.

B

Here's where we're stopping the propagation so again, very similar syntax, the name of the event and then a colon and used to say, stop propagation. If you didn't put any value, it would stop it by default. If you have an expression in here, then it will evaluate the expression and stop accordingly and then below we're just printing out whether the corresponding div actually saw the click event or not, and we're just displaying that it's like a list of messages. So if we save this and go back, let's go to the home page.

B

Okay, let me get rid of that counter at the top. It's really kind of distracting.

B

There there we go, save refresh okay, so here's our parent div and the child divs got the the dotted line around it. So if I click on the child div, you can see that child div got clicked and then that also propagated up to the parent div. If I click on the parent, div I only see the parent div got clicked. Okay, let's clear that now, if we stop propagation and I click on the child, div only child div gets triggered and parent it only gets triggered.

B

So that's that's good having control over event propagation in your applications. Hopefully that will enable you to build even more powerful components. The last thing that I wanted to show I think is. The last thing is this lesson? Yes, last thing from 3.1 is a better error, handling experience for Blaser server applications in 3.0. If you had some exception that happened on the server. Often, what would happen is that the app would just stop functioning and you as a developer during the development phase, would have no clue why you'd be like.

B

Why am I getting a blank screen or why is this thing? Just not doing anything anymore and if you actually looked in the console of the dev tools, you would find out. Oh some some error happened and then you go check the the logs on the server to find out what the exception actually was, and then you figure out going wrong, but a lot of people beat their head against the wall for four hours, trying to figure out. Why is my app not doing anything?

B

So we talked, we decided we wanted to make that a little bit better. So we just made a very simple change: I'm gonna add a exception just right here in my my original counter component, so I'll throw a new invalid operation exception.

B

Okay and then, if we go back to the app and refresh and if I click on this counter, you see I now get this yellow bar at the bottom, and this is telling me hey. An unhandled exception has actually occurred, like we can make them a bigger. Does that show to everybody.

A

Or is it just like in develops, so it's.

B

Conditional, it's conditional well we'll look at how it's implemented. It's actually completely under your control,.

A

What this thing? No! No that's.

B

That's a great question. So, if I go look in the console like the dev tools console like it asked me to do, I can see the exception right there. That I had an invalid operation exception, go fix the bug and then you're good to go yeah. Now how? Where does this come from? If we go look in that host CS HTML file again, you can see it's just some razor markup, that's happening here. If the environment is staging or production, we show a little bit of UI to just let the user know.

B

Hey 500 will contact your admin and you can do whatever you want here. If you're in development. That's when we show a little bit more to say yeah, you might want to check the browser dev tools to see what's going on this ID here for this div, when there is an unhandled exception blade, the blazer server framework will toggle whether this div is is hidden or or visible. By default, the Styles hide it and then blazer server wool will show it.

B

So you can put whatever you I here, you'd like or just not have it at all. If you don't want it there, it's purely template code with a little bit of framework infrastructure.

A

Okay, now that you mentioned that there is a recent tweet or something I saw where somebody was looking at the blazer server j/s and there's extra like settings and stuff, you can call in there that they're, like parameters, you can pass to that and they're like. Oh, if you want to change I, don't know what it was timeouts or whatever you. Yes,.

B

Yes, there is a there. The JavaScript libraries for blazer do have the corresponding set of API is that you can fiddle with like if you need to mess with. Some of the signal are settings that are being.

A

Is under the covers for the signal, our client so.

B

A

Have to but it's nice that there sometimes.

B

You need to and that's why they're there yeah, so you should. You can check those out and learn how to laser.

A

Options and I think it was blaze or mr. Magoo that we did it yeah yeah.

B

Mr. Magoo, are you doing all right? Okay, I! Think! That's! That's all the new stuff in 3.1. The next set of stuff I wanted to show was, what's new in the blazer webassembly release that we just pushed out remember this is not part of 3.1. It's not part of the LTS released. It's just another preview. Blazer webassembly and we're gonna continue to work on that towards the final blazer webassembly release, which is scheduled for May of next year.

B

So I've already gone to blazer, net balls or blazer net and went to get started and I installed the latest preview for a template, which, hopefully I think it's been. Hopefully this has been updated yeah. So this is this is the how you get the the preview for version of the blazer webassembly template that corresponds with the three grab. One release that we just pushed out and you do need a dotnet course. We got one to use this once you run that one-liner.

B

You should now be able to file new project and create a blaze or webassembly app, and that's was that second second template that we saw in this UI here for folks on the call a little tip I have seen sometimes that after I install it that it doesn't show up here initially, unless I, like click away from three one and go back to three one I I've seen that happen once maybe a bug there may be, maybe about here.

B

So if you, if you don't see your place, rep assembly app template after doing that, the try just fiddling with the version real, quick and see if it shows up for you, okay, so that's great a blazer webassembly app. What's new in this release, art by the way, our attention now is almost completely now moving to focus on blazer webassembly, at least the blazer team. We were shipping blazer server. We've polished that up with 3.1.

B

Now our focus is getting blazer webassembly out the door, so you should expect to see a little bit more momentum, a little more faster progress as we move towards that release. So things that we enabled in this release, if we look at the project file, you'll notice, that the template now targets dotnet standard 2.1. Previously these templates were targeting 2.0, which prohibited you from using 2.1 libraries. If you wanted to in your place or web assembly apps, you can now use 2.1 libraries in here in your blazer webOS over.

A

There any like big, blocker things, I mean I, forget now what was huge and dotnet standard 2 1 things that are 2.1, I'm just.

B

A

If there is any like real, like forcing things, I'm.

B

Sure there is there's great stuff in there. I thought that thought man I can't pick up. Ok, but I've least now you have that full capability. We now serve boards 2.1, of course, within the limits of the browser security sandbox. If there's a new API into that one that like helps you do something with no windows forms or the registry or whatever that it's.

A

Not that won't.

B

Inherently work in a browser, obviously, that functionality won't work and you'll get some sort of platform, not supported exception, but this is now available. We have, we think we believe, we're pretty sure we fixed the issues.

A

B

Ios 13, so if you're trying to work on an Apple device, you should be able to get Blaser webassembly apps to function there. Now we had some issues where they were being really restrictive, with the stack size and the interpreter that we use to run. These apps had sort of a recursive implementation. We've switched that up to the B non recursive sort of stack sizes and is large, and it now avoids that issue. So iOS 13 should now be function.

A

I had a question recently on where's the best place to see browser support for Blaser like is it just in the docs as it is yeah.

B

We do have a browser support matrix in the blazer Docs. It's it's a little different than you might expect, and it might be good to get feedback from people. It's honestly like like if we I'll show it actually like this. This is kind of breaking in to jail and we might like to pick my race, some eyebrows from folks high level. Our intention is, of course, to support you. We want we're going to support you with blaze, our web assembly, the big. Well.

B

Obviously, we can't support ie 11 with blaze, our webassembly, because IE doesn't support web assembly. Where is it here?

B

Browser support, lifting one of could start supported platforms, okay, now, you'll notice that we support all these browsers as long as you're on the current version. Ok, that's the that's the story so, and this reflects how we test currently like when we test our blazer applications.

B

We're testing against whatever the latest version of the browser is that we've snapped in our build systems now I know: I've talked to some people who find this a bit dissatisfying like they they're like I'm in some enterprise, I'm use, I'm stuck on some other version of the browser and you're telling me I'm not supported, that's, not really the in the intent. We of course want to support those types of scenarios as well. We probably have some work to do to better communicate like well.

B

This is the version of the browser that we we know we've tested with, and we kind of snapshot that version and and document that here it Blaser does work on older versions of the browser other than like. You know the current current current right, but at least right now this.

A

B

Is what what's been documented for a support policy? So let.

A

Us know what you.

B

Think about this, if you need us to go back to some particular version of a browser, we'd love to hear that if that version is IE 10, sorry, that's not going to happen, but you know we do want to have a reasonable support matrix here, so that people feel well supported debugging. So one of the big deliverables for blazar webassembly before we ship it is we want to have a good debugging experience. Now, we've we've been working on a debugging experience for Blaser webassembly for a while.

B

It was one of those things that when we started this whole project, people who like can you even debug, see sharp and it's running in a browser.

B

So right now we have.

B

We have the in browser debugging experience that we've shipped for awhile and if you go, if you go into the dev tools, you'll see there's this debugging hotkey shift alt D that you press and if you press that what happens here, is it pops up the browser, dev tools and it points it at that tab that I want to debug, basically in a remote debugging style configuration, but it actually inserts in between those two guys, a proxy, a debugging proxy that we provide and that debugging proxy speaks the JavaScript debugging protocol of the browser, but also augments it with a bunch of dotnet specific stuff.

B

That's the magic, that's the really cool cool stuff that makes this all work, dotnet, people that are smarter than enough by in order for that flow. To even happen, the browser has to be running with remote, debugging enabled. So that's what this this tab is telling me is that hey, you didn't actually start. The browser was no debugging enabled so I can't actually do that connection. Please start it that way. So it gives me the command to do that.

B

So I'm gonna run that command and just for cleanliness, I'll close up the the the older tabs. So this restart of the browser, but now with remote debugging and enabled, if I hit shift alt D again that little debugging hotkey I should get the browser dev tools popping up and if all goes well, we should see some stuff show up here. In the left hand, side, okay,.

A

B

Poke around oddly enough there's like c-sharp files in here and raised there files in here and you can set breakpoints and hit them and the browser all this type of things. You can see local variables and it's pretty pretty impressive. What the dominant runtime folks have been able to achieve. Okay, that's the in browser experience and it's it's been there for a bit. It has a certain level of functionality.

B

There's more features that we want to enable here to make it as high fidelity a dotnet debugging experience as we can, but, of course, for most dominant developers. What they really want is just to hit f5. You may want to debug from Visual Studio, which is where they've always the bug their dotnet applications. So we've started work now on connecting the dots between visual studio and your blazer webassembly apps. So you can debug in the IDE. Now the good news is Visual.

B

Studio knows how to speak the browser debugging protocol, so the trick is to get Visual Studio to talk to the browser tab that you want to debug through the debugging proxy and then have everything kind of get mapped correctly in the in the editor. So.

A

I still need to do that thing where I launched the browser with the right variable with the right like command line thing you.

B

Still need the browser to launch with remote debugging enabled now Visual Studio actually also already knows how to do that too, because when you debug JavaScript in Visual, Studio.

A

Pops up of a browser.

B

And it pops it up with remote debugging enabled so that it can attach to it. So you can have breakpoints in your JavaScript from within. Yes, so that's basically the infrastructure that we're going to be leveraging to get f5 to work, and it requires that the debug proxy to to speak certain parts of the protocol, so that visual studio knows how to attach now that experience is not available with this release. But some parts of it are so that you can now at least try out attaching visual studio to the browser.

B

Ok, so I have I. Have the browser up now to get this to work. I actually need to do this over, not HTTP, that's a limitation right now that will be addressed in a future update for now. You have to do it over HTTP, so I'm just going to go into my apps debug settings and grab the HTTP address for this app it's listing on both on both HTTP and HTTPS and I'm gonna browse to http. Ok.

B

So now we have a browser with remote, debugging I already enabled it, because we just saw that and it's a set up at an HTTP address and then in the in visual studio, I'm gonna do debug and I'll build debug attached to process yeah and here's what you gotta do this is these steps are not what you will have to do in the fullness of time, you'll be able to just head out hit f5, but if you want to try it out today, you select chrome, dev tools, protocol WebSockets, know off that's basically telling vs attach using the chrome style debugging protocol.

B

The target is that HTTP address that I hit before now do not hit this fine button like bad stuff will happen. If you hit this fine button, all you want to do is hit enter. We had that fine button which surprises a lot of people and then there's my tab that it found.

A

B

A

B

Don't hit the fine all right, I found the process, so that's good and we wanted to attach, and in this UI you want to pick the corresponding checkbox for which browser you're using I'm using Ejim edge beta. It's awesome if you should use it and.

A

B

That, hopefully, did the right thing. We should be good to go. Ok, so I'm gonna go look stuffs happening. It's like finding scripts, I'm gonna go into my counter now. I'm gonna hit a breakpoint put a breakpoint in that counter. Increment count method, go back to the app counter, click me and boom.

B

So there we just hit a breakpoint in Visual Studio for a code, that's actually running in the browser on a web assembly based on at runtime, all speaking through the browser debugging protocol, and you can kind of tell like if you look down here at the the call stack like you see, JavaScript sprinkled in there like don''t and JavaScript stuff, and so, if you were like doing JavaScript Interop calls, you can actually like step from dotnet code into JavaScript code and potentially back out into dotnet code using this mechanism.

B

That's why we're doing things this way now, there's a bunch of limitations like those limitations all over the place right now in the current implementation. So don't get don't get too excited like. Actually, let me hit that break but again I think I can hit it again. Yeah good bye, sorry.

A

But it looks like somebody hit the find button and so like. Oh.

C

A

End of the world here.

C

Screaming I heard children I.

C

B

Limitations ah be like fear, I'm. Looking the locals, like I, don't see any values here, I'm, always thinking like type and stuff like oh. This is stuff that we'll be working on over the course of the next few months to make this experience again as high fidelity as close to a Troodon. It does bugging experiences. We can get it at a time we ship. Ok, that's what you can play with now, so.

A

There's a question here: I didn't totally get it Michael Powell is asking. Could this be deployed as a debugging assembly like along the lines of an X unit, runner assembly I mean.

B

This is all just.

A

In the browser or I mean this is all in Visual, Studio debugging, there's.

B

No Studios just acting as a client to the the browser's debugging protocol, and then we set up the browser to allow connections and then we we, the app, actually exposes the the bugging proxy endpoint, and so whatever the debugging client is whether it's the browser, dev tools or Visual Studio its connecting through that proxy to the browser to then enable it to debug. That's that's what's happening, you can also do it from Visual Studio code. If you want to debug, we can try that so we can. We do that real quick.

B

Let me open this in command line and let's get rid of all these. These hideous pixels, it's just too many pixels on the screen, like all these buttons and dials, and then we'll just open this up in Visual Studio code, alright. So to make this work, I've installed the debugger for Chrome extension, which enables debugging into a Chrome browser instance or a chromium based browser instance from Visual Studio code. Here's my application and now I need to get the app started.

B

So I'm gonna open up a new terminal and I'm gonna run the app by doing dotnet run and I'm gonna run it with the debug configuration so see. Here means the config that you want to use for the pilk of egg and then let's go ahead and get that up and going ok. So we can see we're in the development environment which is good because the debugging stuff's only wired up in development and we're listening on 5001 and port 5000. Ok, now I want to do.

B

Let's go ahead and browse here and set up to this address, let's browse to 5,000 and hopefully that's working. Ok, that's working good! This browser instance was set up with remote debugging, so we should be all set there. Now: I'm gonna click on the debug, little icon and I'm gonna add a configuration, and this will give me an option of selecting what type of launch profile I want to set up for for debugging I'm, gonna use, Chrome and then here the magic values that you need to use for your launch profile type should be chrome.

B

That's right: request is going to be attached and then, instead of URL we're just going to specify a port and we're going to replace this URL with the port that we are running our app on, which is port, 5,000 I. Think that's it. Let's see. So if we debug, hopefully this will say, we've attached looks like stuffs happening in the output. So that's promising Wow a.

A

B

Stuff happened, good things, only good things, ok! So now, if we go to our counter and visual studio code, we set a breakpoint go back to here and click there. We just hit a breakpoint in this video code. Ok, so this will be available. Also, as it you know, is a cross-platform debugging experience we're also working with the ps4 Mac guys. That's, basically, you can have a debugging experience. Thank you, okay! So that's the blazer webassembly stuff.

B

Try it out today try out three one install it I wanted to spend the last few minutes.

A

Webassembly questions.

B

Yeah I I'm here for the community in question: ok, so.

A

There's always you know whenever we talk about web assembly, there's always to talk about like the like how its small come and get the download and I'm.

B

Yeah yeah, so we haven't made a lot of progress on that front because we've invoked on Blaser server.

A

B

Has been some progress, but it kind of like goes up and down because we like we just added support for dotnet standard 2-1 and.

A

That adds features to the.

B

You know the payload you're bringing down while at the same time we're trying to whittle away so we're hovering right now around 2.2 megabytes compressed for the size of the application, things that we are experimenting with.

B

We are experimenting with linking more of the app so right now when you build the app we run the net il linker on the like a core framework libraries to strip out in the dot and il that isn't actually being used by the app at least as far as we can tell from static analysis and that shrinks down the app quite a quite a bit, but we only run the linker.

B

Unlike part of the application, we don't run it on like the whole thing like we don't run it on the blazer assemblies or or the entire graph of assemblies. So we've been experimenting with what, if we linked more and they were and we're more aggressive about the the linking we've also been looking at more aggressive compression like instead of doing dynamic compression with brought Li. What if we just like, have a publish step where we compressed the thing to I?

B

You know put it in like, instead of just having a little vise like you've got like one of those big like car-crushing type,.

A

Of things and in.

B

A junkyard we played around with that I mean the the trade-off. There is, of course, the amount of time that it takes to compress with those experiments. Just those experiments I think we've gotten down closer to like a mega and a half for the application side. So this so there's some big wins to be had there. Other things we've been talking about is like taking the D allows and removing the PE header stuff from them, because they're not stuff not really needed since you're running in a browser.

B

Anyway, that's one idea: we've been toying with there is there so some some things that we will be trying out as we get closer to to the release, but that's about the range that we're at you know getting below a Meg I. Think at this point is gonna, be pretty tight, but getting under I feel pretty good that will be under yeah with blazer webassembly, there's an inherent overhead with having to pull down or run with your application and for some maps.

B

If you care about every kilobyte of additional download size, then maybe this isn't gonna be the model for you. Yeah.

A

Well Scott hunter pointed out recently like in that case, server-side blazer is amazing because it's tiny the front like front end down there. The.

B

Amazing thing about server-side, blazer, blazer server is that it doesn't grow like you have the initial size and that's it like you implement more code. Well, the code stays on the server, so you only need just enough to like set up the the pipe and then that's as big as its going I.

A

Got like 200 K, it's.

B

In the 400 K range yeah, that's about what it would've been, but it's definitely pretty pretty small and it doesn't grow where as place or webassembly, apps will grow. As you add more code, so.

A

We're like 50 minutes left and you have some crazy new, exciting stuff, but one other thing I do want to point out laser. Mr. Magoo says he wants to have a favicon in the blazer templates. Yes,.

B

Me too, everyone the call should just go and like +1 the icon right now. Yes, no. We know about that. I'm, sorry, that we have left that for so long we will get that addressed for January I commit that we will have a favicon in the template for January all right. Let's talk about some crazy stuff. Let's talk about some mr. crazy stuff, so some of you may have heard of Steve Sanderson Steve Sanderson is a dev on our team. Who is the you know the father of blazer?

B

He wrote the first prototype, there's lots of great stuff. He wrote this blog post, not that long ago, yeah early in November about this thing that he called web window and what is web wind window, so we've been playing around with using blazer for more than just web apps for a little while, like we often we've been talking about this spectrum of applications that you could potentially think about. Building with blazer, we focus at the top where you're building a web app would blaze a server and blaze our web assembly.

B

But you can imagine moving towards a more native like app like you could add. Pwa features, so your app works offline and it can be like pinned to your home screen on your phone. So feels more like a native app still running in a browser, though fundamentally, but it feels more native yeah. You could build a imagine, building a blazar hybrid app where you're running natively on the device now but you're still using web tech for your UI and apps in this category are like electron apps like electron apps. They are native apps. They have.

B

They have access to the native capabilities of the device, but they're using an embedded chromium shell for rendering their UI. That's.

A

Kind of like PS code teams.

B

Lob there, a lot of apps that are built using the electron model. Mobile apps have similar patterns like if you want to render to a webview effectively but you're still running natively on the device and we've had like experiments out there with using blaze or plus electron for a while. Well Steve Sanderson had been thinking.

B

Well, you know, electron apps are great, but the what everyone knows about lecture on apps, as they are a little heavy I, think the default electron app weighs in at about a hundred and fifty megabytes in terms of disk space size yeah it compresses down to like 60 or 70 megabytes, or something like that. But just inherently.

A

Usually about six gigabytes of memory, use I think it's a default. App is 150.

B

A

B

Just by the fall yeah and so I mean I, don't wanna, you know, electron is great, like it meets a whole bunch of scenarios. It has a whole bunch of really awesome features but does beg the question like? Could you do something? A little lighter and lots of people have played around with this? What's the flight around with was well. What, if, first of all you didn't include note cuz electron includes note, and we need it. We we have dotnet core, so we don't really need known as part of the this. This story right.

A

You don't need a whole web server thing going when you've already got it's already doing its own thing. Yeah.

B

We don't even need that that extra JavaScript runtime, like like I'm gonna, be running net code, so like I'm, just used unto core for that and then for the UI rendering, while most machines have probably some modern web view of some sort already on the machine. Couldn't you just use the one? That's already down that.

A

Was actually news to me, I didn't know that I mean I did I didn't realize that they actually had those at as a control that you could use so I I.

B

Think a lot of this is also like you have a browser installed. Right is the way to think about. In fact, when I talk to Steve about this, he he mentioned that you could even think of a model where, like let's say you did want to that. A very particular version of a very particular browser was what you were using for your UI, rendering with an app like this, you could have a check.

B

That said, let looks on the machine and says I require a G own version, 83 point whatever, and if it's not there, it would have a prompt that says, like hey, I need this version of edge. Please I'm, gonna download install it, for you is that okay and you click OK, and then it gets the browsers that it needs. So you can, you can imagine doing that type of model or you have a more flexible app. That's like I'm, comfortable with anything, that's like kind of new yeah and I can handle that so the webview.

B

It's not what the web window is a simple little package that implements this idea, like I'm gonna, have some dotnet code. I'm not gonna have node I'm, gonna pack, I'm gonna leverage, whatever webview, is already available on the machine and use that as a lightweight to build desktop applications. Yeah, okay and the nice thing about this. Is you get some pretty nice wins so he published these numbers. So this is a comparing an electron app with this webview model.

B

In this case, paired with a blazer implementation doesn't actually have to be paired with blazer the technology that you use for actually rendering the UI can could be it and you want like, if you want to use view or anger or whatever, like you, can do that with with web window. So if you're a JavaScript developer. This may also be something interesting to you, but the the size like the download size improvements are pretty phenomenal and the the memory size improvements are also like pretty very drastic yeah.

A

B

If you want to get started with webview, it's actually pretty easy. You just create a nice to make this connect. Here we go.

A

B

Gonna go to my.

B

No, my desktop and okay I. Don't have anything there already so I'm gonna I'm, just gonna create a console app. So I've done that new console and let's call it web view app one.

B

Okay and then we just need to add the webview package. So I'm going to go into that console app that sorry. Yes, you go into that webview, folder and I'm gonna dotnet, add a package web window and I think it's one point knows it, but no web windows gonna remember window okay and then the version I think the latest version. 0.1 0.2 specify that.

B

Alright, so that adds the package that Steve published and then let's go ahead and open this up in Visual Studio code. So this is just a console app there's nothing! There's nothing in here! That's web web window specific and then there's a little bit of bootstrapping code that you need just to get the app up and going so I'm gonna grab that that already copied that, from his blog post and I'll, just put it in we'll take a look at it. Real fast.

B

Just bigger okay, so we have a web window that we're creating and it looks like I messed up. My.

B

My indentation good okay, so we have a web window and it looks like I need to add a using statement for web windows and then in that window we're just he's just we're putting some static HTML into that window and then basically rendering it and waiting for it to exit. That's it, that's the whole app. So, let's drop to a terminal and Donette run.

B

Let that build- and here we have a native desktop app- that's using the whatever browser. I have a my machine for rendering its UI and the UI is built using web technologies. But the code is implemented, then, with c-sharp c-sharp code. In this.

A

B

A

The other cases.

B

If you wanted to use view or whatever you could also do that, so that's so that's the simplest like getting started. Experience and I think we can look real fast to see. How big is this guy, like how much memory is it actually using? So if I just look down here, what was anyone happens like web yeah webview, one egg Z, you know it's using about five megabytes of memory. So that's that's.

A

Kind of nice, that's.

B

Not bad okay, so we can close that and then Steve has some nice samples on his github repo that you can look at. So that's what I've got here.

A

The default browser is different than what comes in the box. Does it use which browser does it use so.

B

I think it's intended to be policy. I, don't know what the default policy is. Is that it that it uses I mean it's by the way it's alpha alpha experimental bit, so don't go like planning your next, like mission-critical, desktop app based on this yeah.

B

So I, don't know what it's a fault policy is today, but the idea is that you, as a developer, should be able to say, like I, require browsers with this kind of browser within this range it will look for it and it's not there give you an option that you can like actually download and install it. Now. This sample is a the same thing, a web window app but paired with with actual blazer code now for rendering via the UI. So if I run this, we got our web window app now with blazer.

B

So this is you a blazer, UI components and again very small, very lightweight, like we can look at the size, but so much much bigger. So that's that's web window definitely check it out play with it. Let us know if you find this compelling or because there's no interesting questions now like do we do we build a blazer plus electron thing? Do we try to build a lightweight thing like this? We kind of want to hear what people's scenarios are, so we can make those so like.

A

You're saying this is alpha experiment that Steve's written and you want people to give us feedback yeah. We should we keep looking at it more dislike. Use, follow that kind of stuff, absolutely.

B

Alright, last last demo, last time, I got one more thing and then then we got a. We got to finish up yeah, so the last bullet on this slide that we talked about like this journey to native, is actually having a way to use native controls instead of using web tech. Well, what if we actually use the native UI controls of the stack still using the blazer component model like this is the razor syntax you know, bind and how event handling is done, all things, but using UI native UI control.

B

So we've been playing around with that as well and there's an experiment that we've been having.

A

B

Not a twin form space because it's crossed the hey: it's not it's! It's not tied to the windows. Ui stack like you, tie it to some abstraction over an aw I so that you can then use the cross block kind of like kind of like react, native or even salmon, forms that think of it. That way, so I have a this prototype installed and I'm gonna dotnet new. What is it coughing?

B

It's like a mobile, blazer I think is what we we have it in this prototype and we'll create mobile blazer I, don't know how many I've created. So it's great number, two okay and then let me CD into this folder. So you can see that we now have a solution with three projects: there's like a core project that has my components and then a solution file and then an android host app and an iOS host app for the for this application. Let me open it up, so you can just see it real, quick!

B

Let me go to my desktop and do good okay, and if we look in the like core project like so this top project is referenced by the two platform specific projects we can see some. We have some RAZR files here. We've got a counter and a hello world. If we look at counter, though it doesn't look like it's, it's not HTML like this is these are components that are wrappers around native components. In this case. Well, it will depend on which platform you eventually run it on.

B

If it's running on an android device, it will use Android native components if you're running on iOS or use iOS native components, so we've got things like frame and stack leia and button and label, but still a lot of normal blazer like things like we've got our code.

B

We have you know, setting the text and so forth, so normal property element attributes top program model, but done with native UI. If we set the Android app is the startup project, we should be able to get this running in the Android emulator.

B

And this takes a second cuz. You know crossing VM boundaries yeah, but the idea here is that if you know a blazer, if you're like I'll, say a web developer, you've been working a blazer to build web applications. You could then take a bunch of your know-how and use that now to build native mobile applications. Applications that have a full native UI look and look and feel that's what this is intended to enable under the covers is for this runtime and for the abstractions over the components.

B

It's using a lot of the xamarin technologies to enable that so there's a lot of synergies there but looks like it's building and now it's deploying to the emulator I'm. Sorry I should have had the emulator up and running, but it's it's cold, starting now and and.

B

Well, let's don't sit here in chat for a second while the emulator.

A

Does it says hey.

B

Guys so again, because this is part of that journey and we're this is experimental code like we haven't even shared these bits publicly. This is something that we've been working on internally, but we're interested to hear from folks like is this interesting. Is this: is this idea of being able to build native apps with a blazer component model useful, so yeah? Now we've got native components: I can click on the increment count and I got a basically have a blazer counter, but implemented with native UI components on an Android device? Okay, so.

A

I, just you I'm, using the native and, like you said like it feels like me, like you, said kind of similar to xamarin as far as some of the markup. But it's then it's using the component model from blazer, the Markov.

B

Right now looks all a lot like xamarin almost because it is a fairly literal wrapping around a lot of existing examine forms abstractions, but there's a lot of room to innovate. There, like you, could imagine making it feel more. We have make it more webby, more HTML II if you'd like I, think Zaman forms even at one point, that name and so have. It has support for styling the app using CSS. So you can imagine pairing a CSS styling system with native UI controls, like those things, are all possible. It's an interesting question.

B

How much we dial that my gut is that for a web developer audience like you kind of want a puppy, yeah air on get on things that they know like things that they're familiar with, but I would love to hear people's feedback on that. So this is kind of a native blazer like model that for us or.

A

Working on Wow.

B

Will hopefully have this for you to try out soon publicly, where we're just kind of polishing it up in and tweaking a few things before we're getting share it out in the wild? Well,.

A

From the chat replies, people's minds are blown and they, like it awesome Wow. Well, that's a lot we covered today. So we have the dotnet core three one asp net core three and release you covered the stuff, that's shipped with blazer server that shipped and nlts, and then you showed the web assembly stuff, that's in the works, and then you showed the crazy experiments both with the web window and then and then this latest using native components and a blazer experimental.

B

Mobile apps, with my blazer yeah awesome.

A

All right and you had a 5 o'clock, cutoff and I- think we squeezed as much awesomeness in today.

A

So thanks a time no.

B

Problem no yeah, no problem. Thank you and yeah give us that feedback. We can up to hear what your experience is like alright,.

A

So I think you should drop the mic at this point. Just pick it up and throw it there.

A

C

A

Like maybe I don't know, talk around.

C

The size of my check, my check.

A

C

A

To end stream thanks a lot, everyone dramatic zoom out.