Categories
Online Marketing

The Future of Blazor on the Client

Blazer is a client web UI framework based on net and c-sharp instead of javascript. Now previously, the browser was a black box that you couldn’t get your dotnet code into now with blazer. You can use dotnet for your client web development needs. But what if you need to take your app to other native platforms like mobile, desktop and other devices? It could be really expensive to have to build native experiences for all those platforms and you might not have the developer resources or the developer.

Skill sets one common strategy is to use the ubiquity of the web and your existing web developers to build apps with native like capabilities in the future. We want to evolve blazer so that you can use it to build apps that have those native like capabilities, so we’re going to walk this spectrum from the web to native applications. Now, we’ve already seen blazer server apps in dotnet core 3. Oh it’s available this week.

Download and install it try it out. Blazer server apps enable you to get ad rich client side interactivity to your existing dotnet web applications. Now they run on the server, but they allow you to have that client interactive feel like a single page web application. They also enable you to leverage the capabilities of the browser using JavaScript Interop. Let me hop over here to visual studio, here’s the blazer weather application that we saw earlier this week.

This is a blazer server, app I’ve already refactored it again to move all of its components into this razor class library. This blazer web weather core. We expand some of these folders, we’ll see all the the Razr files in there there. They are that’s so that I can reuse these components in the future demos when the blaze their server app. We’ve we’ve seen what this looks like: it has a UI for showing the current weather, and one of the things that we already saw is that we do have client side interactivity.

We can click on and change the current temperature unit. We can also use the capabilities of the browser to get the users current location by clicking here that should use the geolocation API is to give us where we’re currently at all right. One other thing that I’ve added to this application that also leverages an additional an additional capability is the browser’s local storage. I used it’s. Actually a community project was a github comm blaze word.

This is a project by Chris st. II and he’s done a whole bunch of really good stuff. He has a package that uses JavaScript Interop to enable local storage and blazer applications. I use that so that if we go back to the app we can store our pinned locations locally in the browser. So, let’s like go to Chicago and we’ll pin that one there it is, and now we can cycle through our pin locations. So we have Seattle and Chicago if I grab this URL and just going to close that tab and then we’ll open up a new one browse back, we still have Seattle and Chicago as our pinned locations using the browser’s local storage to store those things.

So we get to leverage browser caching, this yes, yes, oh yeah, this this makes me ready now for the Deaf. Thank you mr. Prez, all right, all right, we’re going to blaze on now: okay, whoo, yeah, okay. So, what’s the next step on adding more native-like capabilities to our blazer application? Well, the next step is blazer. Webassembly blazer web assembly apps run in the browser on a web assembly base hot net runtime.

Sorry so, with a blazer web assembly app, the files can your app is just a bunch of static files and they can be downloaded. They are downloaded into the browser and then executed, and they can then leverage the capabilities of the browser. Well, so I’ve taken the same application. This is the the server version. Let’s close, that, let’s now go to a different project, and this is a web assembly version of the same project.

It’s actually using exactly the same components. This is kind of cool a lot of customers that I talked to are starting out with Blaser server. With the plan to win one sweet blazer web assembly is available in May of next year that they can then shift their app to actually run full on and in the client. But let’s go ahead and run the web assembly. Version of this app looks pretty much. The same does the same things like we can get the I gets our current location here.

We should should be in Redmond yep there. We are all right and then, if we f12 and look at what was downloaded to this application, it looks a little bit different. Yeah, so there you see down at the bottom, there’s that mono dot wasum file, that is our web assembly based at runtime. So this app is actually running a client side directly in the browser now to show that that’s really occurring, we can even debug when I f12 again.

If we look in the console, you can see there’s a debugging hot key gesture that we can do. I’r not debugging this in Visual Studio, I’m actually going to use the browser dev tools to debug it. We don’t support debugging in Visual Studio yet for blaze or webassembly apps, but we will in the future for now don’t run it with debugger in Visual Studio. And then you can do use do this trick. So I’m going to hit shift alt D and that’s going to try and bring up the browser dev tools to connect to the tab that I want to debug through a debugging proxy that we set up for you now for that to work.

We actually have to run the browser with remote debugging enabled, which I don’t have it doing currently, and it’s telling me how I can restart it. So it does do that. So I’m going to close down the browser completely and I’m going to run the command that it just told me to do to restart the browser with remote, debugging enabled and we’ll hit that gesture again shift alt D, and now I should get the browser dev tools That can connect to my tab.

There we go alright. So let’s put this side-by-side with the tab, I want to debug and we’ve already got some files open. Let’s go ahead and close those in the in the sources tab we can see down here. Alright, we can actually take a look at all of our give myself a little more space, all the files that are in our application, so there’s blazer weather core. What do we want to look at? Let’s look at let’s look at the temperature unit: picker we’ll open that file up.

We can set a breakpoint right here on the click handler when the temperature has changed. Let’s go ahead and get the current location back up on the screen, so we can change the current of the temperature unit. Well, click and there we just hit a breakpoint in c-sharp in the browser running on top of a web assembly based at runtime. We can even expand down here and take a look at some of the local fields in our component.

So currently the temperature was was Fahrenheit, let’s hop out of here, and let that the app continue. If we clip the temperature unit picker again, it should say that it’s changed and has it yeah. It looks like we’re good. So now the temperature is Celsius, so there we’re just debugged our blazer web assembly, app directly clients eyes. So that’s pretty cool, oh, go ahead and let that run all right.

So that’s blazer web assembly. Now we can use some of the more modern web standards in our blazer web assembly, app to make it even more native-like and apps like this are typically called progressive, web, apps or pwace. What is a PWA? Well, a PWA is just a web app, but it uses modern web standards to enable things like offline support. You add a serviceworker so that the files can be cached and used even when the browser is not connected.

