.Net Foundation .Net Community Standups, 11 Jun 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ASP.NET Community Standup - June 11th, 2019 - Blazing Pizza Deep Dive with Daniel Roth

Description

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

Community links for this week: https://www.theurlist.com/aspnet-standup-2019-06-11
Dan's demo app code: https://github.com/danroth27/BlazingPizza/
Blazing Pizza workshop: http://aka.ms/blazorworkshop

Suggest an idea for a standup: http://aka.ms/dotnet-standup-suggestion

A

How exciting it is the deep dish, deep dive, that's right, chicago-style, yeah, very cool.

B

A

Right well, let's just get going, you've got cool stuff to show us. You've got the so everyone who watches the show knows: Dan Roth he's been asp net, all kinds of PM's and blazer lately, and so what actually all? Do you own of asp.net these days? So.

C

I work on all things: Web Apps, so anything that like draws you eye on the screen. That's that's! Those are technologies that idea with so MVC razor pages laser. The razor tooling in general I thought a set of technologies that I deal with these days. Wow.

A

All right so you're busy you've got some cool demos to show us I will jump into our Community Links, real, quick, all right, just get this going excellent, okay, so starting here we've got. Let me see is this: this is sharing okay. It looks good to me good good, okay, so a blog post from Scott hunter last week, kind of clarifying. What's in you know what we're supporting so and the the cool thing here is, if you are using workflow or WCF. These are.

A

This is showing these are kind of some future options that you can use for supporting for migrating to dotnet core. So we were happy to I work partly on this.

A

This is a port of wucf to dotnet core, and this is early stages and it's a community project, but with some Microsoft engineering support, yeah.

C

Okay, so I'm really excited about this. I'm really happy that that that this this announcements gone out, he also went out at build and the reason I'm really excited is I think you know with the don''t ecosystem, but you know because Microsoft tends to be such a such a big player in that ecosystem. I often feel that when there's sort of a indecision by Microsoft, it kind of you know handcuffs, the the community too go and do something cool. Like the code for WCF and and dub F has been out there.

C

You know it's reference source for a long time and I've always sort of wondered. Well, maybe someone will just grab the code and go ahead and get something working encore. You know, maybe it's not gonna be exactly WCF. At least you know a lot of the WUF features based on that code set, but if there's always.

A

This ambiguity.

C

Like wow, but maybe Microsoft will do it and I, and so we won't have to and I'll just be wasting my time if I, you know, do all that work in the open-source community. What I love about this statement is, it makes a very clear statement like no go ahead like community. We want you to go and own this and love this. If you are a WCF fan, I may have little WCF. You know blood in me, history, I I, worked on it back in the day, then go.

A

C

On the Kobe's make it great so we're.

A

Seeing we're seeing pull requests we're seeing issues come in this is this: is an active community project, so yeah very cool all right moving on, so this is interesting. This is and this projects been around for a bit. This is the asp net contributors and what I saw recently on a tweet this past week was that they are now publishing these two new gates.

A

So in the past you actually had to go out and build them now, they're available on you get so the these are both providers that work as asp net core middleware and integrate with things like github, Foursquare, Dropbox, etc. So.

B

Fancy build history graphs today, no I know now I need that. That's really.

A

Nice except mine, which are broken, build, read, read all right, so she head cranking through he's doing his a through Z and he's up to W. So almost done, this is the worker service. So here he's just kind of you know explaining shown showing how worker services work. We've had some shows on these. Recently, it's nice to see his his walkthrough here. Some things he talks about here is actually, like the you know. The kind of differences in the hosting model I talks about building and publishing logging is important.

A

Of course, you you know to be able to actually trace what's going on in your worker, and then he shows running is running your worker service and actually registering it so good stuff andrew lock. So we recently had a show on Microsoft feature management, and here andrew is digging into this, so adding feature flags to an asp net core app and he's starting a multi-part series. So I always love the in-depth kind of the way that Andrea goes through all these and so I'm.

A

Looking forward to reading the rest of the series, it's nice to see, as he's just kind of digging through this and here using a feature flag to show a different welcome banner, you know, depending on the presence of this feature flag, this.

C

Is where you want a flight different features in your web app? Is that right, like you, can just like toggle features on and off and your app with a whole framework exactly.

A

And this is something that I've built myself many times over the years I used to work before I was at Microsoft. Even I worked on conference websites, and so we would have things were like the day that the conference started. It would toggle over into okay, we're live and here's the live, video player and here's the you know what I mean in the live: tweet stream, but before and and it would show like what are the next sessions and that kind of thing before is a conference.

A

It was more of a marketing site like buy your passes and stuff, and we would use feature flags. You know to it, so we could test those toggles out. We actually there were secret query strings, you could put in you know, and you could QA it and test it in production. Tell.

C

Anyone about the secret query string.

A

So anyhow, it's great great to have this baked in, as a you know, complete complete feature so well CQRS. So this this is interesting. Putting together, oh data and OData actually just joined the dotnet foundation as well too. So a lot of plugs for that, and so here he's hooking together, mediator and OData and use it and showing the CQRS pattern so see. Qrs is a command query, responsibility, segregation, and so this is actually I.

A

Don't know if I've seen this pattern pattern before, although here he's linking to Jimmy Bogart, you know there, there have been people using mediator with CQRS I haven't worked on this with OData before mediate.

C

A

Just a walkthrough showing how to do that. Yeah.

C

We act like I, we have the Oh data, the docs for doing Oh data with asp.net core are all in the normal asp.net core doc set. So if you want to learn about Oh data and dotnet core you can you can get started with it today. Very.

A

Cool all right, so this is Peter showing integrating Blaser into existing asp net core applications.

C

A

Thought this is interesting because a lot of the Blazer documentation and tutorials and everything is file new project and everything's kind of all set up for you. So I liked your. How he's showing you know actually integrating into an existing one yeah.

C

You can have like an MVC app or a razor razor pages based app. You know normal server-side rendering pattern, but then, if you want to add like a little a little island of interactivity on in your application, you can just drop a component into a page or a view and have it render there and then will wire it up for interactivity and the once once the app has been loaded. So you can you don't have to go. It's like a lot of people.

C

Ask me is: is blazer like do I have to like now do everything with with blazer going forward Bandhan all my MVC code and then was a razor pages code and there's no like, like even none of those models actually subsume the other. Like you, we have people that do both NBC and razor Pages development. You can use both in the same app and the same thing. The blades are, like Blazers, really actually primarily focused on the client side.

C

Ui, like it's all about client side interactivity, and you add that into existing apps today with and with JavaScript, using like angular or react or or any other JavaScript remark of your choice. Blazer is no different like if you want to add some client side interactivity into your broader application. You can do that with with blazer. You don't have to don't no need to throw out your own code. They complement each other yeah.

A

And exactly and I love that you know they're web tech, geez say I'll work together, I do feel like. Sometimes when we show we show hey here's the new thing we just built and, of course that makes sense. We just built it and we're explaining it to you, but showing that hey you can just sprinkle it into an existing app is, is really helpful. Yeah.

C

Like the way I think about it is there's, there's two ends to the wire right, like there's the server side, end, which we've had a great story or forever with asp.net and and there's the client side in which, for a long time, was just well write. Javascript. If you want to deal on the browser side of the wire now you have an option of addressing the the browser side of the wire using dotnet code and those those two sides of the wire are both, of course, very important. Awesome. All.

