.Net Foundation .Net Community Standups, 5 Feb 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ASP.NET Community Standup - February 5th, 2019 - Blazor Updates!

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 for this week: https://www.one-tab.com/page/Aa0qtLsJT5Wy2NNnnuKf0w

A

A

Think we're live, we may be live stream will start soon. I, don't.

B

Know how you doing Dan oh I'm, doing great.

A

B

A

We were just in leptin last week and the cold, and then we come back here and we're cold.

A

Yes, okay, so I think we're live. Yes, I see myself great okay, so we so Dan you're the PM four blazer um we're gonna be this. Is the blazer show I'm gonna start with some community links as we do? Some of them are blazer ish. Some are not. So let me just jump right into that.

A

Excellent I'm, starting with a wonderful post by Ben, Adams Ben, is mister performance. He's done all kinds of stuff on Kestrel he's done some previous posts on his peanut core and the Kestrel. You know just performance over time, and so this one is really neat here. He's talking about saturating 10, Gigabit Ethernet at 7 million plus requests per second. He goes way and death talks about other servers. He also talks about the ability that you can run Kestrel as an edge server.

A

It makes Barry Dorrans cry, but that's part of the fun and then he also digs into you know some people will say. Well, you know raw performance is great, but if your database is slow, then you know you're no good, and he talks about some. You know some some things that have been going on there lately to the post grass performance fortunes. So you know talking about that. It's not just my sequel, so it's not just the kind of raw benchmark stuff. It's actually, the actual.

A

You know, building out entire applications, I'm talking about benefits what they're seeing at age of ascent. Oh you know just digging in all this kind of stuff. Talking about production readiness is peanut core 3 and then some of this neat stuff keep reading, because there's neat stuff towards the end, reduced allocations and also platform intrinsics massive yes, yes, I mean this is wonderful, oh and they're. Talking about the performance dashboard. So this is neat. This is in your your area and your your you know that is peanut team area.

A

So this is neat I, think it's just crazy people, people like really read into this stuff, someone zoomed in on this and found that there was Canadian money sitting on top of this refrigerator. They were like concerned about that.

A

Just great post lots of fun awesome to just continue to see this, this performance going through the roof over the years, I, don't know when you've got a hundred percent. Where do you go from there? If you mean we need faster, Internet's, I, guess you.

C

A

Stuff, this is neat. This is out on the azure docks. This is in the learn, stuff and there's new content here. This is build a web api with asp net core and it's actually like an interactive thing where you go through and build it out, so I don't know adding all this up. This is like half hour forty minutes, you can do it 45 minutes. So this is neat. If you haven't played with this learn content. It's really neat.

A

It's interactive, it's a cool way to kind of go through and you can earn points and have fun. This is cool. This is from Brady and Scott addy. They built out this hosting an asp net. Core signal are in a background service. So this is a nice thing. The support for background services in asp net core- and this is an area that hadn't really been well-documented before so here they they go through how to wire this up to and startup and just all the kind of stuff reacting to events from background services.

A

So it's a nice short documentation thing, but it's nice to see this. Do this wrapped up? Oh cool! Also on the signal, our thing karthick writing about streaming in asp net core. So it's easy to do a hub for the interactive communication stream. It's good for if you're streaming, content out, so you've got um chunked data that you're sent so here he he goes through doing that. So come at a nice! You know nice, article here and and interactive thing at the end, we're showing the streaming data okay.

A

So this is another one in the series from shahid he's talking about EF relationships in asp net core. So this is a meaty post very, very helpful. This is timely. For me I was just working through some stuff for the for the workshops: asp net core app workshop, so here he's building out an application with learning resources, he's working with youtube content. All that, so here he's building out many-to-many all kinds of different relationships. So he does. You know.

A

One-To-Many builds up too many too many, and already off of this there's been some some questions on twitter and people. You know asking more about it. So any and he's got some great references at the end to you. I'm talking about they'll, Aaron's, great stuff and just great great post. Alright, this is neat and relock. Here he had a user question on speeding up first hit on a website by pre building services. So he goes through and does this his first kind of take at it?

A

He just loads up Singleton's and it was kind of underwhelming. He he shaved off only 26 milliseconds. So not that great. He actually, then. He goes through and takes another run.

C

A

Counts, John time is precious well wait'll. You see this, he goes through and he builds all services and then he gets he gets a more massive. Let me see 117 milliseconds.

C

A

So so this is interesting. This is kind of a new experiment that he's built out here. You know kind of interesting to see I'm hearing some background noise, I, don't know if God is listening, I think they may need a mute on her side. It's not.

C

A

See if I can mute, I don't think I can tell there's your trouble.

A

Okay, this is from Jurgen and he's talking about customizing. You know this is setting up secrets.

A

So course, if you've got startup, it's easy to configure secrets using you know using your standard configuration, but if you've got something spinning up in start-up, how do you do that? So we kind of spells out how to do that. Saying.

A

Ladder and ladder I don't know if you're hearing yeah.

C

It's like getting worse.

A

Hello, hey I'm in here. What's up we're hearing a lot of background noise from your site, I! Think! Oh, you.

D

Guys are probably hearing it, not the streamers, but.

A

Okay, cool! Thank you, okay, yeah! So anyhow this. This is helpful to more about that. So, if you are doing something where you're not using the whole startup and you're just using the using kestrel, you can configure secrets there as well. It is wonderfully quiet now, I can concentrate yes, so Damian and David did two talks. One that David David shared is his slides for this. This is scaling asp net core applications. So this is a meaty deep technical presentation here and all the slides are there.

A

So that is neat I'm not going to take you through it, but it will make you feel either smart or stupid. There's a lot of stuff this based on things that they run into in helping customers that are running into applications that are not scaling so so yeah a lot of good stuff, and of course this is from NDC London. The actual talks will be out soon, they're all recorded and so we'll share those from those come out. Also at NDC London.

A

We were both there partly for workshops, so we updated the asp net core app building workshop for asp net core. That included new stuff with data and included updates for identity, some cool things. We actually use scaffold identity. Now we updated for bootstrap for so a lot of a lot of stuff. That's this we've been building this application out for years and it was cool to kind of delete a lot of code.

A

