.Net Foundation .Net Community Standups, 3 Apr 2018

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ASP.NET Community Standup - April 3, 2018 - Blazor Update with Dan Roth and Steve Sanderson

Description

Links from the show: https://www.one-tab.com/page/y9hMr6oSRHa6-cYGr9BNzw

A

And we're live mm-hmm quite exciting, all right we're live, but we have zero viewers, which makes me frightened we're.

B

A

I guess that's good there. It says nine waiting, okay, no there's Becka awesome so covering thousands of miles between us house how's, the weather up there, both of you.

C

Here it's I think it's cloudy today. Yesterday.

A

C

We got some sunshine yesterday it was nice, but it's it's still cold though it's not it's not sunny warm. It's like sunny. You need to wear a jacket and a hat type type of stuff, but I did have a neighbor who mowed his grass on over the weekend. So it was. It was sunny enough over the weekend that they could actually start the the yard work for the year, which I am NOT. Looking forward to.

C

B

Bristol UK as well study enough, my kids to get on the trampoline for the first time of the year. So everyone's really unhappy about that excellent.

A

All right: well now we have 65 viewers, so there we go alright. So so we have Dan and Steve on to give us an update about blazer. We also have time constraint so Dan. You need to wrap up at 10 what time yeah.

C

Sometime before and like within an hour, we normal show okay.

A

All right so so I guess we'll just we'll get started quickly. So I'm going to do the Community Links I will begin with the screen sharing.

A

Awesome, okay, so the first first post we've got is from talking dotnet. This is I've kind of scrolled actually to two-thirds of the way through the post, but what they've got here is is showing this is the experience you get. This is uploading with an angular, 5 and asp net core app and they're, showing they've also integrated with the angular progress api. There, that's that's kind of nice.

A

You see the upload progress, so here we go with the upload browse and we get the percentage counting up and, of course you could do other things like a progress bar or whatever, so here, they're, showing how they've done that this is going through implementing the relatively standard with the upload API and then showing the angular code on the front end to connect to that so kind of cool. Just to see that wired up.

C

This is the latest angular templates for a phrase Nick or it's not using the spot templates. You know, I, don't know.

B

It's definitely.

A

B

C

Okay, cool cool.

A

Yeah, it's I didn't see in there where it said how it was created, so all right. Well uh so this is from David Barry and he's talking about implementing hate, OS or hypertext of the engine of applications.

C

A

C

A

New OS version, a new.

C

A

We're just like.

C

A

C

That it's just you're just supposed to say hyper media that hate us or hate hate hate.

A

For a while right that.

C

Was a specific, a specific protocol, specific format of an example of a hyper media based API yeah, okay, good.

A

C

Us now that's I.

A

Think it's pretty straightforward, that's what it is hates you. So this is an application into my understanding and please correct me, but this is kind of like there's rest and rest is kind of a generic, pretty general thing it's using HTTP as kind of how you're navigating through your api's and then this is kind of more of a prescriptive implementation of that.

A

So here's here's a sample project David spent a Saturday going through and implementing this with asp net core um Web API and you know, talked about he's using autumn a /. He also talked about kind of how he set up his URL, resolving and stuff like that. So cool.

B

A

So yeah and and looking for feedback too, so if you've got, you know, feedback send it over to him. The folks over at zapper all have built out a health check. So this is a health check library for asp net core has has things like backends, you know, can in report and stave safe health check. Information so looks pretty interesting. So this this is out on out on github and, of course, like every week. We'll share these links at the end and they'll be in the notes as well.

A

Ok, matt Milliken, pretty quick post here, but he's talking about he was building out he's hobby project he's building a railroad hobby project and he wanted to use an API and he ended up using scaffolding to build out his API so he's just showing quickly how he did that, and in this case it looks like basically using scaffolding to create the API and not necessarily even necessarily using the back-end that he used to scaffold it. It's like.

C

A

C

Is cool picture, though.

A

Ya know roads, yeah,.

C

A

An eye so Matt, let us know if you build more of this we'd love- to see pictures of railroads on controlled by asp net core control by asp net core, maybe some raspberry PI's, and it should be animated gifts of the trains going around the track and stuff, so David Fowler tweeted. This out. This is project bedrock update, so this is kind of so bedrock is kind of the polling.

A

The abstractions from the kestrel and and performance related work and pulling that to reusable kind of API that other people can use as well, and so this is kind of talking about. This is an update on where they're at so cool Nate McMaster. So we talked about this just last time. Here's an update, so this is dotnet serve. This is a a quick it'll serve all files in a folder, and so what he's done with this is he's added in also it's a global tool here, and so what he's added in since then is razor.

A

So this is razor pages support, so you know throw a folder of HTML and now razor pages and just serve it up so kind of an open browser. I want open browser. You want open browser, oh right, I,.

C

Want to be able to Don that room from the command line and have it pop the browser. For me, that's great good yeah.

A

Yeah neat stuff.

C

A

Continuing to add stuff in here and relock a global tool on implementing tiny PNG api. So this is a common task. You need to minify your pngs, and so here he's gone through and set that up so yeah using the tiny PNG api here and showing you know, examples of squishing down images and the you know how it works and stuff I want like a global tool.

C

Catalog is there, is there a catalog yet.

A

C

Not aware of one that's a great idea: I mean a global tool stuff into that one is hot.

B

C

That people are publishing the new get that you can now just just use, dotnet install the tool from the command line and use it like I want. We should have. Maybe new get could have like a way of searching for them all like show them.

A

Yeah, like a tag or.

C

Something right like yeah,.

A

Cool all right, so the folks over at six labors. This is image sharp and they've they've noticed people are building out middleware using image sharp, and so this is actually middleware that they've built out. So this is pretty neat. This is an image, an image library, the image, sharp graphics, library and then they've built built out middleware for it. So this is pretty neat and, as they've called out, the orchard project uses this as well.

B

A

Stuff yeah six labors is really cool. They've got the image. Sharp is kind of their main thing, but they've built out suffer a lot of these things as well, and.

