 On today's Visual Studio Toolbox, Dan Roth joins us to get us excited about Tuesday's .NETConf Focus on Blazer. Hi, welcome to the first Visual Studio Toolbox of 2020. I'm your host, Robert Green, and joining me is Dan Roth. Hey, Dan. Hello. Thanks for coming on the show. Thanks. Good to be here. We are all very excited here about Tuesday, this coming Tuesday. January 14th. Which is the .NETConf Focus on Blazer. Yes. Day-long deep dive into all things Blazer. Probably not all things because it's a day, but lots of cool things Blazer. We'll have people from the product team. We'll have people from the community giving all sorts of pretty awesome and cool talks about things related to Blazer, things that we're working on, things that we've already shipped. It should be pretty fun. So this is an extension of the .NETConf, the typical thing that happens on an annual basis. It's usually two or three days. Now, it's been expanded to these individual focus days. Tell us a little bit about that. Well, usually .NETConf is a yearly event. We typically do that sometime at near the end of the year, and like you said, multiple days of content, cover all things .NET. But it was just too long to wait in between each of those events and we thought, well, maybe we could do a few more .NETConfs in between to cover specific topics in a more deep way. We decided to do the first focused .NETConf on Blazer. Cool. So today's episode is a bit of a teaser for that. So we want you guys to show up on Tuesday for it live. It's focus.NETConf.NET. That's right. Good. Website. You can take a look. We got a whole bunch of great speakers that are queued up, including myself and people from the ecosystem, people from Microsoft. We'll be showing things that- Good friend, Ed, friend of the show. He's been on the show multiple times talking about Blazer. Yeah. A bunch of partner companies that have been working on Blazer component libraries, and people who've just been active in the ecosystem, building great open source projects, like usually has been working on a great testing library. Some stuff that we're working on in the future, looking at how can we take Blazer beyond the web, not just doing web applications, but also doing maybe native mobile desktop applications, those types of things. We'll be talking about all that stuff at BlazerConf. You can check out the full agenda, like you said, at focus.NETConf.NET. There's the full list of talks. So let's just take a short amount of time and give us an overview of Blazer. We've had it on the show a number of times. A lot of people are fairly familiar with it, but some people might be new to it. So give us the high-level overview, and I'll get people even more excited about Tuesday. Sure. Yeah, I'd be happy to. I have a little diagram here to help out. Cool. So if you're a .NET Dev, I am. Been building web applications, then you're probably familiar with our various server-rendered web frameworks that we shipped over the years under the ASP.NET brand, ASP.NET web forms, ASP.NET web pages, MVC. We have a whole buffet of server-rendered web frameworks that you can use, and they all share one characteristic in common, which is you write your code and you run it on the server, and that code then generates some HTML or some JSON that then gets sent down to the browser and rendered. But if you ever wanted to do something that actually ran on the client machine, like in the browser itself, well, that meant you had to use one of these guys. You had to use some sort of JavaScript framework like Angular, React, View, or whatever your favorite JavaScript framework of the day is, which is fine, but having to bridge those two different developer ecosystems, there's a cost to that. I don't know about you, but my strengths tend to be more in .NET and writing C-Sharp. I can write some JavaScript, but it's not my forte. Right. I think of this as being very similar to human-spoken languages. My first language is English, and I know English pretty well. I can speak a little bit of Portuguese, but don't get too far beyond like, hello, my name is, and where's the bathroom? Those types of things. I think developer skill sets are similar. There's tools and languages that you're really familiar with and strong with, and there's others that maybe you would prefer to avoid if you could. An ideal world is where you can leverage what you already know and move to different places instead of going to those different places and having to start from scratch. Exactly. That's what Blazor is really all about, is enabling full-stack web development with .NET, where you can use C-Sharp, .NET, Visual Studio on both sides of the wire. We think this probably has a lot to appeal to even people who are new to .NET as well. You get to leverage the great tooling that's in Visual Studio. You have a very stable set of build tools, libraries, languages that you get to leverage when you're building on top of the .NET ecosystem. Right. Because it's .NET and you can do C-Sharp, it works the same. Exactly. Yeah. You can share code at this point. When you have .NET on both sides of the wire, you now have a full-stack solution if you have some model types or some validation logic. Instead of having to rewrite that code twice, say once in .NET and then once in JavaScript, you can just reuse the same assemblies even on both sides of the wire. Cool. We've been working on this for a while to enable full-stack development for the web with C-Sharp and JavaScript on top of a core capability of being able to leverage the browser with .NET code. We built a reusable component UI framework on top. So you can build your UI as a set of components, the components can call other components. You can grab components off of Nougat or from various component vendors and use them in your applications. So you can build your app really fast. You get the benefits of .NET on both sides of the wire. If you do need to dive down into JavaScript, we still give you the capability of doing that. Kind of like, I think it was like a P invoke in .NET world. If you need to call down to native code, that's still possible. It's not the most common thing in the world, but with Blazor, that's possible as well where you can call down into JavaScript libraries. If you have existing libraries that you still want to leverage and reuse. To get started with Blazor, you just go to blazor.net. You'll need .NET Core 3.1, which we just shipped very recently. .NET Core 3.1 is a long-term support release, and it includes Blazor, specifically includes support for what we call Blazor server. Blazor server is a mode for Blazor where your code still is running on the server, but we manage all the client-side UI over a real-time WebSocket connection using SignalR under the covers if you're familiar with AcePanet Core SignalR. That's in the box with .NET Core 3.1, has a full support lifecycle. You can use it in production today. We've also been working on a second mode for Blazor that we call Blazor WebAssembly. Blazor WebAssembly runs in the browser on a WebAssembly-based .NET runtime. So you can download your assemblies into the browser and execute them directly. That's still in preview, but you can try that out as well by installing our Blazor WebAssembly templates. So what's the primary use case for server mode versus client mode? Do you mix and match? So well, server is what's available today. So that if you were trying to write an app that's going to go into production right now, you're going to want to use Blazor server. Blazor server is really great for a number of reasons. The app, it stays on the server, so it has a very thin client, which means you don't need to download very much to get it up and running. So the app starts really fast. It doesn't require much from the client device to actually execute, because most of the guts are going to run server-side in a Blazor server application. But you still get all the benefits of that component model of having a what is effectively a single-page app, a spa but written in C-sharp. So that's the nice thing about Blazor server. Blazor WebAssembly allows you to actually leverage the client device. Like your code will move to the client, and you can leverage the hardware and compute the memory that the client machine has. Blazor WebAssembly apps can run offline, because you ship the code over into the client, and you're running it there. You don't actually technically need a server piece in order for the app to function. Whereas with a Blazor server app, you do. Then if you need any really tight, low-latency UI interactions, like if you're trying to do a drawing app, Blazor WebAssembly, you're right there on the user's machine. With a Blazor server app, those don't work quite as well because you're going over the network for your UI gestures. You can get any version of Visual Studio, the latest version of VS on Windows, VS for Mac 8.4 has Blazor tooling support. That should be shipping any day now if it hasn't already shipped already, and then we also have tooling available in Visual Studio code. I thought I would show you a quick Blazor application. Let me hop over to just show you the Blazor.NET page. This is where you go ahead and get started. Click on Get Started at Blazor.NET, and this has all those steps that I just went through for getting the machine set up. To create your first application, you're just going to file a new project, and select Blazor app that will show up in the template list. Blazor app one sounds like a lovely name, and then I'm going to pick the Blazor server version. This is the one that runs over that live WebSocket connection, and we'll let that whole go ahead and create the project for me. So here's my app. I'm just going to go ahead and run this so we can see what it does. Oops, ran a little too fast. That's just because the NuGet restore hadn't completed yet. So what this app is going to give me is, it's going to look like a simple single-page application. It's going to have a number of set of tabs and some components that we can play with as soon as it gets up and running. There it goes. All right. So on the left-hand side here, we got a few tabs. You can click around. If we go back and forth with the browser Naftools, all the browser Naftools just work, that's client-side routing in play. We're actually intercepting all those navigations, client-side in the browser, and just loading the correct component accordingly. We're not actually having to go back to the server and do a full page refresh. That's client-side routing. This counter page, we have a button that we can click and the account goes up and there's no page refresh happening here either. Normally, that would require you to write some JavaScript. Didn't have to write any JavaScript to make that happen. That's all done just with C-sharp. We can take a quick look at that counter page so you can see what it looks like. Here's counter.razor. We'll zoom in just a little bit so we can see. We've got a page directive at the top that just makes this component routable using that client-side routing system. Got some static content where we're rendering the current count. Here we're using razor syntax to render the value of a C-sharp field. And then we got a button where every time we click the button, it increments the count. You can see this increment count method is what's being wired up. Increments the field, the field gets updated, and then the page re-renders. So it's all C-sharp code. No JavaScript required. Cool. I've been working on another slightly more involved app, but not too bad for the conference next week. This is a simple recipe application where it just shows a list of recipes. This is again, all written with C-sharp and Blazor. We can do some simple searches here where we search for a recipe, like I want to search for some soup or soup. Like they didn't have to go back to the server to do a full page refresh. That was always to go and get the data, right? The data actually was retrieved at the initial load of the application, and then we're just filtering and searching over that data with every keystroke in the search text box. I can actually show you the search text box really fast. So it's a little bit more code that's involved here, but it's just an input. You pop up that font. Oh yes, sorry. There we go. So we have an input, and then we're binding this search query string on inputs or every text stroke where we're going to go and trigger an event so that this component can do something with the data. This is a search text box, so we don't want to do a search every single time I type a keystroke. We'd like to have a little delay, like maybe wait 300 milliseconds or something like that after I'm done typing and then do the actual search. So we're using just a normal .NET timer that we're kicking off every time that the search query property gets set using that bind. We start that timer, well we stop it if it's already running, and then start it again, and once the timer completes, like if we got through the full 300 milliseconds before another keystroke was hit, then it just triggers this search query changed event so that my parent component can then filter the set of recipes. We can see that on the homepage, so if we go over to index.razor, here's the homepage of the app. So at the top we've got that search box and we're wiring up to that search query changed event, and then we're just listing all the recipe cards, again another component that I wrote to display to the images and the recipes, and then down below, whenever that search query changed event fires, it calls this as a search method, which then gives me the search query and then I run it on my data store. Just C-sharp code. Yep, they didn't have to write a line of JavaScript. Client and the browser, very cool. So that is Blazor, and if you wanna learn all about it, all about routing and JavaScript interop and data handling, all those topics are gonna be covered at this conference. In addition to some fun new things that we're gonna be sharing, you should join us on January 14th live on Channel 9. And if you miss that, I assume it'll be available on demand. All the videos will be available on YouTube. Another cool thing, if you are though live, instead of watching it later, the benefit is that you can join us on Twitter and ask questions of the speakers live by using the hashtag.headconf. Cool, focus.netconf.net, and that's Tuesday, and we'll see you there. Thanks so much for coming on. No problem, it's my pleasure. And we'll see you next time on Visual Studio Toolbox.