.Net Foundation .Net Community Standups, 6 Feb 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ASP.NET Community Standup - Feb 6, 2018 - Blazor Update

Description

Community links: https://www.one-tab.com/page/JahpzyGnRYusZ58HpiuzqA
Blazor repo: https://github.com/aspnet/blazor
Blazor FAQ: https://github.com/aspnet/Blazor/wiki/FAQ
Mono WebAssembly announcement:
http://www.mono-project.com/news/2017/08/09/hello-webassembly/
Mono WebAssembly update: http://www.mono-project.com/news/2018/01/16/mono-static-webassembly-compilation/

Live Blazor app: https://blazor-demo.github.io/

A

And we're alive it's for.

B

A

Steve chin we're live now right, I.

B

Have morphia feature-rich video feed from Steve.

C

Scott I can see he's chained.

B

C

Tweeting, this can I say we're gonna see a special announcement regarding blank yeah.

B

I think I think that was actually Damon actually tweeted something similar last night. So absolutely and you can fill in the blank I'm.

C

Gonna say exactly what it is: okay, yeah the announcements live at this point: Zuma Zhi Zhu is Ong. Okay, let's see how this works boom. Let's wait for this tweet to go, live and go viral. Has anyone here yet well.

A

We just went online like the second, so.

C

You're saying a thousand people have not immediately shown up as we're saying exactly.

A

All right stand by starting soon, dude I know you're, always like one step ahead of me all right. It is now updated.

C

A

Well, we were waiting ten minutes to be fair. This okay, the stupid, YouTube fit or Google hangout I invited you probably about 50 times dude.

C

A

C

A

Just saying I can't apologize.

C

For your fault is enough: I blame myself.

C

All right here, you know showing.

A

Up hello, Eric's.

C

Is there's a thousand people in the room with him, so we can count those people.

A

So we have a thousand and sixty four people online. Do.

C

Me a favor, and this is a total NIT. Would you lower your camera to an appropriate like put your head Center, because you're looking at your ceiling, I'll.

A

Just sit higher.

C

A

Why don't you move your camera because.

C

My camera is perfectly positioned: okay,.

A

C

A my Center for you, it's it's adequate at this point. It's nice.

A

C

D

A

Time Maxine went on and drew he took an angle and he made sure which of my things on my wall were straight. There's one picture on my wall: that's not straight just to bug him. Why.

C

A

C

I did that I can't.

A

C

A

Hooray, okay, well, we've got tons of great stuff, I mean I kind of want to like jump into the community links because they're cool, but then also, then we can get on with the exciting demos. Announcements good sounds great. All right, I'm gonna share my screen.

A

All right, okay, first of all, Shane Boyer, so we have had this workshop that we've done several times: NDC conferences to have intersection, etc. So this is this app server, build sorry build a website. It's a conference planner using ASP net core uses, uses API back-end, so what's cool in here is. This has been updated to use the new ASP angular CLI based spa front-end, and it's also got a cool docker deployment. So this is Shane's we just merged just this past week.

A

This is Shane's updates to this thing, so it's an entire lab that takes you from file new project to building and out an entire thing, with a website, a single page, app, front-end and deploying with docker and helm, so very cool high quality work from from Shane, of course. So that's exciting, and this is a relatively quick blog post, the actual what you're not seeing- and you will see when you click through- is there's a ton of markdown in here to explaining now you'll do this. This is what this next step does, etc. So.

C

You can you lock the camera.

A

A

Cool, so there's that the next one is Steve, Gordon and Steve. Gordon is continuing a series he's done on deep dive, so this is going way deep into the the code. How things are actually working here he's talking about how you start up works, so this is a long, very meaty post talking about you know how things are registered, which things are registered, which things are convention based.

A

So this is by the time you finish this or if, for some reason, you need to do something complex book, you know with startup applications, startup the web host builder, all that stuff bookmark this and come back later. This is this, is you know, really in-depth and stepping through exactly how and why things are working the way they are some very, very nice post, here's another one on oh I DC! This is from this is from Damien Bowden and he was talking about securing asp net core MVC application with secure API.

A

So you know nice diagrams continuing to work through how the how the flow works, etc. He, by the way I'm Damien ping me offline and he he was asking about I. Don't know if he linked to it.

A

I didn't see a link to it in here he was asking about in the MVA that we did recently where we talked about using two factor auth, and he pointed out to me that really what we were using in that case is more technically correctly called to step off to step off is where you have an app that pops up a code, and you type that in separately and there's there's so what I took out of my conversation with him is I should just call it multi-factor off, which is the generic term and they'll never be wrong.

A

B

There ii didn't know that yeah, so I mean I'll have to go corrected, buried Oren's as well. Like very you know, I.

A

Know maybe no security.

B

A

That's what doc? That's what dr. Wikipedia told me this my screen went blank for a second there that was cool, so Philip is digging into the API controller attribute looking into you know, which are the specific conventions and and the the other kind of things you can tweak on it. That's.

B

A new to one feature: yes, yeah, he's like that's like playing around with like nightly, builds. That's how does he hasn't even chipped, a an official preview yet but yeah, that's that's new in into one. That's.

A

I'm not sure if we have one scheduled on that we're doing this series on two one features: I don't know if we'll be digging into API specific stuff, we.

B

Should okay, but if people want to read about it, we posted the two one roadmap blog post. Just like was it like late last week, I think yeah. You can get all about there as well. That's.

A

One of my links coming up in a minute or so.

B

I'm sorry yeah.

A

No no worries, okay, so this is. This is interesting. This is a new, a new kind of front. Sorry why my words are not working well for me today. This is a web front-end for F sharp in asp net core. This is the MVC pattern implementation. This is called saturn, so we've talked before about suave and giraffe and what I'm gonna mangle his name? Oh so it's just Kristoff. So Kristoff has said that he would like to see something working at a higher level of abstraction to him.

A

Suave and giraffe are little too low level and it feels like he's building an MVC application using middleware and he'd, really like a higher level of abstraction. So that's what Saturn is so it's a new web framework with f-sharp and asp net core. So here's an example of some of the code and then, of course, the the code itself is all out on. So this is Saturn framework. They've got a separate org for that separate saturn framework saturn.