So, but you know by because a part of part of what we do at this part of why Damien's told me he likes doing this workshop? Is he sees what the pain points are in building real-world multi-tier applications and then tries to see how we can make is peanut core better to make. You know app building better, so so it's cool as we go through and build the applications out.

A

You know to kind of see how that evolved so for time in the app gets easier to build. You were there.

B

A

A brand new pizza.

A

Yeah yeah, so so amazing. This is. This is a brand new workshop. If anyone wants to learn the latest in blazer this, this is as fresh as against.

C

Even a short URL for that you can go to aka.ms/offweb.

C

Repo, oh, that would be great idea. Yeah we'll do that.

A

Ms / blazer blazer.

C

Workshop all one word: no there you go, that's it. Oh that's the magic you, but, but but.

A

What's the point of putting it there, like you put it there, then there already well yeah, but people can save this and share it around now. Okay,.

C

A

I got this: let me share this with my friend, alright.

C

Cuz, it's a full two day workshop where we go through and build a pizza store, app using blazer and webassembly and razor components with a real time. Yeah. If you watch look at you know, we decided it's basically drone pizza delivery because the yeah he just that driver. He just goes like he's going to that that location plowing through buildings.

A

Okay, morbley I got some more fun blazer links, so this is from Vakhtang G I've got two cool things from one. Is we've shared several of his things over time, so he's he's been sharing them under the I. Guess, I, don't know how to say it, but so he's got a YouTube channel, which you pointed out to me. He also recently shared this. This is a blazer spreadsheet I, don't even this is just crazy talk. You.

C

Need office 365 anymore.

A

Step aside, that's 25, plus one. Let's make this 25 plus you know 400 like and it's it updated all these other things. It's just I, don't even know. What's going on. So that's neat. Michail here he's got an event aggregator. So this is for pub/sub. You know, I'll be honest over time as people are building out more advanced applications and then these different application patterns start to emerge. It gets harder for me to keep up, but this is really interesting and exciting.

A

I think, as people are building out these different components here this is an event aggregator and building out pub/sub. Here.

C

A

C

Know one of the one of our principles with Blazers we tried to be enabling, but unup Enya nated like we want to. We don't want to dictate which patterns that you have to use for like important coordination or state management. We want to kind of leave that up to the the community and the ecosystem to figure out. So it's great to see stuff like this, where someone's like well I like this pattern, let me let me try implement that on blazer.

C

Let's see what that looks like and you can you can do it, you can see how it feels and but you're not you're, not locked into it. You have the flexibility to try this pattern or whatever pattern you like yep,.

A

Cool all right, his from showing integrating javascript logging with blazer. So so this is this. You know: there's there's advanced support for JavaScript logging, all through different browsers, and so here he's using Interop and logging out through the javascript api is from blazer. Then yeah, then in the end you know you can you can write specific things out and stuff. So of course that's that's something where interactive debugging and stuff over time. The browser like browser, developer tools get better with web assembly, but you know you can't meet a log.

A

Sometimes there you go so this. Of course this is an guy, yeah and I. Basically, I think I have this and oh that was. It was just this yeah. So this is how I transition over to you I think here's this post erode and some of the stuff in here is about um razor components and all that things amazing things yeah. We.

C

Shipped razor components in asp.net core 3.0 preview too: it's it's it's in it's in the box, it's in the SDK now!

C

So what what that? What does that mean like? Let me let me uh me sure so,.

A

Let's switch over to you and I, don't know if all Nesta said or what happens and if you share your desktop, hopefully it works I'm. Why, of course, there's a screen delay I, make sure in case you're like cursing the.

C

Blog post, it should be the same thing. It's like it was a seamless transition to what you were.

A

Wonderful, ok,.

C

I'm gonna assume it's working, you let me know if I need to switch everything anything up but yeah, so we shift dotnet course Rio preview, to which, of course, had a whole bunch of updates to asp.net core, but one of the big ones was that Razer components are now in the Box. Razer components is basically the Blazer opponent model that we have now integrated into asp.net core.

C

So it is now part of the of the framework and in this release, what you can do with Razer components is you can now server-side I know yes, but you probably step back into fast like well. What really are Razer components? Well, Razer components are individual pieces of UI, it's for client-side, UI development. You can compose them, they can handle user events and it gives you a way to build client-side web UI logic completely in dotnet, without having to write any JavaScript.

C

That's really what it does for you and they are flexible and that they can be hosted both client-side and server-side. I think I got even a little little diagram down here. I mean we pull that up yeah these guys. Okay. So if you've been falling on the blazer you've, probably seen the picture looks like this with blazer, we run the Razer components directly in the browser on a web assembly based at runtime. So you have web assembly. That's that's just part of the browser.

C

Every modern browser supports this new low-level bytecode for the web, and then we wrote a dotnet runtime in web assembly. That can then run dotnet code directly in the browser, and we then wrote a UI framework based on Razer components that we call blazer that allows you to write rich, modern client-side web apps using nothing but but that.

C

But the cool thing about these razor components is that they, the way they work is they render when they run their rendering logic they render into like an in-memory representation of the UI, like of the Dom, for example, and then the framework takes care of looking at what the components say are saying that they want to render doing a dip of what was already rendered previously and then applying only the DIF to the actual underlying UI layer like I've, in this case the the browser Dom itself and because those two things are decoupled.

C

You have component rendering logic and then the thing that actually applies, the UI updates the means that the components can actually run in whatever process you want. They can run directly in the browser like this with a blazer app, but they can also run in a completely other process. For example, you can run them on the server, which is what we're doing with a CI net course Rio.

C

You run your razor components server-side in three: oh, that's where you're, rendering logic actually execute in response to any UI events that get sent from the browser to the server and then when the server has figured out how the UI should be updated. It calculates the diff and then sends that back down to the browser to then be applied by the framework and that's what we call asp.net core razor components. Razor components hosted server side.

C

So that's what we're shipping in in 308 sits there it's in the Box, it's in its first preview, for you guys to try out.

A

Now, when I'm looking at this diagram because of the way you're saying like it can get it from anywhere like, for instance, I could have a web page, do do, I have to be, can I be communicating with more than one server? Could I be shipping HTML from one server, and then it's actually going signal art to a signal, our hosted service or something. So we are using signal art.