C

Are they cross plot? Is image sharper class work on another OS I.

A

Believe, yes, yeah see here, they've got their builds working on Linux. Anything.

C

That you know yeah.

A

So yeah very, very cool stuff and then the last one here this is blazer related and oh I forget his name here so Greg has built. This is this. Is nice he's got a series dotnet concept of the week? This is episode nine, and this was from from March, and here he's kind of done. A I think it's yeah fifteen minutes where it kind of goes in-depth into you laser, and so this is starting with way at the beginning. He does like a compiling.

A

Well, he talks over fundamentals and he actually builds out like some using him script in from the command line, showing kind of how it works- and you know some basic stuff, then then digs into you, showing you know using things like browser tools, how lasers, working and then kind of builds out some more complex stuff, including to-do, app and stuff. So I thought that was really cool to see the community kind of going in and starting to build this stuff. That.

C

One's amazing, it is.

A

That's it. That's all my that's my links of the week thanks.

C

Greg burning that post stuff, that's great all right! What do you got me? Well, we were going to talk about blazer. We shipped we shipped our first release of blue blazer. Our first preview, blazer 0.1, is now public and available for people to try and I should share my screen. Let me let me show some some stuff. What do I do here? Yes, I click, this so everything, oh matrix, okay,.

B

C

It's amazing. Yes, you see okay, so yeah. This is the blog post that went out a little over a week ago, I think a little week ago and yeah. There are our preview bits of blazer that you can now download and install I mean we've had prototypes. The plays are kicking around for a little while, but this is the official thing like the first, the first part of our experiment, to enable everyone to try out dotnet in the browser yeah. If you haven't heard about blazing yet you're a little little late to the game.

C

That's fine! But there's our new web UI framework that works in the browser with dotnet and webassembly. It's dotnet in the browser right, your your single page applications with with c-sharp so yeah, this blog post here that tells you all about it and how you can get the bits. So if you want to get set up with blazer on your old machine, you should what you want to do. Is you're gonna want to get the dotnet core 2.1 preview, 1 sdk you're, specifically going to want the preview 1 sdk, so that'll.

C

Take you to here and you'll want to grab the sdk from of for your platform of choice, so you'll need that that's the minimum so that you can just create glaser apps and build them and run them. But of course, you're probably going to want the tooling as well. So they get the tooling you're gonna need the latest preview version of Visual Studio.

C

So you'll need the preview channel that you can get from Visual Studio comm /v s, slash preview, so install this, and that will give you the the infrastructure that we need to enable the blazer tooling. And then, on top of that.

B

C

Should install our blazer language service, which is just a v6 that you can get off of the visual studio marketplace no I know.

B

C

Folks, like that's a lot of preview bits I know some people feel some angst about installing preview bits, but all of these preview bits install cleanly side by side with all the stable releases, but so the SDK that will just be another separate SDK folder on your machine, your toooo sdk. Is there it's fine, it's untouched with Visual Studio, you can install the preview version of Visual Studio next to your stable version of Visual Studio, and they will both work happily together.

C

I know some people still don't believe that so just to show this like this is my machine. Currently I used to actually have four versions of es. I now house, just f3 but I've got stable. I've got the preview channel. You know 15 7 PP to I think is the latest just came out a little while ago, I've even got some like crazy internal preview, build up Visual Studio that haven't updated. As you can see, you know in a while, it's still back at 15:6 and I've never had any problems with this.

C

It works great, so install it. It'll be fine. I know from days of your installing a preview version of es you felt, like you had to read, have your machine, but with the new Visual Studio installer. It actually works really really well so I strongly recommend doing that and you're gonna want the.

A

C

Studio tooling, if you're on Windows, so these I.

A

Just want to see I want a second. What you're saying I've done this on my on my work, machine I've done this on my work, laptop I'm. Using these constantly, they are side by side. It's like. So it is not the old days like you're saying it's. You really can install side by side, multiple versions of Visual Studio and, like it's not a big deal. If.

C

You're super paranoid. There are Visual Studio preview VMs on Azure that you can just grab a already installed and set up visual studio preview, installation, and then you can add the like the Blazer language service on top and the the write dotnet chorus. Okay. So if you really want to do in a separate VM, you can but honestly I think this. This works really great.

C

So that's how you get set up, that's how you get the bits and then in the, if you read the blog post like it's got a whole bunch of you know: instructions on how you can get up and going with blazer I should I, unfortunately need to emphasize again that this is still an experiment. This is not a supported product, so don't go building your next. You know internal company critical line of business app on this.

C

Quite yet the reason why we are shipping these bits to you is so you can kick the tires with blazer. Let us know what you think about the direction that we're taking with the programming model. What you think about how don''t is working in the browser in general and yeah also, so we can gauge the amount of interest, so the more people that install the more people that the more likely it is honestly that we will then take it to be something that will be product.

C

So please do install and use it, and let us know what you think: John have you installed blazer on your machine I. Certainly.

A

Have you have Oh see ya John.

C

John did it even.

A

I did it it seriously. Wasn't a big deal, I clicked through the links on your on your thing. It's it's visuals. The latest visual studio, which I run anyhow I always run the latest, but I have the same as you have multiple builds and then, and then the v6 and it was like boom boom boom done. Yeah.

C

Not a big deal so I've already I've done these steps. Of course, I'm on my machine. You can see I've already got the the Blazer language service installed. This is the preview version of Visual Studio and then, when you want to create your first laser app super simple you're, gonna file, new project you're gonna want to create, and it's it's a it's part of the a spit umbrella. So a snit core web app is what you're gonna want to create and then you'll see our template. So there's two templates here: there's the standalone blazer template.

C

That's basically like blazer is a bunch of static files, and you can, you know, publish them as static files to github pages or to FTP to whatever server you'd like. But of course, one of the really exciting things about blazer is full-stack. Dotnet development, we're not only you're using c-sharp and Donette in the browser, but you also are using it on the server, in this case a spinet core.