A

Right so this is interesting. This is beam and this is a blazer single page application, so any framework asp net core and MongoDB so great. So this is neat. This is actually I hadn't seen this before this is dotnet Academy I believe he calls it and he's so. This is this is Rama and he's just showing some cool. This is one of many actually he's got a his channel.

A

I think is gonna audit that, but here he he builds out all kinds of cool stuff, including like a wordpress, you know type application using asp net core, just just a lot of kind of neat stuff, but this beam one I thought was kind of neat, so here he shows you know, he's actually developing on a Mac he's going out and creating a DB back-end and using the DB driver, NuGet package and and just building an application. Some neat.

C

Stuff cool speaking.

A

Of building crazy stuff on the fly, we've actually started, so we've had for a long time. This live dot, asp.net site, which is you know what people are like able to watch right now and- and this is where we've been having these the thing is, we also have Thursday shows and- and we also are publishing on Twitch, and so this this site is not kind of expanding to keep up with that. Also we'd like it to exist inside the actual dotnet community site, so like right inside.

A

You know you're clicking in here and and you're able to see upcoming community stand-ups. So anyhow, this is something where James Monta, magno and I have been starting building this new site kind of on the fly and our ideas where I'm teaching him asp net he's teaching me xamarin and mobile, because we're actually going to have also a mobile app. That's going to show you, you know upcoming, shows and you can watch on your phone and you'll get notifications of shows and stuff.

A

So anyhow, where we're gonna be live with this this afternoon, here's the link to it over on Twitch, and this is actually a little bit I'm feeling like a fish out of water here, because I'm used to giving polished presentations where you get all your code together and everything's. You know ready and here we're kind of coding on the fly and seeing where it goes. So um this is John.

C

A

Raw, this is just.

C

A

But it's fun. It's neat, so anyhow, there's that if you want to spend your whole day on on Twitch, you know come join us alright. This is when you told me about this is Jeff Holland, and this was a theatre session that build yes.

C

Yeah it was, it was it's a short session. It's a quick watch. It's only about I, think 20 minutes long, but it's packed with stuff. It's all about doing. Client-Side, Blaser in Azure, static, site hosting and then with add your functions for the back end, so server lists on the backend and then he puts the azure CDN in front of the the web application for for better performance and he does the whole thing from from visual studio code.

C

It's it's super super sweet like and he does a great job explaining the how the how the system works. Yeah, I thought about you know: I think this is like now for me, like one of the canonical deployment architectures for a client-side blazar app. It just looked looked great Wow.

A

Very cool all right and all of these are in in the screen, a link so I'll be sending this out. This is the site, speaking of serverless and Azure functions, and all that this is a site that SSO Phillip and Burke Hall, recall and built, and it's a it is a view. Application hosted in blob, storage and stuff. So pretty neat, so I'll share these out interesting cat aside thing: I can't direct it there's an interesting thing with it actually uses 404s and redirection and stuff that works as a web app.

A

But if I paste this into YouTube chat, it um sees it as a 404, so we're figuring that out. But it's that wasn't interesting.

C

Okay, yeah and.

A

Okay, I'm going to stop sharing because it's time for you to share. Oh my.

B

Turn your turn, so we shall we make some pizza. Let.

A

C

Right so well like we just had build, not that not that long ago and I did a session. I got to do a session net build. That was a lot of fun. I got to talk about all of the new asp.net core features that are coming in dotnet, core 3 y/o, and so this is the session and the you know the videos they're the slide deck is up there and one of the things I showed like for me that the big theme for asp.net, core in.net, core 3 o is, is full stack.

C

Web development like like we are trying to address more of the the entire spectrum of things that you need to do when you're, when you're writing a web application, and so for that, for that talk, what we did is we we built this blazing pizza app, which is actually an existing app. If you, if you want to build the UI for this application, it's a it's a workshop for Ferb laser, that's public on the on the internet. You can go to aka.ms/offweb.

C

A kata MS slash blazer workshop, that's the the magic URL that you're gonna want to get there and that'll bring you to our two github repo that has all the code for the blazing pizza, at least for the front-end. So that was an app that we had and what I what we did for this talk was: let's, let's build the backend as well, so that we have a full stack web application, so just uh got to motivate this a little bit.

C

So here was the app that we wanted to build like like I was saying like for a long time. Asp.Net has had a really great story for the server like if you wanted to build web applications, and you wanted to use a request reply server rendered pattern. We've had a variety of options for you over the years. I just supports keep getting better. You know whether it's web forms MVC razor pages. We've have a whole bunch of great technologies that you can use to do server-side rendering of your web application.

C

But if you wanted to do something that actually ran in the browser. Well, what do you use like? What's the, what do you what's the story there, we want to have some code that runs in the browser for a blazing pizza, because we want to have that rich client side interactivity. We don't want to have to do post backs for every single interaction. Also for the backend. You know we're gonna be having pizza orders and that's our business.

C

We want to make sure we keep track of all those orders and that they all get handled so we're gonna put those orders into a queue, and then we should have some background workers that actually handle popping the orders off of the queue making the pizzas getting them delivered and doing all that stuff, and then we're probably gonna want to send some notifications back to the to the user that lets them know. You know, what's the status of their pizza order, you know: where is the pizza delivery guy? How soon is he gonna?

C

Actually gonna arrive at my house, so this? This is all the things that we want to build and we'd like to do you use our net skills for building all these parts of the app? But you know historically, there's been some question marks, at least with dotnet core, for what to use for these other parts, like we've, got a great.

A

C

For the server, but what about the browser? What about the backend workers? What about you know the server to server communication patterns? What could we use there, and so in dotnet core three? Oh we haven't tried to address this, and one of the things we talked about a build is that we are shipping, a full stack web development story with c-sharp and and net, and so now we have the existing technologies on the server.

C

Of course, those aren't going away like these are things that you will still continue to use when you want to do request reply, style, server, rendering or if you're building web AP is or real-time we've got signal are great security and identity story. But now for the client like in the browser, we have a dotnet story for you and that's that's.

C

Blazer blazer is a client-side UI framework for doing web development that can run directly in the browser either right in the browser on web assembly, or we also support a server-side pattern that is handles all the UI interactions over a signal. Our connection, which I can talk a little bit more about in a bit, in addition to the Blazer and components, though, if you still want to do JavaScript like you, can still do JavaScript like we have our spa templates, that's use, angular and react and react react plus Redux, so that stuff's not going away.

C

You can, of course, also write JavaScript. If that's what you want to do and in three, oh we've done a bunch of stuff to make that experience better as well. Like we've added support for authentication to the spot templates for the backend, we have added a worker service template that allows you to spawn up processes that take advantage of all the infrastructure that we've been using for a split core apps for a while, but now make makes that infrastructure available to just long-running worker processes like, for example, configuration and logging and dependency injection.

C

Now having a hosting model for these types of types of workers is something that we've added in in three oh and then for your server to server communication needs. We have been working with the community on supporting G RPC. This is actually an existing community project that we are contributing to to make it work really well with with dotnet core. So now we've got. We got answers to all these pieces like we can. We can write our front-end web UI logic using Blaser for our back-end workers.

C

We have it in the new worker hosting model and templates with a generic host and all those those infrastructure for camping and logging in di, and therefore our server-to-server communication. We can use G RPC so that that's that was the idea behind this application, and we can look at the various pieces. I'm just gonna hop out of slides now that, by the way, if you want to some people have asked me like can, can I get hold of the slides, I think the the link to the slides was missing for a while.