C

For the for the connection, but this is a connected model, you're kind of treating the browser's like this sort of almost like a dumb terminal right like it's, it's just your UI layer, it's the thing that knows how.

A

C

Render a Dom all the user events are being sent to the server to be handled and all the rendering logic computations is happening server-side, so because it is a connected model and we're using signal R. For that connection, it has all the same constraints that signal are like you do need I think basically need to have sticky sessions for for how those connections get managed. Fortunately, like we have a whole service, an Asscher that helps you deal with all those connections.

C

We have the agile seizure signal our service that can help you with scaling out all those connections for all your connected clients. To, like you know, tens of thousands of really easy. Okay show how to do that.

A

C

C

Just had in my pocket yeah, so razor components is absolutely designed so that it can work with the signal, our service, because we know that that scale out scenario is gonna, be really important. So it's it looks like how you would use the as your signal our service with any a spec core signal, our app. You basically add the azure signal, our service SDK to your project and then there's like two lines of code that you need to add.

C

You need to add the azure signal, our service services in your configure service method and then in configure you wire up the the actor signal, our middleware to point at whatever hub it is that you want to host so I'll show you the code here so I've already and apologize, my my machines. Obviously we don't do a crawl as they open up more and more visual studio instances, but here that there's the Microsoft Azure signal are that's the Azure signal our service SDK that I just wouldn't had and add it as a new get package.

C

This is in a Razer components, app and then up above in my configure services method. You just say add, as your signal are along with the address signal, the normal signal, our services and then down below we're, saying: I want to use Ray's components like I'm gonna. Do my normal razor component thing? We have this. Currently, this code will probably go through some iteration as we move through the release, but right now what you do. Is you tell razor components: hey, don't don't host the hub directly, I'm gonna, do it myself?

C

I have a different way. I want to host the hub, and this up, of course, will be named two like components up or something like that. Instead of Blaser hub, there are some blazonry names that didn't quite make it all the way into preview too.

C

But here's where you actually set up the service, you say, use our signal arm and then you say which hub that you want to be hosted and then that will then set up this sort of negotiation where, as clients connect to the app they will get redirected over to the azure signal, our service. It didn't handles the all the connections coming in and then it multiplexes those connections back to your app so that you don't have to handle all that load and it's as simple as that.

C

So it's just a couple lines of code and in a package. Okay,.

A

So the the kind of in case it's like hard to follow because there's the blazer with the webassembly thing and then there's also the Blazer hosted on the server and the nice thing here is this is I, don't need any special support in my browser. Anything that can connect to signal are and can support it right. Yeah, okay,.

C

Yeah exactly so, the the nice thing about razor components running on the server is that it has much less burden on the browser on the con, the client itself. The browser doesn't even need to know how to run web assembly, like literally we're just downloading some JavaScript into the browser, so some infrastructure JavaScript that we provide that sets up the signal, our connection.

C

It knows how to send the browser, UI events up to the to the server, and it knows how to handle the UI diffs that are being sterilized and sent back down to the browser so that they can be applied and that's all it's doing so it's a very thin client, like you know, III literally think of it as, like. You know, a dump terminal, OH a mainframe, it's it's!

C

It's just acting as a presentation layer, all the guts and the smarts are happening server-side in this model, and so that has pros and cons right, like the the benefits of this model are well you're. You have much fewer requirements for the client, so it works on a variety of clients, including older browsers. The startup performance of the app is actually really good, like the the only thing you need to download to get the app up and running is that little bit of JavaScript, so the app actually starts up very fast.

C

All of your code stays server-side. You know it's kind of been been interesting as we talk to people who've been falling along with blazer and Razer components, there's a set of them that are like you know: I, don't really are not really comfortable with my dll's actually going all the way down to the browser. Like does that mean people will just we'll be able to see them and be able to disassemble them and see my code and the answer is yeah I mean that's how write work? Of course, they.

A

C

And they're, like oh hold on I, mean I, have I've IP in there that I actually don't want to disclose in that way. Well, server-side razor components on the server gives you a model for handling that, where you can just run all the code on the server it never leaves the server. The only thing that's going down to the client is a UI. Related traffic actually have an example of that. This was a.

C

This was a demo that Steve Sanderson gave that a Toro dev and we showed it again at NBC recently the idea this is a razer component space that it's gonna run, server-side and I. Think.

C

We're running so you know if we, you know refresh this app and make sure this is.

A

By the way, if anyone's like kind of watching, but also sort of like checking sports or something you gotta watch this, this is one of my favorites demos, I've ever seen.

C

See if we can see the wire size of this app is this app is literally all really running server side. You can see it's even saying: I've set up a WebSocket connection to the server. If we look at what gets downloaded here, you know normally for our blazer application. You're talking a couple Meg's to get everything down. This app is only you know, 101 kilobytes transferred and if you could see that at the bottom, so it's pretty lightweight, there's not much coming down to the to the browser. That's because everything's running, server-side, there's a connection.

C

That's set up to the server where all the UI logic is being run and the idea what this app is well, the way Steve pitched it is. You know, imagine your your your your your management comes to you and they tell you. You know we figured out that it's it's best for our business.

C

If we have good reviews, like you know, good good comments and reviews are for our products, and so what we want to do is we want to use like sentiment analysis so that we can filter out all the bad reviews and only only have good reviews on the server like okay, and so what this app does. Is it trains, it's already trained on ml net model for doing sentiment, analysis like a real ml Garnett model?

C

If you go, look at me the application, this the dot app project, that's the Razr component, part of the app and if we go looking in here, I think it's insured yeah Knox. Let's go look at the page first, so the review page that we were just saying before. So it's got a text area and then on input. So every keystroke. It's calling this update score method written in c-sharp and in here it's calling into this sentiment class to do a prediction to to calculate whether this is a good or bad sentiment, and we can.

C

We can look at what the the code for that looks like here's the sentiment class and there is this sentiment: dot zip file, that's the actual, trained and old. On that model, that's used to doing the sentiment analysis and it when you, when you do the prediction that calculates the number between zero and one where zero is like. You know, just utter despair like you know, complete misery. You know a horrible state when one is like the the ultimate human, ecstasy or whatever. So that's what this is.