C

So we have a template that also sets up a multi project solution where you have a the server project with a snit core and some web api s and your client project, a blazer that talks to it and even a shared dominant standard class library that you can use to share code between the two.

C

But to get going with the easy simplest thing, I'm going to do the standalone app, so click OK that will go ahead and create your template and then let the the course the package restore just do its could do its thing and we'll just go ahead and run it now when you, when you run this you're gonna want to control f5 like it's run without the debugger and there's a couple reasons for that. One reason is that well, first of all, the bugger is not gonna. Do any good with your place wrap.

C

Yet we don't yet have debugging support set up for Blazers. It didn't make it for this release, we're at hard at work on it with the with a mono folks, and we hope to have it soon. But it's not there at this time. So you're gonna want to control that v, just to avoid doing something that not good anyway. Second also, there seems to be some issues like what, if it was chrome like when you're using the debugger with chrome, the script debugging stuff in Visual Studio will treat.

C

The web assembly file is like several thousand webassembly functions and Akins tends to sort of bog things down so control. F5 is your friend to build and run just control f5 for now and then in the future. We will of course slide up debugging. This is just the first preview release of blazer, it's just a 0.1, but this should look like every blazer app that you've probably seen in a demo.

C

So far, we've got the counter page where you can click a button and it updates the page without a page refresh and every time you're clicking you're calling c-sharp and net there's no JavaScript being being used there and then for the weather forecast page. This is actually issuing an HTTP client request, the server pulling down some JSON data and then using a razor to dynamically, generate this table. Based off of that.

C

Off of that data, so that's how you can do it from vs. If you are on a Mac or you're on Linux, we do also have CLI based templates, so you can use that net new to great your your blazer app. So if I go to my desktop I think so the first thing you're gonna do is like dotnet new I.

C

All means installed that allows you to install template packs and then the template that you want is such a pretty easy. Remember: it's Microsoft, a snit core lays or with an old blaze or couple it's kind of shocking, shocking package, ID, okay, and so you hit enter on that and that will install the the blazer templates for you and I've already done that. So, if I look at dotnet news help, output I should see blazer and blazer hosted yeah there right right there.

C

Ok, so now I should be able to dock that new blazer, so I can do dotnet new blazer, oh and that's great blazer 1 for the folder and that will literally create for you the same template that we just saw if I go into that folder and dotnet run should start up a little development host to host our blazer app and we should get the URL where it goes. Ok, great! So this is the Euro.

C

The app and I should be able to not go here and we'll see the same thing loaded up need an edge yeah there. You go ok! So that's! If you're on on Mac or Linux, you can do get going with a command line and your favorite text editor of choice. We don't yet have blazer tooling available for long windows. Os like we only have blazer tooling, enabled currently for visual studio on Windows I.

C

My tooling I mean like the really fancy ready, razor editing support with like intellisense and completions, but we are working on that and I'll talk more about our roadmap. You know in a little bit: okay, but that's a just getting started from the from the console. I got.

A

A super quick question as you're doing both of those the little.

C

A

Thing that cups up in the corner yeah customizable easily. Oh absolutely,.

C

So, let's, let's take a look at the the app created here and we'll well understand all the parts and you can see.

B

C

Can see well how you can can change that so so, first of all, there's those three main pages that you see on the app right. There's like the home, the fetch data page of the counter page and those are implemented using Blaser components. Everything in Blaser is done with a a component. Those top-level pages are themselves components and they're each implemented by these razor files, these CSS HTML files.

C

So there's the counter page, there's fetch data and there's the the home page and these pages these pages are routable like they're they're, a page because they have this app page directive at the top, and that says that this competitor component should handle requests to slash counter. Similarly, for fetch data, this page should handle requests to the fetch fetch data, URL and routing is set up in this app in the root component of the application, which is this app's es HTML.

C

This is the the root of all the components in the in my Blaser application, and you can see it only has a single. It has a single component that it's using as part of the root app definition, and that is this router component and what the router component does is we're pointing it right now at the the assembly file, that's built for this app and it will go looking through that assembly for components and specifically components that have that app page directive that have a route defined and then it will handle.

C

Then you know, as requests come in calling the the correct component based off of the address that you specified using the app page directive. Let me make sense so far. Yes, right John is with me.

B

Different to server side, SP No in the sense that on the server you just have this one global Rooter, and that works perfectly good for server-side programming. But a very common pattern with client-side app frameworks is that you want to have lots of different Reuters that handle different parts of your application and so expressing that as a component like this allows us to do that. Now, it's not fully implemented yet, but you will be able to have multiple ridges and nest them and give them responsibility for different parts of your app.

B

So it's just a different way of organizing that same concern, but it should be just as powerful and useful as server-side rating. So.

A

Jamie on the chat has a question: how how a blazer component relates to a razor page well,.

C

That's a great question so place. Your components are a little different. Like blazer components are pieces of web UI. They are. They are similar to stuff that you do on the server server and that they're both using the razor syntax you're using c-sharp and HTML to decide like what markup you want, but on the server. What's really happening is you're you're, basically generating HTML as a effectively as a string and then sending it down to the browser and having the browser render that HTML doing using it doing its normal thing with Blaser components.

C

It's it's actually different. We take the the razor files, the CS HTML files, and they they just just like on the server they do get compiled into a class and it's the class that basically has the compiled functionality for generating the corresponding markup button. Blazer those classes get downloaded actually into the browser as a dll, whereas in the server side, you're, just you're downloading a string with blazer you're, actually downloading the compiled classes and then client-side in the browser.

C

The Blazer runtime will will ask components to render and those components will render their markup using the the logic that you specified into a rendering tree and then blazars runtime will handle updating the Dom in the browser based off of that rendering tree and as components change and they rerender themselves. It will diff the the new rendering tree that the component just created with the current one and update the Dom in accordingly, making it very efficient so you're not touching the DOM too much like you're, basically doing it as little as you as you can.

C