A

So this is out on github as well so and as he called out here, I'm no expert on on licks Phoenix did I did do you Rob Connery's course about that which was which was pretty cool, but so the this is based on or inspired by, elixirs Phoenix as well, so I'm looking into digging into that more all right.

A

So this is very cool. This is from bad Adams. This is something which is hitting into one I believe it is something he did. That's cool that affects all of dotnet core, but asp net course is one that's impacted as well. This is stacktrace improvements, so the problem was that your stack traces in the past had all these things like method, async, d4, blah blah blah. It was always right there just not easy to read so.

B

Eat every other line of your snack trays to really understand. What's going on or something like that, exactly.

A

So Steve has worked or so been has worked on. I'm getting you know, readable stack traces. So so you know this blog post goes here and explains what he did and basically shows you. You know how you can get something to tact, actually I'm, actually more readable, so I've.

B

Heard a lot of people pretty happy with that. That's yeah.

A

And and it effects exactly and it effects everything you know it's all of dotnet core so but you'll actually be able to read your async stack traces, Thank, You, Ben, hey Ben, okay yeah, so here we've got three blog posts. These will. You know we share these links out afterwards, and so people can dig in in detail. This is the dotnet Core 2 1 roadmap, so rich Lander talking about this. This is just high level and then he you know talking.

A

You know some some highlights with the build time performance, global tools, I'm, pretty excited about the global tools. That'll be neat spam, key memory, tea, etc. Entity framework. Two one talking about things from you know: lazy loading down to there's the cosmos DBE support, which is pretty neat. There is data seating link group by etcetera, so some neat stuff there and then the asp net core q1 roadmap post. So this is written by this. Damn roth guy, a lot of good stuff in here we'll be digging through these in in upcoming.

A

You know stand ups, so that is neat and then, if you are a watching and not a reading type of person, we've got these very cool part 1 and part 2 videos. So this part one is kind of a high level you're on here, Dan's rich Landers on- and so you know going through and talking about here are the oh and repeaters.

A

Also as on- and this is you know, part one talking about the features part two of a lot of demos, very cool stuff and then one other posts had just kind of floated by today. I thought was kind of interesting. This just went live today. Is this post about this wise or thing? Oh, my blazer, so here's the blog post but again and if you, if you're, not a reading type of person and you're more of a watching type of person, what do you guys got.

B

Blazer is now an official asp.net project. We've brought the project into the a spent Oregon github. The repo is now live if you're not familiar with the laser is blazer. Is a web UI framework implemented in dotnet in c-sharp that runs in the browser via web assembly, so you can have a full stack net and c-sharp web development solution.

B

That's the dream: steve sanderson pioneered a lot of this stuff he's with us. Today. You may have seen him demo it at NDC oslo. He has, he had to sort of like a prototype github repo on his on his own account, something he just sort of you know any one evening he was like. ah Maybe tonight I'll try and get don networking in the browser.

B

It seems like a cool thing to do and that's got a caught a bunch of people's attention and we've been looking at it for a number of months now like is this really paying like? Can we actually make this happen? Is this technically feasible and we've been doing a lot of investigations and talking to a lot of people about the level of interest in something like this, and we decided you know, there's maybe something here, and so the project is now in the aceman org, it's a real repo. It's got an issue tracker this time.

B

It is an experimental project at this point and what do we mean by that? What that means is well, first of all right now, there's there's nothing to download. Yet it's still really early in the project. If you want to try out something, you can still go to Steve's repo and download the v6 that he has there, but the it it's it's. It's just an experiment which means that there's no committed product, yet we're still trying to figure out is you know, do all the technical issues really work out? Is there really demand for this?

B

You know: does this really satisfy a true customer need and will is? Can we build something that people will and so we're having this sort of phase that we're calling an experimental phase where we can work through those those issues and try things out and experiment? But we hope that you know assuming everything works out, then this could become a way that you could write web applications using dhania and C sharp and razor awesome. I.

C

Have a question yeah that thing yeah acting as the audience is like foil. So how do we know that, like in six months or a year that this won't not be a thing? It'll become a niche thing so that that is a great question.

B

And that's that's what we're calling an experimental phase? Does we actually don't necessarily know that either? So don't let go planning your next? You know critical product website on blazer, yet, okay,.

C

So this is an official experiment, as opposed to Steve messing around at night. Exactly we have the it is, not an official product launch announcement of the future of the Marvel.

B

Comics universe, that is correct. There is no committed, like RTM, like release really official stable release plans. At this point, it's still just an experiment that we're. We are cautiously optimistic that we can get there like.

B

We, everything that we've tried out and experimented with so far has worked out amazingly well, and we think we can do it and we'll need people as help like the reasons why we're talking about it now is because we want people to to participate and give us feedback, even though there's not a committed product yet so that we can figure these things out. Like what kind of framework would people like what would appeal like how how big of an app size is is is makes sense? How do we?

B

What features do we need to have in the framework those types of things so that we can then hopefully eventually make that step to actually turn it into a committed product? But at this time it's still just an experiment and that's important I think for people to you know to remember and realize at this stage in the game.

B

Well, that's it! We have a lot of cool stuff that you can still see. We don't have bits to share from the Blaser repo. Yet we do, though, have sort of like the prototype experience about what we think this could look like, and it's of course important remember. This could completely change we're still trying to figure out what the framework should actually look like, but we have some. You know pretty interesting things to show about what is actually possible today. You know. A lot of this is only possible by this.

B

This new tech, which is called webassembly I, don't know how much webassembly has already been discussed. Can.

C

B

Stand up, webassembly is like webassembly is this amazing new standardized format like webassembly is a a byte code that you can take any code like taking like a native code base, for example, and you can compile it to this format. It's intended to be a compilation target and then it can run in any browser and native speeds. So you take code, you compile it to web assembly and you can now run it in any browser at native speeds.

B

That's that's what web assembly is, and it is now supported by all the browsers like they all have support for this at this point, and what this does is this completely blows open the doors for what you can now do with web development? First, before you know, web development effectively was essentially only JavaScript. You could anything now that you can take and compile to web assembly.

B