C

This is doing and, of course, this the sentiment model. This is this is no data that we use to train this thing. This is proprietary. We don't want to send that down to the client. We've got to keep it on the server where it's a part of our you know key IP assets. So that's what this this app is doing. Every time, I click a type of keystroke, gets sent to the server a calculate sentiment and then sends it back down, and hopefully this slider down here will shift based on the sentiment. So, for example,.

C

That's kind of negative sentiment, whereas this is great.

C

When we get good good sentiment, so surprised.

A

When you were going off on it, it still gave you a 12% I.

C

A

You need profanity to like.

C

Yeah, maybe I think that model in this app may be a little bit naively trained. It probably could be if we were more experienced with training models. Probably could do a little bit better, but you can easily serve so to give you the idea of what what this technology can be used for. So none of that none of that calculation of the sentiment happened client-side. It was all done on the server. So that's kind of one of the benefits of server-side Blaser.

C

Another benefit is or RAZR components is that you get to take advantage of dotnet like, like you have full dot net core that your razor components are running on. So you can you can you know, use any dependency you can. You can use the full debugging because you're, you know you're running on just a normal dog net, core runtime I've done this.

A

C

Me try if I go back to that app and, let's see if we can, let's see if we can set a breakpoint right there. This should work right, we're running on net core. We can debug dotnet core it's running server-side, so we know we have some stuff where we can debug dotnet code when it's running in the browser and we're working on making that a whole lot better. But still it's a little rough right now, but since we're running on just normal dominate core here, we should be able to to debug.

C

However, we want and right from visual studios, let's get the app up and running again this time running under the debugger and then supposedly, if I start typing into the text, box, I should be able to hit my breakpoint. Of course, it's really a little slow, not sure. What's going on, give it a second you're.

A

Typing this David Pines asking is this open source or where he can find this demo? This.

C

Demo, so we're actually working with the ml net, guys right now to try and make this demo public I think Steve's. Actually, man has had a bunch of times the the sentiment model is actually trained really naively in this app, and so he hasn't published it yet because go Steve, you know he's a perfectionist right, like he's, does quality work and he's like I, don't want to like embarrass ml down net with this completely.

C

You know garbage trained model, so he's working with them to actually get a really a decent sentiment model put together so that we can make it make it public, but if I just start typing and so now, I'm over in the the bunker inside a visual studio in my razor component, just like you expect right, like you could do this.

A

C

Views you can do this and razor pages. You can do it and razor components here, because we're running server side. We are actually working on enabling exactly the same experience for client side. Blazer, that's not available yet, but I know Steve. He showed an early sort of prototype like demo of it at NBC.

C

Unfortunately, I'm not set up to do that, but if you want to go see that in action where your debugging client side, dotnet code running in the browser on web assembly from within Visual Studio, go check out, Steve's blazer NBC talk as well yeah, so that's that's Razer components, running server-side and you can use it today. So let me close.

A

Well, you're doing the computer II stuff there, but that is an important thing. That you're pointing out too, is that debugging is definitely a simpler process. Debugging like server-side signal our code vs. debugging web assembly in a browser, is a little bit harder these days right so that.

C

Is a nice yeah current assembly? We do plan to address that, but for right now the web assembly base. The buggin story is a little a little rough around the edges. So actually a lot of people when they're building blazer apps they'll actually set up their app in sort of this duel mode where they can flip it between client-side, blazer and server-side razor components and the reason why they do. That is because, when they're developing it sometimes it's convenient to be able to.

C

You know, step through the code and use all the debugging tools in Visual. Studio will run server-side razor components in order to do that and then, when they actually go to publish the application, they flip it back to blazer because they want it to be a you know, have all the capabilities of a client-side web applications or for offline and all those those things. Okay. So let me let me show you how you can get going with razor components in dotnet, core 3. Oh so I've already installed the document core 3 o preview, 2 SDK.

C

So if I pop up a command prompt here and if we just do like a dotnet version that should show us 3 Oh sdk version yeah, that's the one. So that's a that's the the 300 SDK person that you want to see: 101, 84, okay and once you've got that installed. You're also going to want to get Visual, Studio 2019. The latest preview I believe it's like preview. 2.1 is what they just pushed out and we still have those two things: you're ready to go with Razer components, so they create your first stop.

C

You create a new, a snit core web application because we're going to create an a snit core, racer components, app I wish. We call this. Let's call this Razer components. One do I have one of those already. Let's see, looks like a jaunt good, okay and then in the file new project. Dialog. In addition to you, know, creating a vanilla, razor pages web app, an MVC web app. There is no a razor components, template and that's just a web app that is built using razor components.

C

So let's go ahead and create that look and see what we what we got: okay, so kind of like what we saw with that sentiment. Analysis app, you'll end up with a solution that has two projects: you'll have a dot server project, that's just a normal asp.net core web app. It's the thing, that's really hosting all the Razr components and then there's a separate dot app project, that's where all of our razor components are actually live here we have, you know our our traditional encounter. Fetch data and index dot cos HTML files there.

C

The reason why currently we have this code in a separate project is kind of interesting. There's. Some technical reasons. First of all, one is that these these are your component files right, these CSS HTML files, they're razor files, the razor components but because rate racing opponents actually compile in a different way than like razor pages around the NBC views, and so because they compile differently, we put them in a separate project so that it's easy to tell like. Oh okay, these CSS HTML files we're going to compile this way.

C

Those CSS HTML files that are like your razor pages and views will compile, compile the traditional way. So that's one reason why they're in a separate project? It's actually for that reason that, in the future, we plan to start using a different file extension for your razor component files, we'll move to razor, so that we can really easily know that these are razor components and not embassy views or pages, and that was actually to put them directly in the patient core altogether. Yes,.

A

So I had a question on that here. This. This is setup for, if I'm building an application, I've got a server and a component. What if I was building out like a whole component, suite or I wanted to build out, like a you know like a component I wanted to distribute like a spreadsheet, for instance right yeah. Yes,.

C

