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
Jimmy's Internet Marketing Business Blog 