It is now possible to execute on the web in a standardized and open way, and that's what we're taking advantage of here, we're basically building a dotnet runtime out of using web assembly, and it's not actually us to be clear. Blaser is just we're just building the web. Ui stack on top of that dot at runtime.

B

It's actually our friends on the mono team that are building Assembly support for four mana, which actually makes a lot of sense because Monell, if you don't know Manos the runtime, that's used for Android, it's the done at runtime use for iOS is the dot at runtime. That's used for for Mac. It's basically our client cross-platform runtime. So we're taking advantage of that as extending that mano to them now also support browser sub centers browser client scenarios. So.

A

So back the original kind of release thing thing that Steve did at NDC that used dotnet anywhere yeah.

B

Yes, maybe you might talk a little about what you did there originally yeah.

D

Sure, okay, so quite a while back when I first wanted to experiment of this I. There was no commitment from the mono team to port mono to what assembly or from from anyone. In fact to do that. So the only way of getting net to run inside a browser and web assembly was to find a really simple, dotnet, runtime written in just a very simple variant of C.

D

That I could compile to webassembly, because that's what webassembly compilation toolchain, let's he do and I did find one written by a guy called Chris bacon, which was written about five years ago or something like that and it's not really been developed since. But it was very small and simple about hundred files of C and that was possible to compile to web assembly. And that was the basics of you know. Getting Donna running in the browser, and so I was able to build a little UI stack on top of that.

D

And so that was the original prototype. And since then, like down the said, the mono team of said that they are bringing the full-fledged mono runtime twelve assembly. And that means that we have a truly production grade done at runtime, and so the newer version of the blazer that we're working on now is based on the mono runtime, which is far more powerful and complete them don't know anywhere. Never would have been.

C

Why what is the difference between taking mono and compiling it to web assembly and taking down a core and doing that as well? Okay,.

D

So alright, so the thing that we're interested in compiling to web assembling the first place is the dotnet runtime itself, not your application, understood so that so yeah. So for anyone who hasn't quite grasped the difference, though it's the the thing that loads and execute that on their assemblies, okay- and that needs to be supplied to the browser in web cinder code itself.

D

Now, if I had a way of compiling the regular CLR, whether that's the regular desktop CLR or whether that's the newer core CLR or some other thing like karate, then I would have done that. But these are massive projects and do management.

B

D

Yeah, that's right yeah, so these are really large serious projects that you can't just get one random person just decides to compile it to web assembly. It requires a huge amount of additional work and support in the runtime itself, they're entirely different platform, which was completely beyond my capability to do last year. So that's why it was using DNA, which is just a tiny, simple thing that one person to figure out on their own.

D

But yes, since then the mono team themselves are bringing one hour to one assembly, which is a huge engineering job but they're doing that sure.

C

I was just curious. Why pick that huge engineering, job versus the other huge engineering job well.

B

I think I think part of what would help understand. That decision is also to think about how these runtimes today typically get used like dominant core. Today is pretty much a server runtime. It is primarily targeted at server work lowing. So it's a snut, it's EF on the server, whereas mono today you can. It has some server support, but it never really came of age. It never really got fully baked. It's mostly a client runtime. They primarily use it for client platforms like Android, iOS and so.

C

That's we're building.

B

A client story here like we're working in the browser, so actually mono, makes a lot of sense. It is a client. So then, let me turn discussion here about like. Does it really make sense? I don't know because you just you.

C

Just answered it perfectly and and I'm and I'm agreeing with you now cuz I, you know you ever heard the term strong opinions, weakly held right, I, don't really have an opinion, but now I'm starting to realize exactly why this makes sense, because mono is also known for its extreme portability as a code base of see, there's mono for PlayStation 2 or whatever kind of obscure, like it's a really great portable runtime and keeping in mind that dotted framework dotnet, core and mono are each instances of dotnet, each of which supporting the dotnet standard.

C

We're gonna be able to take dotnet standard, dll's and load them up and whether or not mono was the runtime or not. It doesn't matter, because it's an instance of dotnet that are gonna run in the browser. Now that's.

B

Actually, exactly right, in fact, so for blazer and for mono and on top of web assembly running in the browser, we will support dotnet standard OH, so you will be able to take down at standard libraries and use them in your blazer applications. There, of course, will be api's in that surface area that, like don't really make sense in a browser open. But let me throw not platform, not supported. Exceptions like you would expect when.

C

I started: exploring the Doudna standard on stage at conferences and presentations and stuff I went and took a 17 year old, app that I wrote for school and I compiled it and ran on a Raspberry, Pi, so unarmed, on a device that didn't exist 17 years ago and you're telling me that in a couple of months years, whenever I'm gonna be able to take my 17 year old school project, which is a nice clean, even dotnet, standard 1.6 and run it in the browser code that I made, that is a decade plus old, it will be portable assuming it is reasonably portable code, yep yep.

C

B

C

That doesn't fundamentally make sense.

B

I'm not looking to the.

C

Registry yeah exactly so.

A

There are a few people asking in the chat saying you know they like dot net core cuz, it's new and they haven't feel like it's supported and all that where's mono. Is there worried about it? Being you know, supported do.

C

You think mono now on their iPhone and their Android and all over the place. The mono is a dotnet. It's an open source project, it's a Microsoft property. Now it is a supported thing. You're using it today, yeah.

B

I think I think a lot people when they think of mono they think of like this sort of side project, but actually mono Idzik is a core part of the the business strategy of what dotnet is like. If you want to get dotnet running on a mobile device, you are using mono today and that is fully supported and we pour tons of resources and they're making sure that that works. Well, so it's it's! It's not something. That's just like gonna disappear. Mono is a important part of the.net ecosystem.

B

It's also by the way, the run sign. That's used for like games, which is another great scenario for webassembly. If you want to get, you know really fast rich games running in the browser like you want to use unity, and you want to do your coding in c-sharp webassembly, great, underlying tech to do that with and mono is actually the runtime that's used to buy that buy, that stack by the unity stack so.

C

B

Point is another case: Ramana was heavily invested in yeah.

C

The fact that we're using montt we're using mine all day long constantly in production on X boxes on all kinds of things on switches.

A