C

It is now uploaded. So if you want the whole deck, it is available online. If you want to present it or use it so, just to give you a feel for what this app does. This is the blazing pizza app and it is yes, British pizza. This was in honor of Steve Sanderson, the you know the founding father of blazer, who wrote the first prototype. So you know you can pick your pizza that you want. Let's order the Brit and then you can pick the size of the pizza.

C

There's a bunch of toppings that you can choose from like some sturgeon caviar.

A

C

Only just like actually read through all of these last night, I started to scan through them before, like you can get it served on a silver platter. That's for a small fee for a small fee, get some fresh baked scones. On top that that sounds like a great pizza, you have to take out a loan in order.

B

A

Be saying, is there a payment plan.

C

And you can see like that. This is all you know nicely done with a spa style UI like I'm not having to do any post backs. This is all happening client-side. If we order the pizza, this app is wired up to authenticate the user. It uses a Microsoft account for for authentication, and so we can, and hopefully login with my Microsoft account and we're good ok now as soon as that that happens. So we pop over to the order tab, and you can see here's this this top one.

C

It says that my pizza is preparing, so the pizza has kicked off now. In the background, we have our worker processes. Let me pop them up, so this one on the left is our pizza worker. It's a worker worker processing and it just finished the pizza order. So I don't know if you saw that, like it order, 28 now sent for delivery, and this one on the right is the pizza delivery guy who's now spewing back, he knows his location like.

C

Where is he, and if we go to track order, we can see that those locations are being used, update just like real-time mapping can see it's alcohol every and the guys just plowing through buildings in Seattle.

A

C

Through yeah, you know, we explained that you know this is. This is of course drone all right and you get.

A

C

Delivered to you- and you know any minute now I'm sure someone's gonna pop into the room with it with a pizza. Okay. So that's that's what the app does? That's the all the different pieces actually running, so here's the the code. Now the code is public. If people want to play around with it, I mean. Let me give you guys the URL for that, so that.

A

C

Have it sitting on my github account so Dan Roth 27, blazing pizza, that's the magic URL that you're gonna want for. If you want to grab the code for this application, it is a preview five based application for the for the to get it set it up and running. There are a few steps. You'll have to do like the migrations, actually live in a shared Kleist class library, someone a couple of things that people run into when they try to run. This is all here in this shared class library.

C

That's in the project, that's where all the model types are for. You know pizzas and the pizza, specials and so forth, and you can see the pizza store context for interacting with the database. It lives in this shared project as well as along with the migrations. So when you run database migrations just make sure you run it from the dot shared project, but also point to the actual blazing pizza project as the startup project for the app that'll, let you run the the migrations to actually update the database with the appropriate schema.

C

You'll also have to configure your own Microsoft account app and put in the appropriate config settings to get the authentication stuff to work. And then, when.

A

You said that stuff covered in the blazing in the workshop. No.

B

So the workshop.

C

Yeah, the the the workshop is actually only the front-end UI part of this app. It doesn't cover out.

A

C

Back end, I thought occation piece might be covered too. There may be the migrations as well, because it does use it use a database. So maybe those two pieces actually are, but all the worker services that are in this app and the GRP sees code like none of that is in the blazing piece of workshop. Maybe at some point will will update that workshop to be a full workshop. But for now it's it's focused purely on the DUI.

C

So if you want those bits that was just done for the build demos- and you can get it from from my my repo yeah, so those are things that just some gotchas that I've had people hit when they tried to clone and just run also make sure you run the blazing Pizza app just on Castrol. It doesn't currently work with the Ice Express for four reasons that we won't go into just done.

C

But the way you do that is when you go to startup, make sure that you set that you want it to run as a as a project. Not using is Express and then you should be able to get up and going so, let's take a look at the structure of the project, so one of things we wanted to do here is in the in the talk.

C

We didn't really get to go deep into what how this app actually works and how the code is written, so we're gonna, take a little bit closer, look and see all the the good and the bad and the ugly of the you know Dan's code. Is he how you know Heather here's his build demos, which is fine like this, was primarily about showing the features like showing G RPC, showing workers showing a blazer for the front-end I, wouldn't necessarily use this app as a reference architecture.

C

For anything you know, don't go deploying this into production expecting it to handle. You know tens of thousands of pizza orders just yet we are doing a bunch of work actually right now in preview, 6, a preview 7 for the next milestone for dotnet, core 302, really start working on our fundamentals and our scale out story. Ok, bye, let's see the spread.

A

I did like I do like this, that you're hooking several things together and that's part of why I was excited to have you on to show this, because we've showed several different features separately. You know what I mean, but.

C

A

Actually like to start to hook them together and find out which parts are are more difficult or harder to scale or whatever. It is to.

C

Compose all the pieces into an actual app and see if how they.

A

C

Behave and when used together, absolutely okay, so the the blazing pizza project this first project- this is actually a server-side blazer. App I took the code from the workshop, which I believe is still client-side, based. It's based on the web assembly version of blazer and I converted that to be server-side based now, that was actually fairly straightforward, because the component model is the same like you you're, just basically changing how the components are are hosted. Now, it probably is worth taking a moment just to remind everyone about server-side vs.

C

client-side blazer, because that can be a little confusing just to show the diagram so client-side blazer. The way that works is you write your UI components and they are compiled into Donette classes and Donna classes and then dotnet assemblies, and they are downloaded into the browser, along with a web assembly based net runtime. So we fire up. The runtime is just a chunk of web assembly code. It runs on open standards, it runs in any modern browser or desktop on phones, any platform.

C

We fire up that runtime in the browser, and then we execute the your dotnet code, including your component logic and those components interact directly with the Dom all in process. So that's how that's all that's all happening. That's the client-side model. The server-side Blaser model is a little different in the server-side model. The components are actually still on the server they execute on dotnet core. You know within an asp.net core application. What gets downloaded to the browser is a little bit of JavaScript.

C

That then sets up a signal, our connection back to the server and over that signal, our connection. It sends all of the UI events from the browser to the server. Those UI events then get dispatched to the components the components render just like they would have in process in the browser for this, in this case, they're actually running server-side the components render it calculates what needs to actually be updated in the Dom like.

C

What's the Dom diff, it Cyril eise's that diff back down to the browser over the real time connection and then that that gets then gets applied to the actual live Dom in the browser. So you you get to code your components, the same way you still get that rich client side. Interactivity, like you saw like I, was using the the application like this. This behaves exactly like the client side version of the blazing pizza app, but all the code, all the UI code logic is actually running server-side.

C

Now. Why would you do this? What what are the pros and cons of this approach? So nice things about server-side laser well number one? Is it has no web assembly dependency and we're actually still we're working hard on it, but we haven't the webassembly dotnet runtime and it won't be done in time for dotnet course Rio, and we wanted to get as much blazer to you as we could as fast as possible.

C

So with the server-side model that enabled us to build out the component model for a blazer, you know to do build out the diffing algorithm. All the application model concerns without needing the web assembly based runtime to be done once the runtime web assembly runtime is done. We will ship client-side, laser and you'll be able to use it. We announced step build that client-side blazer for web assembly is no longer experimental. It is an official preview.

C