So that's that's. How it works is that that helps that. So that makes sense it. It does.

A

One question that kind of gets included in there and there's several questions coming in on chat, which is cool, um one is, is Allen's asking if it's possible like for him. It feels more natural to do routing and c-sharp. Rather than use the razor kind of I guess default routing. Is there a way to control Ike? Can you go in and control that and modify the routing if you want, if you're more comfortable with kind of standard, yes, yeah.

B

So now, because we've got a we've, got an outstanding pull request for this, which hasn't been merged yet so, as of this very moment. No, but when we finished with merging this pull request, you will be able to subclass the router if you want to, and then you can override the method that it uses to map a given URL to a component type, and you can put any logic you want in that. So you can build your own completely custom, URL matching system, if you want to.

B

If for people who want a more high-level way of giving a list of URL patterns in regular C sharp code, we'll probably have a way of doing that as well. But it's not there just yet.

C

So one thing I want to show is: how does that root component get wired up to the app? So this is the program CSCS file and there's a static void main just like you would have in a console app. This is the entry point for the Blaser application and you can see this is where the browser renderer for the app is being set up and when you set this guy up, that's where you specify what you want the route component of the app to be.

C

You can see here, it's saying, I want it to be app now, the the the type name for the generated type for each of the Blazer components is based off of the file name.

C

So the reason why we have an app type is because the file was named app, dot, CSS, HTML, and so the type that got generated out of it was, you know, public class app was that was the name of that type, because, similarly, for the other, could the other components like there's a counter class that will actually get generated from the counter dot.

C

Css HTML file there'll be a fetch data class that gets generated from the fetch data, CSS HTML file and then to finally get to your question originally John about like how well how'd of it. How do you customize that loading thing on the page well notice again in that program, CS file? Not only is it specifying what you want the route component of the app to be? It's also saying: where do you want to put it like? What's the Dom selector of that?

C

Where of where you want that component to lie in the page and the page where it will put, it is in index.html, which is under the doubled-up root folder. So you have to have this index.html file, and this is basically the page right for the app and all the other pages that you see when you run it are being handled through client-side, routing and navigations. So there's the loading text, you see it the app yeah there's the app element and it just has loading inside of it.

C

So that's the text that you're seeing while blazars getting itself up and running and getting the components rendered, and then it will replace this this app element or put replace its content with the rendered output of the of the components. Okay, cool, so many interesting things that are happening in this file, so this file actually gets modified as part of the the build of the blazer applet. You see. There's this script, blazer boot a tag, that's in this file. When you build the blazer app, this script tag will actually get replaced. Let me get it.

C

Let me get it up and running again, so we can hopefully see that it'll get replaced with another script tag that references the a piece of JavaScript: that's used to bootstrap the donít runtime within within the browser, and also to point it at the applications. Entry points. Let me see if we can dig around here.

C

B

C

You see this script tag here so here it got that that's the blazer blazer boot script that got replaced and it's we replaced it with a reference to this blazer that j/s file. This is what's gonna, get the web assembly code for the.net runtime up and running. It also has the main entry point for the application, so there's the web application is the DLL that was built from my project and then, as all the references that are needed by the application.

C

This is all the references that were specified as part of the compilation step, trimmed down just the things that that we know are absolutely needed. So we actually do on every build aisle stripping, will remove assemblies that aren't used and il code from assemblies that aren't actually used at all. In fact, so if we go back to the app and try to build again make it the output up, let's see if we can do a rebuild, we should see that.

C

So if we watch the the output spew by, hopefully we'll see so running some linker thing and delete assembly assembly, so there it's like pulling out all this stuff that my app doesn't actually need and that helps reduce the size of the the application, payload and I'll reduce load times now. This is.

A

Just saying that reducing the load time so Benjamin had just asked in the chat. How big is the blaze rjs request, yeah.

C

Let's, let's, how big is the blazer Jas yeah I mean the.

A

Whole app like.

C

I, presumably I want. He want think.

A

C

Both good questions, yeah he's fairly small, like it's basically just starting to run time and has some of the the wiring up and it's zero bytes transferred. So it's zero bytes, no I, don't know edge. Tools are interesting when we go to back to the matrix real, quick, okay here. Just so I can a little bit better I think it's like two three mags Steve, probably members off the top of his head.

C

A

C

Meg's transferred Oh yep.

B

That's that's right. Yeah yeah.

C

Yeah, so that's where we're not, and we still think honestly, that's too big like I was saying this is our sort of first draft of doing this optimizations. We have other optimizations that we do plan to do and like we want to trim back like one of the big. The big payloads here is actually the web assembly file itself like here's this one here mano del Azzam is 1.7 Meg's uncompressed.

C

We we, we know, there's a bunch of stuff in here that we probably don't need that we can trim out, there's also some more aggressive trimming of the rest of the the BCL dll's that we are pretty sure that we can do. We just haven't gotten around to it, because there's there's lots to implement Elizabeth Glaser, but so that's at least a starting point and to get people up and going so there is aisle trimming, that's happening and it happens on every build well.

B

So we'll certainly get quite a lot smaller than it is right now. The other thing to bear in mind is, of course the this can all be cashed as well on a per user basis, so for any given user they were only going to pay that download cost once and then you know they should just be a handful of bytes to load the application for any subsequent times.

A

Do I have to do anything special to mark those like those dll's that are being downloaded to mark those as cacheable, or is that kind of handled automatically.

B

While I'm not promising how it works today, because you know Whistler zero-one-zero, certainly the the way this would be by the time. This was one point. Zeroed would be that no, you don't have to do anything. It would all be based on the actual contents of the dll's, so, whether that's with e tags or with special generated file names, or something like that, no the developer would not have to think about that. It would just be cached forever, based on the identity of the content, oh cool.

C

So next, what I want to show is that some of the tooling, because some of the tooling is pretty amazing at least I- think I think it's it's it's super hot like so, how do you? How do you use a component is? Is one question like this is this is the implementation of the of the counter component and you can tell that it's a combination of markup like HTML, markup and c-sharp.