Yeah and as pointed out, two people are talking about in the chat that you know, because now, if everything's like dotnet core is open, source code can be shared between the two pretty easily yeah.

B

And we do that quite a bit, I mean there. I was tonight talking about more of a long-term strategy for what what do we have? We have these. We do have multiple done at run times and maybe at some point, it'll make sense that these things should be reconciled like let's not pay the cost of having two different runtimes. Maybe at some point they do do this magical, merge and everything works seamlessly together. That's obviously a fairly expensive thing to do so.

B

It's not that doesn't happen overnight or even in the course of just a year or two, but they do today. The strategy is they copy. They share code between the two projects as much as possible, so that there's as much consistency and it's also the keep costs down of maintaining the the different runtimes cool.

A

Well, do we maybe get to see any demos today or yeah.

B

Let's see a demo Steve, do you wanna, you wanna, show us what yeah laser could could conceptually look like. Yes,.

D

I will okay at the sharing screen yeah all right, then so I will show a demo of that that we've been doing for a little bit. What I'm going to show you just now is not based on the absolute latest version of the blazer codebase, but rather goes back six months or so to the previous prototype.

D

The reason for that is because that previous prototype was a little bit further ahead, but the code for that previous prototype was just a massive train wreck of just anything that I threw together in ten minutes, because it seemed to work um which is you know how we were able to get fairly far ahead fairly quickly, but.

B

I'm really dead good, as opposed to now actually having the right product code. Yeah. That's right! Our.

D

New repo in the SP now that contains only production grade code. So it's far far better, but it isn't quite as far along just yell, though in another month or so it should be, but.

B

Anyway, that's why the devil.

D

Out show just now is based on the earlier prototype and I know. Some people may have seen this particular demo on YouTube before so apologies to those people, but for anyone who's new to this. This is a good place to start. So, let's say that I want to create a new blazer application which, like we've been saying, is I.

D

Don't application that runs inside the browser, so we've got a project template yeah, I'll, go new project and I'll call, let's stand and I'll create that new project, and that is going to obviously layout the initial structure of the application like or who, and it's going to pull down the various NuGet packages.

D

Anyway, I'm going to run it in a browser now, and so you can see some initial UI and then in a control f5 there and that's, and it takes a second to count the first time because it's grandpa when that does come up see it looks like a pretty traditional looking single page application, it's new different pages that the user can never get through. It's got this example of a counter that just finds that you click the button and it's got this special H that demonstrates.

A

D

Features that yeah.

A

I'm I'm hearing some audio dropouts I, don't know if other people are too yeah.

B

You kind of you're fine, and then you fade out to almost nothing make.

C

Sure that you were not turning your head at all, you disappeared for a good 10 seconds. There was.

D

That now, okay, sorry.

C

D

D

Okay, can you hear me now yep yeah I can hear you hi, oh great, alright, and so here we are inside this blazer app that we've just created and as I was saying and I don't know. If you heard me, we've got a few different features just out of the box to demonstrate stuff, so we've got backwards and forwards navigation. There. We've got this counter that counts. How many times you click things and we've got this example of doing an HTTP HTTP request to the server and displaying some stuff as a table.

D

So it's the sort of thing that you would traditionally build with a spar framework like angular or react, but it's not angular reactor. It's not any JavaScript framework at all. If we look at the code in the application, you will see that we don't have any JavaScript whatsoever. All we've got is HTML, we've got some CSS and we've got various c-sharp files and the c-sharp comes in two different flavors.

D

We've got a regular C, sharp files such as this program, CS, which is what we're running when the app first starts up and that's dealing with booting the application up, and then we've also got these CS HTML files, which are RAZR files and I, think most asp net developers will recognize that it's a way of mixing markup with c-sharp code.

D

So as an example of that this counter page here, if you remember what the counter does, it's just displays this button and when you click the button, the count goes up and the coding there is pretty straight forwards. We've got this current count property and we are displaying the current count, and we've also got a button that when you click it, it's going to call this method increment count which just increments the count. So it's a very, very simple programming model that we can use to build these components.

D

Out of so each one of these CS HTML files is a component and we can construct the application out of components. We can nest them. We can share across projects and all sort of things like that does.

A

That make sense yeah. That functions, then, is that new functions.

D

Is not new functions, as a feature has been in Razer for a little while it's a way of just adding arbitrary okay. That's your code, yeah, it's more widely used in Roseau pages than it is in MVC, but you can use it anywhere. The razor is used. Okay, okay, so shall I implement a bit of functionality on top of this, so you can see what the developer experience could be like in this world. I think.

B

D

Button click, yes all right, then! So let's say we want to do the the thing that everybody always does, which is a to do list all right. So I want to add a new a item into this navigation menu here that says to-do list somewhere, so the user can navigate to it.

D

Okay, so I'm going to move my browser down here a little bit so that you can see my browser at the same time as you can see that the code that I'm working on and I want to add a new link to to-do list so I'm going into this file, nav menu, CS HTML and that represents stuff.

D

That's over on the left and I'm just going to do a bit of high-quality copy and pasting code here, I paste a new list item and I'm going to type in the URL for it and all so that goes to to-do list and then also I'm gonna set the text on that to be to do list and now I'm, going to press, save and notice that when I press save I don't have to switch back to my browser.

D

It just updates automatically so now we've got to-do list on the menu there and I can click on that and it seems like nothing happened, but something did happen, which is that the URL has been updated now to do list, but there isn't any page matching that URL. So it's not doing anything just yet. What I will do is I will add a new component called to-do list. So I'm going to go, add new item and we don't have a proper item template for this.

D

Yet so I'm going to choose MVC view page just because it happens to give me a razor file and I'm going to call it to-do list got CS HTML and when I hit add on that, you should see the browser updates again, because now there is a to-do list, but it's just blank. We haven't got any content in there. Yet so, let's put some content in to do list and when I press save you'll see to-do list shows up over there. Okay.

D

So since this is blows up, we can do some arbitrary c-sharp code here, which is going to run in the browser and I'm going to do that with one of these functions blocks that we just talked about and I'm going to model a to-do item as a class. So let's have a class called to-do item and we'll say that each to-do item as two properties will have a string called text and we'll also have a rule called is done and of course we don't just want to have one of these things.