You can build, I mean raise your components are just classes like when we take this. This counter dot, CSS HTML file and we build this product and I look at already built. Let's see it already built when we build it. The razor compiler will first turn the CC HTML file into a bunch of c-sharp, and it's just a class. Then that class gets compiled into the assembly for that for that project, and then you can distribute it.

C

However, you want so you can build just normal class libraries that contain components using these CS HTML files and the razor SDK and then build them and distribute them. You can package them up as new kit packages and share them with the world. We actually have a whole bunch on the blazer site.

C

If you go to laser net slash community, you highlighted some of the folks some of the things there folks in the blazer community I've been doing, but in this library section, there's actually a whole bunch of libraries here that are actually just normal blazer component libraries, like here's, a blazer grid, someone wrote a bunch of bootstrap for base blazer components that you can just add these as NuGet packages to a blazer or a racer components app and then use those components. Just as like it's like I collect, you would a library like another API.

C

We have a template for creating these types of component libraries. It doesn't yet ship in Visual Studio. We didn't get it into the this preview to release. We do plan to get it into our future release. So by the time dotnet core 300 ships, there will be a racer component class library template that will have it all wired up and ready to go to create a racer component libraries. In the meantime, there is a blazer, a class library template that basically has the same infrastructure that the you can use.

C

My can I can show that bill fast. Let's, uh let's hop over here, let me go. I should probably make this a little bigger, so you can see. Let me make up the the font size boom. Okay, you see that alright go to my desktop. Let's uh I'll show you some of the CLI experience for working with these projects. If I want to Don that new, a blazer app laser so uh blazar have one would that be created.

C

Okay, and if we go in there, we can't on it run, run, don't know true, don't it run the blaze, our app and let's just make sure that is working I'll pop up the browser here, so that we can see that once it's going, I think it'll probably be on localhost five thousand one.

C

That's thinking run again, my for machine got teams going and all this is the essence and says: come on.

C

B

C

Wow well, I, don't know what happened there. That was this is where people usually say Dan, you need a new laptop okay, so it looks like it's running though, and yeah so we got a normal just the vanilla, blazer application. Okay, great! So let's stop that and clear this out and now you know what I wanted to do. Actually I want a solution and I don't want to create solution myself. So let me pop up here and there done that new, a blazer hosted application is what I really wanted: blazer posted one.

C

So this is the same app, but instead of just being a standalone blazer app, it's actually hosted in an instant core project that will give us a to project or like actually a three professional solution, and then we can start adding things to that. If I run this project, it'll see exactly the same thing as what we just saw mm-hmm all set up and then, let's add a class library to it, with some components that we want to be able to use.

C

Storing everything looks great: okay, let's go into our blazer host, yes and let's dotnet new, a blazer lip a blazer class library is a just a normal dotted standard class library that is setup up with the Razer SDK. So we can compile Razer components and it also has some of the infrastructure for dealing with static assets like JavaScript files or CSS files or images. You know stuff that you might want to carry with your component class library that those components are using okay.

C

So if we look at this yeah so now, we've got our blazer Lib project alongside our place or hosted project. So let's add it to the solution. So dotnet solution add blazer, lib, okay, good and then I'm gonna reference. This blazer lip from the from the app from the the part that actually has the razor components in it. So dotnet had to was it's a client project, yeah client project, a reference to blazer Lib, one all right cool, and now we should be all set.

C

So, let's, um let's look at the code for this real quick and we do need to do one little gesture in order to use the components in blazer. Let's look at the what the components are doing.

C

Okay, so let's see what we got here, so we've got a couple projects we've got client-server shared and blazer live thus like like before server is the ACE MIT core project. Client is the one that has the actual RAZR components in it and then Lib is down below. It has a single component in it component, one which just has a div there's nothing really interesting going on and with it, but it does have some a class on it. A CSS.

A

Class can I bug.

C

You to bump up the font just a little bit.

A

There we go yep that yeah much better much.

C

Better all right great well too, big, oh okay, so it has this content folder also with some styles in it that styles, that particular class. It has some JavaScript in it that we can call for a JavaScript Interop purposes, and it has a background image for that for that component as well.

C

So these are all static assets that will get compiled into Blazer Lib, one because embedded as like embedded resources, so I can just reference the package and then there's build infrastructure in in blazer and Razor components apps for extracting those assets so that they didn't get served static files from your application. Okay, so I want to use component one in my app. How do I do that? So let me go to my app and in here I'm gonna go into the view, imports file and I'm gonna add this.

C

Is this is kind of a ugly hack just for now this will change, but for right now you have to say add tag helper, star, blazer 1. This is currently how we discover components in other class libraries, so this basically says like I, want to grab all the components from laser live one in.

A

C

Future with the way we plan to do, this is just by namespaces, like if the components in the class that defines the component is in scope in terms of its namespace like, if there's a using statement that brings it in then that component will be in scope. That's how that will work going forward, but for right now you have to do this.

C

Add tackle birthing and then I've done that I should be able to go into my index page and add a component should be able to go component one, and now, let's run this and see if that shows up so you've got to run the server projects. The way hosted, templates work and, let's see if this works.

C

Again, that's slow, startup time innocence, sure! What's going off my machine for it to pop up, come on.

A

We've got some questions stacking up to you when, whenever is a good point to stop for some questions,.

A

Yeah, okay, so let me see so just to echo it. We answered the question in the chat, but David pine was asking: if people can add things to the community page and those are all doc effects. So there's an improve this doc link on every one that you can click through see.

C

This link right there, click to improve this doc link, send us a PR. We love hearing about community work that people are doing, and just you know just edit. This page put put your either your sample project or your library in the right spot. Send us a PR and we'll be happy to pull it in.

A

Let me see question from rest here: will it be possible to run client and server-side models in the same app, so I think that the idea there is you have a shared project right.

C

Yeah so I finally,.

C

But so I think what that saying is like you have like server components. Were you, like? You, have a connection you're dealing with you, your server side and then also have client side, blazer, I. Think I. Think that's what they're asking like pieces that actually are run completely in the browser, and the answer is yeah that should work.

C

The I mean you basically would just take different parts of your app and and say like this part: I want to be server side, razor, razor components and this this part I want to be client, side blazer, and that should work. Fine I mean when you think about blazer blazer is fully client-side. It's just a bunch of static files that get downloaded into the browser. It has no clue really what's running on the server you download the runtime, you fire up, the runtime you download the DLL is you execute?