C

Here's all the the functions block has the members of the component that we want to add and any event handlers that we want to add like this. Is this increment count method is what's actually handling each button? Click, okay, great.

A

New bump size just a little bit I would.

C

Be happy to I apologize for that that better yep, all right, cool okay, so now this will get turned into a class and then how do you use that? Will you use that using like HTML tag like syntax? So if we wanted to add like the counter component to the the home page of this app, we can create another account or component instance. So let's do that.

C

You can see I'm getting awesome intellisense over the the counter component names, so I'll get completions and that lights up and if we rerun the application, when you rerun, we don't have live reload setup, yet that's coming, hopefully in the next. The next update. So right now, when you want to update your application, you do have to just hit ctrl f5 again that will rebuild and that will rerun the application.

C

Soon we will have live reload will just do that for you, but there so now, I've got my own counter component on the home page and I've got the one. That's on the the counter page itself, and then you can do things like parameterize your components where you want the components of plate. Behave differently based off of arguments that you provide to provide arguments enable printer parameters for component.

C

You just need to add public properties, so for this counter component, for example, instead of having it count by one's let's have the increment amount be something that we can specify and let's say that the fault is going to be one. So this is just a public property, then defining on the counter component and then, instead of just incrementing, let's increment it by the increment amount right cool and then in my home page instead of incrementing by one, let's do increment DiMasi and getting intellisense over the component parameter.

C

So super nice, tooling, honestly, like you get I often feel like blaze, are sort of writes itself for me, like it. Just tells me, like here's, the things that you need to write so I think I meant the one on the home page by 10 and we'll leave the one on the counter page alone. So it's still incrementing by one. If we control that five, we should now see that the one on the home page there.

C

Goes yeah this one's our commanding by 10 and then the one on the counter page still increments by one. So that's how you can do component parameters if I can do component arguments and you get really nice and tella sense inside of a visual studio to help you do those things that.

A

Make sense it does okay I've got more questions coming in, but I I don't want to distract you too much to from let.

C

Me, let me let me do circular things all right bunch of time for questions so layout. How do you do layout in in blazer, so layout is also handled through components? You basically author, a layout component. You can see in our pages directory, there's a view, imports file and it's using this new layout directive to say that I would like to use this main layout component for layout in my application, and where is that guy defined? Well, it's defined as a as a component in this HTML file.

C

It happens to be in this shared folder, so here's the the layout component implementation for for my app to implement a layout. What you need to do is you need to implement this interface, the I layout component interface, and we're doing that using this razor directive at implements, which basically allows you to specify additional interfaces that you want to implement on the generated class and that interface basically has this single property, this body property, which allows you to then specify like where we're in the layout. Do you want all the child content to be rendered?

C

Where do you want the the stuff? That's being laid out to appear in the application, so that's how this done so here we're actually rendering the the body of the layout on the page I just.

A

Want to say one quick comment on that, because I think that it's it's a little bit easy to see like to get a little worried about it and see like you're, using these different components and all that kind of thing. But this is standard HTML, whereas, like some people may I've seen some people say like oh, this is like Silverlight all over again or whatever, but this is using straight-up standard. All the browser native stuff in the client, including, like you've, got bootstrap classes there and stuff right. This is just HTML everything.

C

We do in Blaser is based off just plain old, open standards. There's no plugins, there's no code transformation happening we're taking these CSS HTML files, turning them into normal dotnet classes, downloading them into the browser and just running them on top of a web assembly based on at runtime, and that's all just normal browser tech. We're not actually you know extending the browser in any particular way. Yeah so and that's that's a goal because we want.

C

We really hope that blazer will appeal to you know its broad, an audience of web developers as possible and so the skills that you know around HTML and CSS. We want you to be able to continue to leverage those while giving you you know more productivity and he's a fuse and faster to get started using dotnet and c-sharp, and great tooling and Visual Studio, and a great back-end story without Nick, core and so forth. So.

A

And the component syntax you're using there, that's just a standard kind of razor components. I'm right I mean.

C

Similar to like it has some similarity to tag helpers if you've used tackle pers in in a Smith core and that you, you know, you're defining basically a class, that's being specified as a tag in your in your CSS HTML files. But again it's it's it's the components that are pretty different because they're they're, you know rendering to this render tree. They have stage whereas tag helpers. Are you server-side to you basically spit out HTML as a string on the server, but the syntax does feel very familiar that way: okay, yeah cool, all right!

C

So that's how you write Brett your layout and this nav menu component. This is a component, that's added in the app. This is what's defining that that left nav like this left nav over here, that's all being specified by this nav menu component, and you can see it's using some other built-in components that we give you. This nav link is a component that basically will change the class.

C

It will generate an anchor tag and it will change the class of the anchor tag based on whether or not that's the current page that you're currently looking at. So we just have much of nav links for each of the pages in the app, and that's that's how that's all done. So, that's that's in playing with components. That's using them!

C

That's the the tooling, and hopefully we think this is enough for people to get started with building some interesting stuff and we've actually seen people already do that like build some pretty cool things, I wanted to show some of the apps that people have been building on top of just this fairly basic set of initial infrastructure. Let's see we got here, so um this was an app that I've I found a couple days ago.

C

Someone was playing around a blazer and they decided to write a little app that lets you search through the lyrics in this database mocha DB, which I guess is lyrics for Vocaloid songs, Vocaloid, I, never heard of Vocaloid. Before do you guys know what Vocaloid is no idea? No idea. Vocaloid, apparently, is a style of music.

C

Where the singing is all synthesized, like you, basically feed the lyrics and the music into a computer program, and then it will sing for you, oh yeah, and fairly it's fairly popular in some kind, and there are like whole CDs like albums of music that are all done using Vocaloid technology and this person decided to build a little database of all those the lyrics from all of those songs. So that's that's this app and this is a blazer app. You can browse it and was like well in the song.

C