Support for push notifications, pwace tend to are fast and responsive, so they have that native app like feel on some platforms. They can even be OS installable, like you, can pin them to your home screen on your phone or on Windows 10. You can install them so that it can be, they can be run from your Start menu. So we can take our blazer webassembly app and turn it into a PWA all right. Let’s do that.

So actually, we’ve already got it running and if you we look at the top with our blazer webassembly app, you can see there’s a couple of icons up there and this one here is says: install install blazer, whether as PWA, that’s because the browser and Windows 10 Is detecting that this is a progressive web app if I go ahead and click that yeah, let’s go ahead and install, and now we see our blazer web assembly app, but it’s in like a native shell, with all the same functionality still works like I don’t know, Saying this, so we can find new locations, we can get the location by by geolocation and we can see that on the Start screen of my Windows – 10 box, there is my blazer weather app and it has a nice little icon.

So that shows up in the Start menu. So that’s pretty cool. So that’s that’s a blazer PWA. How did we enable this? If we go back to the code and look at how this was implemented in the www root folder, we can see there’s a serviceworker that was added to this application. This is a piece of JavaScript that enables caching and then there’s also this manifest file which specifies like icons that can be used when this app is either pinned to a home screen or or to the the Start menu and the windows device.

That is that blazer PWA, starting to look a little bit more native. It’s got a native shelves, it’s runnable from the Start, menu. Let’s go ahead and close that all right, hybrid apps are native apps that run natively on the device they have access to all the native capabilities of the of the device, but they use web technologies for rendering their UI. So, for example, you might have a mobile application, that’s running natively, but it’s using a webview for rendering all of its user interface or you can have an electron application and an electron application is using an embedded chromium shell to handle all of it.

So, let’s your user interface, let’s see if we can build blazer, hybrid apps as well, we’ve been doing some experiments in this space when we go back to visual studio. Alright. So here in my third project, we have a blazer weather electron app, so I’m going to set this as the startup project and we’re going to ahead and run it again. It’s using the same components as before, but now, instead of running as a web application, this blazer electron app is going to run in an electron shell.

It’s a native shell, like we have all the access to all the native capabilities of electron. The same functionality still works, let’s see what the weather is like in New York, then it goes. We can get the the current location and so forth. We have all of our pin sites, and this HAP is interesting because it’s not actually using webassembly the blazer webassembly app and the progressive web app. Those were both webassembly based.

They were running in or inside the browser using the web assembly based runtime and, as a result, they were also limited by the browser security sandbox. A lot of people ask me about blazer webassembly apps when they see the dll’s being downloaded into the browser and asked. Is that is that safe? Is that okay, like? Is there any security issue there? The answer is no, because the code that’s being executed is being executed using that dotnet webassembly runtime running in the browser security sandbox.

So it can’t do anything more than what normal JavaScript could do in a browser. Application can’t do anything more and I can’t do anything less either. It has all the capabilities of what JavaScript can do, but no more so it is safe. In this case, though, we’re running on electron, an electron app the.Net code is running in a normal dotnet core process. Nak dotnet core process does actually have full access to the native capabilities of the machine.

So if you want to touch the file system or open arbitrary network connections with this application, that’s stuff that you can do in this application. So basically, what we have here is a native desktop app with the UI built using web technologies built using dotnet and it’s cross-platform. This will run on Windows, Mac and Linux. So that’s an example of a what a blazar hybrid app. What might look like, at least for desktop scenarios? This is something that we’re exploring and investigating.

If you want to play around with blazer electron, I think I have this you’re all set up. You should go to HBS whack whack, blazer, electron, akms, blazer electron is the euro and let’s see if this is not alive. I think I set this up this morning. Yeah there we go. This will take you to our HP, Labs repo and we have an experimental project that we’re working on that integrates blazer with with electron and there’s a sample there that you can try out all right now.

The last stop on our spectrum from web to native is going well. The first ones get passed. The hybrid screen is going full native actually having a native app, but instead of using web UI. What are web technologies to render the the UI Wow we use native controls so that we can leverage the native controls of the device? This is an area also that we’re investigating and experimenting with. I don’t have a live demo for for this area, but Blaser was architected from the beginning so that its renderer was extensible.

The default renderer in Blaser renders HTML and that’s why you used laser to build web applications, not too surprising there, but the renderer can be replaced. In fact, you can replace it with a different renderer that renders to whatever you want, like you might render. Instead to native controls, there’s a really cool demo, that is just a tech demo, an experiment. It’s not anything that so we have any plans to ship, but that seefs anderson did at NDC oslo earlier this year and what he did is he took the blazer renderer.

He replaced it with a renderer that could render to native flutter controls, so he was able to build a flutter app using Blaser writing his code in c-sharp. Normally flutter apps would be written with dart. U it’s pretty pretty cool demo. You can take a look at it at the link below a kms blutter, so Blaser plus flutter. It gets you blutter. I guess where you can see, see senator sanderson a demo that capability of blazer again.

This is not something that we actually plan to ship, but it just shows you what is possible with the the blazer model. This is very um, similar in nature to what you typically write with applications that are using technologies like xamarin or react native. These are applications that run natively on the device and then also a render to native controls in a cross-platform way. We’re looking at. Could we do something similar with blazer like have a blazer native? That does a very similar thing, nothing to share yet there, but it is an area that that we are currently looking at all right.

So this is what the roadmap now looks like for for blazer blazer server is available. Today, it is supported in dotnet core 3 o. If you want to build a blazer server app and deploy it into production, you can do that right now. Go ahead and download it install it. It’s great. You can start adding some rich interactivity to your existing done at web applications blaze. Our web assembly we announced earlier this week will ship next year.

We’re targeting May of next year will start to see more progress on that in the in the months ahead. We’re also starting work on blaze or hybrid apps and blazer progressive web apps. You should expect to start to see previews of that functionality in some of the dotnet 5 previews that will be coming up shortly. Dotnet 5 is expected to ship in November of next year, but hopefully we’ll have previews at PD, PWA support and electron sooner than that, if you want to play around with blazer webassembly apps as pwace, there are actors, some really nice community projects out there that you Can download and install and those those are really great to try out blaze.