It's it's on a track to ship and in fact we update it in parallel with each release of server side blazer, but it won't ship with dotnet core 3, o client-side blazer for web assembly will ship later, but the server side model will is is going to be ready for 3 o, and so that's what we're working on now. So it makes it easier for us to give you some bits that you can actually deploy into production faster, other things that are nice.

C

Well, you don't have to download the the runtime, so the app actually starts up a lot faster you're, not downloading. You know a Meg up dot at runtime and dll's into the browser you're just downloading that little piece of JavaScript to set up the real time connection. So your load time is much quicker. Also, your architecture for your app can be a lot simpler. I mean your art. Your code is running on the server.

C

So if you want to talk to the database or do server things or leverage any functionality of dotnet core well you're right there, you can just write code in your components that does that, so that can really simplify things. If you're doing a client-side blazer app.

C

Well, then you're gonna need to set up api's on your server that your that you send HTTP requests to to do anything like access data from your database or talk to your in memory cache or whatever other functionality is specific to you to your server, so that can simplify your architecture, things that are downsides for the server side, blazer model. Well, it is a connected model like this is not going to work offline. In order for the UI to even function, you have to have a live connection to the server with client-side blazer.

C

You could actually implement your app as a progressive web app and support offline with a serviceworker and now have any UI network connection at all other than to get the initial set of assets. So server-side requires the net connection, there's also, of course, you know. Latency concerns all the UI interactions. Are happening over that network connection, so you want to make sure that your app is close to your users that you've got a good network connection. If you have a high latency connection, the server side, blazer UI, will actually bog down.

C

So you need to make sure you've got a good environment for running these styles of apps and then also in terms of scale out concerns you're, paying with your own server resources to actually run the UI for each connected client. You've got to have a server that can handle a connection for each of these clients, so there's more cost to you for running a server-side blazer app.

C

Now we do help you with these things, like we have the azure signal, our service that can help you with connections scale-out, you can use, you know, Redis to help. You manage state for all your blazer connected clients and all those types of things, but that is stuff that you have to now handle on the server where, if it was on the client, you can just push all those concerns off to the users browser and their machine in their process and don't have to worry about it on your server. That's why?

C

Like Jeff, Holland's demo of showing clients a blazer on just as your static site, hosting with just a little bit of you know, server list and the backend with Azure functions is, is pretty compelling, like that's a you know, more economical and more efficient solution than owning everything on the server, but a lot of people like like the server-side model, because it allows them to keep control like if you don't want your code to leak down to the client.

C

The server-side model lets you do that, like no dll's leave the boundary of your server in the the server-side model, so it.

A

Has it has those.

C

Trade-Offs and we think that'll be different cases when you'll use one or the other. So that's done just doing what that's all about and.

A

This is great because we did have some questions from Moe in the YouTube chat and he was asking like how to scale a lot work and and what's the security with dll's being downloaded and all that I think you answered all that just there. So.

C

The one-to-one duration scale out for server-side plays are like we will. We, we have a work to do on our side to actually produce good documentation about how you need to set up your servers for appropriate scale out. That is what we're working on actually right now for preview. Seven security for a client side is a question. I get a lot like when people see dll's coming down in the browser that kind of freaked out they're, like you know, am I being hacked like.

C

Is this like now able to run code directly on my OS and might touch the registry and do all sorts of crazy things, and the answer is no because remember the way those dll's run is they are executed by the web assembly. Runtime like it's all in the context of web assembly web assembly based code, can't do anything more than what you could do in JavaScript today. It runs in the same browser security sandbox. So you from that code, you can't just open up a file on the file system, because the browser won't.

C

Let you do that. You can't go touch the registry on Windows, because the browser won't. Let you do that. You can't open arbitrary network connections to wherever you want, because you, the browser, has constrained somewhere. You can open network connections too, so in client-side Blaser. You are still running in that same security sandbox. It has the same security guarantees as if you had written all that code in JavaScript, but instead you got to write it in net in c-sharp. So that's the oldest, very difference. One.

A

Other question I'm, trying to like balance between too many questions and ignoring them and people go crazy, crazy, so well, it's asking is: is there? Is it possible to have a server-side pre-render? Yes,.

C

In fact, this app is doing that already this, let me go back to the the application just refresh it so just refresh and then we'll view source I think we're still running yes, okay, so there's the app just loaded and then view page source now notice that, like you know, all the content of the application is already here like it's, not just rendering a stub and then updating the Dom later like the first render of this app is actually a full render and the way that's set up is if we go into the this pages folder one of the difference between the server-side laser template and the client-side laser template is that the initial render of the app in the server-side laser template is handled using a razor page like this is actually a great example of come of.

C

You know, using both razor pages and blazer together, like the initial render that's a request with a reply with some rendered code, that's handled by a razor page, here's how that you know just normal markup and tag helpers for setting up the head content and then to render the the app component. You know the main component for the server-side blazer app, that's what this HTML helper is doing so HTML dot render component async is saying. Please now also render this razor component right here in this razor page and wire it up for interactivity for me.

C

So that's that's how the pre-rendering occurs. So this this this entire code, including the initial render of that app component, which is the root of my app all happens initially on the server spews out all the HTML and then on the client in the browser. It then sets up a signal, art connection and rewires back up to the state that was already established for that component. So there is already pre rendering happening in this app and that just is set up for you by default. Whenever you create a server-side, blazer application. Okay,.

A

One more question: yeah.

C

A

I can jump in Eugene's asking because you showed the server side and the client side is there and I know people have setup things where they toggle between them. Using like a um you, know, query string and they like write the code themselves. Is there ever? Are there any plans to officially support like a dual mode, where you support both of those together so.

C

In in I think he was even pre before and preview 5 we kind of broke dual mode like we made it very difficult to flip-flop back and forth, and that was you know, there's just just where we were a point in time thing in preview 6, which is shipping this week like very soon.

C

We did some work actually to specifically make it easy again to flip back and forth. We don't have like the dual mode feature built in we're, like you literally, have a query string where the user can go and like toggle back and forth between client side and server side, but the layering of the app is now set up in such a way that you can do that. If you want to so it's it's a much simpler setup than it was and I think it was almost impossible to do in preview, 4 and preview 5.

C

But now, with preview 6 it'll be it will be easy again. We have several.

A

Questions that.

C

From people like, will you can we do it at run time like can? Can you help me like? Can I can I decide at runtime whether or not this component is going to be a server side or client side laser? That's not something that we plan to the ship, certain that prefer for v1, but conceptually I think there's nothing that technically blocks it.

C

In fact, I've even imagined scenarios where you deploy your blazer app to a service that has some smarts about the types of clients that are coming to the to the app and depending on the type of client like how good the network connection is or how you know capable. The client is, maybe you switch between server, side or client side depending on that particular client? You know those types of scenarios should be technically possible.

C

It's not something we expect to have out of the box, but we've been we've heard people ask for it and we're thinking about it. Okay, one more thing about pre-rendering though- and this was a oopsie on my part- yeah people have been asking us for a while. Like can I do pre-rendering with client side blazer as well like in client side blazer projects. Usually you don't have a razor page.

C

Usually you just have a static index dot HTML file that has like a marker element that then gets updated with the contents of the client-side blazer application right.

A

We would like to be.

C

Able to pre render the the first render of the app server side. Just like we do a server-side blazer. It turns.

A

Out that sort of performance, and also like SEO right yeah,.

C

