Hello everyone and welcome to this Microsoft learned studio session building. Your first Blazer Web Assembly app with Visual Studio Code. My name is Daniel Roth and I'm a program manager on theasp.net team. In this session, we're going to learn all about blazer web assembly, how to set up your machine, and how to build your first web assembly based web application. Here's the agenda for this session. We're going to do some quick welcome and introductions, and then we're going to jump right into the Microsoft learn module, where we're going to build our blazer web assembly app using Visual Studio code. Hopefully you've already started setting up your machine with the pre recs and then we're going to jump over to AKA Dot Ms Slash Learn Slash Blazer for the actual session content. At the end, we'll have time for questions, but will also have time for questions throughout the entire session, so feel free to post your questions into the chat. We have an All Star set of moderators on this call to help out with all those questions, full with knowledge and wisdom. We have Adrian Stevens on the call. He is a software developer, instructor and program manager for Microsoft who works with a talented group of folks to an content authors to build free technical Azure training for Microsoft learn. He's our Microsoft learn expert on the call. Jon Galloway is also here. He's a PM on the dot net team working specifically with folks on Mac. He also spends a lot of time with. Net open source. He's the former executive director for the net foundation and also spends his time promoting community projects an blogposts through the net community. Stand up at live dot dot dot net. You haven't been watching that you should definitely check it out. And Lastly, we've got Sophia Abdallah. Sophia is a software engineer. On the blazer team so she'll be keeping me honest. She's also a longtime open source contributor and maintainer in the Web, an interactive computing spaces. Couple of housekeeping things. This session will be recorded. If you have any questions again, please just use the chat window to post those questions are moderators will be there to help you. They'll be posted pushing questions also to me it as needed to answer them in for the whole group. We also do have a code of conduct there. It is basically just be open and respectful to everyone at this event and you know what everyone in real life because it's just a good way to live. And with that, I think we're ready to get started. Let's go ahead and head over to the learn module. Go ahead and open your browser to AKA dot Ms slash learn slash blazer. I'm going to go ahead and do that myself. Alright, so that should take you to this page. Again. The link is AKA. We type it here for you dot Ms Slash Learn Slash Blazer and that will bring you to the Microsoft learn page for the specific module that we're going to be going through now this is going to be interactive hands-on, so you'll get your machine ready, get ready to try out some bits, write some code we want you to follow along, and as you have any questions, feel free to post them right now down below. These are all the 8 units that were going to be going through. Will just be clicking through these. I encourage you to follow along as I go through them. Alright, so for the introduction, we're going to be talking all about blazer now. Here are the learning objections, objections, objectives for the session we're going to be configuring your local environment for Blazer development and we're going to be using Visual Studio Studio code. If you prefer to use Visual Studio, or if you're on a Mac and you want to use Visual Studio for Mac, that's fine as well. Feel free to do so. No problem at all. We're going to create all the Laser Web Assembly project. We're going to add a page to it and then add some client side logic to our blazer web assembly app using just net in C Sharp know JavaScript coding required. This is a very basic learn module. You don't need to really have any experience at all. With blazer, you just need some very basic knowledge of web concepts like HTML. Don't really need any CSS S either. Basic HTML concept should should be fine. Also, we expect that you have at least a little bit of knowledge of net and see. If you're not really familiar with C Sharp and you're completely new to net, there are also other learn sessions studio sessions that are happening during bill that you should definitely check out where you can get that intro to C coding. Alright, let's go ahead and click continue. So Watt is blazer now. This Is This page has a bunch of text and you're welcome to go ahead and read through that. I've got a couple of slides here that I'm going to use to help explain what this blazer thing is all about. So suppose you want to build a sophisticated web application, it's going to have a rich, interactive UI. You want it to run on desktop browsers as well as mobile browsers. Maybe you want it to be installable. As a progressive web app, it's going to have that Rich Interactive UI, so you're going to need things like grids and dialogues, Wizards, forms, and validation. You also need to worry about authentication, localization, and so on. There's a lot going on with modern web apps now. Historically, the only way to build such a web app would be to build it using a JavaScript framework using. Writing the app in JavaScript or language that compiles the JavaScript. And that's fine. I mean there's wonderful frameworks in the JavaScript community, angular, react, Vue or whatever. The latest hot hot JavaScript framework is. But on the back end you then have a choice of what you want to use for your back end logic. You could use. Net, you could use Java, PHP, Python, go, whatever you like. There's a whole plethora of choices that you could use for your back end server, but when you have two different platforms being used, one on the front end, one on the back end. That creates costs. You have two different languages, two different sets of frameworks, two different build tooling tooling for editors that you need to use that just creates friction. It's kind of like in a lot of ways. I think learning another language like if you're having to learn another human spoken language like I speak English, but have had to learn the other languages in the past, like Spanish or Portuguese. and I can say hello. And where's the bathroom pretty well, but to get really fluent. In those languages, that takes time and that takes effort, and I think it's the same thing with the development platforms and frameworks and languages. You know there's a cost for each additional one that you have to add into the mix. Well, historically this was the only way to do things, but Fortunately recently thanks to modern open web standards, this is actually no longer the case. There's another option, so blazer is a web UI framework for building single page apps using just. Dot net and JavaScript. It enables you to build your entire application using just. Net. You get the productivity of C Sharp Visual Studio, a consistent ecosystem and stable ecosystem to build not only your modern web UI but also your highperformance.net back end blazer. Works in all modern web browsers and it's also cross platform and open source. Now how does that? How does that work? Like how is that possible? Well, there are two ways that blazer apps can function the 1st way we call blazer server. So the blazer server app runs your UI components on the server using net core, but it sets up a real time web socket connection with the browser and it uses that connection to handle all of the UI interactions. All the UI events get pumped to the server. The server figures out how to update the UI and sends that back down to the browser in real time. Over that, that web socket connection blazer server actually shipped last year with net core 3.1 L TS, so it's been available for a while. The second mode for hosting model for blazer applications we call Blazer, Web Assembly, Laser Web, Assembly apps run directly in the browser that enable you to run.net code in the browser using a Web Assembly based net runtime that you can deploy with your app and download with. With your app at that point you're just runningnormal.net assemblies, normal DLL's in the browser. Using that runtime you just download.net assemblies with your application application and execute them like you would on any net runtime. Just in this case it happens to be one that's implemented to run in the browser. Now if you haven't heard of Web Assembly before, web assembly is a. It's an open web standards. Let's go ahead and go to webassembly.org, which is a page for and I think it's on the W3C site. Or at least their landing landing page. Web assembly is an open standard. It's a low level bytecode for the web. Now you don't typically write code in web assembly, it's too low level for that. But what you do is compile code to web assembly. It's intended to be a compilation target, so as long as you can take your code and compile it to web assembly, that code can now run in any modern browser on any platform at near native speeds. So that's pretty cool. And originally web assembly was targeted at fairly low level programming languages like CC, rust and so forth, where you can compile that code to web assembly and now run it in a browser. And So what we did is we took net and we built a runtime in web assembly that you can now download with your app. So that's how Blazer Web Assembly works. It works using this new byte code for the web. It used to be that browsers could only speak JavaScript, but now browsers can speak with JavaScript and Web Assembly and as a result the whole. Variety of different languages. The door is now open to code in pretty much whatever you want in the browser. Including.net and C Sharp, and what we're really excited to announce here at build is that blazer web assembly is now shipped officially shipped, supported. An ready for production use when combined with Net Core Blazer Web Assembly enables that full stack development experience with net you can run your code natively in the browser. It's available with the latest version of the net core SDK version 3 one 300. It's also available in the box with Visual Studio 2019, sixteen, 6 as well as Visual Studio for Mac version 8.6, so the bits we're going to be using today. These are shipped and production ready bits for building your next rich interactive web application. Alright, so now to get started with blazer. What you typically do is you go to blazer net that's the Blazer home page you install the dot net core SDK and then you can build using whatever tool you'd like. Visual Studio, Visual Studio for Mac or Visual Studio code with the C extension, which is what we're going to be using today. If you prefer a different editor, that's fine too. You can code in them or Emacs. The whole SDK is of course cross platform and you can pick the editor of your choice, but these three have great blazer support. OK, so let's go back now to the learning module. So we've gone through this. We've described what the lasers about and what is web assembly? What specifically is blazer web assembly? We going to support it in all of the modern web browsers and to get your machine set up, you're going to need that latest.net core SDK as well as tooling so that you can get really productive building your place or web assembly app. And that's what we're going to do next before I jump into that. Any questions about what blazer is a Web Laser Web Assembly is just going to take a peek. If we have any questions on the call from our monitoring moderators. All right, so we've got the code and conduct in there. The link to the learn module. No questions so far. If you do have any questions please, by all means go ahead and put them in the chat. Alright, and sending my way. If anyone has a sum of moderates, maybe just handle your questions. Probably some of them they get. They get published to the site. I do see a question from Dijon, or definitely apologize if I'm mispronouncing your name. Could you please give an assessment of how good blazer web assembly is to build large scale web client apps, which ideally should be modular, could have modules load in runtime since Microsoft users react themselves on all of their web apps. What are wasm limitations in terms of server resources, given that it has to do with signal, our communication with it compared to? Using react, but from Microsoft like Microsoft is using with Office 365, sure so blazer web assembly is great for large applications. It turns out that netcode, when it's compiled into assembly is the net IO is actually a pretty compact format. There is an overhead for Blazer Web Assembly apps in terms of the download size to bring in the runtime. So there's a. There's a chunk of the payload that's just the wasm file. The Web Assembly file that's needed to run the. Net code. And then you also need like the core framework libraries like system, DLL and. System core DLL. Those types of things, so there's a little bit of overhead for to bring in that core capability, but then your app itself, the DLL that makes up your application, is usually pretty small. You have to actually write a lot of code before that, the app code becomes significant. Now apps can get of course very very large and one feature that we often get asked about is like, is there a way to chunk up my Blazer Web Assembly app into different like lazy loaded pieces so that I can load part of it and then load other parts? We call that lazy loading of app areas. That's not something that's directly supported by this initial release of Laser Web Assembly, but it's on our backlog to address in the next release, which is coming with new five, and I can talk a little bit more about that later. Now for module based development, there are also community projects out there for building modularized Blazer, Web Assembly apps or blazer apps in general. Octane is one that I know I'm familiar with. The author, Sean Walker, does a lot of work on that so. Check out that I think it's OQTAN e.org with a Q Octane, so he's implemented a modular form of laser applications, so you can do that today with the existing infrastructure. It's just not like a turnkey solution right now. Now Please note that Blazer Web Assembly apps do not use. Let me go back to this slide so everyone is clear on this. The Web Assembly app runs purely client side. It doesn't need a signal. Our connection at all. In fact it it can be published as a static site. The app itself is just a bunch of static files that you can publish on any static site hosting solution and then download them into the browser. At that point, youdontneed.net on the server at all. It could be nothing on the server, it could be Python on the server, a fast typing monkey. It doesn't really matter because the app is purely client side. Just like with a. Front end JavaScript based application that runs the same way. It's only if you decide to host your components using the blazer server model that you need. That persistent persistent real time connection with the server so that the UI can function. So those are those are two different hosting models. They operate in different ways. OK. Right? Thank you for the question, that was a great question and thank you for the link to octane. Couple more questions. Are there specific scenarios where each one works best back to the hosting models that describe what are the tradeoffs between these hosting models? It's a great question, so blazer server is really simple to implement because your code is already running on the server, so when you need to do things like like talk to a database or access data that's only available server side, well, you're already there so your components can actually just go ahead and. Open a use any framework, entity framework, core to talk to the database. Get your data and do whatever you want. The app also loads really fast because very little needs to be downloaded to the browser. We download a little bit of infrastructure code to set up the web socket connection and all of your app code just stays on the server so you don't need to download all that. The app loads very quickly as a result. Now it is a stateful server model of those, so every client that then comes to a blazer server app. They're going to need that persistent connection, so you need to handle. Connection, scale out and there's going to be state being held on the server for each of those clients, so you have to plan for the scale out characteristics of a blazer server app for connection scale out. We actually provide a service to help you do that. The Azure signal, our services specifically built for handling massive connection based scale out, so those are the benefits of the blazer server app. Blazer web assembly is a little different. You're offloading all of the UI to the users device to the client so the scale out characteristics on the server or totally different. You can just use like a static site. Listing solution, and that's all you need really for the client side part of your application, it can function completely offline because all the files are on the users device, so you can build like progressive web apps where all those files get cash locally and they work even when there's no network connection at all. So that's pretty cool. The initial download size though is larger like you're having to pull in the runtime down, and those core framework libraries so they can be a little slower to load up. But of course once they are loaded. All those files get cached and then you're good to go. So the next time the user goes to that app, it can load up much faster. Great question. Uh, thank you moderates reporting, posting links. There's great stuff in the docs that explains these differences. OK, um access this did. Did we say this has access to the new get library? Yes, so these are just dot net app so you can use any library on nougat.org that supports net standard Blazer Web Assembly supports. Net standard standard libraries and is there last one? Is there a hybrid blazer server and Blazer Web Assembly model where you kind of like? Try to use both. Currently no, not really right now. You basically pick one hosting model versus the other we've had. People asked this question before. Like is there a way like I could maybe start out as a blazer server app and then switch it to be a Blazer Web Assembly app at runtime? Technically those things are possible. We don't have out of the box support for those things would be really interesting to see the people in the community and the open source ecosystem playing around with the blaze orbits and see what you come up with. All right, let's move on. OK, thank you for your questions. Great questions. OK, let's get our dev machine setup. We want to build our first blades or Web Assembly app. OK, what do we need to do? So first you're going to want to get Visual Studio code if you don't already have it. So go to code.visualstudio.com, download Visual Studio code if it's not already on your machine. It's a super lightweight install, but wow, what a powerful editor for such a small payload like it can do so much. It's great for not only done it development for the developing in a whole bunch of other platforms like Python And JavaScript and so forth. So go ahead and download and install that. The next thing you're going to want to do is you're going to need to install the latest dot net core SDK and you can get that by following the link here in the learn module. This will bring you to the download page. Now there's a lot of links on this page, the one you want. If you're on Windows is this. You want the SDK so SDK 3 one 300, and then pick the right link for your platform of choice. Like if you're on windows and X64, that's the right one right there. The X64 Link Mac there's the peak G Linux other Docs and how to set up your machine with net core on Linux. If you want a simpler way to do that. Honestly what I do is I go to dot net dot dot NET and then I just click download. And then this SDK button is probably the one you want. This page will detect what OS you're on and then surface and SDK link that specific gene machine and that should give you 3 one 300 of the net core SDK. So make sure you get that version if you have an older version that's not good enough, we just we just shipped laser web assembly with this latest version of the dot net core SDK, so make sure you're getting 3.1 dot 300 of the SDK Alright. Perfect, OK, once you've got the SDK setup, you have everything you need to build a Blazer Web Assembly app. Now these instructions were implement were written up a little bit ago when we hadn't yet announced official release of laser web assembly, so there's a step in here about installing templates using some command line instruction. You don't need to do that. Don't do that. That will get you like the release candidate build. You want the latest, greatest shift bits which we just shipped today. If you have the three one 300 version of the SDK, you're good to go. OK, now let's go and make sure that Visual Studio Code is all set up correctly. We have a couple of extensions that we're going to want to install into Visual Studio code for our blazer development. We're first going to want to get the C Sharp extension if you don't already have that, that's going to get you the ability to run an build and debug. Net projects. It will also give you the tooling for dealing with razor files, which is this combination of HTML and see that we use in asp.net core. For Web app development as well as in blazer applications, so we're going to get that. And then we're going to need the JavaScript debugger extension so that we can also debug are Blazer Web Assembly apps if we want from within Visual Studio code. OK, so let's go ahead and I think I can go ahead and shut down my PowerPoint sharing. There we go an let's go find let's go ahead and open up another Visual Studio code instance. Have one up with my notes. Alright, here's a Visual Studio code. Let's click on the extensions tab. That's this one with all the little squares in the left hand side and then we can make this a little bit bigger so we can see the pretty icons there we go. Now we're going to search for C Sharp. All right, and there's the sea extension. You can go ahead and click on that. I've already installed it, but if you haven't installed it then it should have like a big green install button both here on the left hand side. An on this right pain. So go ahead and install this C sharp extension that will get you the basic.net development tooling for Visual Studio Code. Once you've got that, you should be good to go. Next, we're going to get the JavaScript debugger extension and we're going to want this nightly one. This is the one from Microsoft with the latest, greatest, hottest JavaScript debugging functionality. Again, you should see a green install button either on the right hand side here or in the left hand pane. Go ahead and install that. Once you've got the JavaScript debugger nightly extension. Installed, make sure it's this one. Go ahead and click on this little gear icon 'cause there's one setting we want you to set to. Just make sure that you can do the full blazer web assembly debugging. We're going to go down here to extension settings, then scroll all the way to the bottom all the way at the bottom. And then there's this JavaScript use preview section right down here. You see this. This is the Magic section. Want you to check this checkbox right there? I go ahead and check that and that will enable the latest, greatest awesomeness. JavaScript tooling. In Visual Studio Code Alright? Cool. Get out of this. OK. Uh, that's all you need. So you now have all the extensions installed that you need to do. Blazer web assembly development alright. So we've done that good. We check that checkbox good. Got all the extensions. Looks like we're ready to create a new Blazer Web Assembly app, so we're going to open a terminal. Use whatever terminal you'd like. I'm going to use the one in Visual Studio Code and then we're going to run this command net new. Laser Wasm Dash Oh CI Calc. OK, so let me go into Visual Studio code. I'm going to terminal new terminal. You could hit control backtick in order to get to this terminal and just make sure that you've got the right SDK version. To do that, just run.net and type dash version. If this is the first. If you just install the dot net core SDK, you'll probably get like a first run experience where it's like sort of setting itself up. That will just take a second, but after that's all done you should see this number. 3 one 300 is the magic number for the correct net core SDK that you want OK, and then if we type.net new, that's The Command You used to create new projects using the. Net core SDK. Let me make this a little bigger. If we scroll up here and there it is, there's Blazer. Blazer server and Blazer Web Assembly member. We talked about those two hosting models. There's a project template for both of them are going to be using using the latter blazer, wasm or Blazer Web Assembly. Wasm is short for web assembly, but if you want to try blazer server out that's fine as well. You can try the other template. Alright, so now let's do. I'm going to do mine on the desktop. I think there. OK, so we're going to type.net new blazer. Wasm is the name of the template we want and then I'm going to pass in that option dash. Oh, this is just the output directory where we want the project to go. If you don't specify this, it will just create the project in the current directory. I don't really want all these files just sitting on my desktop, so I'm going to create a folder for them and I'm going to. What is it? It's got a name they want us to use right? CI calc. Great, see I Cal can just hit enter. And that should create our blazer web assembly application. Great during and then we can see the folder I'm going to go ahead and move into that new folder that was created for my project and there we can see all the files. The stuff that makes up this project will take a look at those files in just a second, but let's just go ahead and run it. Let's see what it does now to run this application. All you have to do is type.net run from the folder where the project is that. So I'm already in the CI calc folder. Going to hit.net run. Well, just wait. A sec.net run will build. The project will create the assembly for this for this app and then it will also start the project. It will run it on my development machine and I can tell it's now running when I see these log messages that say the app is now listening at localhost 5001. So this built my Blazer Web Assembly app, turned it into a bunch of files and then it created a little developer server like a little mini web server to host those files so that I can try them out during development. So let's go through our browser and let's go to where you can. Probably just click. Control click right there. And there it says it's loading and there's our app you just built. Your first blazer. Evidently out. Pat yourself on the back. Good job, well done. Alright? Let's take a look at what we got here. We've got some tabs. This is like a simple single page apps tile application. We have a home page with some static markup. We have a counter page with this counter that has a button. Click the button and the count goes up. Now there's no page refresh happening here. We're not like doing a form post back to the server. This is all happening client side updating the Dom. Historically, that would have required JavaScript. We didn't have to write any JavaScript to make this app happen. This was all done with net and C sharp. Pretty cool. There's also this fetch data page. This page is actually downloading from that little mini web server static JSON file simulating basically a Web API call and deserializing that JSON Data into this weather weather forecast table that you're seeing on the screen. Well, it's realizes that data into a net array of objects. And then uses UI rendering logic to create this table on the screen. So there's a Web API call happening here behind the scenes there's we can tab around like every time I tap around. This is all client side routing. We're not going back to the server to go to each of these different URLs. Blazer is actually intercepting the browser navigation and then routing that navigation to the correct component and rendering that component. So this is all happening client side. We're not going back to the server as we as we talk around now. I said This is really running in the browser on this fancy web assembly runtime. Is that really the case? How can we see that? So there is a way to see that I'm going to hit F12IN edge? By the way, if you're not using the new edge, you really should like, I strongly recommend it. If you don't have it, go to microsoft.com/edge and download and install the latest edge. It is amazing, like it is gorgeous. It's beautiful. It does everything you want to do. If you're a web developer, I love it. Go get the latest greatest edge. Highly recommend it. OK, so in in the browser, go ahead and hit F-12 and you'll notice that in the console of the browser dev tools it says that there is this debugging hockey hit shift alt D if we want to debug this Blazer Web Assembly app in the browser. OK, so let's give that a try. I'm going to hit shift alt D. Now what this is going to do is a little bit magic. It's going to open up the browser dev tools and it's showing me an error page that's expected. We're going to look at that in a second, but this is opening up the browser dev tools. And is going to try to remotely connect to the tab with our blazer web assembly app and try to debug it. And when it does that, it's actually going to do it through a proxy. That's a net debugging proxy. The protocol for that end point is just the normal JavaScript debugging protocol, but using this proxy we augment the protocol with. Net specific. Metadata and stuff so that you can debug your C Sharp Code in the browser. OK, now in order for that all the work we actually have to run the browser with remote debugging enabled, which I didn't do. This page is telling me how to do that, so there's instructions here. For Chrome, there's instructions for edge. I'm going to pick edge 'cause I love edge, so I'm just going to copy this command. I'm going to hit windows, are on my windows machine and I'm just going to copy in that command and run it, and that's going to fire up a new browser, but this time with remote debugging enabled. Perfect, OK now this one should be ready to go. I should be. I can close the other ones. Not going to use those. So this browser instance has remote debugging enabled. I'm going to hit shift alt D again. It's going to bring up those browser dev tools and this time it should connect and it does. I'm going to take these dev tools and just snap them off to the side next to my app and give myself a little bit more space. Alright, cool and then let's go look in here and we can see, you know there's the CSS S stuff it's using this apps using bootstrap. This framework directory or some JavaScript stuff in there to get the app bootstrapped like it. It started different bootstrap and then we can see this files node. And here we see all of our code like here is program CS for our blazer web assembly app. Just normal C sharp normal program. Main function that starting up the Blazer Web Assembly app. We can also see the UI code for our blazer web assembly app. These are the dot razor files or razor components that make up the UI for the application. So here's the here's the code for this counter page. It's got some static HTML. It's got a button on it. And this button has an onclick handler. Normally you would put like a JavaScript event handler here, but this isn't doing that. This is pointing to a chunk of C Sharp code ASI method that's in this component. This increment count method when the button gets clicked. The increment count method then increments this current count field and then the component re renders. So let's set a breakpoint right there on our increment count method. I'm going ahead and click that and there we just hit a breakpoint. Internet code C Sharp code running in the browser on a Web Assembly based at runtime. We can even like if I collapse this. Let's look at the locals. We can see this state of the current count that is currently zero. I'm going to hit F8 to continue and then click it again and we can see the current count is now is not one as you expected. So you get in browser debugging experience for your blazer web assembly applications. This is really running fully client side. Say I want to clear that break point. It's going to clear that doesn't cause us problems later. Now where is the web assembly code? If we look at the network tab, let's go ahead and refresh. Huh, well that's not very much. There's only like 33 kilobytes of someone control. If I was like really refresh now, still now it's 219 kilobytes. But still like where is this web assembly down? Well, when the app first runs, blazer will aggressively cache the runtime in the framework libraries so that subsequent loads of the app are much faster. So all those files got downloaded and then cash. You can see them if you go poking around in the application tab, go look under cash storage. And look here. There is all the files. Here's all of our downloaded assets. Let's see if I can get enough pixel space. Make this bigger to make this all the way across. There we go. So like, way down you can see DLL's and they all have hard to read 'cause they got these hashes at the end. But these are all DLL's that were downloaded with the app and then cashed and way way way at the bottom theresthis.net dot wasm file. That's the actual web assembly runtime for this application. There it is right there and all got precast on the first load. That it was a. It was a little, you know, little big. It's quite a bit of stuff that gets downloaded here. Maybe you notice in the console that during development we're seeing over 6 megabytes of assets being downloaded into this app. Don't freak out about that, that's not what the app will look like when you publish it. When you publish your Blazer Web Assembly app, we run it through a net IO linker that strips out all of the unused netcode. We also like pre compress those files with brotli compression and really shrink them down. Default blazer web assembly app published. Using the pre compressed files weighs in at about like 1.6 megabytes or so, so this is just during development. We turn off the pre compression and the eye linker steps during development just so that your build times are faster. 'cause I'll linker takes a few seconds to run trying to iterate on your UI. That can be a little annoying so don't worry about this number. Will see a public place or Web Assembly app hopefully a little bit later. OK, great, so I think we can close this now and that looks good. Alright so we built and run our first blazer application. Let's go back here now if you want to shut down the server you just hit control C. That will stop the application and then you can run it again by just running.net run. So that's how you do that. Let's go ahead now and take a look at the code a little bit. We saw some of it already, but let's go ahead and open our projects. I'm going to open folder and I'm just going to go to my CI calc folder and open that up in Visual Studio Code. Cool alright, so now we've got we can see the files that are in our project in a second you may see like a notification pop up here. Let's see if that made may take a second. Well it thinks about it. Well, it's Well, we're waiting. Go ahead and take a look. There's that program CSS file that we saw in the browser. This is just like you would see in up there it is. So if you see this pop up go ahead and click yes. Yes I would like all of the stuff I need to run.net project someplace or web assembly projects in Visual Studio code. Click yes on that one. Alright, so this is just like a normal program main class. It's got some stuff in it to start up the Blazer Web Assembly at. Here's our project file. Go ahead and take a look at that. This is the CSS praj file. This just defines all of the dependencies for this application. Notice that Blazer Web Assembly supports. Net standard 2.1 so yeah, you can use. Net standard libraries in your Blazer Web Assembly app here. All the packages that are used to create Blazer Web Assembly apps that we added as part of creating the project. We also set you up with the new system net HTTP JSON Library. What's that's a nice new helper library with some extension methods to HTTP client that and that let you send an receive JSON using the new system text JSON Serializer so that just shipped. This week as well. So we give you that right out of the box and then we have these razor files like you can see up above, there's the pages directory. There's our counter component again, each of these dot razor files represents the UI of our app. They're implemented in this razor syntax, which is a combination of normal standardized HTML as well as C sharp. Typically, you switch between the two using this at symbol, so at means I'd like to write some C Sharp code now instead of HTML. But it's also pretty intelligent about knowing that you're writing HTML or C sharp at any given time. Each of these razor files will get turned into anormal.net class as part of building the project, and that's what makes up the UI of your application. All right, let's head back over to the. Learn up. OK, so we've run the application. We saw it running. Go ahead and click continue. And we've already done a little bit of looking through the application. We saw the Blazer Web Assembly project file that was the CSS praj file. We looked at the program CSS file. That's the entry point for the app and then we've talked a little bit about what razor is. That's how we're going to write the UI for our raise their components using that combination of HTML and see. OK, I'm going to just pause here real fast and see if anyone has any questions about any of that. So then Adrian here at the couple of great questions come up. Actually a lot of them, a couple even answered yet, so I think it was Tim he was asking about GUI tooling 90 John says. But to to respond as well any any GUI tools for drag and drop you? A development for blazer today? Not that we should. We don't provide a like designer style GUI tool for blazer. There are some third party offerings out there like rads em is one I'm aware of. The red zone is like a low code, fast, fast, fast at build, rapid application development environment for blazer where they do give you a full GUI experience for generating blazer application. So if you're looking for a GUI experience you might try rides in but we don't provide one. Instead what we focus on more is the like text editing code editing experience for typing your razor code. And a couple other questions that came out people were asking about referencing.net assemblies and new get packages and I wanna make sure I Angeles correctly. So we're looking for things that target.net standard 2.0 correct? Or 2.1 we support.netstandard2.onesoeveryversionof.net standard as the version gets bigger, the API surface area that standardized by that version gets a little larger so.netstandard2.oneisthelatestversionof.net standard and has the largest surface area. Blazer supports. Net standard 2. One so any net standard library that targets 2 one or earlier earlier will then work. 'cause earlier versions of. Net standard used less API, so therefore they should be fine. Now the caveat to that is that the libraries will work within the constraints of the browser security sandbox. When we download your code into the browser and run it, it's running inside the same browser security sandbox that's used to run JavaScript code, so you can't do. Anything you want like you can't like arbitrarily mess with the users file system or make arbitrary network connections or go mess around with the Windows Registry. You know those types of things. Basically, if you can't do it in JavaScript, you can't do it in Blazer Web Assembly either. If you can do it in JavaScript, you can also do it in place or Web Assembly, but but no more so that's the constraint. So some APIs that are available with.net standard you can code against them, but when you try to use them in the browser, you'll probably get like a platform not supported exception. If you try to like. Open a random socket often to who knows where, 'cause That's not something that you can do within a browser, but otherwise anything works like that. Example I showed up when we looked at the project file for the application we created, like system.net dot HTP. Dodgson is a great example of this, like that's just a.net standard library. It works in mobile app server apps, works anywhere you want to send an HTTP request that has some JSON Data, and we just happen to use it in a Blazer Web Assembly app so that. Because it's just a normal dot net standard library. Great question alright. Scanning through here, moderators feel free to thank you. Thanks Adrian for pointing that one out. If I've missed any others, feel free to let me know. So OK, there was a question here by Pramod, apologize by Miss Brown singer name. That said, that earlier blog post suggested that there will be more types of blazer hosting models. Can I comment? Yes, I can comment on that. So far we have two supported blazer hosting models, blazer server and Blazer Web Assembly, which is what we're playing around with today. Now we have been experimenting with other hosting models for blazer UI components. Blazer components are actually really de coupled. From, uh, how they get eventually rendered like a blazer component will render into sort of this in memory representation of the UI and then something else can take care of actually applying the changes to the actual live Dom in the browser or whatever it is that's going to actually draw the pixels. So we've been playing around with using blazer components in other ways, like for example we have added an experiment where we used blazer to write electron apps. If not familiar with electron, electron is basically a. Uh, a chromium shell that's embedded into a desktop app so that you can write native desktop apps using typically JavaScript and web technologies, and they run cross platform Windows, Mac, Linux. In fact, teams is a electron app, I believe. As far as I understand it there a bunch of other electron apps out there. Visual Studio code, I believe is also an electron app. We typically though you write electron apps with JavaScript. We've experimented with using the net by using blazer for the. Component model. Well, there's also another experimental project called the mobile blazer bindings project from our friends on the zamarin team. Zimmer is the technology in net for building like native mobile applications. What they've done is they've experimented with taking the lasers component model and instead of having it render HTML, have it render just native UI components from the underlying OS like you would do in a zamarin forms application. So using the blazer mobile blazer bindings you can build fully native mobile apps for iOS. In Android that are using native UI, not not web UI, but native UI all using the same laser program model that we're going to be playing around with today. Now these are experiments there, not when we say experiment. It means that we don't know if there are ever going to ship or when they will ship. We are looking for feedback on them and so if you find those scenarios compelling, like being able to use the blazer programming model for more than just web apps, you'd like to be able to build native desktop apps or mobile applications hybrid style applications. Let us know by trying out those projects and giving us the your feedback. OK, let's move on. If there's no more questions, it's time for a test. Oh, OK, so we're going to check your knowledge, check your knowledge and see if you've been paying attention to this. To to this learn session. OK, so there's two questions here in the check your knowledge section. First question I get to ask you questions now Blazer Web Assembly apps are powered by which runtime option a the runtime provided by the browser presumably mean like the JavaScript runtime option. Be the net mono runtime deployed with your web app. Or see the JavaScript runtime deployed with your web app. Q Jeopardy music here to do the correct answer is B the net monitor and assess mono here what's model like Mono is a cross platform dot at runtime that we use for our mobile workloads like zamarin applications. But if you've been following along with net five, you may have heard that the mono runtime in the dot net core runtime, like all that stuff is being unified under this one net vision so that we don't have so many. Nets and we just have one setof.net runtime assets. So the runtime that we're using for Blazer Web Assembly apps is all part of that is going to be part of that net five unified story. So the model part not really that important, but it is a.net runtime. It is running on top of the browser provided JavaScript runtime, but it's a layer on top implemented in web assembly. Second question, how is blazer web assembly UI defined as razor pages as a mix of HTML in C, sharp as XAML pages using XML? Or in C Sharp alone defined in. Net standard libraries. Correct answer is a using razor syntax in these razor components like we saw with the counter component. Let's see if I got it right. Woo yes should be getting more experience points. You have some ready to level up, so make sure you're getting credit for all the work that you're doing. OK, we're moving on to the next next next unit. OK, so we're going ready to start actually working on our application. Before I do this, let's go ahead and do this well. We're just looking at that. I'm making sure that we've got enough time to get through everything. Let's go ahead. We've already opened up the project in Visual Studio Code and we clicked the yes button hopefully to have the assets that we need there. Alright, so now we are going to create a new razor page in this app. That's going to have like a like a compound interest Calculator on it. So let's go back to our app. And in this pages folder, we're going to right click on the pages folder and just add a new file. and I think they want it called compound interest dot razor. Is that right? The right mixture doing right? Yep, compound interest dot razor. Hopefully I spelled it correctly all right. And then in compound interest dot razor currently is just a blank file. It's got nothing in it. We want to add a little bit of markup says we want to add the at Page Directive at the top. So I'm going to copy this. Try to copy this and I'm just going to add that at the top. Now what does that do? What is this thing at page? So this is going to talk more about this in a second, but uh, this is an example of a razor directive and this effects how the component gets compiled when you build the application and what this is adding is it's adding a route for this component. We saw this in the counter component as well here at page slash counter. That's what enabled us to browse to slash counter. In order to see this app OK, so now I'm why modifying things. Actually I want to do something else. I'm going to get this app setup so I'm going to open up my terminal again. Alright, so I need to go ahead and get this app running, so I'm going to dot net run and that should be fine. It should just build and run. Just as it is just with that one little file added. OK, so now it's running and I'm going to click on the link just so I have a browser tab open with that with the application control click. OK, so there's are. Those are app. The other thing I'm going to do this is kind of a fun trick like one when you're building UI right? You want to be able to make changes and see those changes as quickly as possible. You don't want to be like killing the server and restarting the server over and over and over again. Well, once the server is running, there's really no reason to restart it all you actually need are the rebuilt assemblies, the rebuilt net libraries that make up this app. So what we all we really want is something that will like watch as you make file changes and this rebuild and the server can stay running it all it's doing is serving up the files so as the files change and you refresh the browser, you'll get the new file. We don't need to tear down the server and restart it, so I'm going to leave this terminal. I'm going to click this plus button to create a new terminal. And then I'm going to run this this other.netcommand.net watch watch will then watch all the files in this folder and when they change it will do something whatever you ask it to do. And So what I wanted to do is I want it to runa.net build on my project. Does that make sense? And I've got a little file watcher, let's just watching my files and as they change it will rebuild them. The server still running serving up those files happily and then we can just refresh the browser so I can change my code, refresh the browser. And hopefully if the washer has built the app quickly enough, then I should see those changes. OK, so now that's all set up. We can just hide this and we don't have to think about it again. We should just be able to edit our code and refresh in the browser. It's cool trick. Alright, so now what do we want to do next? Let's go back to our exercise. We've added the page directive go a little bit of HTML. OK. So that's just normal. Standard HTML, nothing fancy going on there. OK, now we're going to. We want this page to show up in that left hand now like you see these tabs over here. These are all pages. How does that work? Where is that coming from? Well, this is all being generated by the layout for this blazer application. So if we go to the app and we look in this shared directory you can see there is this component. It's a razor file that is the layout for the app and it's a special component because it at inherits. This is like you know. The base class for this component is this layout component based and the only thing different about a component that derives from layout component base is that it has this special body property that you can use to say I would like the body. Component page I'm currently rendering its content should be rendered right here and then you can define a bunch of UI around that component. That's what this is doing it so it's a layout. Its defining the layout for the app for all of our pages. OK, So what is this layout have? Well as it did for a sidebar and it's got another component. So this is how you use components from other components. Use element syntax with the name of the component. How do you know what the name of your component is? Well, it'll be the name of the file, the name of the file. Will be used to generate the C class for that component and then you use that class name for the tag name for that component. So we've obviously got another NAV menu component someplace. Looks like it's over here will look at that in the 2nd and then we've got the main Div for the app where we're rendering the body of the application. OK, let's go look at NAV menu now. Well, now when you've got a little bit more markup going on, but it's not too bad like at the top is just some HTML which is implementing that hamburger button, right? The toggle button that allows the when the tabs are collapsed allows you to toggle them out, and then we've got a maned if with just an order unordered list, bunch of list items, and each of these list items, then uses another component. In this case it's a navlink component. Now navlink component is a built-in component with blazer. It's provided out of the box. An it's not that fancy, all it is an anchor tag. That's literally what it is. A navlink renders an anchor tag with one additional feature, which is if the browser's current address matches the H ref like matches the link for that anchor tag. Then it adds a class to that anchor tag to say that that's the active link so that you can style it differently. Like if you go look at the app, you can see that because I'm on the counter tab, this tab is styled differently, so that's how that's working. We've got some custom CSS S style. That's looking for that active class that's being added by the navlink component, but you can just think of a NAV link as an anchor tag. That's all its rendering, and we've got all three NAV links for the three tabs that we already have on the app, and I believe all this is asking us to do is add a 4th one, so let's go ahead and copy this. Now there's one little I believe. One little typo. Sorry about the Typo. Let me go ahead and fix the formatting on this. So let's look at this NAV link. Uh, so there's a list item with some classes you know some styling, navlink the classes and have link that looks fine. And then we got the HF is set to Calc. Now we actually want this link to point to our compound interest component, which we've set up with the route for compound interest, not with Calc, so let's go ahead and fix that. I'm going to change this HF to compound interest, so hopefully you're paying attention so that you don't miss that step, and then we just have a span which is setting up the friendly text. The text that we're going to play. In that tab. For this now OK Anne, I shouldn't have to rebuild or start anything. My remember we set up that. Net watch that just happily building away as I change things. So I should just be able to go here and refresh in the browser and there's our compound interest app. It just shows up there that we've added a new page. Hi, what's next? Let's go back to the steps all right. So we've we've done this. We did it. Clip more clever way. We didn't have to run dot net run 'cause we're using. We've already got kept the app running and just using.net watch to watch profile changes. OK, now we're going to add a little bit more HTML to our compound interest play page. We're going to add a table so this is just a simple static HTML table. Nothing fancy going on here. Let's go ahead and copy that and put that in our compound interest page. OK, and then we should see the build kick-off. You can see it started and it's running and solar.net watch is doing its thing. That means we should just be able to go back to the browser assuming the build completed before we hit refresh, which it didn't let me run it again then now we can see the table show up OK. Alright, so now we've got that. That's just some markup. Then we want to button. OK, and the buttons not currently going to do anything 'cause it's not. You notice it's not wired up to anything yet, but let's go ahead and add the button to the page. There it is. Again, Donna Watch kicking off doing its thing and we should just be able to refresh assuming builds completed. If you don't see it, yeah, just hit refresh again. Maybe one more time there's a button. Then we can click on it. All we want is a lovely button doesn't do anything yet. OK, that's going to be the next step. We're going to add some some logic to this component so it does something useful. Alright, moving on. Any questions about that? To moderate are is anything for I should pay attention. The more you guys can do to present solid sufficient looks like John's already answered that question so you guys can be done in the chat. OK, great, let's go ahead and click continue. Alright, so. Let's look through this talk is concept, so let's learn a little bit about these concepts. The first is the age old debate of inline C code versus partial classes. Alright, What is this? What is this debate? What am I talking about? Well, let's go back to counter. Let's go back to our counter component. And we can close this terminal tabs. We have our space again, OK, counter component. You'll notice that it's got markup for our UI and it's also got C Sharp code and it's all in the same file. And that's super convenient because I don't have to hop back and forth between other files. The code for the UI is right here now. If you're familiar with likeasp.net web forms or other frameworks, a common pattern is to move the C code into what's typically called the code behind file, so that doesn't live in the markup, and in fact. There have been very passionate statements made in the past that thou shalt not put this code inside the markup file, like they shall not mix. They're they're not meant to be together like Romeo and Juliet, right? Well, OK, so let's think about this code for a second. This code that's living in this file is UI code. It's it's part of the logic of this UI component. This all this markup and the code is going to get compiled into a single net class, so you should think about that class like you would any other class like it has a. Single purpose in life all the code related to that purpose to live in that class. Any code not related to that purpose or not live in that class. Well, since this component is all about its UI than having it's the UI code live in that class. Mix mix a lot of sense like like sure you should put that code, their code that maybe doesn't make sense here would be like your business logic. Like all your stuff for your business rules, validation rules and so forth that shouldn't go in here. You should inject services or use other types to encapsulate your business logic so it's decoupled from the UI. Many code related to the why should be fine to go here, but no matter how many times we say that, there's always people that say no, no. I want this code in a separate file. It needs to be in a code behind file, which is fine. You can do that. I'm going to show you the pattern real quick for how you set that up, so I'm going to add another file to my pages directory. This is not in the steps, but I'll just show you how to do it, so we're going to call this counter dot razor dot CS. OK, that's the naming convention. If you're in Visual Studio. Usually this would like nicely nest underneath the counter dot razor file is kind of like. The code behind file. OK, let's see if I can do this from scratch. Now. This is a C Sharp file and what we want first of all that we want the right namespace. So let's say you want man, I'm just going to grab some like. Some stuff so that I can do this without messing up too much. Grab bunch of namespaces an we want Seattle CI Calc pages is the name space we want for this type and I'm going to name this class. It's going to be a partial class. I'm going to name it the same as my component. I'm going to name it counter. That's the name of the the class that will be generated from my counter dot razor file and it needs to derive from component based. OK. Now this is a partial class that looks like I'm missing namespace. What am I missing? Anything it's not components, probably I think it's this one. Or can I just should just be able to do like a control dot? Yeah perfect alright. So now we got our counter component partial class and if we want to we can just go back to the razor file. We should be able to just copy all of this code into that file. And put it in this class like so. And this should operate exactly the same way. Like this is the same, basically the same thing. We just moved all that code that was in that code block and put it into a partial class separate code file. So that's the pattern for doing partial classes, but did this right? It should just work. Let's see if I'm still building correctly. Let's make sure I don't see any errors, so that looks promising. Is my account are still functioning properly? Yes, it is great. Well actually need to refresh, let's make sure. But the refresh version also functions and it does OK, so that's how you do the partial class version of the code if you like that pattern, better, fine. Absolutely. We actually plan to add tooling gestures to refactor components in that way, it's a perfectly way profound way to develop your apps. I like doing it in line. So feel free to pick the way that makes you happy, OK? Now now we're going to talk about those razor directives a little bit more. Razor directives are directives in the in your razor files that affect how those components are going to be compiled. We've already seen two razor directives we've seen the code directive. It's this one right here? That's just a directive that says I'd like to put a block of code here that gets added to my class like members, functions, members, methods, properties. Just dump those into the class. If you want to really see that in action, you can dig around in your OBJ folder like go look under debug razor pages. Here's the counter dot razor dot dot CSS file. This hideous piece of code that you should never have to look at, but if you want to see what's really happening, this piece of code is what's generated from the razor file and you can see it's got a whole bunch of pragmatist stuff. But there's are. You can kind of see the code that there's the using statements more using statements. There's our actual. Partial counter class like it's combined with the code behind file. Here's the route for the counter. It's just actually added as a route attribute on the generated class. That's what that app page razor directive does, and then we've got this crazy looking code for capturing all the structure of the markup that we wrote that beautiful markup forgotten that razor file is now turned into this crazy looking C Sharp code. And then normally because well, I factored this one to actually have the the code now in a separate file. But if the if I left the app code in there then all of the code that I have that code block would be right down here below in this file. That's where we get generated. We could see that in this in fetch data this is another component that generates that table. Like here you can see all of the like on initialize the weather forecaster a. This is all code in the fetch data component may go open that guy up. Uh, I gotta get outta here into back to the pages directory. So here's the fetch data component. We didn't look at this one in a lot of detail, but it's basically just a table that's using, uh, see for each loop to generate all those weather forecast rows in the table. So remember this. This table is being generated by normalcy for each loop. Inside are razor file, but it's also gotten at code block with a whole bunch of code for running some logic when the component is initialized. It's making it an HP request to the server. This code is being captured. Yeah. Back now to fetch data at the bottom of this file so that we looked under the hood. There I get scared. You don't worry, you don't have to look under the hood, that's just showing you a little bit about what's happening under the covers. OK, so at code just add some code to the generated class. We saw what app page does that sets up a route for a component. If you want your component to be routable and it's basically just adding a route attribute to the generated class, OK, the last razor directive we want to look at is that bind at buying is what we use for data binding data from our UI to state in our component. Let's take a look. Let me let me show you a little bit with data binding looks like real quick so you can understand what this is doing. So I'm going to go to the index page. Of my app and I'm just going to add an input right here so normal text input HTML input OK, and I'm going to add an app code block so add some code to my component and I'm going to define a string that's going to be text, some text, right? And what I want is I want whatever the user types in this input to be bound to this text field. This text variable and then whatever is in this text variable to also be the value of the input. I wanted to have that two way bind. OK, so we could do that like we could say we can do this manually like we could say, Well, the value. This is just the normal HTML attribute for setting the value of an input. I want the value to be. I'm going to switch the C Sharp by using that at sign. I want it to be the value of that text variable. You notice it nice intellisense in Visual Studio Code and then also when this input changes. So when on change happens this is the on change event. And I'm putting at before it to make this a razor directive and a directive attribute actually, and getting there's all my build error showing up 'cause I'm finished typing all this stuff yet. When this thing changes, I want to set the value of that text field. So I'm going to put a little Lambda little delegate right in here. You could also define the method in the code block and reference it by name using method group syntax, but I'm just going to put it in line so this is C code, so I'm going to has an event Arg for the onchange event that I'm just going to call E and I'm going to put the Lambda symbol in here and I'm going to take that text variable and set it to E dot value. Value is the property on the event Arg that I'm getting on the on change event. With the value of whatever the user typed OK, and it's actually needs to be a string. By default, value is an object, so I'm just going to string it. OK, so now if we just show that's really working. Let's also put like AP tag in here. And then I'm just going to render the value of that text field using again that at symbol to say, please render the value of the C Sharp code right here. Let's go back to our application that just let me refresh. OK, now we got our input and as I type hello and then to trigger the onchange event I have to tab out and poop there. You can see that it actually bound the value an rendered the updated value. If I wanted this to instead to like bind on every single time I type then I need to use a different event like instead of an change I would say on input then please set the value of the text variable every single time I hit the keystroke. OK, so let's go back here. And I'm gonna start typing a. Refresh. Anne on input is not building. Let's make sure it's building. Looks like it built. Oh OK, that's going refresh. ABCDC OK, it's as I type. It's now on. Input is firing its binding to the text variable, so that's how you can set up a two way bind manually like using event handlers which what we did here and using this normal razor syntax. But there's an easier way. Instead of doing all that, you can just say delete all this. I just want to add bind. The value of this input to text making complete that using Visual Studio code that does exactly the same thing as what we saw before. With by default it will use the onchange event. That's the default event. So if we go back to this now, it should be no longer updating with every keystroke and Type A bunch of things and tab out and then it updates if I want to change the event, there is a syntax for doing that. I can say at bind: event and here I can specify the event name I want to use like I would like to use on input. And now if I go back and wait for that to rebuild and refresh. It's our time. Wait for it to rebuild 3 fresh. Start typing now it's using the an input event, so that's what app Vine does is? It sets up a two way bind so we're getting close to the end. We gotta, we gotta finish up our app. OK, so now let's add some logic to make our compound interest Calculator work. So we're going to add an app code block to our. To our component and we're going to add a whole bunch of states, like a bunch of fields and properties into our component. I'm just going to go ahead and copy this. We're going to give some state to our compound interest dot razor component. So we're using at code and adding just a whole bunch of members to the generated class. That's pretty easy, right? We also want to method. That's going to calculate the compound interest if you know math then I'm sure this makes sense to you. I'm personally I'm just going to copy it and again, I'm going to put it in this app code block. Just put it at the bottom. It's just a method and fix your formatting. There you go. So now we have a method on our class as well. We're going to use this as our eventhandler. Instead of having like an inline Lambda, will have an actual method like we had in the counter component OK, and then all we need to do is add some inputs in our table for specifying the current principle, the number of years and the interest rate that are going to be bound to. The properties that we set up above like we have that principle property we've got the years property and we've got the interest rate property as well. OK, so we're just going to set up those binds. You could manually type these. I'm just going to copy the whole table. An update the entire table. OK, so now we've got inputs that are bound to the state of our component an now we just need to have a gesture that will actually calculate the updated interest rate. And so let's go ahead and set up an onclick handler. In our button. So let's go to our button. So the event we want is onclick. I'm going to, but I do at to say I want to see at on click you get intellisense to help you find it and then here instead of putting a like a Lambda or delegate, I'm just going to type the name of the method. You can hit CTRL space to complete the method you want and that's it. That was it. OK, that should be it. Now it says their build and run the app. We've already got the app building and running. We're using net watch, which is fun. Let's go an refresh the browser so that we pull down the latest code. Maybe do one more time. Just make sure we got the. The latest code and there we got some inputs and then we can click calculate and that I suppose is the correct amount. If we up the interest rate to make it really expensive then we should have a lot more money. Yeah, OK, so there you just built a simple Blazer Web Assembly app with data binding, event handling, running on web assembly all within the browser. In summary, that's what blazer blazer does is it enables full stack.net web development. You don't have to write any JavaScript. You can write Rich Interactive UI just using your C sharpand.net skills. Now this is just the beginning like this is just simple, very simple blazer application. Where do you go next from here? Well I recommend going of course to theblazer.net homepage. So just just type blazer net and that will bring you too. This page and you can click on the documentation link. We got all sorts of Docs in here. Then you can learn all about how the Bills, Blazer, Web Assembly, apps, all the features of the component model that we just didn't have time to talk about today. If you want more tutorial style instruction, there is a doc in the blazer docs this build A to do list doc that will walk you through building like A to do list app using Blazer Web Assembly. So definitely check that out. Or if you want like to know everything there is to know about Blazer. Check out the Blazer workshop at AKA Dot Ms Slash Blazer workshop and this will walk you through creating a whole pizza store app with British pizza all in the laser. Alright, I'll make sure I'm on the right slide. That is what we've got for you today. Say thank you to everyone who joined this call today. Be sure to check out the blazer. Net is actually where I would point you too, but that link will work as well. Please share your feedback on this session and I hope you enjoy the rest of build. Also, this is just the first learn session in the rock, paper, scissors, lizard Spock Collection. Make sure you get your swag for completing these sessions. There's also digital swag available at the link provided and think that's what we got time for it. I hope you enjoy build thanks you. Thank you for joining.