C

The DLL is all in the browser and as far as it knows, you could be running node or PHP or Python or whatever on the server, and it doesn't care in your when you're hosting blazer Internet core app. All the a snit core app is really doing is providing static file hosting for those those blazer client files. So that part should work. Fine, you can have you know part of your app. That is, you know, being handled completely on the server.

C

Then you also download a runtime and run some code on the client to do some stuff that that should be totally cool. Let's, let's uh let me jump back to this. So let's get the app spun up. So this should look just like before, except now we should have a new component on the home page and there it.

A

C

You'll notice that it's picking up the background styling of this component is using the image that was from that component library and this red dotted line. That was one of the styles that came from the CSS file that was in the component class library as well. One little caveat on this experience that I will highlight for preview too and preview to only this static file infrastructure that I just showed you here currently only works for Blaser projects. It's not working yet for a RZR component project.

C

So if I tried to do this same demo, but instead of referencing component one from a blazer project, I reference it from a RZR component project, the static files wouldn't get picked up, you would still see the component. The component stuff would work, because the component model is the same Wow, but we haven't done the work yet to like pull over the JavaScript files and the CSS files and stuff that are embedded in the assembly. That's just a point in time: limitation, okay,.

B

C

Over here, so then, if you want to create your own razor components, apps, you can do that in vs, just file your project and you're, where you go, and this thing will then run and the really cool stuff is that all of the component model pieces are now part of a snit core, like this, a snit core components that server that's where the component model that originally shipped as this experimental thing in Blaser is now shipping as part of the the product.

C

A

As part of that, a lot of questions on like clarify what this means can I use this now, when's it shipping when's, you know, what's released ones, you know like timelines.

C

Great question: okay: so for timelines, the the stuff that's in dotnet, core 300, which is the stuff I, was showing you in Visual Studio 2019, like this project and the ability to create RAZR components that run them server-side. You, your signal, our service, that is, shipping with Rio it's in the box. Already it will ship with Rio. So we just should preview. We are planning to ship previews about you know once a month and then we're looking at maybe a fallish release. Probably four: three: oh I!

C

Don't I, don't know that we've made any public commitment yet as to exactly win three: oh we'll ship, but that's roughly when I would expect 3:02 land, so server side, support for Razer components, shipping! You can plan to use it in production. You can think about writing real web apps with it. That's no longer experimental that that is something that you can take a bet on now.

C

Blazer is hosting those same Razer components but hosting them in the browser. That's the part that is not yet that is not committed to ship with Rio. We are planning to continue to work on blazer. In parallel with three-dose, so every time we ship a.net course Rio release like baby to preview, 3, etc. We are planning to ship a blazer update that uses the the up.

C

The the new razor components, improvements that we made for that release, because blazer will now depend on the razor component model in.net core 300, so we'll continue to work on blazer in the same timeframe, but it's not gonna ship in 3 out it'll ship. Sometime later we do plan to ship it. We just don't have a concrete ship date, yet we don't have a full roadmap as to when that will land the big, the big work item. There honestly is finishing up the web assembly runtime there's a lot of stuff still to do there.

C

Like you know, we've been talking about debugging, you know the debugging is still pretty rough experience. We want that to be really good. We need to finish fleshing out the dotnet standard support in the web assembly. Runtime. We need to improve performance, we need to do work on the download size of the web assembly runtime.

C

Those are all things that are in progress, we're actively working on them, but they're not gonna, be done in time for the the 3-hour release, at least we don't expect them to be so sometime later exactly when is what we're working on right now to figure out. You know, can't doing the costing exercises and trying to put a put a date out there as to when we can commit to have this done so.

A

One nice thing as far as as you point it out, I can I can, if I'm expecting, you know if I'm planning on shipping, some that's blazer, webassembly based I can build stuff using racer components and they kind of supported, 300 timeline thing and then flip it over to place her front end when that goes and like so so I'm. That's kind of a nice model right that unblocking that.

C

Is that is very intentional to like some people will ask me about the Razr component model like like the server-side model and they'll, be like I, don't know about the server-side model? That's really! For me, I mean there are some trade-offs with the model like you have to have a connection. There's no offline support, you're paying for it on the server like yeah, you're, you're, running all the components server-side. So you know you've got to pay that cost of hosting that additional load.

C

A lot of people are like I, really prefer to have the client-side model, and the answer for those people is yes, server-side RAZR components is on the path to get us to the client. It enables us to ship the component model and the tooling well in advance of when the web assembly runtime is actually ready and once that web assembly runtime is ready, we can ship blazer as a client-side framework and then now, if you want to take your racer components, server-side based apps and move them to be a blazer app, you can do so.

C

It's literally the same component model. One of the demos we often do is like taking a razor components, app starting starting out as razor components and then flipping it to be a blazer app just by changing a line of code like we talked about earlier, a lot of people do that in development. So.

A

Christopher has been patiently asking several times about the pre-rendering branch he's been following that and question on when that'll be semi alpha or whatever I guess, there's a pre rendering branch in the Blazer.

C

Is already in and you can play around with it, I, don't even have it in the thing so they're in in preview. We didn't make a lot of noise about this quite yet, just because it's still, the experience is still a little rough, but we did add support in preview for rendering pre-rendering a components like into an MVC view or a razor page.

C

Well, we want to have an integration story there, where, if you already have an MVC app or a razor pages based application, that doesn't mean you have to now like throw everything away and start again. If you want to start using racer components, you can use racer components, side by side with NBC and razor pages, and in fact you can even we will enable you to use your components within of you or a racer page.

C

Well, we want that experience to be that you just use normal component syntax within of your page, to to render a component right now. It doesn't quite look like that. Like I wish I had it I'm, not gonna, try and set this up on the fly, but just just to as an examiner component files.

C

It doesn't even really completely make sense, but the syntax looks something like you have HTML dot like render component async I think is what it is, and then you specify the component that you want like I'd, say, I put a counter here and then, of course, this isn't even real razor syntax in this file. You put parameters here like parameters that you want to pass into the component to say: hey I want to render a counter here and here's the parameters I want to pass the counter when I render it.