For SEO for initial page load times- and it turns out that is totally possible with the existing preview 5 bit so I had originally thought that it wasn't possible, but it absolutely is and in fact I put together a little sample app, not that long ago. It's also in my my account. So if you go to dan wife, 27 clients was it I should just go to my my repost I. Don't get the name completely wrong, I! Think it's client-side blaze, yeah client-side blaze! Are we pre rendering like?

C

If we look in here inside the and the server and within pages, it again also has a host es HTML file, but this will then pre-render an app that will then run on web assembly in the client. So it is possible to do today. It's a slightly different behavior, because once the the pre render is almost just like get pixels on the screen as fast as you can and then once the runtime gets downloaded, it does its render and it kind of blows away.

C

The all the Dom, which is very similar, I, think to how pre-rendering with like angular and react happens today. Server-Side pre-rendering is it is a little bit better in that it will actually maintain the state of the component that was already instantiate and set up on the server with client-side blazer. You you, you at least get to see the UI really fast, and then the interactivity comes a little bit later and the Dom kind of gets updated.

C

So, if like what that means is, if you were like hitting the counter button right and click, click click like initially with the pre render that won't even do anything because the the client-side runtime hasn't been downloaded yet and then the the runtime will come down and then Dom will get completely refreshed for a for full interactivity. That's how that one works, but you get a nice fast startup. It's actually really shocking, like I remembered I did I ran the app for the first time and I was like where the where's, the loading dock, like.

A

It's gone, it's.

C

Just gone cuz, you don't need it cuz, they have pre render so check that out. That's something that's available today! Ok, let's look a little bit deeper into how blazing pizza works now give a little bit of overview of just how the UI is set up and then we'll talk about worker and then we'll talk about the the G RPC code, so he we already saw the initial render renders this app component. So the app component is like the root component of the application and that's in this app dot razor file.

C

So let's go ahead and open that up so app dot razor- and this is very common in our templates- are essentially just has the router. The router component is the component that knows how to find components in the application that have been set up with a route. How do you set up a component with a route? Well, you use the app page directive, just like so like index dot. Razor has an app page directive. That means behind-the-scenes. The generated class was given the attribute that has this.

C

This route captured on the component and the router is just the component that knows how to go and find those other components and then dispatch requests to those to those components. Does that does that make sense mm-hmm? So that's what the app dot raiser file is doing is essentially setting up the router. Now. Has this one other thing: that's wrapping the router, which is this user state provider. What is that? So?

C

That's a custom component that we built for the blazer workshop that establishes the provides services for establishing the current user identity like dealing with all the authentication concerns- and this was a total custom job that we did for the blazer workshop, because at that time we didn't have any support for authentication and authorization concerns in in Blaser, and so we had to kind of roll our own thing for, though, for the workshop in preview 6, which is coming out, you know very soon, we will have a full authentication of authorization of story.

C

We've enabled all the auth options for the server-side blazer template that you can now go and check and say yes, I'd, like individual user accounts. If you want to do as your ad, you can do that all those things- and it has a full set of built-in abstractions now for doing similar things to what this user state provider component is doing. This component is actually from this little utility library.

C

This, like blazing Pizza, doc, components, library in here yeah in this authentication, folder, there's the user state provider component and all the code that's associated with it. But what it's doing is just establishing a service that you can use to figure out like who's the current user right now, so that you can pivot the UI based on that user all right. So then, that sets up the router and sets up auth and then the router will then dispatch to one of the pages in the main page for the app is this index dot razor page?

C

This is where all the you know the where to go with the Pizza cards and the you know the pizza order status stuff is being rendered. We can look at this really fast, so at the top, this main section is rendering Pizza Pizza special cards for each of the pizzas. That's what's rendering each of these little images and their price, and then it has an onclick handler that components can have events, so this is wiring it up to to a particular method to show, and if you click on a pizza, what happens?

C

Is you get that Pizza configuration dialog to pop up, and so when you click on the component, we're wiring up a little lambda here, a little delegate to say: well, show the Pizza Pizza dialog at this point now you might.

A

Want to for those kind of UI.

C

Things are using bootstrap for that or what's the yeah, all the styling is all being is all done with bootstrap in this application, like our templates.

A

C

Set up with bootstrap, but you don't have to use bootstrap like there's nothing in blazer. That ties you to boots bootstrap, but all our templates are set up that way, so it was convenient just to use a use bootstrap for all the styling yeah. Okay, now you might wonder what this border state thing is like. This is a service that's being injected into the into the application?

C

Well, the order state is a pattern for managing app states that we find pretty convenient like when you want to coordinate between the the pages and dialogues and unique someplace to sort of like handle all those things in a centralized place. It's sometimes really convenient just to define a class that kind of represents the the state of the UI and any events that you want different components to be able to react to you just put in this class and you make it available through dependency injection blaze or supports dependency injection.

C

If you go into the startup class for the Blazer app down here or someplace yeah, so here's where the order state service is being set up. This is where all the concerns for, like should I show the dialogue. How many orders do I have already set up in my shopping cart effectively? All of that is being coordinated by this centralized order state service.

C

What's the useful pattern, you don't have to use that pattern. If you want to use like you know, mvvm or you want to use, you know one of the various state containers out like a flux like like thing or Redux like thing on net, you absolutely can do that Blazers very unappealing, about how you manage all your state. All.

A

Right question questions that unclick syntax, so you've got the kind of the delegate style thing. You know where you're pointing off to a function. Yeah.

C

A

It possible that that would ever like I get it I'm used to seeing it, but it's a little bit weird. You.

C

Think um so this is not the only syntax like if you just want to put the name of a method right here right that works but like if I had defined a method down in my functions. Block like I, think it's probably some cases where we do that. Where is an example like here's, a button yeah.

A

C

This on click for this button he's just saying at place order and that will call the place order method which is down here. Someplace like yeah. This method gets called directly, so that's an alternative syntax. Do you like that better? Is that uh is that what you mean like I,.

A

Guess I kind of do I, don't know yeah.

C

Both processes, sometimes it's convenient just to throw a lambda in there cuz. It's a wonder.

B

C

Don't want to bother like going all the way down to your functions, block and adding a method right.

A

Okay, either either.

C

Patters, fine and both patterns are equally flexible, like if you want it, if you need to get access to the the args for the mouse click event, you can do that with the the lambda syntax or with the method. If you want it to be sink or a sink, you can do both like those. Those are it's it's it's it's! It's uh opinionated like like dude. What.

A

Makes you happy.

C

John we want to happen okay in there, and so then we have the sidebar. This is the part on the you know that right pane of the application, like a padded order like like all the ordered list and the the button to click to say, I, want to actually order something. This is going through each of the pizzas that you've added to the to the order and rendering them using that little sort of card style, UI and then there's an event to remove it. That's what happen! You click the X.

C

That's what's triggering this on removed event for that configured pizza item and then would remove it from the list. If you don't have any orders like this. Is nice like, like the fact that you get to use full razor syntax like you get to just define these conditionals like this and say, like I, don't got any pizzas, you know in any orders yet then just render something else, and then at the bottom. This is the button for are actually submitting.

C

The the order for for the pizza calls calls placed order now this little template of dialogues. One thing I want to talk about what is this, so this is the actual pizza configuration dialogue like when I click on one of these pizzas. This this UI is this this component right right here and it's got some interesting stuff. Some some interesting blazer component model features going on. So, first of all, it's a templated component. That's not a built in component!