I, don't I, don't know what callate song. So if you're a Vocaloid fan, I apologize but I think one of the songs that they say is in there is this nebulous song, and so you can search and it gives you the Japanese, the romanized and English versions of the song, so that was kind of fun. That's cool another one! Oh this was really interesting. So there's, apparently this project called real world. You can find it by going to real world dot IO, and what this is is it's an app?

C

It's basically a clone of the medium.com blog engine, but it's reimplemented the back end and the front end using as many technologies as they could so like for the front end like they have implementations of this app in all these frameworks. For the back end, they have implementations at the back end. Using all these frameworks and I think H bit cores on this list as well.

C

So and then you could like mix and match, like you could say like what would it be like if I had like a react front end with a happy J s, backend I, guess so that's pretty cool and some of someone look at this and they said wow. Let's do a blazer port of the front end, and so that's this gentleman here.

C

So he has a fork where he set this up: I'm gonna I, don't I'm gonna bridge his name, so I'm gonna, try saying it, but this is his uh his fork and he he went ahead and published it lies. So this is a live version of the app running on Azure and it's it's quite quite functional. So it's pretty cool. So this is this is basically like a little medium blog post engine implemented in Blaser. So you can check that out. This was an app that actually got done.

C

We had a hackathon a little bit before the blazer release, where we had a bunch of people like try out the the blazer bits and one guy built a DNS who is client in Imbler and I. Think I think this one's even before we did Isle trimming. So it's a little bit beefier than the other applications, but it works so I, don't like asp.net.

C

Yes, you know that, so you can query for you know, domains and who owns this is all implemented. Blazer I think he originally had implemented this a in angular, so he did a port from from angular to it's a blazer and did that there were actually other fun things that they did at that hackathon that I, unfortunately, I don't have the demo code for, but several people try it out JavaScript Interop from blazer apps.

C

You can call into any JavaScript in any JavaScript library or any browser API, because web assembly code supports a JavaScript, Interop layer, and so there was there was one one set of folks that they brought a blazer app that had like a a light meter. They plugged into the ambient light sensor API in the browser and built like a blazer light meter that like would go up and down depending on how bright the light was, so that was being seen by the laptop.

C

They also did a demo using the like the geolocation API in the browser, so cool stuff with with JavaScript and drop, and this was fun too. This is a tweet that I saw a little while back this guy has like a little. You can see it's a little Christmas tree down here, electronic Christmas tree that he controls on the Raspberry Pi that he implemented an interface for using Blaser and also using a Wii wheel. Azzam.

C

If you haven't heard of Wii I, know a lot of people when they see plays with something like if they come from, like a WPF or Silverlight background or xamarin or examine forms background. They often ask us like: are you gonna do sam'l, and the answer for blazer is no like. We don't plan to do sam'l support for blazer, but that doesn't mean someone isn't going to do it and in fact, some guy in the in the community. He he had already taken xamarin forms and wrote like a basically.

C

He set up a like a WebSocket channel between the browser and the server and what and basically allowed you to take those Ameren forms apps and run them in the basically server side, but where you had a lot of the interactions happening client-side in the browser and then tunneling the events to the server through this WebSocket channel, and he saw what we had done with blazer and with the the web assembly base done at runtime, and he said oh well.

C

Well, maybe we could do that fur for this as well, and so he took his Dameron forms, implementation and replanted it on top of the same runtime, and that's this. We project and I have to admit every time I see it. I always want to say Rory, but I. It's pronounced we and it's pretty cool. So if you're interested Samer zamel and it's particularly zam zam n' forms with webassembly and running in the browser, definitely check out his project.

C

He's done some some really good stuff, but yeah there's a basically blazer using controlling a Raspberry Pi to control a Christmas tree, so that was that was kind of neat. So if you want to get started with laser, you probably are curious about dogs. I did show you the blog post and there's a bunch of content in the blog post. Unfortunately, we don't have official Doc's yet, though, for a blazer, but the community was kind enough to step in and help us out there. This learned glacier comm is a site.

C

That's been put up by a guy named Rainer stroke. I think is this last name topic and he's got a lot of great content on here about how to do things and blazer, including like like, if you wanted to mess around with JavaScript Interop he's got a whole page on on that he's got stuff about the data binding works and how you can implement components and razor or in c-sharp, so lots of good content.

C

Here we will have our own official Doc's by the way, we're just you know, trying to implement blazer and get the ducks out at the same time, but in the meantime the community is helping us out. There was also this guy I think is a Chris Saint Saint Lee, who did this blazer bytes blog post series, where he went through a lot of the the blazer infrastructure as well? So so there's content out there.

C

If you're stuck you trying to figure out how to do something, there are people in the community that are helping out there, and- and thank you for you guys that they've been doing that. That's just tremendously helpful and much appreciated so also if you're still stuck and you need help, definitely come and find us on git er. You can chat with us there or, if you want to you, can post on Stack Overflow I know people have been helping helping each other out with place your questions on Stack Overflow.

C

If you have feedback on the product, I don't know if you notice, but on the homepage of the app yeah right here we actually put a little complacent component in that has a link to a survey. Monkey survey- and this is super helpful for us- if you, if you, if you like blazer or even if you don't like, if you just have feedback about blaze, I should say I shouldn't I shouldn't qualify it.

C

If you want to give feedback on what blaze there is in run the app click on the link and and fill out the survey and this this data we've had several hundred people they've already done this, which is just just great, like the feedback that we're getting through this thing has been really helpful for us to set the direction for the product figure out what we need to work on so take this survey.

C

If you're looking for an avenue to get feedback and help out with this experimental phase, or of course, you can always open up issues on github and a lot of people been doing that even we've gotten some really great pull requests there as well. Just.

A

A side note as you're going through all these links: I'm copying them all down here and I'm, so I'll share those along with links for the community links at the beginning, perfect.

C

Now, I'm sure a lot of people have questions about roadmap like what are we doing next plan I have some I have mine me pull up my notes here, so don't miss any stuff here so for the roadmap. I think we should do yeah.