Our native is not something that we have any concrete roadmap for, but it’s an area that we are experiment experimenting with and we hope to learn more about and talk to talk to. Folks, like you to see what we should should should do there, so that is the future of blazer on the client. I hope you enjoyed the things that you see that you saw, I hope, you’re excited about them, give them a try, try out blazer an electron with a sample, try out blazer webassembly, give us feedback and, of course, make sure you download dotnet core 3.

Oh today, there is no time like the present so make sure you’re using the the bits that are already ready available. This is a bunch of useful resources that you can go look at to get started with. Blazer get go to blazer net to get the bits and find the documentation you can get the dotnet core 3o bits at the dotnet. Slash get core 3 go make sure you get Visual Studio if you’re on on Windows you’re going to want to get the latest release of Visual Studio 16.

3. We have a wonderful blazer workshop if you want to learn how to program with blazer and participate in the blazer community. They have a lot of great folks, like Chris dainty, who did the blizzard project and and others that are building wonderful, JavaScript, Interop libraries and component libraries, and with that I’m going to turn the remainder of the time over to questions yeah. Thank you check this out.

Yeah yeah, so thank you so much. We have a little special surprise. What so I want everybody. That’s reading to know that this is actually Dan’s 15-year anniversary of Microsoft. It is blazer, probably wouldn’t exist without Dan with a lot of people. So a lot of people work on placing the blazer thing, and so I want to give you this gift. This is a blazer pillow, what’s even better about this blazer pillow, if you swipe up on the blazer pillow, that is that spectacular.

Are these place fabricated at large, like a one-of-a-kind thing? I don’t know this this this. That is congratulations, 15 years to the next 15 years. Yes, thank you right. Let me borrow that pillow for a couple of weeks I mean just just. Maybe we probably have a ton of questions. Oh there’s lots of people tweeted you in your brand new jacket sweet. Do you want to yeah? Let’s do it. So, let’s start from the left here and we’re going to get this question here.

Well, blazer be a good choice for enterprise level, web apps that need high availability, scalability and fine grained services on the cloud. While this is really good yeah, you know I I mean. That’s what the it’s built for and blaze our server in particular that’s what’s shipping today, that’s what’s supported absolutely supported for large enterprise applications, so I think we we think of Blazers being particularly well suited to enterprise apps for line of business applications yeah.

It would be absolutely yes, it is ready. So yes, yes, yes all right. What else do we have here? So what about this one? How do you users, how do you have users update new build versions and a blazer pw8 updates? How do you do that updates to new versions in a PWA, so I believe, that’s all managed by your Service Worker policy like the so I think the inherent question is there is when you download a PWA, you can often set up a serviceworker so that it’s Available offline, which is effectively that caches the files when you set up a serviceworker, I believe that’s where you put policy about like when does the app go back to get the new files and I’m sure, there’s also a way where you can just enforce the aptitude? Fresh, but I think that’s how you would do it I’ll have to I’ll double check on that, but that’s my current understanding.

We haven’t done a lot of Investigations and blazer and PWA, yet we’ve just done some early. You know proof of concepts like you saw today. This is an area that I expect that you’ll see us looking more into in the.Net 5 wave all right next question: any updates about supporting G RPC web for blazer, also blazer native on mobile yeah ER PC web. That’s that’s! That’s really interesting. So we support grq, see now in tot nick horror, 3.

Oh, how ever it doesn’t work from a browser? You can’t speak the G RPC protocol from the browser to to your front end servers. There is a variant of G RPC that you can use called G RPC web. We don’t currently support it today and we don’t have concrete plans to support it yet, but we are talking about it as a potential area to to invest so don’t know yet. But let us know if you think that would be interesting and useful for blaze are native well, we just talked a whole bunch about what we’re thinking for for blazer native.

We are right now in the prototyping and investigating stage. Blazer was architected from the beginning to support non web native scenarios where you replace its render, with some other render that can go to native controls. It’s very similar to what like react, did react, started out as a web framework and then move to support native apps with react. Native laser can absolutely do the the same thing.

What the roadmap for that is. Yet we don’t know it’s still TBD TBD. Okay, we have another question here: APW a using blazer, that’s something really attractive, but for now my question is which server off integration is preferred like Windows or DB. Chrome has problems with Windows off so which off mechanism should you use with a blazer application, so that will impart depend on your hosting model like if you’re hosted on the server or, if you’re running on web assembly in the client and really the type of author.

You then use will depend on your app and will tomato it depend on your environment if you’re running in the client on webassembly, that’s like a spa, so you use spa style, authentication patterns. Typically, that means using like an open ID, connects a row off like flows where you acquire a jot token and use that with all of your HTTP client requests. You can also use cookie based off from from a spa.

That is that it’s possible blaze, our server apps. You have the whole set of auth options available to you, based on what you’re trying to do. If you’re, if you’re providing a line of business application – and you have Windows users, you want to let them log in Windows off, it would be a great option if you’re writing an app where you need users to be able to register their own user profiles and Have their own passwords that you want to manage, then using a spirit, core identity for your authentication support, it’s a great option for the webassembly apps using identity servers, support for open ID connect with probably probably what you want to do fantastic.

So just a couple of pictures like this one to me is what it feels like: I’m there and another one of course, looking sharp. If you follow him, you’ll find he did another picture of me, but not as flattering as this Jeremy. You got to get my good side. Buddy now for sure lays a jacket for more important questions. Obviously, can this be integrated with an existing Donette framework project? If so, how via new get that’s? That’s the you know, that’s a it’s a great question: could you, whose blazer, with a dotnet framework out, let me blaze our server? Obviously, not because blazer server is is is running on asp.