D

We want to have a whole list of them, so in the obvious way, I will have a list of to-do items called items and also that to be a new list. Okay, good and if I want to I, can use razor to display some data. I've got so I can get all the usual intellisense I will display items darts count and when I press save you should see that there are zero items in my to-do list.

D

Okay, now I know that that to-do list is empty, but before we start adding stuff to it, I want to just try and display the contents of the list, even though there isn't anything in it. Yet so I'm going to do an HTML unordered list and using razor syntax I can say for each item in items. I will have a list item and it's going to display item dot text I'll, save that and it doesn't appear to do anything initially because my list is still empty.

D

So there's nothing to show and I'm going to add a button and I will say the text will be add, item all right. So I've got my button and when I click this button, absolutely nothing happens, which is not surprising, because I haven't wired up any behavior on this now. So how can we add some behavior to our button?

D

Well, if we were going to do some really old-school JavaScript, we could say something like on click equals and then we just type out some JavaScript stuff in there, but because this is blazer, I can do it with c-sharp. Instead, so I can say when you click this button items got add, will add a new item and will add a to-do item with the property text set to whatever will figure out the details of that in a minute.

D

Alright, so, let's see if it works, I've saved it and now, when I click add item, it does indeed.

D

B

This is like Vicki's, always writing the the c-sharp in that that attribute, like you, get the beautiful Razer intellisense that comes from from the editor. The tooling is just fabulous. It's really nice to see ya.

D

And we've much of the design around this is to make the most of what the tooling can already do and I can show you some cool examples of newer things. We can do that with the tooling in a minute. Alright, and so I know that some people watching will be going like. Oh no seriously, you don't expect me to put loads of c-sharp into HTML.

D

So no, don't worry. That's not that's! Not the hot new thing. A much more reasonable way of adding behavior would be to have methods. So, let's say I have a method called add item. Okay and I want to just cut the code that I've already got from there and I'm gonna.

D

Put that into my add item method and then I'm gonna use a bit of shorthand to say when this is clicked on click we will call add item and that's just equivalent to writing on click equals, add item, but it gives us proper type checking to make sure we don't try to call a method that takes the wrong set of parameters or whether, but it will it'll behave the same all right. So our code is a little bit more readable now now? What else do we wondering? Well, we don't really want a hard code.

D

This word whatever we want to have some way for the user to type stuff in so let's have an input and I'll put I yeah wait.

A

So we had a we've, had some questions if you can show the network debugger, yes,.

D

What can two people.

A

Are really interested.

D

B

A

Actually, what.

B

Is actually doing this is trippy all.

D

Right then, so this is what we're loading into the browser right now and let's just go down this a little bit. Okay, so we've got the initial HTML document which everyone's familiar with we've got some CSS, because we're using bootstrap then we're loading, the blaze of runtime in JavaScript, and that knows how to start up the whole web assembly runtime and lurch mano into it. Well, in this case, this is like I said this is the earlier prototype which is based on dotnet anywhere.

D

But if you use the newer code, it would be loading mono awesome, but the old prototype loaded, this web assembly file DNA dot web assembly, and that is the whole dotnet runtime that can load assemblies. It can execute them. It does memory management. Does you know the garbage collection? It does all the dotnet kind of stuff and then we are, and then it in turn is choosing to fetch actual dotnet assemblies. So these are regular net standard dotnet assemblies.

D

They are the just the normal things built by the normal c-sharp compiler and the same assemblies that would run under another normal done at runtime on the server or anywhere else. That's.

A

A really cool thing that when I I played with this before and I expected, maybe to see those as well as amore I, didn't know what they're gonna be that that is really interesting. So those are straight up just standard dotnet, dll's, okay, so yeah. That is correct. So one other thing I'd worry about seeing this is: is DNA azam or mono, dot, wise I'm, gonna, be six megabytes or ten megabytes or four thousand megabytes. Okay,.

D

So DNA dot, Y Samus in this case it's seventy four kilobytes, which is pretty reasonable, yeah I. Our application here on this old prototype is tiny. It's 340 kilobytes and now, when we switched over to mono, we got a rather significant increase in that size because mono just does tons and tons of stuff. That is not. We don't even need it to do so. There's a major bit of optimization work.

D

We need to do I, don't think we're going to get mono ultimately down to be as Tiny as this DNA one, which is only 70, kilobytes I think it's still going to be larger, but we're quite determined to keep the total application size down to a reasonable amount which, as what's the reasonable size, we asked justice from people. You'll get different answers, but I'm quite determined. It's going to be you know under a mega, buy we'll we'll see.

D

Okay and last question is: can that be cashed in the browser? Oh of course yeah? Yes, sir, whatever size, it is it's a one-time thing and it could be loaded from a CDN so that the user only pays that cost once for all blazer apps that they ever use. You know so it shouldn't. Hopefully it won't really even be big enough to be noticeable on the first ever load, but absolutely it should be completely cached for subsequent loads.

B

So you're literally, this is just normal Don and assemblies running inside the browser on top of a Don at runtime, that's implemented in web assembly and there's no plugins, there's no transformation to like JavaScript or anything like that. To make this work, it is literally just a normal dot at runtime happens to be implemented, webassembly running normal dotnet assemblies. That's what this I.

C

Have a question about about overhead because javascript is a virtual machine and, while web assembly is a binary format, that's very clean in implementing in in doing stuff. This is a virtual machine implemented on top of a virtual machine. Then running some instructions. Yes, that's correct! Yes, yes, I.

D

Mean there a sense of how heavy that is, it's definitely not going to be as fast as running it, on whatever the closest but.

C

Comparing it to like people using C and C++ and compiling that to-to-to-to assembly I.

D

Can't really give you any numbers on that. Yeah.

C

I guess I'm not thinking about like I'm, not asking you to give me like milliseconds or whatever, but I'm wondering as far as like degrees of overhead or you know, as a 10 excerpt. Do you know how much weight is there there, and is that really something even to think about, because it seems fast well.

D

Yeah, okay, so when it was on DNA I did a little bit of experimental benchmarking and I was finding that just doing pure CPU. Heavy things was about 10x slower under DNA on webassembly versus the regular desktop seon-ah. Okay. Does the concept of jetting even exist?