C

Okay, for the roadmap we are trying to get a blazer update out about every two weeks is what we're shooting for we're, trying to move fast, so 0.2 ablaze and we're gonna try and get that out about two weeks after those 0.1 release, which would be around April night now I'm giving dates here. You know everything I hear, of course, is subject to change like we're we're going as fast as we can.

C

This is sort of our goal, but to give you a feel for how blazer will progress over the next, you know a month or two? This is this is what we're currently planning on doing so 0.2 April, 9th, roughly 0.3. We hope to get out around the week of April 23rd and the 0.4 made May 7th is about when we're trying to do that and then we'll. At that point, we will take stock of where we're at we'll look at the survey data that we've gotten we'll look at.

C

You know how many people have installed and what they're saying about the product and what we have found the technical issues to be and we'll figure out what what the future like it looks like at that point. So those are the releases that we currently have planned. 0.2 is already in the works. Things that we have planned to come 40.2 live reload is, is being work is already in steve. Is it? Is it mostly in half way in the.

B

Command line builds now automatically triggered live, reloads, Visual, Studio ones do not yet but I've implemented. It I just need to make a final bit a tweak to the pull request based on some code review feedback and then I'll merge that tomorrow morning, sweet.

C

So I'm almost done so library loads, coming support for component libraries. So what this is is we want you to be able to take your your CSS HTML files, your your blazer component implementations and stick them in a class library and be able to reference them from from other blazer apps and be able to easily reuse them? That's you can kind of do that today, but it requires a bit of manual labor. We want to make that experience really slick for our next release.

C

So that's one of the themes that we're targeting 40.2 tooling for vs for Mac. So this is aspirational. We're gonna, try and do this via ster Mac just release the preview with razor editing support, not that long ago, like I, think just like a week ago. It's the same. It's basically the same infrastructure.

C

That's used in vs on Windows, so we're gonna try and get the blazer tooling working on top of the the latest vs for Mac preview and get an impact out for people who are who develop on a Mac so that you can get the same intellisense and completions working there. If everything goes perfectly smoothly, this will happen. If not, then you know may take longer and but we'll get it out as soon as we can, because we want to have a cross-platform, tooling story as well.

C

Ryan's been working on getting a support for additional attributes in this is so you can really nicely in razor syntax specify that an attribute should only be present based off of some condition. We've also done a fairly major reworking of the bind syntax for 40.2 if you're interested in learning of the details of that before we actually ship that the Ryan wrote a pretty nice summary of the changes in this github issue. This is blazer issue 409, so you can look through here. Basically, what's going to happen here is the syntax?

C

Will change from being at bind to a bind or bind syntax, which will enable quite a bit more flexibility like right now, there's quite a few limitations with bind like you can only bind a certain defense. We have some rotations around tooling with it with the new syntax. It's a lot more flexible, a lot more powerful and will be and aligns well with the the razor based tooling that we're doing other things that are cut out that actually the community has been helping us out with that. You know we hadn't really.

C

We were like we knew. We know we did this, but we don't think we gonna get to it and then the community jumped in and said well we'll do it for you. They will be moving to bootstrap for in our templates, SVG support. We had some some issues with that in the 0.1 release the community stepped in and has helped us out with that. So you can has SVG content in your components.

C

They've been in several civilization improvements around Jason's I got added in the 4 for 0.2, and we are planning to have templates available that work with the latest preview of asp.net core 2.1. So those are the things that I find for 0.2. Nothing related report yet for 0.3 or 0.4, but we do have a github project that you can look at our backlog and feel free to thumbs up or +1 issues that you think are important and that that'll helps us prioritize. So that's that's the plan. That's the road map couple.

A

C

Questions on this yeah.

A

Okay, so so one thing is the the last thing on the lists: are the templates for asp net core 2 1? So that means the current that's. This is mostly for the back end. Exactly.

C

So right now, when you create like an ace, I didn't even show it, because we didn't have quite have time, but if I created the other template, the ace minute core hosted template this and that and let's, instead of doing just blazer stand-alone, let's do blazer a spec core hosted. This will give you three projects. It'll, give you a client project which is the blazer app. This is just the same project that you saw previously and then there's a server app.

C

This is an a snack or application, and in this case it actually has like a like an a spec core controller with a web api in it, and this is what's actually serving the weather forecast data in this app in the other app. It was just like a static json file. Here it's actually a controller and then there's a shared project.

C

That's referenced by both the client in the server- and this is just a dotnet standard class library where you can put like your domain objects, your code that you want to share between the client and the server. This server project is based currently on a spec core 2.0 and we just need to do the template work to give you a 2.1 version. So if you want to try it out with to that one features you can't so that's.

A

That thing you've got there by the way with the class library is a big deal, I think as an application developer, because that's that's often frustrating for me when I've got back in classes and c-sharp front-end classes in JavaScript, I've got to do validation, sometimes in JavaScript, and sometimes in c-sharp. I've got to do conditional logic, blah blah blah it's great to be able to have like a shared class where I can put that in one place and reuse it like that's a great code, reuse story for me, yeah.

C

Super useful- and in fact, I didn't show this. This is a sample app that we have in the a spinet samples repo on the ACE net org. This is called flight finder. Let me run this real quick. This is a sample netthreat Steve, kindly put together, it's kind of, like a you know, mini travel website where you're like searching for flights, it's a little bit more involved in the template. So it's if you're looking for a beefier app to try out.

C

This is a good one to experiment with, so you can, you know, search for four flights and you can, if you find it, find one that you like, you can add it to your shortlist and you can remove them and so forth. This app is using that same three project structure, I guys the Blazer client, which has you know a whole bunch of interesting components in it that you definitely should check out some higher level components in here like this.

C

This gray out zone component actually will capture components as that are children of this component and will, depending on whether this Grail property is true or false. It will layer like a a gray wheel, trance translucent gray overlay on top of the component. That's what that's! What you're? Seeing whenever I do a search? You can see it turns grey in the the search area, that's using that grey out component and then it renders its child components using this child content property.