C

That does work in preview too, and what that will do is it will take the component, render it its run it to render a HTML into that page or view at that point, which is effectively a pre rendering of the component? What it doesn't do yet is it won't wire up interactivity like if you actually did this with the counter component and tried to click the count button?

C

It doesn't know how to yet re-establish a connection back to that component so that when they click button event happens in the browser it gets pumped back to the server and then refreshes the Brunton runs a new render and pushes a dip down and updates again so that it's only the first pre-rendering that's currently implemented, but we want to have full interactivity wire up done as well, so that you can use any raiser component from any page or view it's really early right now. But there is some stuff in the bits.

C

If you want to see a full demo of that flow again. I'd point you to Steve Sanderson's blazer talk at NEC, london. He did show the this this model for doing pre, rendering and it's pretty cool cool.

A

So there's a I think a really interesting question, that kind of explains some stuff well right, asking if Razer components or seo-friendly and if I can take my guess at this, because it's using standard, HTML, Javascript CSS on the front end it's as it's it's standard like. So this is not like the Silverlight flash, plugin component model sort of thing. This is standard HTML on the front end that, for the most part, could be SEO friendly right. So.

C

The the SEO friendly part will come in once we have the full pre-rendering stack in place, because what you need is you need. You need a web crawler to be able to make a request to the side and just pull down some HTML and be able to index it right, the Razr components at least right now.

C

That's not what will happen like you'll pull down some like route HTML and some JavaScript, and then the JavaScript will establish no signal or connection, and it will run the components on the server and then pull down what the Dom updates to be, and then the page actually renders which is not what you want for SEO, but with the three rendering work that was mentioned previously. That first hit will actually be a full render, and then the connectivity will be established after the fact, in the background, so that user interactivity can then be established.

A

Cool and there's a few questions on the size of the download like what's going on, you know like how small is it and how small can we get it and that kind of thing so.

C

Right now, with Razer components, the download size you're looking at is about 100 kilobytes for the app I believe, most of that that payload is coming from. You know, bootstrap and the components that server JS file that we downloaded up the signaler connection, along with the Sigma client code. So much lighter the Blazer client apps right now are weighing in at about two megabytes compressed when you create a new blazer project.

C

The bulk of that that size is coming from the the web assembly runtime itself like the web as a file is, is about 700 kilobytes compressed. Then you have like the core BCL assemblies like like a Miss correlated effectively in system system core and those those types of assemblies. Those guys are the the next heavyweights in the payload.

C

Well things that we're doing in the blazing world to trim downsize like we already run the app through an IO linker to strip out unused il that helps with the assemblies that happens on every build like you just build the blazer app and it will strip out unused il the so there's things that we can do to try and make the the core libraries that are downloaded more linker friendly, the it doesn't help with the web assembly file, though the web assembly file, obviously isn't il. So I am running an ion.

C

Linker on it doesn't doesn't do anything. There are there's still the potential to to dig into the web assembly file and find pieces of the runtime that actually are kind of left over from other platforms that we support with the same runtime that actually aren't used on on. In the browser like there may be debugging infrastructure in there that doesn't apply to running in the browser those types of things there may be opportunity to try and take a scalpel through the web assembly file a bit more and trim it back.

C

We still hope to try and get that app to be closer to a megabyte in size, total download. By the time we shipped laser remains to be seen. If we get there, I mean we haven't made a lot of progress recently in terms of size reduction. In fact, where we've been more progress actually is in performance.

C

Blaser performance right now isn't fantastic in the browser in part because you're running on an IL interpreter the web assembly file, you're downloading, is isn't gonna like try and JIT the downloaded il to webassembly it'll just interpret the raw il directly, which is which is great for having a fast developer workflow, but not so great if you want to do like CPU intensive workloads directly in the browser. So the mono team on team is been working very hard on ahead of time.

C

Compilation support for Blaser, where they can take chunks of like the BCL or of the app and just go ahead and compile about those parts to have assembly leave other parts that are iterating faster and maybe aren't as performance sensitive leave, those as just normal net il, and then you have this nice balance of fast performance for the parts that need to be fast, like those parts can just be raw web assembly still get fast. Iterative develop developer, workflow for stuff that you're, like and on coding, on cool.

A

Let me see several questions on. When can we get at that NDC, London, video and as far we don't have a date, I mean that's NDC conference when they release them. They usually take a week or.

C

Two any, but they these are pretty good about getting them out. You can watch watch that as well. Yeah.

A

Cool interesting discussion- Fred I was asking you know, is place, are gonna replace JavaScript. You know, I I feel like it's easy to. You know, like people, I think people like to turn this into a one thing versus another thing and I love just having a tool. You know like I'm, mostly a.net, developer, I love web technologies too, and when, if there's, if there's stuff, that makes more sense, for you know it's nice to have a tool if I want to use razor and c-sharp to write some front-end stuff, that's great.

A

You know and I talk to you. A lot of mostly is peanut back-end developers that occasionally have to write like some angular or react, and they don't feel comfortable with it, and they don't really know what they're doing you know and they're like well. I just got to do it because I got to write this front-end heavy app heck man. That sounds great for a blazer app. You know sorry.

C

The way I often think about it, is like it's not so much that, like blazer or web assembly stops, people from you know keeps people from running JavaScript what it does is. It expands the ecosystem that you have available to you when you're writing web apps, and you can of course write JavaScript. Then you can continue to write.

C

Javascript and JavaScript is has got its strengths and it's got a phenomenal ecosystem in community and I'm sure people will be writing JavaScript for many years to come, just like people write, C and C++, and probably even assembly code like they have for for many years, despite the advent of things like Java, and.net and Python and other managed languages, but in addition to writing JavaScript now, you can now use all these other cool tools and languages and frameworks that you could never use before you can use dotnet if you want to use or rust or job or whatever in the browser that is now possible.

C

Thanks to this new open web standard, thanks to two webassembly I do think there are a bunch of people today that are writing JavaScript. That would probably prefer not to be like you were saying like they, they maybe have to occasionally dabble in the angular react or whatever and they're like I've got to do this because I have no other option. Well now, at least those people will now have that other option. Whatever a platform, it is that they prefer. They can now use that platform if they prefer writing in JavaScript.