Net core, like it’s using the signal, our support in asp.Net core, so no with with dotnet choreo. You can’t run that on a dotnet framework. App blazer web assembly is just static files, so it doesn’t really care what is on the the server it could be actually PHP or whatever on the server. So technically I guess you could use dotnet framework on the server with a blazer webassembly app, but it’s really been optimized and integrated with dotnet core, like the full stack experience that we imagined for blaze, our web assembly is you have dotnet core on the server blazer Web assembly on the client – and we provide you all the nice integration points there.

That’s that’s Wemo how we mostly imagine it being used but technically should be doable and here’s like a super awesome question mica. What does it say yeah? Is that Blazers future of web development is blazer the future not try to put it on a spot again where in the jacket – and you have a pillow with your face on it, you say it’s super authoritative comes to the future of web dome. Yeah absolutely is for many many web developers.

Is it going to be the only way that people write web apps going forward like some some people ask like? Does this mean I that no one will ever write JavaScript again like no? That’s not what blazer is going to do. There will be lots of people still running JavaScript there’ll, be lots of people writing in all sorts of different technologies. What web assembly did is it actually opened up the door for really any platform? You want to be used in the browser, so I imagine there’ll, be people using Python and go and rust in the browser as well, but we are working really hard to make sure we have a great dotnet full stack web development story.

Alright, so here is another one, and this is interesting to me because I remember when this was introduced. I saw Sanderson demo it to me. It was me it was Damion, Edwards and Fowler, and we just sat there were like holy cow. This is ridiculous, and the first thing I thought was perf is this: is this going to be the same as the other, so any stats that show performance comparison between asp.Net MVC, web and blazer yeah? So so there’s a couple different comparisons that you could do that.

First of all, it’s not really an apples-to-apples, of course Harrison, and the reason is like I we talked about yesterday. Blazer is for your client web development needs, it doesn’t replace MVC, it doesn’t even do the same things that NBC and razor pages do. Those are server. Render technologies that use on the server Blazers meant to be used in the browser for a client web UI? So you don’t even do that when you want to do a server rendering you do that with MVC.

You don’t do that with laser at all, but there is some interesting, perfect characteristics of blazer that are worth mentioning: the Blazers, based on a differing algorithm. Where you render your components, it calculates a DIF and it applies it to the Dom that diffing algorithm has been highly optimized to be very, very efficient when you run it in web assembly. There are some known performance issues with any CPU intensive loads on our existing web assembly runtime right now.

That’s because, right now our dotnet webassembly runtime is doing ILO interpretation and it doesn’t have a jitter. It’s just interpreting the il on the fly and that can be slower, we’re working on that we’re working on supporting ahead of time competent compilation to assembly, which does give you back that, like native like performance, we haven’t had a preview of that yet. But we hope to have one as soon as we can shortly so that will hopefully address the performance problems of running an op laser web assembly in the browser when you’re running on the server you’re running on dotnet core, it’s superfast no performance problems at all.

All right, I think we have one more question. Yeah we have time for one more yeah. We do all right. Well, blazer support a per razer component, server-side web assembly configuration in one spot. I don’t know if I could parse that oh yeah write a Perl radius component, server-side, slash, there’s like so many pieces here. That’s why it’s such a good question. Ah, I think I like the way I choose to interpret this question.

You are wearing the jacket. You can do whatever you want. I think what this is asking is, you could imagine, maybe having a mixture of hosting models in the same app where this component is going to run on web assembly, but that component is going to run on the server, maybe for whatever reason it makes sense to Do that we don’t a first-class way of doing that today. It is something that people have asked us about right now, you either you pick one or the other you’re doing place or webassembly you’re doing blazer server.

It doesn’t seem like there should be anything blocking it, though, because, like I said laser weapon, sembly is just a bunch of static files. You could have a blaze of server app, you throw a bunch of blazer webassembly files into its dub-dub-dub root folder, and you can download those and use those, so it seems like you could get it to work. I haven’t actually done it yet, though, and it’s not an area we’ve really played around with, maybe that’s something that will we’ll look at going going forward.

Well, this has been amazing. We have coming up a short commercial break and afterwards


 

Categories
Online Marketing

Building Full-stack C# Web Apps with Blazor in .NET Core 3.0

Welcome, I’m so excited to be here because today, dotnet core 300 has shipped, which means blazer is now available for production use on the server. In this talk, we’re going to talk about using blazer to build full stack web apps using just dotnet and c-sharp. Now Don that has always had a great story for building server rendered web apps. These are apps where you stick some dotnet code on ur server and that code generates HTML or Jason in response to browser requests.

If you wanted to do anything on the client in the browser, well, that meant you had to use one of these guys. You had to write some JavaScript and there’s lots of great things about JavaScript, but there’s also some additional cost and overhead of having to bridge these two very different developer worlds, with different languages, different frameworks and different tools. Well, this is no longer the case.

You can now write your client-side web app logic using net with blazer blazer is a client-side web UI framework where you get to write dotnet and c-sharp. Instead of JavaScript, you write UI components that encapsulate your UI logic using c-sharp and razor. You can then share your dotnet code, the same assemblies on both the client and the server. If you’ve got some validation logic, you can use it on both sides of the wire.

If you need to call into JavaScript code, you can still do that. You just have access to all the JavaScript API is of the browser and other libraries through a JavaScript Interop mechanism. Now Blaser is in large part made possible thanks to a relatively new open web standard called web assembly. What is web assembly well? Web assembly is a bytecode for the web. The idea is that if you can compile your code to web assembly, it can now run in any browser on any platform at near-native speeds and we’ve been working for a while now on getting dotnet to run great on web assembly, we are building a dotnet runtime In web assembly, this is how a blazer web assembly app works.

The browser provides the core web assembly support. On top of that, we’ve built a dotnet web run time. You then build your razor components that could compiled into normal dotnet assemblies they’re downloaded with the runtime into the browser and then executed directly in the browser. The browser then sends all its UI events to your dotnet code. Your components run, they render the UI and blazer does all the hard work to figure out what exactly changed in the UI.