C

That's a component, that's provided by the the workshop, but it's implemented right here again in that components, library and all it is. Is it has a boolean that says whether or not you want to show the dialog and then I think this is using just standard like bootstrap classes, for for defining a dialog, and then it renders whatever you want inside of the the dialogs content. So this is a template based parameter, so you can see that the the child content parameter is of type render fragment.

C

This allows you to capture like a chunk of razor and say. I would like to now render this chunk of razor right here. This is a pattern for having components that have templates that you want to allow the user to specify when that component is rendered. This is really common for things like like if you have a grid, and you want to specify the template for the headers and the rows and the cells. This is how you can do that. The child content template parameter is basically saying you know anything.

C

That's a child of the component. I want to render in this place so and that's what we're doing in the index that razor like this. Basically, everything inside of the template dialog is what's being captured by a child content. But, alternatively, if you wanted to have multiple named parameters, you can do that as well, and then you would specify a wrapper element inside the child of the of the parent component that specifies the name of the parameter that you're specifying a template for. So that's just that's just templating in in Blaser.

C

It's a powerful feature when you want to have a way for the user to specify the template for a chunk of the UI that the components going to render, and then this configure Pizza dialog, that's the actual guts of that that dialog is here. Yeah configure, Pizza dialog has all the stuff, for you know all the various toppings and, and you know, being able to add toppings and remove type toppings, cancel and confirmed the Pittsburgh. So that's sort of a brief. You know overview of how this the the UI here is built.

C

If you want to build this yourself, go check out the blazing the blazer workshop, it will walk you through all the UI concerns of the app well. So that's what kinda want to say about the UI I want to now cook I start to look at the the back end a little bit like how does the the work really happen when you actually purchase an order like when we place this order? What what then? What then occurs so now if we go back to index dot, razor you'll, remember that there was this button right here.

C

So this is the button. That's at the bottom of that side bar the right sidebar. You know this yellow order button. That's this button right here! There's the order and what does it do well on click, it's going to call a place of order and then in place order. Let's see what that method does make sure that you're signed in so using this sort of.

C

You know temporary solution for authentication that all this code gets replaced with real real real authentication model in preview 6, and then we have this store service, which I think is a yeah pizza. I pizza store, which is representing all of our interactions with the database and the queues that store service then has a method to place the order. So we place the order and then we reset all the state of the UI back to normal and then navigate to the my orders page and that's this other tab up here.

C

That shows know if I was signed in actually show the the orders that I have either in progress or that I've already done. Like all my order, history, if I signed in so we can see all that load the orders from the database and there they are ok. So what is this place? Order or method? Do let's go? Look at our pizza store service implementation.

C

This there's all the code for just like getting orders out of the database down here place order. You can see that it's using Azure queues, so this is this- is a queue based model. Remember going to take this order and we're gonna, stick it in a queue, because it's super important. We don't want to lose it. We want our workers to be able to pop it off as soon as they can, if they're, but if they're busy, we don't want the order to dislike disappear, so we're using Azure queues.

C

To put this order request into the queue that the worker can then pop. This is just using the standard as Ricou sdk library, to do the implementation. You know another tip for people who want to run this app them themselves in order to get the queues locally on your machine. You do need the the azure storage emulator to be installed on your machine, so make sure you've got that up and running.

C

That will allow the app to set up the queues for you so make sense, yeah, okay, cool, so that will put the message in the queue and then we need some workers to actually pop off those messages, messages from the queues and do something with them. So let me show you this, so this is a I. Was you know in the process of creating a new, a snit core app? It's been a core 3 Oh app and you can see in 3. Oh, we have this new worker service templates.

C

I think we saw a little bit of that in the community links worker service.

A

C

I think I'm slide on this me pop up, quick, yet worker services, so worker services are a long-running process. They can have endpoints, but they don't have to like my worker services. They don't have any endpoints. All they're doing is listening on the queue and then putting messages onto a different queue or sending G RPC messages.

C

They don't actually expose any endpoints themselves, but they could, if you, if you wanted to do that and they are convenient because they have all the normal infrastructure that you would like to have for a long-running process, but without all the overhead of having all of a spinet core in the in the in the project like you want logging and config and di and those types of things they also integrate with different hosting models like if you want to host them as a Windows service.

C

We have a package that lets you do that I demoed, that at Build I'm not gonna, do that today, but go check out the the bill. Talk. If you want to see posting a worker service in, you know Windows service, but you can also host them in using systemd or as a web job or in a container that it's a very flexible hosting model, and so it's a great thumb you all I did for the blazing Pizza app is I just created a couple of these worker service projects and those are here in the solution.

C

So if we look down a little bit further you'll see there's a pizza worker, that's one of them and then there's the pizza delivery worker project. So those are my two workers that I just created using that that product template. Now, if we look at the code, there's a little bit of code in program CS just to set up the host, you notice that this is not a web host. This is the generic host that the the web host infrastructure and asp.net core is based on.

C

But this allows you to host stuff without having to pull all the web concerns in, like you know, setting up a web server, and so all that all that stuff and then the actual worker class is what then gets started up. So here's the worker for the pizza worker and the code is pretty simple like when the worker is started and make sure it has a connection to the to the cube but make sure the queue is set up and then down below it just gets a message off of the queue deserialize.

C

Is it and then starts a it? Just you know it's not actually making pizzas I know. That's that's, probably, disappoint. Some people, there's no there's! No pizzas really made it made here. Just sort of does a delay while it's preparing the pizza, but it also does this little bit here where it's sending a message back to the front end server to let it know what the status of the pizza order is. So when the the order gets put in you know, it's been ordered and then it sends a status is saying: okay, I'm!

C

Now, once it's once, it's popped off the message: the work will let the the user know I'm now preparing your pizza and then once the pizza is done about ten seconds later it puts a it sent another message to the to the to the user. That's that sent out for a delivery, actually I think it doesn't send. This is a client said.

A

C

This here it just puts a puts the message in the queue and I think it lets the pizza delivery. Guy I'll send the status to the user that it's out for delivery, so this is just do.

A

We do we show that status update stuff in the front end that actually shows your.

C

A

B

C

So like like here, it gets shown showed here now this initial status isn't updated. Real-Time, this status is just pulled directly from the database, but when you go to track, it picks up that status in the in the tracked staff. All.

A

Right right so the clear says.

C

Delivered and so forth, like all the real-time stuffs being updated here, ah cool okay. So that's what the the pizza worker is doing. The pizza delivery worker looks very similar, I'll just look at the worker class for that guy, so again making sure that the queues are all set up and then it waits for messages on the pizza delivery queue. This is the queue that the pizza worker put the message in to say that the pizza's ready to go.

C

We've got a pizza for you and then it this guy does a bunch of messages back to the front-end server to let the front-end server know about its current location. So it's got this whole while loop that every second it's reporting a latitude and longitude coordinate back to the front-end server, so it can update the map. So all the the map, nepo animation, is driven by the notifications from this back-end service. What.

A

Does that act class.

C

A

Above the wild loop.

C

A

C

Think that's just the response that gets sent back from the the GRP seek, so we haven't talked about G RPC yet, but the I believe that's the response from the G RPC service to say, like okay, I got your message: God.

A

C