D

It's it could exist, but it's definitely not implemented in DNA and I. Don't know that mano Sara Lee has any definite plans to that. So they're.

C

Out a it's an int, it was an interpreter at that point. Yes,.

D

Exactly yeah now there are a couple of reasons to think that this is not necessarily going to be a problem. One of them is that this is fundamentally about building client apps, so it's not like with server apps, where you absolutely need to get the maximum throughput that you can, because otherwise, you know your business is paying whatever proportion more for its cloud hosting costs with a client app. You are fundamentally distributing the workload to your clients, so you know you're not directly paying for that.

D

The only thing that really ultimately matters for a client-side application is: is it fast enough that human beings don't perceive any lag, because.

B

D

No point in being faster than that: it doesn't benefit you significantly so as long as humans never think it's even remotely laggy you're, okay, okay- and you know that appears to be entirely achievable right. I.

B

Would say also that comparison that Steve mentioned was done between you know a desktop dotnet run time and a run time running in the browser. I think where we'll probably spend more more of our time is like you know, how do we compare against this existing JavaScript experiences when you're doing the same type of heavy computation in the browser for doing with JavaScript, as opposed to trying to do with c-sharp I mean? Obviously we don't want to have like a significant regression there like.

B

That should be at least on par, if not even faster, because we are fundamentally running on top of a runtime. That's supposed to be running at native speeds thanks to web assembly. So we do. We do benefit from a low-level like web assemblies, very low-level piece of infrastructure. Yes, it is implemented by the JavaScript runtime. But it's you know it's it's it's a compilation target. It's not intended to be a high-level interpreted language to say it's supposed to be fast.

B

You take C code and you run in the browser and you basically get comparable speeds, so I'm a runtime performance I'm honestly, not too concerned about the the download sizes is where I'm expecting that we'll have more. You know need for investment and optimization to make sure that when you download the app in production or during development, that you're, not downloading, you know megabytes and megabytes and stuff. Couldn't.

C

You like just like we pick jQuery on a CDS CDN. You do the same with the dotnet runtime in webassembly. Absolutely.

B

That's one trick: we can leverage we're. Also, there's technologies, like the amount of folks have a linker technology where they can go through your app and strip out all the il that actually isn't really being used by the application. All that sort of trimming right stepping out assembling whole assemblies that you don't even need like what. What currently the model folks have done actually is. They took the entire desktop mono runtime and poured it to run on webassembly, which is obviously way more than you typically need for a browser app.

B

So there's a lot of opportunity there to you know, pull out stuff that doesn't apply to browser apps at all, and we have. We have a bunch of ideas about how we can get that size, really small. In fact, C's already done a bunch of initial flex, you know very early. You know short timeframe investigations that look very promising.

D

Those questions no reason just son, that same subject, one other thing that the mano people have told us that they're working on is ahead of time compilation. So under that model, when you publish your application, what you would end up getting is a set of wasum files, webassembly binaries and so.

B

The thing that you ship into.

D

The browser is no longer dotnet dll's, but rather each of them has been pre compiled to a web assembly binary, which should run really.

C

Close okay, so hang on compiled to a web assembly binary, not a dotnet native like situation, but it's a chewed, it's half way to apple juice. It's apple sauce, it's kind.

B

Of I'll get.

C

To that, in some ways it's the il equivalent of wasm. It.

D

Says low level as you can get without.

C

Actually being proper executable code like would it still need the jitter in the seal method, jitter, what it's doing the CLR on the garbage collector implementation.

D

Oh yeah, it still needs the runtime services like okay,.

C

Yeah, so it's just preaching.

D

Your food, it's very close to being as as good as you're gonna get way. That's awesome, running, regular, desktop.

C

The potential for this is bananas like as long as people understand what they're getting into it's it's. The potential is bananas just insane. So the two.

A

Things like the first thing that I always thought of and heard of when I would hear. Webassembly is like well performance native speed on the browser which is cool, but a thing that Dan pointed out early on too is the the language like you can write in whatever language will compile to like, in this case, you're, not even you're, not even worried about that you're. Just writing. C-Sharp code, anything that will compile to ms IL you're set right. Yep.

D

B

If you wanted to write an f-sharp, I mean what what's happening in Steve's project in that blazer app. Is it's actually taking those those those blazer files, I, guess a razor files and compiling them into an assembly and then just pushing the assembly into the browser downloading the that assembly into the browser and then running it using that dotnet runtime I, don't know! If you look at the the network trace, you see, there's that thought views DLL, that's the actual compiled blazer app views, those CSS, HTML files that have been compiled.

B

You know changed into a type and then compiled into assembly, then download it into the browser. So they can be executed to update the Dom and do those sorts of things so.

A

Am I gonna get confused when I'm writing razor code as far as what's going to be executed on the server and on the client? No.

D

I hope not because the simple answer is in a blazer application. Everything is running on the client so that it's not like it's partially running on the server and partially on the clock.

C

Everything but like I, want to talk to the sequel database and make some casein well.

D

Okay, you'll, be it's just as confused as you would be. If you were writing a mobile app or something like that, where the client needs to make a call to an API back-end. Okay,.

C

So this is more about a we used to call these chubby clients in the Silverlight day. It's like take some work that the server was doing, but it's just not necessary because you have a smarter client now and have the client do that work. Uh-Huh.

B

C

B

You could do that and then for other things you would just make Web API calls to like say on a spinet core back-end and have the server do the normal work. And then you just get some adjacent payload back that you use to update the client experience so I.

A

Have a solution: I have a solution with two projects: I have a blazer application and I have an API application.

D

That's exactly yeah, in fact, I could show you an example of that in a second and actually, let me just M.

C

Forwards, sorry.

D

C

You because we love you.

D

I'd, just because there's a couple of things I want to show that will get people thinking a little bit more about the broad set of ideas that are going on here. So just the last bit I want to add to this is to be able to capture what the person types in there and I to the list.

D