The difference is then sent back to the Dom and updated very very efficiently. Now. The cool thing about blazer, though, is that you can host it in multiple different ways. We’ve talked about running your app on web assembly, but, alternatively, you can also run your blazer apps and host them on the server using the same components. The way I blaze our server app works is your components run on the server.

The browser sets up a real-time signal, our connection with the the server and that’s what it uses to handle and send all of the UI events that the the user is is creating when a button click occurs, it gets sent to the server. The corresponding component runs just like it did on a blood layers, blazer web assembly app. The component renders that the blazer does that hard work of calculating a diff.

It serializes that diff back down that real-time connection back to the browser, so can it be applied to the Dom so in dotnet, core 3. Oh we’ve shipped support for blazer server apps. You can use that in production today go and download it and install it, and I was thrilled to that. We announced today in the keynote earlier that blazer web assembly apps will be shipping and supported in May of next year.

Now, how do you pick between these two different hosting models? Well, there are different pros and cons to each a blazer web assembly app. That is really a true single page app. It has full interactivity, it runs client-side on the user’s device. You can use all that users device devices resources like its CPU, its memory, its storage, to the extent that the browser will, let you it supports offline scenarios, you can, you can deploy it as a static site.

You don’t even need to have dotnet running on the server, because your app is just a bunch of static files. You can build progressive web apps with a blazer web assembly. The downsides of blazer web assembly are well. You need to download that runtime with your app, and that means an additional download size cost, so your app may load slower. It does also require that the browser supports webassembly and well all modern browsers.

Do if you need to support something like say: IE 11 or an older browser that doesn’t have web assembly support. Then this one’s not going to work for you also Blaser web assembly is still in preview. It’s not ready for production, yet so that’s a factor to consider as well Blaser server apps. They have a really small download, because the only thing they need to download is a little piece of infrastructure code that sets up that real time signal.

Our connection. Your blazer component code is now running on the server on a full dotnet core runtime, and it has access to all of the resources that the server has access to. Do you want to talk directly to the database? You can do that from a blazer server app. Some people really like that your code never leaves the server in a blazer server app if you’re uncomfortable with the idea that your dll’s will get downloaded into the browser and the user can grab them and decompile them, then maybe a blazer server app will be a Better choice: it can really simplify your architecture to not have to stand up additional Web API, endpoints and so forth, so on in order to access server resources because you’re already there you’re running on the server, the cons of the blazer server model are, first of all, Latency, all of your UI interactions are going to go over the network, so you’re going to want to make sure that your clients and the server are as close together as possible.

There’s only so much you can do about the speed of light. It’s a connected model. So obviously, no offline support and also you’re paying with your server resources to run the UI for each connected client. So that’s an additional scale and cost consideration. How do you get started with blazer? Well, I recommend going to blazer net. That’s where you can find all of the getting started instructions and the blazer docks you’re going to want to install dotnet core 3 o if you’re interested in playing around with blazer web assembly you’ll need to install the Blazer web assembly.

Template too, if you’re on Windows using Visual Studio, make sure you get Visual Studio, 2019 16.3, which is now available today, as well. If you’re on Mac or Linux user, you can use Visual Studio code to do blazer development using the c-sharp extension and we are working on bitches studio for Mac support for blazer as well, and it should be coming soon all right. Let’s take a look at blazer. Let’s write some blazer code, so I’m going to go into Visual Studio and I have here the same blazer weather app that you may have seen earlier in the keynote.

This is a single page, app that lets us see. The current weather of Seattle wear work where we’re close to where we’re currently at today and you can see as usual, Seattle. It is raining alright, so that’s pretty cool now how we didn’t really get a chance in the keynote to take a look at how this app is running, and this is the same app. I did refactor it slightly to move all the components back into the app project, just to simplify things a little bit.

Let’s take a look at how this project is structured. The first thing to notice is that a blazer server app – and this is a blazer server app – is just an asp.Net core application. Here’s the program CS file for the app it’s got: the normal asp.Net core hosting coke boilerplate code in here it has a startup class that defines the startup logic for the application in this configure services method. This is where we define all of the services for the that we want available through dependency injection for our app up above you can see that we’re adding the services for both razor pages and blazer server, which is interesting, blazer, remember, is a client-side UI framework.

It does not replace or remove the need for the other server rendered frameworks. You still want to be able to run code on both the server and the client Blazers for the client. These two pieces of technology are meant to be used together and we’ll see more about that in just a bit. This apps also setting up an HTTP client to be used to talk to the back-end weather forcast service that you saw Glenn build earlier, and then we have some other app specific services that we’ll talk about in a bit down below in our configure method.

This is where the apps request handling pipeline is being set up. Most of this code is boiler plates the same set of middleware that every asp.Net core app has the two things that are different is here. You can see we’re setting up the blazer hub. This is the signal, our hub, that blaze, our users for managing all of the UI interactions with the browser and then lastly, there’s this map fall back to page rat.

What is this all about? Well, this is going to take any request that makes it to this point and make it go to slash underscore or host it’ll, basically reroute it to this end point: what’s that underscore or host, let’s go, take a look. Well underscore our host dot C s. Html is just a razor page. Remember we’re using razor pages and blazer together. Both sides of the wire most of the content in this page looks pretty normal, looks like normal HTML, but there are two things that are kind of different.

The first is at the bottom. There’s this script tag: this is where we’re adding the blazer server che s, script, which is provided by the framework. This is the script that sets up the real-time signal, our connection with the hub that we saw previously. We also have this HTML helper, this renderer component async call. What is this doing well, this is rendering this the the apps route component right here on this racer page for the initial render of the app and there’s nothing special about this app component.

This could be any component, you want and you can render any component. You want onto any MVC view or any razor page. Let me show you, this is really the case. So let’s live have a different project over here, not not the weather app. This is just a vanilla, MVC app and a speed on it core MVC app. I just did file new project and then I added those things that you just saw from the blaze of server app in the startup class.