A the the service that I set up for this demo happened to be a request. Reply pattern, okay, yeah speaking of which, let's talk a little bit about G, RPC so down here. So all the communication from those worker processes back to the front end is handled using G RPC in this application. If you don't know what G RPC is its high performance contract based protocol offer for RPC services, it's based on protobufs for the serialization of data on the wire, which is a very efficient binary, serialization format.

C

It's it's a nice protocol to use because has brought interoperability across a whole bunch of different platforms. They've got G RPC clients for pretty much any platform that you care to develop code for, and it's we think it's great for a back-end service to service education, where you're you're just trying to pump. You know bytes across the wire as fast as you can gr. Pc is a good fit for that. It's based on HP too, and it does require htps.

C

So if you want to use a gr, PC, you're gonna need to have HP to set up and also SSL, so that you can use the protocol because it is required. Now how did I set up those services? Let me go back to where I was creating a new project. There is a gr PC template right there. So that's how you can create a new G RPC service. That'll just create your project. It has a proto file already set up and then what's what is this proto file thing that I keep referencing?

C

Well, let's go look in blazing pizza, so there's a service in here. Here's the pizza order service. This is my G RPC service. It's got this send status method. So all the status updates from the backend worker processes are ending up here. This is where those messages are being pumped into the the front-end and then there's a little service that this guy calls.

C

Yeah, it uses this update order of status, update or service to let all the components know that the status has been updated. So this is this is kind of a brute-force approach like there's literally one singleton service, that all my components on this one front-end machine are listening on to get.

A

Those updates and then.

C

They the components, didn't just filter, based on the the order and the user that that notification was sent for. Obviously, there's some scale concerns here. That would have to be addressed if you were to do this for real, like like this works today, because I only have one front-end machines and all my worker processes are talking just to that one front-end machine and all the clients are connected to one front-end machine.

C

If you were to then try to scale out that front-end machine, you would need to have some solution for how does the worker know, which front-end machine to talk to to send a notification to so that it can actually send that to the right client? And then, when you talk to the right machine, how do you correctly manage? You know sending the notification to the correct client that's connected to that machine, because there might be multiple clients on that machine. This app doesn't address all those things, but you know that's.

C

Those are the things we get to do when we're doing demo wear, but that's how that works. Now the service is actually defined using this protocol. So this is a format that's defined for GRP services. It's an you know an intermediary contract format for saying this is what my service is, and this is what it does, and this is the data format for all the the the endpoints that I'm defining for this service. So it's a pretty. You know simple RPC service, so this is a request.

C

Reply pattern has a send status, operation, I, don't know, I, don't even know what to call these things. Actions or they methods and I. Don't know the procedures, I guess they must be procedures right, because it's do.

A

You see a procedure.

C

Takes a status update and then returns that ACK and that's what you were asking about before John. The back is the just like.

A

C

It thanks- and it's really just a dummy message that comes comes back for the clients that are talking to this G RPC service. There's a order, status, client class library that I set up that also has the same contract wired up in it, and then it generates a strongly typed client that is then referenced by the to worker processes. So if we go looking like the dependencies for the pizza delivery worker there, you can see it has a reference to the order status client. Now, where is the order status?

C

Client class like it's not even showing up here? That's because it is completely code generated from the proto file like I. Don't even do any model I didn't derive from it and it modify it anyway. I just use the generated client directly from this proto file. The proto file is set up here in the in that project, and this is what the the G RPC tooling picks up to generate the client class.

C

So if you're familiar with like WCF or you can back in the day like as Amex where we would generate client code for you from like a wisdom for your soap services, this is very similar pattern, except instead of wisdom, you're using a protobuf file and instead of soap for the protocol on the wire you're using G RPC.

C

A

C

Yes, that's Jo, that's how the the backend and then talks to the the service. I think I think that's pretty much it like the. We saw the models. Let's did I miss any projects, so we saw the order status, client, the this components, library it has all this. This is the oh yeah, so the how's that done mm-hmm.

A

Yeah people are asking about them so.

C

Where's the map, okay, so the map is done using a third-party component like it's like leaflet or something yeah leaflet. I think is the third-party map component that we use and that is JavaScript based. So this is important because a lot of people not a lot, but some people come to blazer, expecting that okay I've been told I can write C sharp now, instead of JavaScript, this means I. Never ever ever in my life right write another line of JavaScript and I'm so happy about this and wow. That's that is in some sense. True.

C

Blazer still has JavaScript Interop for cases where you do actually want to call into like a JavaScript. Let's say you have a JavaScript library that you've already built, and you don't want to rewrite that code. You just want to reuse it. You can call into your JavaScript library from from blazer. Maybe there is a JavaScript library like leaflet that you didn't write, but someone else did and you're like you know what I don't want to rewrite all that code in c-sharp I'm, just gonna use this I'm gonna I'm gonna.

C

You know you know, bite the bullet and and just reuse, this JavaScript library, you can do that as well or maybe there are.

A

Which is great, it's it's additive right, yeah, I have to choose and give up something. This is a hey. You can also use c-sharp and you can also use all your dotnet skills, along with everything else on the web. You.

C

Have full power to do anything in the web, app that you want to do that? Involve some JavaScript, that's fine! You can do that. If you don't want to write JavaScript, that's! Ok! You can write these this the same code using dotnet. Now, if you need to interact with browser API, but let's say you want to call the geolocation API or a local storage and those types of things, what do you do then?

C

So for some of the browser api's we've already written the JavaScript Interop code, for you, like as part of blazer as part of the mono wasm story like HTTP client HP client under the covers, is calling into the browser fetch API, but you don't even know or care that that's happening, you're just creating an HP client and using it and it just works like a normal net. Hp client would all of the Dom interactions are being handled for you by blazer, like you're, not having to go and get up.

C

You know, grab the Dom element yourself and populate it with with content. Blazer does all that for you using the component model and the Dom dipping out rhythm to handle Dom updates. Now there are a bunch of things that we don't provide for you. There's lots of browser api's, like geolocation and local storage, for example, that we don't implement for those many of those ap.

C

Is the community went ahead and wrote a JavaScript Interop last library that does all the JavaScript Interop code, for you basically shrink wraps the JavaScript code in a dotnet wrapper, so you can call it as if it was written in c-sharp you just install there nougat package and away you go and the way you can find those like I find a convenient way is: there's a really great project called awesome. Blazer. It's a community managed github repo.

C

This Adrienne manages this repo and it's just a huge giant list of links of sample applications and libraries that work with blazer and a lot of these libraries are JavaScript Interop libraries like sensors web laser. That sensor is there's a couple. Local storage ones in here, someplace hotkeys I, think, is one as well gamepad like a lot of the geolocation. There's geolocation right here. A lot of these are JavaScript Interop libraries that you can just install. You don't have to write a line of JavaScript.

C

You just call into JavaScript, as if it were c-sharp now, in the very rare case that one of those doesn't exist for the library or API that you want to call. In that case, you may have to write some JavaScript Interop code yourself, which was the case here in blazing pizza like no one had written a wrapper around leaflet for us, and so we we wrote ones because we wanted to have a real time map.

C

So that's how this is done and you can see the JavaScript Interop code actually right here, we're calling it a javascript passing in a set of markers and the element that we want to to update with the with the content. So that's that's how the map works. It's done with Josh, couldn't draw Wow.

A

C

A

We're at about an hour, we do have a few questions. People of a say, I, just wanted to UM one Michael asked if we'll protobuf tag, support, extend backwards to earlier msbuild versions,.

C