So let's say we're gonna capture whatever been typed into this string and I'll call it new text, okay and then I'm gonna, say I want to bind whatever gets typed into this text box onto this new text, variable that and then, instead of using whatever I, can use new text. If and when you press the add item button, I also want the text box to get cleared out automatically so I'm gonna say: new text equals null there. So now, when the user comes along, they can type stuff in and yeah.

C

D

Gets captured, it worked okay. Now we could go further. This we could have checkboxes to mark things as done or whatever, but I want to just bring up a couple of other interesting related concepts. So the first one is what about browsers that don't support web assembly and you might think it's a bit of a critical issue, because even though all the latest browsers do support it, there are still plenty of legacy browsers that are never gonna support web assembly.

D

So, let's see what happens if I try to run our to-do list in Internet, Explorer 11, which absolutely does not support web assembly. Okay, so I'm going to paste in that URL that we just had apologize for this mad stuff they're busy. What happens? Is it just pops up and it works, and it works exactly the same as before, but.

B

Way internet so, but the thing like Internet Explorer doesn't support web assembling right like I, like all that when I.

C

Said all the browsers I'm in all the modern.

B

Browsers, you know Chrome Firefox and edge like these, all those guys they support web assembly, but this doesn't it doesn't? So how does that work witchcraft? What is going on.

D

Web assembly, when it was Specter, it was designed specifically to be quite close to what existing JavaScript virtual machines could do and a consequence of that design is that it's quite easy to for anything that you can compile to web assembly.

D

You can compile to a slightly different, but similar format called Assam Jas, which can be executed by just standard JavaScript runtimes going back for years and years and years, and so that's what we've done in this case, when we've compiled the dotnet runtime to assembly, we've actually compiled it in two flavors one true web assembly binary and secondly, as an awesome, j/s file. And then, when your browser starts to load your application, we can check. Does it support web assembly if it does great?

D

If it doesn't, then we're going to load the Assam Jas version of the runtime instead, which is also going to work at the reason we don't always use us and guess is because it's bigger and it's slower, so you don't want to do that all the time, but for browsers that don't support web assembly, it's a pretty good fallback option. Okay, so that's one cool thing: another cool thing is debugging, so let's say I've got an application like this. That I want to debug.

D

um You might want to connect to it from your IDE, like visual studio, to attach a debugger, although it's kind of hard to see how that's going to work like how is the browser going to know that it's supposed to? Let you do this, but also, if you're developing web applications. Often you are going to be more productive, not using your IDE but using the browser's built-in dev tools, because then you can see all the things like the element inspector and the CSS styles and such like.

D

So here's a prototype idea that we came up with for enabling debugging in this environment in order to show you this I'm just going to switch over to a different project. Now this is structured in the way that John just described. So it's got a client app which is Blaser and it's got a server app, which is regular, server-side ASP. Now that's going to serve the client app and it's also got a shared assembly just to demonstrate the fact that the same assembly files can be used both server and client.

D

But anyway, that's just a minor polished. What I really want to focus on is the debugger debugging stuff. So when I bring that up in a browser, you'll see it looks more or less the same as before. It's got a counter, even though it looks a bit of some slightly different features like we've got a demonstration of interrupts with third-party JavaScript libraries, blah blah blah anyway, but.

B

If you case you didn't notice what that was, that was c-sharp running in the browser on top of a dotnet runtime calling into JavaScript from c-sharp. So you can, you can do JavaScript Interop both ways. Actually, you can call from JavaScript to c-sharp c-sharp to JavaScript, that's all enabled by the underlying web assembly, so that was super cool I was basically.

C

B

Was that was a bootstrap modal dialogue right that you just popped up there? You called yes bootstrap from c-sharp in order to pop up that dialogue. That's super cool I mean.

A

Well, you're, showing that can you show the the source for that I can't.

D

A

It might not look nice because this.

D

Is the old one? This is not our newer nice to look at.

B

All the hacking stuff to get stuff working but yeah, that's amazing, I.

D

See what how it looks all right so we've got this show model element by the mode, all right, yeah, so I, wrapped it all up in some classical modal and let's see what that actually does inside. So.

B

Some low-level P and Bach, like API, to like yeah.

D

So I think an abstraction called jsr, but we're not doing that in the newer version. It's much cleaner and more sensible than that and.

B

We've even talked about also like having tools that can generate like c-sharp wrappers, around JavaScript libraries based off of their typescript definitions. So you could even have like a strongly typed like basically called bootstrap, as if it were c-sharp like using an API. That looks like it's actually a dotnet library which would be super sweet, correct.

A

This Silverlight old-timers all remember the there there's a JavaScript bridge there, but this is. This is just that's cool to see the same programming, but there's no.

B

Plugins here opens like this is just open tech. That's that's. The beauty of that runs in any browser that supports the latest standards. I.

A

Have a question from Christian he's asking.

D

If it produces source maps, does it produce source maps, it does not produce source maps under the interpretative model, because for an interpreter source maps don't make sense. The whole concept of source maps are relies on the idea that for every instruction location in your binary there's a corresponding source location, but that doesn't work at all for an interpreter because think about what an interpreter is doing. Is it's looping over some standard bit of instruction? That says something like fetch?

D

The next instruction look at what type of instruction it is, do a different thing, depending on what type of thing is so a source map can't represent that sort of thing it just doesn't work. However, if we support ahead of time compilation, then a source map would work, so there might be a reason to do source maps in the future, but there isn't a present on the interpretive model, because I interpret explanation all right, great all right.

D

So if you don't have source maps that makes it seem like debugging, wouldn't really be possible, but watch this I'm gonna press on my keyboard now ctrl shift D, which is just a magic key combination that I've made up and what that's going to do is pop open a browser debug window. Okay. So what's that well, it looks like the normal chrome debugger.

D

In fact, in order to see it better, let's just put it on one side like that: okay, so it's got all the stuff that you would normally expect the debugger to be able to do so. I can do the element. Inspector I can look at the network. Trace I can do profiling all that kind of stuff, but what's a little different is.

D

If we look over here you'll see, we've got all of our dotnet assemblies listed as well, and if we look inside there we can see the c-sharp files as well, so here's the c-sharp stuff that runs when the application starts up and also, if we look in here, we can see all of our razor files as well. I can see now my counter page over here in the chrome, debugger and better still, I can set some breakpoints on there.