I added server-side blazer down in the endpoints. I added the Blazer hub. We don’t need the fallback route in this case, cuz we’re not going to be using routing we’re just going to be having individual components on pages and then in the apps layout, which I think it’s under here and shared there. It is you can see down here at the bottom. I’ve also added the Blazer server script, all right, so we should be all set to go to use components in our MVC app.

Now I’ve added a component to this project as well. It’s right here, component 1, dot raiser, it’s pretty simple! This namespace is important for getting all of the web related RAZR directives to light up. So, if you’re having problems with those directives, not compiling for some reason make sure you’ve got it using for this namespace. It’s it’s it’s needed, and then we have an input in a P tag and we’re using this at bind directive.

What is that? Well, that is setting up a two-way data, bind which the value of the input and this message field that’s on my blazer component, and then I render out the current message down below. You can also see that I’m changing, which event is used for the bind. Normally a bind on an input would occur on change here have decided to do it every time I touch the keyboard on every key press so on input.

So I should see this message update with every keyboard press now to add a component to a project. It’s really easy, you can just do add new item and there’s a RZR component item template that you can use that’s what I use to create this this component. Okay – let’s now add this to one of my views: I’m going to go to the home page of this app and I don’t remember the HTML helper, so I’m just going to copy it.

Let’s go grab this piece of code and put it right there. In my MVC view, I don’t want to render the app component I want to render my component one component. Components are just normal, dotnet classes. So that’s why you can just use the type name. The type name comes from the name of the file: okay, that should be it. Let’s go ahead and run it, and we should see a vanilla, MVC app with the normal default template styling and hopefully a component.

Let’s see yeah there’s my component, let’s let’s zoom in a little bit and if I just start smashing other people with like high dotnet coffee, you can see it’s doing the data binding. We have an interactive component on an MVC view. Blaze, ok, great! So that’s using blazer from NBC, apps or racer pages apps. If you have an existing app, which I’m guessing many of you do, you can use blazer with that app.

If there’s no need to rewrite an app to be blazer, you use blazer for your client-side concerns. Okay: let’s go back to the Blazer weather application. We’ve seen, I think everything in underscore host at CS HTML. Let’s look at that app dot, raiser component here it is. This is just setting up client-side routing for the application. It’s going to find all the routable components in this assembly.

Let’s go see what routable components we have well, it turns out. We only have one and that’s this forecast dot. Razr component, you can tell it’s routable because it has the app page directive at the top. You do need to explicitly specify the route at some point, maybe we’ll infer that from the file path, but for right now for Blazer components, you need to explicitly specify it okay, so this there’s only one page in this app.

So this truly is a single page, application, okay and then down below for most of the rendering logic for the forecast page, it’s just razor syntax. A mix of HTML and C sharp, like this get background. Class function is returning some code for class based on whether it’s daytime or nighttime, and what the current temperature is. If it’s a you know, a warm temperature or a cold temperature, so just some c-sharp and HTML.

Now some people get kind of concerned because down here at the bottom, we have that code block again and there’s all this code. That’s in my component. Some people get concerned about this mixture of code and markup, and it was that really, okay, never used to say you’re supposed to always separate those things, and you should separate code from your components if that code is like business logic.

But if it’s related to the presentation layer, it’s perfectly fine to have it in line in the file, I mean it’s going to be compiled into the same class anyway, but if you still prefer the code behind pattern, that’s fine! You can do that too. If you remember from the keynote in the forecast page, we have this little temperature picker component. Let’s go look at the app that’s this this guy right here.

If I click it, it switches the temperature unit from Celsius to Fahrenheit and back that components implemented over here. On the components folder and it’s pretty simple – it’s got a div and a couple of spans, but it does have some code. If you don’t like that code living in the component, here’s how you do it you’re going to add a new class you’re going to call it the same finally, temperature unit, Picard razor dot, cos! If you did it right, it should nest nicely underneath it did all right great and then I usually call this is going to be an inheritance model.

The the code behind will be a base class, so I usually call the base class the same name as the component with base and it needs to derive from component base. Let’s get the namespace for that good, and then you can just copy all the code. Out of the code block put it into your base class save it. We do need to change the visibility of this private method, because this is an inheritance pattern. So now needs to be protected so that it can be visible by the derived component class.

And then, let’s just inherit from our base class using the @ inherits directive, so hat inherits when a temperature unit picker base okay and that’s what you do and if we wait a second. Hopefully, all those red squiggles will go away as it picks up the base class and there it goes okay. So that’s how you can do code-behind. If you like this pattern, I prefer the inline pattern, so I’m going to keep that I’m going to leave what I just did and leave it the way it was alright great.

So that’s that’s that let’s look a little bit more. Our forecast page now Mike made some changes to some files after we load the browser. Now one of the things that’s not so nice about this app is that the location is hard-coded like you only get the weather for Seattle, it’d be nice. If we could actually see the the weather for some more plate, more places like maybe we could search for our location or maybe even use the current location of the user based on the their their browser.

How can we add that all right, so let’s try and add some location search capability? Let’s add it using a component, so I have a location, search, dot razor file over here, in my components, folder – and this is going to allow the user to search for places, and it’s got some very simple, markup very little. It’s got a div with an image. This image is just a little search icon. That shows if a search query is in progress like it’ll spin, a little spinner thing if you’re currently searching for locations, it has an input, and this input is data, a list, a list driven input.

The data list for this input is defined below and then we are binding. The value of the input to this search, query property very similar to what we saw before in the MVC app and we’re binding on every single keystroke. What we want is every time the user type starts, typing we’re going to kick off a search and try an autocomplete for them with this text box. Okay, so, let’s see now this, this search query property is pretty clever.