C

So that's kind of cool, but but anyway, though, that has that server project in the shared app and you can see the shared library you can see. It has a whole bunch of code that it's sharing between the client and server so that'd be like the data transfer objects match on both sides of the wire and so forth, so definitely play with this guy. This is this. Is this is pretty fun?

C

That's in the samples repo, so you've got to give hub a spinet samples and then, if you dig into the samples folder or look for Blaser there, you'll find the fight finder sample cool I, know we're almost at the hour so and I said I said we do a full show, but I can't go can't quite go over, but I do want to answer questions. I know you said they're a bunch of questions. What what can we help? People out with there's a lot of questions there there's a question here. We.

B

C

We don't get your questions answered here. Come join us on git er later today we will try and get them answered there, or people in the community can also can also help out but go ahead. Yes,.

A

I'll, try and cherry pick some, so one asked which browser support blazer so.

C

All the modern browsers support Blazers the Firefox Edge Chrome they'll Safari. They all have full support for for web assembly. We do have fallback support too, as in Jas, which is an older tech that should enable working in browsers that don't yet have web assembly support. It doesn't work yet completely in IE like if you care about IE support, it doesn't work there yet because we haven't actually added the polyfills that enable some of the JavaScript like uh stuff that we're using to work in IE, but we know we can get it to work.

C

We just haven't, haven't done that yet so right now, if you're playing around with blazer zero dot, one edge, Chrome, Firefox Safari, those all work, fine, including.

B

Mobile devices as well, yes,.

C

As has Apple fixed, it's a Mobile Safari bug, yet. Is that that's that been addressed? I know they when they did their spectrum meltdown fixes they like destroyed their web assembly. Support in the mobile browser. I, don't know if they fix that. Yes, so if you hit, if you hit an issue an iPhone, it may be because of that known issue, but I assume they plan to fix it. Yeah.

B

They they fixed it five days ago, when is eleven point three was released. Oh sweet.

C

A

Okay, questions in here, let me see one's asking about things like the nav link. Is that doing a refresh or is that all just browser based navigation, browser-based.

C

Navigation, that's all client-side routing.

B

Application is the client-side navigation if it's an external URL. Of course, it's just a normal. Remember.

C

The nav link is just a component that generates an anchor tag and in a class depending on whether the current page you're on matches the the URL. So if it's that anchor tag happens to point to something, that's you know only on the server, then we'll do a server-side navigation.

A

Gosh, okay, what there's other questions just for people that didn't hear you clearly at the beginning, this asking is server Eddie. Is it Alan? Is that what's it? So this is an experimental project. All those disclaimers, important room, the.

C

Experiment it is, it is available as a preview that you can install today and you should you need to go, get the latest Nick or preview SDK. You need to go, get the latest preview of Visual Studio, which installs side by side with your existing stable version.

C

If you, if you can't do that on your machine, for whatever reason you can go, get a VM on Azure or set up with VM yourself, and then you want to install the blazer language service, v6, Visual, Studio extension on top of us to get the tooling and the templates, and you can do that today. It is a preview. Of course it is, you know alpha-bits.

C

This is an experiment, don't go using this for a production app yet or planning to use it for a production app, but please play around with it and give us feedback, because that helps us know in what direction to take Blaser. Okay,.

A

One other interesting question: is it possible to do a PWA with blazer? Yes,.

C

It's absolutely possible. The experience is a bit raw right now, so I mean PWA is basically involved using a bunch of functionality provided by the browser, and you can use anything that the browser can do from blazer through, like the JavaScript Interop layer. So if you're right enough code- yes, you can do it. Of course, we'd like to make that experience really nice and seamless and provide like Donnan API wrappers for all the things that you care about.

C

We haven't done that work, yet it's on our backlog, like we, you know envision, maybe at some point we'll have a blazer PWA template that has a bunch of stuff wired up for you to get you up and going it's on our radar it's possible today, but the experience is pretty raw right now. Okay,.

A

One last question: you mentioned some of the things that are like checked in or not that, like our nightly, is that or not even part of the two-week cadence release? If people want to run that locally, can they like get clone the repo and run locally, or is that kind of a nightmare? uh Some nightmare.

C

It requires work, and you know it's. Your mileage may vary depending on the current state of the build we do have am I get feed with v6 builds and the package builds. That is, let me so thought net, my god org blazer, Deb blazer does our my get feed, and here we have like the nightly builds of the packages. As you can see, there 0.2 builds here and the v6 is down here at the bottom as well. Do not use. We should take these ste. We should remove this razor language service.

C

Musics do not use this one get the latest Visual Studio preview, and it has what you need from the razor language service. But you do want the blades of language service. There is a way MBS to set up other feeds for visual studio extensions, so you can install this v6 feed this v6 from from them. I get feed and again these are nightly builds, so some mileage, maybe are. You can also build the the repo yourself that does involve messing around with like preview, two versions of the dotnet core SDK.

C

Some people have hit some stumbled about over that a bit that should get easier in a few weeks when the the the.net core, 2.1 sdk, gets, gets updated, but yeah.

B

C

Things are possible, is just it's just little bit more work, and you know these are nightly builds, so the quality is untested, no promises how well it would work. We need to get instructions up on the site on how to do that, and that's all that's on my palette, but plate to do. I will try and get those up later this week. Okay,.

A

Cool we're over time, so I'll, let you go. This is awesome. I could talk about this all day and I'm sure from the chat. Other people could too feel.

C

Free to find us on gator we're on the gator I'm on the gunner chat room, at least once or a few times a day and there's lots of people there as well, that are that are pretty pretty involved with the project already that I'm sure many of them could help you out as well. If one of us isn't already on there, okay.

A

We have one more important thing which is dramatic. Zoom out. Oh, oh, you.

C

A

C

Sharing my screen, that means I go back to the matrix right and no yep.

A

C

Then hang up that work, it did work. Okay, see now you ready. Yes,.