A

Toolings improved a good amount on this right cuz. I remember trying to mess with this I don't know months ago, and it was I. It didn't seem like it did all this I.

D

Yeah, this is a more recent bit of prototyping work, yeah, okay, that is correct, yes, so just for anyone who wasn't sure whether to believe this would work if I click on this increment button now you'll see we're pausing, dibbley yeah.

D

And we can do all the stuff like pressing f10, to step on to the next line, if I actually focus in the right window,.

B

D

Continue execution and, and it all works in the way that it should so anyway. This is this is a prototype. This is just a very limited with all we've made. Work in this prototype is in breakpoints and stepping so really limited, but the basic concept could be extended to support all the debugger gestures that exist, and so we are talking to them the mano people, and hopefully they are going to enable debugging in some way a bit like this, but we don't know for sure, yeah.

D

Okay, that's probably oh yeah. One last thing do well. Do you want to see one last thing or are we short on time? I mean.

A

We should see one last thing relatively quickly: all.

D

Right, okay, so one last thing is on the newer code base on the real implementation of laser in the asp net org, where all the code is clean and everything is good and it works properly and it's not just hacked together. We've done a little bit of work on making the tooling much better. So if I go into here, let's say no in this one: okay, so this I just want to show you how we could compose different components together and and give you nice intellisense like you're doing so.

D

Let's say you want to create something called a special notice, which is a component that displays some data in this particular way. So it's going to take in the title and content and it's going to take a callback that should run when somebody clicks on an OK button, and so it might look a little bit like that and that's in a file called special notice, CSS HTML. So just the fact that I've got that file there on disk means that I can use it in a different laser component.

D

In this blazer component, we've got a boolean that gets set. Who cares how it gets set one way or another, and we're going to say if we want to show notice, then what are we going to do? Well, then we will have the special notice, okay and we're going to get full intellisense and all that.

D

So a title is something thing and okay and then I can put in some arbitrary stuff and I can use c-sharp stuff if I want to like that, and then I also going to get the ability to reference other things with proper type checking as well. So, let's say, I want to cap run some code when the user clicks the OK button, so I'm going to add a function, I say: void, dismiss notice, show notice equals false. That would make the note just go away and then to run that I can say on.

D

Ok, yes, miss, yes, miss notice, okay, all right! So then I've got proper type clicking on that as well. So if I was had a method that takes some parameters, then it would hopefully tell me off for that, though we got the red squigglies have appeared, and it's that's not right. We've got the right method. Signature then that's all gonna work so anyway.

D

That just gives you an idea of how you would compose different components together and pass parameters between them and deal with callbacks and get into a sense and all the right type checking in and that sort of thing. So.

B

I'm Blaser you like to find new components just by authoring, a CSS, HTML file or just authoring a razor file and then.

C

That's right, you.

B

Can use those as components in other components and other parts of your app using the you know, sort of normal tag like syntax. That's right.

C

B

You get full intelligence over that you'll get completions Wow. That's.

D

Right and it's.

A

Similar to like a I mean conceptually for other thing, there's there's tag helpers and there's few components. Is it similar to those or is it just kind of it looks similar.

D

Is is similar in the sense that they're all ways of reusing and composing bits of UI, it's different in the sense that, fundamentally, what we're trying to do with Glazer is a stateful client-side UI system, so with blazer you're dealing a lot with thing: how, with how things change over time, as opposed to with server-side code. It's always one time render and so yeah.

A

I feel like this is something we're just thinking of me as a developer. This is something where I'm gonna have to wrap my head around it a bit like I'm gonna, keep thinking of like oh I'm, generating HTML on the server and shipping it to the client. I've got to get out of that mindset. You know like this.

B

Is all the state can just stay right there and you can? You can do things and with staple components. In the client side, the composable UI in the client with Donette Wow yeah, looks good Steve that looks great yeah.

A

Okay, so where we should probably wrap up we're.

D

A

People of where they can like, where.

B

A

Where do we go to find more where we keep up with all this, so.

B

Check out the blog post, we posted a blog post about the what we're doing with blazer the repo is now public. This is again, this is an experimental project. It's not a committed product, yet it's very early there's nothing to download.

B

Yet this isn't a release announcement at this point in time, if you're really adventurous- and you want to try out the the bits that are in the blazer repo you can clone the repo you can build it, you can try running the tests, that's what you can do right now, the if you have questions like that. We didn't answer here.

B

We have a FAQ in the in the repo that you can check out answers all sorts of things about webassembly and our use of mano and what we're trying to do the Blazer so check that out as well. If you have suggestions- or you find you know bugs in the code, you can send us PRS, you can file issues in the in the public issue tracker. We do have an issue tracker this time, because we do care. We do want to hear about what people think about the.

B

What we're doing and yeah, if you want to see a live, blazer app also there is a a blazer app that Steve put together and publish to Azure that if you want to like f12 and see what it's downloading, though the one he published, the azure is actually based off of mono. So it has more. You know, runtime capability and more stuff that you can see. What's there, that's at blazer demo, your website's net, there's a link to that in the blog post as well.

B

So if you want to play around with an actual blazer wrap yourself, you're welcome to do that and the bits that Steve showed, though the prototype bits they are still available. If you want to mess around with that project template you can get that off of his github repo at Steve Sanderson, slash, blazer,.

A

Very cool awesome one one last question: I just want to jump in with her Johanna asks. Can he reduce Steve's demo at his company? He wants to show this off. It is public. It.

B

Is open source? Tell your friends. Tell your mother tell anyone you want like this. There's nothing secret here: the cats out of the bag and yeah show which anyone you want and- and you know like one of things- we really hope is that, in addition, like, obviously this will have appeal to people who do not net today and like doing dominant development. We hope that this will also be something interesting to people that don't do dotnet development today, but are interested in a full stack development story that has great tooling great intellisense.

B

You know all the security and performance of the.net running both on the server and now also on the client, so feel free to show it to everyone. Anyone who you think is interested in you know the latest developments in web development. We don't hear what they think as well great.

A

Okay with that I believe it's time for the dramatic zoom out. Oh.

B

Okay, you ready.