Protocol tags, it's in backwards, protobuf.

A

C

A

C

I'm not I'm not entirely sure exactly what that's meant by so like I. Think he's referring to this part of the program model and I think he's suggesting that maybe have been some evolution of this model that has been changing over time and questions about how whether we will support older models versus newer models and I yeah I, don't know I have to like.

A

This there's targets and stuff to protobuf tag that you've got right there on line 25 yeah.

C

Yeah so I like this was the model in preview. Five I, don't know if this is known. I.

B

Know there are new.

C

Features coming to GRP see in preview six like they're, adding a like a gr, PC client, Factory, very similar to the HTTP client factory, that we have for HP clients a very convenient way to configure your gr PC clients in your a spinet core or worker service templates, so that you can just ask for a gr, PC client. That's already configured I know that stuff is happening, I'm, not sure how much of the they must build. Pattern is has been changing. We'll have to follow up on that. One often.

A

Okay, you know: ask us I'll, get up.

C

Or ping us on getter and so on and so forth. Well,.

A

Another question: can you tell us about server-side Blaser using Azure signal our service and static blob storage, web application using client-side hosting.

B

And blob storage, family, so server.

C

Side blazer, is we pretty much? We strongly recommend using the azure signal. Our service with signal are with with server-side blazer, and the reason for that is well. Every client that connects to your app is going to need to have an active signal or connection which means you're going to need to be able to support. You know, client connections, scale-out and that's what the azure signal our service does for you it basically, every time a client tries to reconnect to your app, it gets redirected over to the Azure signal, our service, the service gets set.

C

You set up the service to support as many connections as you want. You know, 10,000 concurrent connections and then it the service then sets up a multiplexed connection back to your front. End servers, so you don't have to handle 10,000 connections from your from your front. End servers, so we we recommend using the service. The way you set it up is actually really trivial.

C

It will be especially trivial once we ship preview 6 with the latest visual studio preview, when you published your server-side blazer app visual studio will actually detect that this is an app that's using signal are under the covers and then, when you go to setup, you're a giraffe service, those there's a section in the published you I think it can kind of show it here. This is a know slightly earlier version of a visual studio.

C

I don't know if it has the full set of features, but I think if we can show a part of it.

C

If we go to publish down here in this dependency section, you see that let it let it fire up, so you can see actually I've already wired up the Azure signal our service as a dependency for this app, and you do that by like saying, add and add, as your signal or service as a dependency in the next update to Visual Studio, they will actually display a UI here when you go to publish so server a server side place your app that says: hey we've detected that you're using signal.

C

Are we really recommend using the azure signal our service? If you're gonna go to app service, add the dependent we go ahead and add we suggest adding the dependency. You know we don't we don't add it for you, but we will at least give you that recommendation. You just add the dependency here. You don't have to check tane change, a line of code in your app. What it will do is will add a single package to your app but I think this. That probably has it. Let's go look under new get Mike yeah Microsoft.

C

As your signal art it'll. Add that package to your app and that package is all you need. You don't need to change your code or do anything else through the magic of the new endpoint routing system and dotnet court and in a snit course Rio. All you need is students to add that package. It will provision the azure signal, our service, if you ask it to or it can use an existing one and it will configure it so that your app will use it once you actually publish the address.

C

So it's a pretty seamless experience when you're doing a publish flow to use. Server-Side blazer, with the address signal our service. Now with client-side blazer. You don't generally need the azure signal our service, because your app is just a bunch of static files like you can just publish it to any static site, hosting solution and you're good to go.

C

You don't even need dotnet on the server, so you could publish a client-side blazer app to github pages, to add your static site hosting or any any static file hosting solution that you'd like and that's all you need. If the client app does talk to a dotnet back-end and it's using signal R to talk to that don''t backend, what you can do, then you might consider using the address signal arc service in that case. But it's not an intrinsic part of the client-side blazer model that that you need signal.

C

Are it's it's only intrinsic to these server-side blazer model, okay,.

A

Very cool I think we're pretty close to time. You had wanted to say a little bit about the new release, sir.

B

C

I, can it's it's done like it's, it's baked.

B

C

It out of the oven we just need to now serve it to the world. You know slice off pieces of delicious smelling, a snack or three oh and apps the world. The bill is actually publicly available. If you want to try it out as a nightly build the way you do, that is so I the way I do it.

C

Cuz I go to a Schmitt core, the root, a snack or repo, that's very good and we'll go there, and if we look in the readme down here, you'll see download our latest daily builds and so I click that and then this will then walk you through the instructions that you need to set yourself up with the latest. Build up. Nick were three: oh now, you're gonna want to first go and get a build of the.net core SDK, the latest buildings not intercourse decay.

C

You will need all of these package sources, because all the packages that are used by this nightly build are on random dev feeds, apparently, and all over the place now used to be like one, my get feed and then I.

C

Here we had so many packages on that might get feed that it just kind of like, fell over and died, and so we had to switch to a different, a different package to a hosting solution for our deaf feeds and I think we're actually moving to as doe pretty soon for for our deaf feeds, as well as your DevOps, okay, but then to get the dot Nick. Our CK click on this make sure you configure all those package sources that I showed you there and then this release column.

C

This is the candidate build for preview six, so you can see that in a very small text, 301 hundred preview, six zero one, two two six four that is I- can tell you the candidate build for 2006, so go ahead. Click the installer install that on your machine and you can build preview.

C

Six apps make sure again that if you're doing anything with laser and Don de correo that you are on the Visual Studio preview Channel, you should not try to use three Oh with the s 2019 stable, like a lobby I've tried they have suffered. As a result, we.

A

Don't want you to.

C

Suffer make sure you're using the preview channel. My preview channel I mean go to visual studio, dot-com, slash preview. This is what you're gonna want. The I believe today, preview two of 16.2 just should should be out either momentarily or has already gone out, so make sure you get those bits, that's what you're gonna want and then get the dotnet core SDK. That I just pointed you at that's enough to get up and running with server-side blazer and worker services and G RPC services with the preview six bits and we will have documentation.

C

I'll publish live for those bits shortly as well as well as the normal one ounce, 'men blog posts, describing all the new features. Awesome I think this.

B

Is a good spot to wrap up cool.

A

C

A

Should okay so go back to the thing where we can see you wave goodbye? Oh okay,.

C

A

Wow, okay! Well, thank you like when I picked you I was like I hope we have enough for like it won't be an hour, but I hope we have enough to. You know cover at least a half hour like much longer like this was awesome. Lots.

C

Of good questions from people in the community, thank you of everyone for watching and trying out blazer go-to blazer net download it install it go. Do the Blazer workshop there's actually um they're doing a big revision to the blazer workshop right now to add a whole bunch of new stuff to it. So it's just getting better and lettuce.

A

I, actually just I was flying back from a conference in Europe and on the plane. I did the Blazer workshop like the the the release build of it. You know not the the upcoming one, but it was great. It's really good, so it's fun to go through and you and I like the way you kind of you know. You start with you like, implement a feature at a time and and follow the app.

C

A

Alright, well, this is great thanks, everybody, um you know, join us every Tuesday and Thursday for these community stand-ups win the show wraps up, there's also a thing in there for show suggestions, we're looking at your show, suggestions for upcoming shows. So let us know what you'd like to see we'll have to have a ship you six, yes,.

B

C

All sorts of great stops coming.

B

A

All right, thanks, Dan.