C

They of course continue to write in JavaScript, and that's totally fine, there's nothing about this that well it like removes the the the capability to write JavaScript. It expands the ecosystem, which I think is great and.

A

Like a thing that you showed earlier was that using that ml, you know trained library and I think that is a really key thing to is. If you have NuGet packages and libraries that you are used to, and you know, work like no no need to go, find a JavaScript or typescript equivalent like you, can go and start using all your new get packages and your shared libraries and all that stuff. You can use those in the client which is pretty amazing. You know yeah.

C

We've done a demo. I could probably set a time, but one fund like generating a full Excel spreadsheet, from the browser using just dotnet code, like it's actually surprisingly easy to do. There's a there's existing NuGet package out there I think it's called a TP, plus it's fairly popular. It's got like 5 million downloads and it's it's a dotnet library for generating full Excel spreadsheets like charts and conditional formatting, and it works in a blazer app. You can file new project, create a blazer wrap.

C

You can put a button on like the fetch data page and then just write some normal net code to generate an Excel spreadsheet all running in the browser and then download it from the browser. And it's it's it's. It's awesome like it's just simple. You can use the tools that you're familiar with familiar with as a donut developer.

A

Scott Henry did a demo at Kinect in December. That blew my mind and it was. He I think it was tic-tac-toe from a WinForms application and it was built component based, and so he brought that over to blazer and running it. You know running it in the browser and- and it's like you know, but it's because component based dotnet code like ported relatively easily, so.

C

Yeah, it was the same. It was the same at logic with a WinForms front-end and a blazer front-end same same dotnet code running running both applications, I've been sitting on this and I'm still I was hoping. I could just hit the hit the button live while we're on the on the air, but I've been sitting on this. This little v6 right here for for the morning and I'm, just waiting for new update I've keep. You know if you've noticed that I keep I, keep refreshing the.

C

Laser package we are planning to ship blazer 0.8 today, as soon the packages are all done. The v6 is all done. I've got the blog post queued up those that should be going live momentarily as soon as the nuke and indexes have updated. With the packages. We will be shipping that blaze of 0.8. What does it give you?

C

It is basically blazer now reimplemented on razor components from the the.net course REO release, and then it has some updated mono bits in it as well, that have improved performance and an improved IO linker like now in a Blazers you're, not a tap if you want to use Jason on that. Just as is we've had issues with that for a while, because the Isle linker would like strip out parts of the VCL that Jason on that actually needed.

C

That's now all fixed, so you can just use Jason net I even tried using the the ACE minute, Web API client package, which gives you like the like, read ads of T, helper methods and stuff like that that all works just seamlessly. No, no, no, it plays a 0.8 in the browser and that should be shipping later today. Look for the blog post can.

A

You can you like previous blog post for us, I'm gonna, give some. You know, excitement to the.

C

A

I, don't want to put you on the spot or anything, but I totally want to put you on the spot.

C

Okay, so most of the blog post is the steps that you'll for updating existing projects to the blaze of 0.8 API is because we, you know, we've moved from Microsoft a snake or a blazer about whatever to Microsoft a snake or doc components for a lot of the packages. But this is the blog post that we'll be going live shortly. You got the dotnet core, 300s DK, Visual, Studio 2019 and the latest blazer extension from the vs gallery.

C

um You only need that now, actually for the templates like that to get the blazer templates to show up in vs, you don't need it for any additional tooling.

C

The tooling for razor components is now in Visual, Studio 2019 like it's in the box, it's part of the general razor tooling, so it's no longer some some sideshow and then we'll have have all the instructions here on the updates that you need to make to your existing 0.7 apps to update them to 0.8- and it's mostly just you know, switching around packages and updating namespaces and some tightening updates. All here, I'm.

A

Holding up my lighter here for the just showing my support.

C

Runtime improvements, here's Jason Annette, you know working seamlessly in in a blazer app with with no no modification needed; no, no, no, il linker config needed it's just the normal normal stuff and, as always, let us know what you think there will be a link to a survey in the templates that we'd love to hear what you think about blazer. Okay,.

A

So for people that are excited about this, obviously the huge call to action here watch for that blazer release will tweet it from asp net. Well, you know it'll be on the social medias and stuff. How else? What's the best way for people to kind of keep involved and keep up to date with what's going on in blazer land, okay,.

C

So, there's a bunch of ways that you can stay involved. You can watch our check-in code as we work on blazer. All the code now is actually in the paint it's Nick core repo is the core we used to be in our own separate repo right, like Glazer, was this experimental project, so it had its own repo when its DOX page and such all, the blazer code and razor components code now just lives in the main, a snack or repo, the under source components. It's all here.

C

This is this is all right here in the main repo, including the Blazer bits, it's in the the main line. So you can follow along here. You know, watch issues watch the points coming in there's also the Blazer get er, which is really great, haven't joined us there. It's pretty fun. Lots of people are pretty active on this Gator chatroom talking about blazar talking about community projects that they're working on I, try to hang out here as much as possible.

C

So this is a great place to just chat about what's going on with Blazer and then the docks also that's. This is kind of interesting. We have just recently started moving the docks into the main, a snit core docks so before. If you wanted docks, you would go to blazer dotnet and you still can't go to a place without net. That's that's totally fine! When you click on the docks link.

C

Now, instead of taking you to github pages, this will now pop you over to the main, a snack or documentation where you can learn all about razor, can paint razor components and how to build your first razor components, app wow.

A

That is a beautiful homepage by the way on that blazer site.

A

Well, this is so exciting. I am super happy to see the the continued progress. Congratulations to you and the team, and thank you for the last minute. I literally pinged, you like what like last night- and it was like yesterday afternoon- and it's like hey neat stuff last week at NDC London and want to show it off, and so thank you for being a good sport and jumping right in I was.

C

Sitting next to my phone wondering when is John gonna call me.

B

A

Problem happy to be here: okay, cool! Well thanks, a bunch I think we can I, think I hear Gomez in the room and she can I don't know do whatever she does pray, Thank, You, Gomez, see uh I! Guess we're done goodbye! Everybody! We.

C

A