Now it has a setter that if the search query value is not a null or empty, then it’s going to do this search, debounce method. What is that guy? Well, you probably don’t want to do. You know a back end request with every single time the user types on the keyboard. That might be a little bit too much too much too chatty. So instead this is going to debounce, which means it’s going to wait for the user, just sort of pause, typing and things sort of see if they’re done and so there’s some clever code in here, it’s using a you know, cancellation, token source and it cancels the Previous search, if there was one in progress and then does a delay and it keeps checking to see if the search was cancelled, while it’s in the process of doing this, this query – and here you can see – here’s where they’re the weather forecast service is being asked For the current location based our locations based on the text from the query and then, if it has still hasn’t been cancelled, then it saves the set of return locations to this location field, which is just in a location array.

And that’s what we’re using to generate the data list that you, the user, can then pick from from the location, textbox cool. Now the user needs to also be able to pick a location, and so that’s what this on change event handler is for at the end. Here, on that same input, when the user actually selects a particular location or hits enter, then this location selected method gets hot called. What is this doing? Well, it’s getting the selected location and then it’s raising a callback so that the parent component can know what the location was.

That was that was chosen. This location, changed property is of type event callback, it’s a component parameter, which means it can be provided by the parent component as a piece of code to call when this event has has occurred all right. So, let’s, let’s wire up this component in our forecast page. So, let’s go up here and we’re going to do right under here: let’s do location, search, location, changed, equals location change is the name of the method I have defined already on the forecast component, all right so now we should have a location textbox.

What does this component do when the location actually changes? Well, it cancels the real-time updates to the weather that we’re in progress previously and then kicks off another async for each loop to get new updates from for the new location. So that’s what it’s going to do if we go back to the app now, hopefully we can see this working all right. So now we have a textbox, let’s try and type something.

So let’s try like Chicago all right. We get our drop-down. We can pick it. Let’s try New York happen, our little spinny things working great, so that’s working so now we can search for locations, but I’d also like to be able to just use the the users current location have them. You know, use the browsers native capability to detect the user’s location with its geolocation API s. That’ll be cool, but those api’s are in JavaScript, which means I’d have to write some JavaScript.

I don’t want to have to write some JavaScript blazer does have JavaScript Interop capabilities. You can call from dotnet into JavaScript and back, and it does a lot of that for you, that’s how it manipulates the the Dom. But so I could write my own. I could use those same abstractions, but fortunately, most of the time you don’t actually have to do that, because someone in the blazer community has already done it for you, so I’ve added a package to this application.

When we look at my new kit packages, here’s the install package, as you could see, I have this asp net monsters that blaze without geolocation package. This is a package that was actually written quite a while ago in the early days of blazer. Here’s the the URL for the the github location, the code was was a little stale like it. We have, we had changed the api’s a bit and it broke this package, so I had to fork it and fix it up a little bit, but pool request was submitted.

So hopefully I need it any day now that will get merged and this package will then be up to date with the latest blazer release. But I’m just going to use this package to call the browser’s geolocation API, here’s the code for that package. So you can see what that looks. Like that’s typescript, let’s, let’s not look at that. Let’s look at this she’s sharp, okay, here’s the location service class provided by this package, and you can see it’s taking an IJ s, runtime service, that’s provided by blazer for doing JavaScript, Interop and the way you use it is by calling invoke async and invoke async Takes a string which is the JavaScript function that you want to call? You can pass in additional parameters, let’s dotnet objects that will get serialize and sent them over to JavaScript, and then the generic parameter is the return type.

So that’s how you can call into JavaScript. Fortunately, I don’t have to do that because I think it’s signing Tim’s is the guy who wrote this project. So it’s great. He already did it for me and he took care of writing all this complicated JavaScript. So that’s awesome, so I don’t have to do that. Let’s go back to blazer weather and use his package instead, so I’ve already installed his package. You may have seen in the startup class I added his geolocation service.

I reaiiy put an alias for it to call it geolocation service as a injectable service. In my app and then in the location search component at the top, you can see I’m at injecting the geolocation service, so I can use it alright. Where do we want to use that? Well, when this image? This is the third image. This has that that’s that little target button when it is clicked we’re going to call get local weather.

What does that method do? Well, this methods just going to call the geolocation service and get the geolocation, and then it’s going to use the weather forecast service passing in the latitude and longitude to resolve that to a location that we can then use to update the weather. So hopefully that just works, let’s go back to the weather app. If I click on the target, you can see the browser saying.

Do you want to allow this app to use your current location? Yes, let’s see where I’m currently at. Where am I really I’m in Redmond, that’s actually correct, and that is the correct weather for a Redmond. Alright, so that’s how you can get the current location using an API, that’s reaction, written in JavaScript, but as far as I can as far as I’m concerned, it’s like it was written in c-sharp. I’d also like to be able to pin some of these locations so that I can go back to them instead of have to keep search for them.

How could we do that? Well, I groped a little push pin component there. It is – and this is just a custom checkbox – that I got the markup from over the web. It has an is checked, parameter and is checked, changed event callback, so this – and this has been styled to look like an actual pushpin. So, let’s, let’s go ahead and put this onto our forecast page, and where should we put this, this will need to go.

Let’s put it right by the location, pushpin and we want to say, is checked we’re going to bind that to the current location is, and it has an is pin property so that we can tell whether it’s been pinned and then that’s a wire up. The event. Callback to call our pin location method that I’ve already defined on the forecast component. So if we go look at pin location, here’s what it’s doing, it’s keeping track of all the pin locations into just a collection and then keeping track of which pin location, as was shown last using this pin location index, and we also need some buttons.

So we can cycle through those locations. I’ve already got those defined here, so I’m just going to copy them in. Let’s see where do we put those, let’s put them by the image I’m going to like the little carats on either side of the image? These are just two little caret images that again have on click handlers defined when these handlers are called. It just changes. What the current index is of the the pinned location all right.

So if we reload the app now, hopefully we should be able to see a little pin icon. You see that right there and we could be able to pin Seattle. Let’s do a Honolulu looks good yeah. Let’s pin that and then oh, it’s not, and it’s not showing that. Why am I’m not showing up what’d, I do wrong. I forgot something back winner. Oh it’s! What I forget the pin location is there. Oh did I not say I always forget to save.

Ah yeah, I didn’t save go back so we had. We did. I hoped I save for the pin the pin, but not for the actual you extra UI, so I could cycle through so Chicago. Let’s pin this one so pin Seattle Chicago. Let’s pin that yeah. Now we got our icon, so we can cycle through ok, so you get that point. So there we’ve done some some blazer development and that sample will be available up later for you to play around with now.

If this is not well, obviously we don’t have enough time to go through all that’s available in blazer. I highly encourage you to go check out our blazer workshop, where you can learn to build this awesome British pizza store and that will teach you all about the different parts of the blazer component models. A big shout out to our component vendors telluric that Express sink fusion they’ve, the wonderful blazer come component.

Libraries that you can use Radzin is also a component vendor and they ship a low code solution where you can build blazer apps with just a designer. That’s pretty awesome. You should check that out. Another big shout out to our blazer community. Thank you, Chris dainty, who has provided us packages for local storage, which is actually part of this sample, app and also Simon for the geolocation API.

If you want to check out lots of great projects in the community, I encourage you to go to an awesome, blazer, akms, /, awesome, blazer, it’s a github repo that keeps links to all different articles, articles, tutorials samples and libraries. One of my favorites is this blasteroids sample, I’m just going to show it really fast and then I’ll get off the stage. Blasteroids is a blazer webassembly app.

I think it’s hosted on github pages, but it is doing like full a full, like version of the 1980s asteroids app written in dotnet on webassembly. That’s pretty awesome! Alright, that’s all I’ve got Glaser servers available today, download and install it and start doing full stack development with dotnet and c-sharp. Thank you awesome Dan. Thank you so much so so cool okay. So we have a ton of questions and excitement about phlaser.

Where should we start how about Oh, which one did we have they jumped around again, things are moving. We we had one week that we promised well here’s a quick i’ll. Just don’t remember where it is on the screen, but it was a question about browser. Compatibility are there any browsers that we need to worry about. Is this something that works everywhere for Blazer on the server it works with all the modern browsers? As long as you can set up that WebSocket connection for older browsers, you may need some polyfills to get it to work, but those polyfills are available and a lot of them are maintained by the community for a web assembly.

You need a browser that supports web assembly, so if you don’t support web assembly you’re kind of out of luck so like ie, 11 you’re not going to be running blaze or webassembly apps on I gotcha alright. So I can’t find blazer project templates and visuals to be for Mac. Any idea when we’ll be adding yeah Visual Studio for Mac is coming. We are working with him on that. It’s expected in the next Visual Studio for Mac updates it there.

You know busy trying to unify all their code with Visual Studio and get all the common infrastructure in place. So they’re taking took a little bit longer for them to get their tooling in place, but it should be coming very soon, but you can use Visual Studio code in the meantime. Can blazer work with backends that are not dotnet, absolutely like. If you have a blazer webassembly app, it is just a bunch of static files.

You can host it on github pages. You could put it on as your static site hosting and have whatever you want on the server it could be Java on the server. It could be Python, it could be a fast typing monkey. It doesn’t really matter because it’s just a bunch of static files, that’s going to be downloaded into the browser and run client-side. Ok, so then this question: what kind of host ray need for plater? Please? Or you could put it in Azure storage and make a static website.

You could use Jekyll you could put in on github pages. You are nondenominational for the web assembly version. Yes for the server version. That’s an actual asp.Net core app! So you’re going to want to have actually servers at that point that well, that will run on the server like we’re going to set up a signal, our connection with the server. We highly recommend using the azure signal our service actually with laser server apps, because they will handle connections scale-out for you thanks, alright, so next question: what’s the underscore generated file when you created the code behind the base class great question, that’s just an artifact of how The tooling works in order to drive the intellisense.

There are multiple passes of code generation that are occurring. We actually hope in the you know, in a future release to clean that up a little bit. So you don’t see those generated files. Quite as often as you do today, part of that isn’t involved with us making the generated components of partial classes which is coming in daanyik or 3/1 excellent. What else do you think we have a subrogation? You are refreshed yeah, any ideas about how many WebSocket connections server-side Blaser can handle.

Well, that’s really depends on how your server is set up. If we use the agile signal our service, it will multiplex all the connections to your app and you can scale up to tens of thousands of connections no problem. The connections may not be the real bottleneck, though, most likely it’s going to be like memory on the server, because you are paying with your server resources to actually run the UI for the client.

So you’ve got to maintain all the UI state and the you know the the the component instance is running on your server, so you’re going to have to plan for that. Accordingly, we have docs to help you do that, all right, very cool. So, what’s the progress in website size – and there are a few point – complaints, but it’s too high the size of the website. Yes, yeah so Blaser webassembly is is bigger, like you have to bring a runtime with your app there’s a webassembly file right now, a default blazer webassembly, app like with our project template, weighs in at about two and two and a half megabytes compressed things that we’re Doing we’re improving the IO linker, so we can strip out more code right now.

We only run the IO linker on part of the app we’re going to run it on more. We think we can trim down the web assembly file itself, there’s a bunch of tricks that we’re looking at we’ve even talked about like taking the DLLs in and stripping out all like the PE, headers and stuff like that. So they don’t so that that stuff doesn’t need to be downloaded. We have a bunch of tricks that we’re going to, but to be clear, it’s still just about a matter megabyte or two and is that compressed yeah.

That was the compressed size and I honestly I’ve been to a lot people’s websites where they’re they have a PNG on their homepage. That’s that yeah I attached the file, so you can put it on a CDN and have people only have to download those ones, because, most of the time that runtimes not going to change its the same runtime, no matter how much you’re iterating we love you. But we have to go alright, so next up is xamarin forms, we’re writing beautiful and more productive xamarin ferns than ever with David