Let's Learn .NET - Blazor

[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] hello hello everybody hello jeff uh good morning good morning good evening good afternoon wherever you're joining us from in the world we really appreciate you taking that time to spend it with us here today to learn about a very exciting hot topic called blazer and as you can see we both have our blazers on today for i think it's appropriate um uh yeah so we're both wearing blazers i have a long uh brown curly hair i'm wearing glasses and a black blazer for those of us who are using just audio descriptions and i'm joined with my good friend co-worker and colleague jeff fritz hey jamie it's good to see you yeah i've got my github hat on and uh of course very purple magic and sparkly shiny blazer ah yes one of my favorite blazers so so not to be confused there's blazor and there's blazor so so jeff uh we're here to talk about the fundamentals of blazer and um can you give us a little insight about that this is this is a word we've been hearing thrown around a lot lately um give us the scoop what's what is blazer oh my gosh so blazer is a new user interface framework and technology that's built with net that we're really excited about because it it gives us that component based way for us to build user interfaces we can compose components into more larger components and even into pages that we deliver deliver over the web now what's really interesting about this is we can we can run our blazer framework both on the server like we're used to with asp.net or other web technologies like node.js but we can also run blazer in the browser using a technology called webassembly and have it run natively in the browser just like we might have our javascript run in the browser oh i think i think jamie's muted whoops we are live um yeah so that sounds incredibly useful it sounds like there's a lot of ways that we can applic uh implicate this into a bunch of our different web applications um why don't we get the rundown like what are the what are the fundamentals where do i get started what is what is the actual beginning you know let me start off i'm gonna open um i've got microsoft edge running here on my desktop if we can share my desktop there it is this is this is the blazer.net webpage and you can see it's got this really long url in the brow in the browser address bar but if you just go to blazer.net it'll get you started there you go i see we shared the link out thanks so much and there's everything you need to to download the tools to to write code with blazer download the sdk the software development kit so that you can build and compile your application with blazer is all available right from here and there's a bunch of information if you need to share with with other folks on your team with your managers some of those important decision makers in your organization about when and why you should choose blazer we've got listed here on the front page of blazer.net so um we're going to dig in and we're actually going to get started we're going to follow along with the learn module here and the learn module actually tracks along very nicely with the get started bits here um but this this isn't too bad to download and install all the things you need to get started so um the the basic things that we encourage folks to get started with depending on where you're coming from to get started with blazer if you're on windows you can install a copy of visual studio 2019 it comes with all the runtime and all the tools that you need for for building with blazer but if you're also excuse me if you're on a mac you can install visual studio for mac you'll get all the tools and runtimes you need with that as well if you choose to include the web workload in both versions of visual studio works great and if you're on linux or maybe you don't want to install the full versions of visual studio that's okay too we have the.net command line tools that you can install and run with visual studio code and have a great experience building building applications wherever you might be windows mac or linux amazing amazing so whatever platform or tooling that you like prefer to use blazer is there for you oh yeah absolutely and that also means we can deploy a blazer app to wherever you want to go as well whether it's a windows server or it's a linux server or maybe you want to deploy in a container and get that native cloud experience we've got you covered in all those different deployment patterns that you can work with with blazer applications amazing and so what's probably the first thing that uh folks need to download to get started to get it up and running so let me head back over to our screens there we go thank you so much and the first thing that we recommend folks install if you don't have visual studio installed if you want to use visual studio code or maybe you want to use some other text editor that's okay too you're going to download the.net sdk it's right here it's the first button that you get to from the from that blazer tutorial here download and install is right here on the left side download the net sdk and at the command prompt then you'll be able to run the dotnet command to to get started to see that yes you have.net running and available so over here i just run.net and it comes back and reports everything is available here and i can check the version of net that i have installed now i have i have a preview version here of net 6 but you may have other versions of net installed like 3.14 or 5.0 and i've got another 5.0 preview installed here that's okay it'll run any one of these just fine and you'll be able to work with blazer with blazer on the server and blazer web assembly so um once we have it installed yeah good stuff so next thing we want to do is actually get in and take a look at building our first application here with with blazer and we're going to build a laser server app okay so are we are we ready to build a blazer server app we ready absolutely let's do this how we do in there chat room what do you think are you ready to get into this see our first application so let's do this let's go all right so we recommend folks get started with a blazer server application it's a little bit easier for for you to interact with it's going to give you a faster experience out of the gate and some of the other things that are coming along um that are going to give you a better development experience are all available with our blazer server configuration so i'm going to copy this first command that suggested that we have here to create our app dot net new blazer server dash o blazer app and this dash dash no https what's all that stuff what is this trying to do here so what this is doing is it's going to create that new blazer server application we're going to name it blazer app and we're not going to configure it for ssl just yet we don't we don't really need that for just our little development environment that we're going to work with here so i'm going to go down here and i'm going to create a a folder called let's learn drop into that folder and let's do that.net new blazer server uh and it was blazer app and no https and this is going to create that project it's going to restore from the default templates that are available that come with the net command line so if we take a look i have my blazer app folder i'll drop into that folder and if we look we've got a couple things here that are kind of what we'd expect if we were building an asp.net core application it's a little bit tricky to to view here on the command line so let me open this in full visual studio visual studio 2019 and uh let's take a look at what this looks like so i'm gonna jump over to visual studio yeah let's look what it sees it looks like in the environment but is that to say that all of this automatically downloads when you do the net sdk download for blazer it doesn't download it when you install the sdk however it will reach out and install those as you need them so we don't we don't put down all of the latest workload all of the latest packages and references for the template we fetch them the first time they request interacting with them that way you'll get a you'll get a more recent version than perhaps when you first installed the sdk so i'm going to open up solution explorer here and that's a little bit easier most of us that use dot net are used to seeing projects in this structure and we're we're seeing some things here that we kind of are we're like i said we're used to seeing inside of an asp.net core application just looking down here the program a startup class startup class in asp.net core is something we're used to seeing with information in here about configuring services configuring the um the http pipeline and how we interact with those and this is pretty standard what we have in here there's one or two extra lines about adding server side blazer and there's another entry down here about map blazer hub we don't need to worry about those those are pretty standard things that you don't typically have to change but if you want to dig in further there is documentation that will explain to you what those things do if we take a look under pages go ahead oh i was just going to say uh before we get too far ahead so what does the no dash https do and why do we need to note that sure sure so the reason that that we chose no https back there in the in the configuration let me head back right when it said here on the command prompt no https what that does is it turns off the default uh transport layer security features that come with the blazer server template this way you can work locally and you don't have to worry about or get involved with some of that configuration that for the purposes of a little test application here that we're building and learning with we don't we don't need to get too confused by adding those features here i see so this makes it a little bit more of a simplistic test application yep yep okay so um good question thank you for for asking so i'm gonna move on and let's actually run the application now the way that this suggests we run it is at the command line using dotnet watch run so let me do that instead of running it from inside visual studio we'll use visual studio as our editor so we can write and change our code i'm going to go to the command line and i'm going to execute dot net watch run now what this is doing and let me clear the screen so you can see what happens what this does is it's going to run our application and watch the folder for changes so if anything changes inside the project folder on disk it's actually going to restart the application for us and re-update the content in the browser for us so here it's going to download all the things we need it's compiled the application you see it there and there it is there's my hello world for the template that ships with blazer and the net command line that was pretty fast yeah right okay granted there's not a lot in here it's pretty simple there's not much to to really take a look at but there are some interesting things in here that that we can get involved with and what i want to make sure i call out is that the blazer application runs on top of a dotnet runtime now i mentioned this is a server application so we're going to build with the.net runtime and deliver that to run on a server so your server or your docker container that you may deploy into is going to have a dotnet runtime in there that might be net core 3.1 or one of the newer versions of the dotnet runtime like net5 or net 6 that's going to be released here in november 2021 so that run time ships with our server application and if we want to deploy using web assembly and we want to ship blazer into the browser we're going to package up a subsection of that runtime and deliver that into the browser as well and that gets specially compiled so that it runs um specifically on top of that webassembly runtime that that all the browsers all the modern browsers have and support so um first thing that i want to show you here is the counter now come on fritz this is a counter i mean really i'm clicking a button and it increments a number here what's what's so special about that right i mean come on i wasn't gonna say anything jeff but i was i was waiting for the punchline there's no magic to this right like what's it doing so let me show you behind the scenes what's happening with this let me show you uh over here on the network on the network tab um and i have to open this oh no no i have to refresh here we go check out right here see this local host status 101 switching protocols it's actually connecting and using a technology called web sockets so that it can start sharing information back and forth to the browser so let me show you there you can see the negotiation that's going on but it's sending messages very very small messages back and forth to the browser and this is how blazer server side works is it sends these look at these little three byte messages 44 byte what's happening is blazer renders content on the server and delivers just those changes to the user interface into the browser over web sockets so i'm going to clear this when i click that button we sent a binary message and it was 298 bytes we received a binary message for 148 bytes and it sent back 26 bytes and we can take a look at what's going on in here and you can see the the raw hex of what was sent back and forth but you can see the text of what exactly happened here and if you were to go through and and pull this apart you'd see this is a button click event is what it's detected and what was received coming back is an indicator that says we'll replace that with the value one and if i clear this again and i click that a second time you'll see we receive a message back that has some compressed information but it's changing it to two and we're doing this back and forth so all of our interactions to build this user interface are happening on the server now okay that's kind of interesting how does how did we build that how does it know how to do these things right so jamie let's let's take a look at some source code for this thing yeah that'd be great all right so i'm gonna head back over to visual studio and i'm gonna look at that counter page now this is counter dot razor right here and when i open that up this looks a bit like this looks a little bit like a razer template that i might have used with asp.net mvc um i've got some html mixed with some c sharp i mean it says counter that was that header i saw at the top of the page counter count uh current count and at current count well okay i'm used to seeing that with razer templates the at sign kind of switches me back and forth to c-sharp syntax okay and uh http button cool with a css class defined at on click all right this is actually this isn't a javascript on click this is a c sharp on click so when this component when this page is rendered that at on click is telling the blazer runtime run this c-sharp method increment count which is right here inside this c-sharp code block now that's kind of weird right seeing c-sharp mixed in with html like that not gonna lie it's a little bit weird but yeah it's not the norm that we're potentially used to no i mean razer templates do a little bit of this but a code block like this we're getting a little bit out there follow with me for a second a private int current count equals zero that's a that's a field that's an integer field being defined we've seen that in c sharp before in other c sharp classes so we're defining it like a field in a class but here it's inside of inside of this page that's been defined and current count is being referenced here so if we think back to how razer works and for those of you who aren't familiar with razer i'll explain quickly the value of current count is just going to be output right here where it's being referenced and you can see when i click on it it highlights all the references to current count for us in visual studio so when the increment count method is executed here and that's a regular c sharp method it's going to take the current count and increment it by one using the c sharp increment operator plus plus so it increments it and we get this very simple binding operation happen right we've inc we've changed the value which means that this automatically updates because it's because the razer the blazer runtime sees that the current count has changed so it repaints that section of the user interface so i get that click and it increments the number i see so is an advantage of using blazer so that we can use c-sharp and won't have to use javascript anymore yes and no you're not going to be able to get away from javascript entirely you can get away from a lot of javascript you can definitely get away from it but there are places where if you want to interact with your browser you want to interact with the features of the browser beyond just the elements that you're painting on the page here you want to reach out and grab the location sensors you want to reach into the browser and you want to you want to do other interactions with um embedded elements well you're going to need to use javascript to do that and there are capabilities inside of blazer to do that type of javascript interrupt it's a little bit further advanced than we're going to cover in this session but we do have great documentation that will show you not just how to call javascript from net but from your javascript be able to call back into your net code really cool stuff and just a little bit further advanced than what we're going to cover as part of this yes um thank you for that explanation um for everybody following along we do have the documentation linked in our resources um if we could have that there we go perfect thank you um thank you people behind the curtain this is our blazer resources all of the resources for this event plus tons more can be found in this link including documentation that jeff was just referring to and i see a bunch of questions coming in i promise we'll make time for them keep them coming and we'll um we'll set a time in just a few minutes to kind of cover those directly so keep them coming oh yeah okay so so okay so just explain this to me yeah let me finish one last bit here that's that's kind of important and and i skipped right over the first line of the counter page here this line up at the top at p page slash counter so we have to define for for asp.net for blazer we need to tell blazer what components what what files are going to listen and respond to the various the various addresses that we navigate to inside of our application so when we do this right when we when we want to have links or buttons that go to different pages we need to declare where those various pages are listening and and handling requests so by placing at page slash counter we're adding a route we're defining a route that says when somebody wants to navigate to my website slash counter they're going to get the contents of this page so if i go back over here you can see slash counter on my address bar brings me here and if i click back on the home page i'm navigated away and back and it navigates me into that counter page so this is a way for us to tell blazer exactly where these pages these dot razer files are going to respond to those requests so oh i see okay that's very fascinating so now i think do we do we want to do the check your knowledge here do we want to keep going let's yeah let's go ahead and keep going and then in a few moments um i'll get to some questions that we have some pretty good questions too so fantastic so when i showed you the counter source code here this is a dot razer file counter dot razer and all of our blazer syntax are stored in these dot razer files now if we look at them take a look back at index these are pages because they have the at page directive up at the top of the page however they're also components they have the exact same syntax as a page and can be reused inside of other pages by just referencing them by by their file name so check this out i have survey prompt here i'm in dark theme for visual studio because i am an elite programmer i believe in dark theme you can use light theme whatever you might like but in dark theme this turquoise text for survey prompt indicates that this isn't an html page an html tag this is actually a directive that references another component and if we open our solution explorer you'll see in the shared folder there is a survey prompt component declared here and here's the html that goes with that okay that kind of makes sense the html that's inside of a dot razor file we can embed inside of another one by just referencing it by its name so i can take that counter page and reference it here by just typing counter and there's visual studio giving me a little bit of help telling me that that's available so i will save that and i will go back over to my home page and there's the counter so we've taken all the contents of that counter.razer file and we've embedded it inside of our index page by just referencing the tag name now this is a separate instance from this one over here right and i'll click through we're up at 15 and it it doesn't remember the value of the counter but we can now reuse some of those files in other places this now gives us the ability to to make use of some things that it makes sense we're going to want in multiple places or we're going to we're going to build components that are going to fix a standard look and feel or a standard way that we want to present data inside of our application so let's let's take some steps here and and let's see what else we can do with components because just like the survey prompt component here i'd like to be able to pass some data into my counter component so that we can interact with it and and provide different um different features depending on where it's used so amazing um before we get into that next step uh jeff um can we take a few moments for some questions we've got a lot of them coming in okay great i just want to get those answered before we get too far ahead all right okay so i have a lot of questions you ready hit me okay and thank you everybody for posting these questions um uh we'll get to as many as we can so so first off what is the difference and use cases of server versus web assembly oh good question there's actually i believe we have on the front of if you go through the learn module here in the second step there is how web assembly works so webassembly means we're going to deliver your razer components your net runtime and have it run on top of webassembly all in the browser versus server side you're going to have your razer components and net runtime running inside of an asp.net core application in a nice in a nice blue cloud it can be other clouds but but we like blue clouds here nice fluffy blue azure blue clouds here at microsoft very specifically blue yeah a specific shade of blue and it's going to send data back and forth to the browser to update your uh your web pages that you're going to be delivering now one of the use cases for the two is the second half of that question so good use case for blazer server side is when you want to keep all of your business logic all of the information to build and manage your application on the server now this is important if you're in if you're in some sort of a verified um environment or ecosystem and i'm thinking specifically of things like the finance industry or um pharmaceuticals where you can't for the purposes of validation from outside organizations you can't have that code get out and onto just anybody's workstation anybody's computer anybody's phone or other device so you need to keep all of that business logic on the server in order to maintain that validated state and you just deliver the user interface updates to this to those browsers now other folks will use this as well it ends up with a very thin and lightweight interaction across the network so that might be really good for you if you're broadcasting across the internet on the public web and you might be reaching out to folks who don't have a great connection and you want to transmit just very small packets you saw the uh when i showed inside of the network traffic very small traffic hundreds of bytes low hundreds of bytes right 200 bytes that that's not going to impact folks significantly when they're interacting with your application on the other hand blazer with webassembly you're installing the whole enchilada inside of the browser so you're going to have to download a couple dlls to run in the browser that depends on how many uh how many features you use inside of.net that will determine how large a payload you deliver now that could be anywhere between two mag eight meg ten meg depends on exactly what you're using we've got tools that will uh compress and and tree shake and give just those dlls that you need to run in the browser now folks here 2 meg 8 meg 10 meg and they think oh my gosh that's so much data when you look at other popular very large websites i'm not going to name any but you can take a look on your own if hitting f12 on those websites and they deliver significantly more than than 8meg to run in your browser but the point here is just like some of those websites you can now install and run blazer just like a progressive web app you can install all of those dlls on a device whether it's a phone a tablet a pc and all of those dlls are going to be running locally saved and running offline and making just the connections to interact with the server when you need to so when would you choose to use blazer web assembly when you when you need to have that disconnected application you want to be able to run outside of being connected to a web server all the time and that might be great for folks that have have a field sales team or field technicians representatives that aren't connected to the internal web servers all the time they need to update their phone update their device go out and perform service at you know customers facilities and they're disconnected save things locally you come back you sync when you get back on the the internal network and it works great there are other folks that are building internet facing applications that use blazer it's really great stuff but it does use a little bit more bandwidth to make that initial download after that blazer caches that content very aggressively in the browser and folks will have a great experience at that point but we do caution that there is an initial burst of bandwidth that's needed to to get started as a viewer interacting with a blazer webassembly application that was a lot jamie i i think i did follow you so um blazer server would be good to use if you weren't trying to expose the web api no a blazer server would be good to use if you aren't if you want to make sure that your dlls that your application is is staying protected and not being shared right so in the web assembly diagram we have here all of your.net code gets shipped down to the browser to some viewer that you might not know versus blazer server it all lives in your your web server so yeah your apis your business logic if you don't want to share those things you want to use blazer server i see so it's a little bit more protected exactly how does blazer compare with other web frameworks like react and angular and etc great question i get this question a lot so it is a blazer server um is just as fast because it's all running on a server and we're running in shared memory on the server so you get these updates into the browser very very quickly it's not quite native speed but it's very quick when you run blazer web assembly first off laser web assembly is only we're we're into year two of it being in release to many rtm um versus things like angular vue react they've been around for more than 10 years so they've been optimized and they're running on the javascript framework uh javascript runtime inside the browser that's been around for 25 years so yeah those have been optimized and have been out there for a while blazer runs a little bit slower because the the web assembly runtimes aren't entirely optimized yet we're seeing um the blazer runtimes the blazer dlls and and delivery getting optimized right now it actually runs and gets interpolated when it gets delivered into the browser so there is a just in time compilation that happens when blazer web assembly is delivered however starting with net six we're making available an option to do ahead of time compiling that's going to result in some larger dlls but significant improvements on performance native speeds inside the browser however it's going to also mean larger downloads so you're going to face this trade-off it's it's an interesting world we live in just being in the middle of year two of of blazer with web assembly we expect it to get better as as the browsers advance as our blazer technology advances but right now it's not quite as fast as those other technologies but you're going to be just as productive as as you would be building with c-sharp on a server or inside of another application because you're using the exact same c-sharp technology that you're comfortable with maybe building with winforms wpf xamarin asp.net you're using the exact same technology just running in a blazer framework wow okay that was a good explanation thank you so so what is the difference between a blazer server and mbc so there's actually not that much of a difference blazer server is is another type of asp.net workload that gets installed into our server side application in fact if you take a look at the blazer server template that we have here and i open this up you'll see some dot cs html files here because in fact there we go thank you that was pointing to things before we're screen sharing so you see host cshtml you see error cshtml these are these are razer views these are razer pages being presented and you can add in controllers you can add in the mvc capabilities in your startup class just like we're used to seeing right now i've only added razer pages but there's nothing saying that i can't add views and controllers in here right i can add that capability if i want to and run it side by side have blazer handle some interactions have mvc handle other interactions it's it's up to you how you want to mix and match those things and you can see down here where it maps the end points it's it's set up routing it's set up a fallback page here that it's going to go to if it if the blazer hub doesn't know how to respond to things but we're going to default to this host page and and present and render our blazer content from there so i can i can add in those other features if i'd like it's the same the same asp.net server in both situations so you could potentially mix and match depending on the outcome that you were trying to get absolutely yep great um and i'll ask just one more question on um a similar mvc side and then we'll get going but don't worry keep asking your questions we have folks in the chat who are answering and we'll also make sure to um take more time to get some more answer questions answered um so uh can you run a blazer server app hosted inside of an mvc app can you run a blazer server app hosted inside of an mvc app um well you could run those as one application i'm not sure why you'd want to run two applications right i can add right this is an mvc app here so i can add where is it add controllers with views and now this has all the mvc capabilities um so you can can you can start to to assemble these like all the little lego pieces that you want to put together to make your application with the various parts that you need razor pages controllers views server side blazer they're all available to you gotcha so i can mix blazer into my already existing app is what you're saying amazing okay well that's that's the answer i wanted to hear yeah amazing um okay well let's let's move a little bit forward um with our workshop here um we're still taking questions so please feel free to answer those in the chat uh or ask those questions in the chat all right so we were over here and i was looking at this counter and i wanted to enhance this a little bit and make it behave a little bit differently uh depending on how i reference and use the counter so let me go back over to visual studio and we saw in my index i just have counter here i'd i'd really like to be able to provide an attribute like the title here to be able to specify well how do you want to increment your counter right it'd be really cool to be able to say increment by and have it have it do something with that information so let's go back over to the counter and i'm going to add a property here called increment by all right and we'll make that a property with get set and we'll default it to 1. we're going to increment by default by one and i'm going to change this here to say plus equals increment by so now when i click this button it's going to increment by whatever the value of this property is now in order to get that property assigned from outside of this component from outside of this page i need to decorate it with an attribute and that's the parameter attribute so this tells blazer this property is a parameter that can be assigned from from a tag outside of outside of this file so i'll save that and if i go back over to index razor i can start typing increment by and now visual studio is already picked up and said oh i know what increment by is it's an integer and you see it even gives us the little at sign here to show and tell us this is a blazer c sharp property that you're going to set and i'm going to set that to 5. now and all my red lines go away and it knows that's a proper integer to work with if i were to type 5 it it knows that it wouldn't like that very much that's not going to work so i'll change that to five save that and behind the scenes my my page is actually rebuilding here and look it's it's gotten all grouchy because i typed in five there um but i will go back over here refresh um oh no what have i done increment by increment by we're going to force a refresh of this there we go whoops yeah i did not like it did not like that spelt out five right i purposely put a bug in there and it recompiled and got stuck [Laughter] so control r inside of the uh inside of the the terminal will force it to refresh when you run it watch so here i now told it increment by fives and it increments by fives if i go over to the counter page there was no way for me to pass in an increment by value so i had that default to one so now this counts up by ones so i have now two different ways i'm using the same component but i'm altering its behavior because i can pass in a parameter and make it behave differently when i need to so this is kind of one of the fundamental ideas of using components in composing our application by reusing those components and changing their behavior inside of parent components or parent pages when they're requested so the next bit we're going to get here is going to be about data binding and working with events so do we have any questions to get into before i start showing and walking through this bit um yeah i do actually have a few questions fantastic um so is there a way to um do multiple routes for navigating fantastic question yes so let's go back over here i had page counter up here i can actually add multiple here if i want to have it listen and respond to different addresses so i can have it also listen to uh uh not just counter but uh but uh we can say fritz's uh wonder number incrementer whatever it might be right save that and you'll see it's refreshing the browser over here i don't have to just go to slash counter now if i go up here and i put slash fritz's wonder number incrementer it still goes to that same counter page okay so it re-routes to the the correct location exactly it knows because of this page directive here it's it's registered it's logged with the runtime hey i know how to answer for this address also amazing so we i know you get this question a lot um but i still believe there's probably some clarity around it are blazer and razor the same or are they different that's a good question and it is a question we get a bit blazer and razer are similar razer is a templating engine and language that we use with asp.net and asp.net core typically with mvc we'll also see it with razer pages that uses this syntax to to embed content and to pivot back and forth between between html and c-sharp right i can i can put entries in here that say things like if if current count is less than five and by putting braces around this the curly brackets when the value is less than five little output and we'll be able to see that button and if i go back over to my page here oop well it's five we can't see the button i'll refresh and when i click it increments and as soon as it goes over five it disappears so that same interaction with with block level statements if for while those all work just fine interacting back and forth inside of our code here and i can also output information from properties fields and whatnot the the enhancement that blazer has is i can also then start decorating html tags with things like at onclick this event handler here and i can bind values back and forth two-way bind values not just into html as some text that we're going to output but as values into a text box and we're going to see that in a little bit here so not just a text box what am i saying into any input element that html will render we can bind values back and forth so we get this next level of interaction with the html additionally not only do we have the ability to add parameters and methods like this inside of a code block in blazer and we have a functions block we can use inside of our razer templates that's very similar doesn't support parameters quite like this but in blazer we also get the ability to pass around some other types of parameters and interact with um with uh the state of our application a little bit differently finally both razer and and blazer have the ability to handle dependency injection so if we take a look at the last page that i haven't showed over here yet shown over here yet the fetch data sample you'll see it injects a weather forecast service this is declared elsewhere in my application and it's being injected it's being made available to this page to this this fetch data razer file as a weather forecast service type named it's a variable named forecast service and further down here you can see it calls into the forecast service and says will get me the forecasts for today going forward so it pulls the data exactly we're injecting this service that was defined elsewhere in the application go pull that data and appear right here display it amazing and how do i how do i set up authentication for my blazer application oh that's a that is a much much more complicated answer for that um there is an authentication template that come that comes with the dotnet sdk that you can check out um we recommend folks set up with identity and you'll see when you use that template exactly how it lays things out and hands things off to a server component that will process and return appropriate tokens that can be used in the browser um it is that's a bit more advanced than we want to cover as part of this session but uh thank you i see doc's on authentication was shared in the chat um absolutely something you can check out and gosh check out our friends on the on the 425 show uh over on twitch um they broadcast on the visual studio channel you'll see their content go up on youtube as well they cover all of these topics and all of the nitty gritty around authentication very well over there on their show there is documentation available as well amazing yeah this is this is an intercourse to blazer but um we have tons of uh resources for taking you on to the next the next step for blazer um i'll ask just a couple more questions before we get going um so this is all this is all web-based can i use blazer to build mobile apps spoiler alert oh my goodness yeah i'm coming in rough with the questions so yes um of course you can build progressive web apps with blazer with webassembly now um and works great installs on on your phone on your tablet but coming up in november with the next version of net uh we're calling it net six we're shipping a framework called netmaui and maui has the ability to host blazer components and render those inside of a a mobile application a native application on windows mac ios and android really cool stuff more info in that in november when when maui is is released is launched in live excellent it's but it's great jamie because everything you're learning today you can use to build clickable yeah so it's a good starting point and i love that you can reuse that learning across uh different form factors and operating systems yeah absolutely so this is this is the preface to being able to build mobile applications with razer come november yeah um so uh last question before uh we move on a little bit sure um so how does blazer handle a graceful degradation um i'm sorry graduation handle graceful death degradation um on connections and does it limit connections so i think what what they're referencing is if i'm over here and i'm using blazer server and if i've made my connection excuse me um and it's returned and i'm interacting with websockets over here what happens if i don't have websockets available or if the websocket goes away um this is built on top of a technology called signal r and signal r is an asp.net technology that's been around for gosh uh 10 plus years now in in its current iteration signalr dot signalr with net core what you're able to do is use signalr to automatically step down from the preferred connection mechanism websockets to other technologies that will render and maintain that connection between your server and the browser so it'll use some things like server sent events forever frame log polling if it really needs to get to that it'll it'll actually pull every few seconds to see if there's updates and all of that is managed for you inside of signalr and what really makes signalr important for us to consider instead of just setting up a websocket connection and using that is signalr provides that abstraction over all of these technologies and automatically steps down so when http vnex comes out right we know http 3 is on the horizon but if there's some new technology that's being delivered that's going to give you a better two-way communication we're going to adapt and put that into signalr so that you can use that as the preferred way to communicate back and forth now there's nothing on the agenda that that we really need to push in yet but if at some point in the future that whatever technology comes up i don't know carrier pigeons over http i don't know what it might be and that's better faster for folks to use you keep using signalr and will switch over to carrier pigeons over http for you when it's available amazing um yes okay so let's go ahead i know you have a lot to show us jeff so you wanna i've got that yeah excellent so let's yeah what do you say we get into the next the next bit here about data binding and events yeah let's go for it if everybody's ready i'm ready cool so i'm gonna build that prototypical to-do list every application every web framework when they want to show off you know hey look out look at how cool my framework is they want to build a to-do list right it's it's a pretty standard sample that folks build and work with so let's build a new a new razer component to be our to-do page so i'm going to go over here into visual studio now there's a command line there's a command you can run at the command line that'll build this for you i'm going to do this in visual studio because it's real easy for me to add a new razer component it's going to load up my templates here and i'm going to change this to my to do razer file and i end up with to do as a header code and nothing all right that's all that's here but i want this to be a page so i need to decorate it with a page and we'll listen to the address slash to do so just to make sure we don't lose anybody following along is this the the next learn module this is still in the same um map with blazer learn module this is unit 7. that i'm going through so i've specified here's the page where we're listening where it's going to present this the the route for it with the page directive here let's go over and create a navigation element for this so i haven't shown this page yet this is this component yet this is the navigation menu that appears down the left side over here so here's there's the home button there's the counter button there's the fetch data i'm going to put right here next to counter i'm just going to copy this paste it again i'm going to change the label from counter to to do and the href the navigation that we're going to i'm going to change this to to do as well so now i have a navigation link here navigation link runs very much like a normal anchored hyperlink in html i'm able to click this and it'll go to the to do page so if i go back over there it already has been refreshed there's my to-do page click that and there's nothing here what happens is that watch process it needs to refresh when you add a new file it doesn't always pick up all new files all the time so now there's my to-do page so let's start building a to-do item and and creating some list of objects that we're going to bind to so i'm going to go back over here and inside my data folder yeah we'll do it in the data folder i'm going to create a new class and i'm going to call this to do item so this is a regular c sharp class there it is let's create two properties in here i'll use the prop snippet to help get through this a little bit quicker and i have a title to my to-do item and a is done property because i want to know if i've completed some of these things right um now i can go back over to to do razer and let's let's define a collection of to-do items that we're going to interact with so private list to do item and we'll call those to-do's and i'm gonna use a little c-sharp nine and new initializer right there and that is i need a using statement there we go and i can put using statements inside of my templates inside of my components i'm sorry using the same using syntax that i would inside of a class file i just have to prefix it with an at sign so that blazer knows oh that's that's c sharp all right so i've got a new list of to-do's and let's just output a a list of these uh that's that's not the right tag an unordered list there we go so this is going to do a little for each and i'm not going to get the that's fine var to do in my to-do's list and let's output a list item that is that to do title if i go back over there's nothing being output yet because well it i don't have anything being added to the list so let's let's put a text box here so we can add something into our to-do list i'll go back to visual studio down here i'm going to create an input uh let's put a placeholder in here that says uh do something uh to do something right and i'll add a button that says add to do okay save that and we should check over here refresh my content there it is now i've got my content here but i need to wire that up so that this text box actually goes somewhere right uh learn laser and this doesn't do anything so we need to write a little bit of code so that it actually does something with that so here we go we're going to set up an event handler for this button so that when you click the button there you can see a bunch of the events pop up in visual studio that you can you can choose i'll let you scroll through this on your own time if you want to take a look at some of those and i'll add a call add to do we just define a method down here cool so this will red line will go away because it now sees that there's a method all right but i need to get this string for that to do that we want to add to this what's that text for this so i'm going to use binding and i'm going to bind this to well let's create something called new to do right which sounds kind of weird new to do okay sounds like something that would be in a kid's tv show private string new to do equals string empty there it goes so this now is going to go away we'll see that red disappear there we go and i want to add when there is a value here i want to add it into our collection fantastic we can do that um so if string is null or empty new to do return right do a little bit of validation there otherwise uh let's say uh to do's add new to do item there it is and it is title equals new to do um and i'll clear out my new to-do so it's ready for you to start typing the next thing all right if we do have text in the new to do field and we're binding we're getting that two-way binding here so if there's anything in this text box when it changes so when the cursor leaves the text box it's going to copy it into this field and when you click this button it's going to fire the on click operator it's going to wake up that c sharp method called add to do and execute inspect that value create a to-do item and add it to my list and then clear out the input it sets the property back to string empty and because it's bound here here's that two-way binding coming back the other way when we set that to empty it resets this and this value sees the change and updates and clears the text box for us i'll head back over and refresh so now if i start keying in learn blazer and it's not updating why isn't it updating what did i do what did i miss let's take a look what did we miss am i missing a file or something here let me restart the application just to make sure i'm not missing something there we go and back over to edge to do there it is there we go so i just had to restart that there was a file that was out of sync and um i'm using a preview version of net so that happens sometimes um so watchmore.net videos need to do that that's a thing so and i can build this out with whatever i'd like right so we're we're actually somewhere here that's kind of cool we're we're somewhere that right we can build a very simple list but if i want to mark these things as done perhaps or i want to be able to edit the text of some of these things i can go back into visual studio and we can update that presentation from not just a list item here but we can turn that into a text box as well so let's do that real quick input and uh we're going to bind and this time we're gonna bind to uh the to do title right here come on thank you and not input checkbox what the i'm sorry there we go there we go and that's what i was expecting now i also want to put a uh check box next to this and i'm going to use just a regular html checkbox so we know how to use that it's uh input type equals checkbox and we're going to bind something different to this we're going to bind the uh i don't need that in front to do is done so now it'll know and bind this is done value from inside each one of our to-do items in that collection i'll go back over here and now i've got a checkbox with that text and the text isn't going anywhere um so it's not that big a deal just yet okay but in that check box i can actually filter on that and say well how many items do i have left let's put a little note like next to the to do here and let's put the number remaining right so we'll say something remaining well i can i can use a little bit of link here to output that information so i can say uh to do's dot count and i can put a little where clause in here where the to-do is not done so i've got a little link query right there that we're going to bind and output next to the text remaining so now if i go back over here one remaining it already updated that and when i check it off none remaining watch more.net videos right subscribe to my podcast i don't have a podcast you get the point i'm able to add these check them off and it binds and updates the html text appropriately and these fields are interacting with that c sharp code and updating our user interface immediately and that's all happening in this case on the server and being painted on the screen for us the exact same interaction the exact same uh content components works with blazer web assembly wow that's that's pretty amazing and i noticed that you edited the text um on the visual representation visual representation side now will that reflect in your source code when i edit which text you added webassembly learn webassembly blazer oh will that actually reflect back no because that's a that's a to-do item it's a data point that we created so it's sitting in memory only on this page so when i refresh it goes away ah okay i see yeah so how we doing out there any questions yeah how's everyone doing there was a lot um yeah that was that was a lot that was amazing um how would you persist data in an app good question keep it coming so if we wanted to save that to-do list if we wanted to put it somewhere so that it it was persisted so that um that we could come back to it later um what you would do is you would put it in one of two places you could put it in the browser using application state now that'll stick in whoever's browser is currently running um and it will uh it won't follow them into other browsers on the same machine onto other browsers on other devices so you don't have that persistent in in being shared with other folks the other way to persist it would be to update and send it to an api endpoint now i showed briefly over here there's the weather forecast in the fetch data over here the weather forecast service that's being injected here it could use an http client to fetch data from from a web api endpoint from a azure function endpoint an azure api endpoint um but it can also post and put data at those endpoints as well and whatever technology you're using to build those http apis will save and persist appropriately so you then inject and interact with those using inblazer webassembly you're going to use an http client in blazer server well your server is running inside the firewall on your own data center or in your own cloud application space so you can reference and have that interact with your database directly in the case of running on blazer server so it's up to you how you implement those but the same inject of those services that you want to use to persist is a good model that we recommend folks use okay um uh akeem from youtube says that um you he would subscribe to your podcast so that you should start one all right i'm gonna have to start one um so um can i use databases with tech like ef core energy framework absolutely that's absolutely um one of the models that we recommend folks check out um because building apis with entity framework core very easy to do there's there's great courses there's great modules on microsoft learn that'll walk through building apis with with entity framework core that you can be very successful very quickly with and once you have those apis available to update and interact with that data using an http client very easy to do good to know um can you explain a little bit um like how exactly the data binding works do we need to use an at or no at all data binding so inside here right so we're binding data to this um this checkbox you have to use an at sign in front of the bind attribute name so that the blazer runtime knows that this is a c-sharp directive otherwise it might think it's html something that javascript is going to point uh pick up on and relay that to the browser right so if i remove the at sign you see it changes from that turquoise back to a light blue and and it takes the bold decoration off of it as well to indicate that it thinks the editor thinks this is html that it's going to send directly to the browser it's not going to tinker with it and interact with it so you need the at sign here and you see visual studio is helping us out here to protective text yeah the intellisense pops up and this will instruct the blazer runtime to pick up and execute what's happening with it you don't need an at sign in front of this in front of what you're binding because the very nature of using the at bind here is telling um is telling the blazer runtime that this is a c-sharp statement it is a c-sharp property or a field that we're connecting to and interacting with okay so you that ad symbol is pretty important there yep that's that's how we tell the the razer templating language which then gets picked up by blazer that this is c sharp yes blazer binding is a bit like magic who doesn't love magic absolutely um so you you mentioned this a little bit before but maybe you could clarify a little bit how do you call a web api from blazer webassembly so if i wanted to to actually execute and interact with that web api endpoint um several things you have to do now this is a blazer server application when you're in blazer web assembly the template has a little bit more set up for you from the get go but i will step through and show you the pieces that you need if you wanted to call call a microservice perhaps from your blazer server application you need to add an http client so it knows how to interact with that making that injectable here this is an asp.net core thing it's made available for you immediately inside of a webassembly application that's comes by default with the template but back over now inside of my to do if i wanted to interact i can inject that http client and i can call it whatever i want here fo uh fritz's web fetch thing whatever some folks like to call it fetch i like to just call it http because it's i it's a reminder to me that when i use this thing it's actually making a request across hypertext transfer protocol so if i scroll down here inside of my ad to do here if i wanted to go and not just add it to my to do to do's list here if i wanted to actually update and send it somewhere else i type http dot and now i can specify all the things that i may want to do with this right so i could send it and structure a request that i want to send um out to whatever endpoint that uh that you want to transfer this transfer your data to right there's helper methods like post so i can specify here's the content that i want to post to this other location we've even got helper methods that are available in a in another assembly that isn't referenced by this package by this project just yet but it is available in the assembly project that will allow you to post as json and specify an object that you want to post to that other location i can also get data from other locations so if i want to get a string from some url i can specify that here come on now there we go right and i can go fetch that from whatever location fingers aren't working there we go go fetch the string from the front of csharpfritz.com and do something with that right wait that and i'll put a async task on this and now i'm going to go get that string and do something with it whatever you want to do it's now available to you to fetch and interact with on your page so lots you can do once you have that http client in your page so gotcha um so there are rats for the to-do list but how do you pass parameters so we passed a parameter into into our counter by using this parameter attribute and that allowed me to set that parameter here on the tag but i think what they're asking is how do you pass a parameter into the to-do page so that this starts with something right yeah um so let me actually do that over on the counter page because i think it'll be a little bit clearer with fritz's wonder number incrementer um i can actually specify a starting count if i wanted by adding information to the route here so i can specify starting count and this is the way we specify um elements that we want to capture inside of our route using asp.net core and the technology carries over into blazer as well so i want to capture a starting count and i can specify that we want to capture that it's not going to do that for me is it um starting count and uh let's default that to zero and uh that's going to be a property for us to interact with now in order for this this element from the route to be passed down and captured on here we use the exact same parameter attribute to pass that along last thing well you know what i need to after this is received um i need to pass that into the current count so i'm going to actually i'm going to hook and interact with um one of the events one of the three events that are on every razor component and this one is on initialized async and it's actually going to return a task i'm not going to do anything asynchronous in this but i'm going to show it to you so i'm just going to say current count equals starting count and actually i did that wrong i did that wrong that's the wrong event to hook my bad i'm sorry uh we want on parameters set is the one i want um uninitialized fires when the component is initialized when it's created on parameter set um i forgot the overwrite on parameter set async will trigger when the parameters like these are configured now why am i getting one parameter set async yeah why am i getting uh it doesn't like that oh i'm not returning a value uh that's fine return task completed task this is what happens when i go off script jamie live coding at its finest so now um that starting count would be picked up and passed into this value and after that value is set it's going to set it the current count to that value one last thing we need to do by default route parameters like this one that are captured off of the address bar are assumed to be strings so just like in asp.net core i can put a constraint on here and specify this is an integer so now when i execute this and it should already be executing i'll go back over to counter it says current count is equal zero but if i go up here and i specify a different number to start with say 100 now it starts with 100. it's captured that value and passed it into the current count value there on the address bar and if i try and make this something else slash foo it doesn't know what to do with foo foo is not a number so it routes to something yeah i don't know what to do with that thing so make it whatever value and it jumps right through it so there you go that's how you work with parameters from from the address bar i see um so a bunch of people have actually asked um is it possible to separate your code from your razer page oh yeah oh yeah let's do that real quick so here in the counter right i've now got a whole bunch of logic here and jamie i don't know about you but when i start to see more than one page down of code i i get i get nervous right there there's a lot of code there and i when i page down this other stuff that's up at the top and visual studio is showing me a little bit of the outline here it it's like gone from memory for me i'd rather it be somewhere else it's a little bit easier for me to manage so what you can do is you can move all of this code into into another file i can right click on code here making sure that this is available i don't see it if i look at the refactorings there we go i can move this whole code block to a code behind check this out i'm going to click that it creates a class let me show it in solution explorer here so you can see the whole enchilada um so i have counter.raiser and it creates another class the the class is in the same folder in that pages folder for the purposes of making it easy to see the relationship we nest it in the tree here but inside of counter razor so you have counter razor cs and it is a class it's a regular c sharp class that has all of those code entries right here but this is a partial class it's a partial class because as we can in c sharp we can we can break up our classes across multiple files so that component that we had the counter.razer file let me jump and jump back into that real quick counter razer is over here now it just has my markup now this is just my html it's it's one page down i don't i don't even have a page down it's the full page but i have all of my code for that over here this is a partial class because at runtime what's going to happen is the blazer runtime it not the blazer runtime i'm sorry the c-sharp compiler is going to merge these two halves of the same class with the html it's going to render it's not html the razer template it's going to which is html and c-sharp it's going to render into a c-sharp class that knows how to present this content and merge it with this content that we wrote so you get the exact same output the exact same behavior but for our human eyes that need to juggle this content separately you want to be able to see and interact with these a little bit cleaner i can move this into a new vertical tab group and for the purposes of me working in visual studio i can zoom out and now now i can see both my markup and all of my code that supports it side by side and be able to be able to work with it a little bit easier when that concept count inside of my application starts going up you don't need to do this there are folks who prefer to have all of all of the um features and language capabilities inside of one file and those are a lot a lot of folks in the react ecosystem are used to doing that with jsx files that's great you can do that if you'd like but if you'd like to separate it out like this this option is available for you as well there is no right answer for this it's strictly a matter of comfort and what makes you happy and how you build your applications so i will put them back together in one dock there beautiful absolutely beautiful oh thank you um so we have a little bit more than about a half hour left and i want to make sure that we can get to this next workshop um do you or is everybody ready to move forward what do we think the the next part here we're actually going to write a little bit of web assembly yes so pushing a blazer um webassembly app and a.net api with azure static web apps yeah so this is let me yeah like they have the actual module yeah let me jump into that learn module there we go publish a blazer web assembly yeah perfect for those of us following along um this is the second workshop in the agenda you could follow along online or you can watch us do it right here yeah oh and it seems like everybody in the chat is ready fantastic all right so we built with blazer server and blazer server means that there's some there's some service hanging out there whether it's it's on azure cloud somebody else's cloud in your data center that's that's running and executing on a machine on a server somewhere but when we run with blazer webassembly we can actually have that deliver and run just in the browser so then all of our content all of what we build and work with actually lives in and runs somewhere else it's just hosted on the cloud it doesn't actually have any moving parts on the cloud so that's actually a little bit more interesting to work with because we can we can start to drive down our web costs by running less active code on a server so how does that work how do we interact with that and that's where this module comes in using the azure static web apps technology so let's get in let's take a look at what this module is all about so azure static web apps is a way for you to publish your code to github or azure devops pipelines but you publish your code out to uh well azure devops repository but we prefer using github for for this module um and as your code changes we're going to give you continuous integration continuous delivery set up with github actions and automatically deploy that to a location on azure for all of your static content your html images javascript css your your blazer application your blazer webassembly application and if you need some server-side interactions we'll give you an api that runs on top of azure functions that lives out there you can manage with c-sharp and even better we can deliver all of this in the same solution file for you to be able to interact with and build your application so um let's uh let's take a look at what we're going to build here we're going to build just a simple shopping list that is going to persist in the cloud and we're going to be able to interact with using using blazer webassembly so let's yeah everybody needs a good list app right we did our to-do's let's get that shopping list app together yes so the first thing that that we need to do is we need to start from from a template we need to get all the pieces together to build this now there is a template page that's made available for us um and it wants me to sign into github that's fine and i there we go all signed in this is going to go to c sharp for its slash some repository name so let's call this let's learn blazer all right so that's my github repository that i'm creating i'm going to make this a public repository and create repository from this template now this template is going to be created from microsoft.mslearnstaticwebapp.net now this this is set up specifically for uh this learn module that we're working through if you're building some other application and you need to be able to build from a generic starter application there is another url that you can use and i'm going to share that for our moderators to be able to reference um but let me navigate to this so you can see this is github.com static web dev blazer dash starter and this will give you a very plain almost identical to the template we saw in the last in the last learn module uh application to build from you click use this template and that same dialog pops up that we just saw create a new repository from this and it'll give you a jumping off point to build your application so let's take a look at what's inside this application i've got three folders api client and data and when we take a look at this um it kind of makes sense that that i have i'll have an api that's going to be my azure functions i've got a client this is my blazer webassembly app and you see the same folders in here that we had in the servblazer server app pages dub dub root some shared content some properties program cs cs project file kind of makes sense i know what these things are so let's uh let's bring this down locally and try running the code on my machine so i'm going to click the download code and get the url for this jump back into windows terminal close that application down go up a folder and let's clone it i i'm a big fan of the command line so i do everything at the command line here um i'm a i guess i'm a keyboard jockey like that right but that's a preference though i think absolutely appropriate yeah yep i'm going to copy that file folder location and go back to visual studio and let's uh let's open a new solution i'm going to start at that location and open shopping list sln sure go ahead save that sure go ahead save that that's from the previous demo that we were looking at so we take a look at this api client and data and i can set this up and run this application locally here now there's actually two parts to this there's an api and client so um i'll want to run i believe i want to run both of them at the same time now let's just run the client first so i'll click start here and it should start up in my browser after it builds and we will get the application running locally here it says succeeded succeeded i got the spinner and loading there we go almost it opened in my other browser over here oh okay i was like this should be displaying something yeah yeah just opened in the other browser so i'm going to go to localhost and it's in four four three four eight it's on slash products i forgot the https pardon me there it is see it says loading that's laser web assembly starting up and there it is in the browser all right so i've got products and i've got my list and it says loading data because it it should try to load data from from my server if we take a look back at the contents of this right so we went to slash products so there it is slash products it's injecting an http client it's got a navigation manager uh right there so that it can help with navigation around our application and i've got some some components that are being referenced here and how it interacts with things into the question we had earlier how do i get data from somewhere else there you go when we initialize this page we're going to get data in json format that's a collection of products from api slash products so not bad i'm i see how we're going to get that data and it's it's not loading that data yet because well i i don't have a server running it's just running my um webassembly application at this point we're going to add that api later so that it knows where where to get the data where to store that data but now let's go and start setting up the azure static web app let's make that available so that we can start copying things out and running it on azure so um i'm going to open up i'm going to use firefox for this because i have some things configured in there that are going to prevent me from doxxing myself and anybody who watches my videos knows i do that a lot it's precautionary yes quite precautionary um here we go and right do i have this right um actually there's a sandbox here we can use so you know what i'll use the sandbox yeah so there we go checking for the existing sandbox thank you sandbox activated fantastic so if i go to the azure portal uh no it's yeah concierge subscription is what i'm going to use so just so that i don't get into something i shouldn't be showing here we go so here is my azure portal dark theme of course and i'm going to create a new static web app so i'll click the create button and i'm going to choose a subscription um see i thought there was a subscription yeah concierge subscription it should be in my list here it's not that's fine i'll create it with this one um and i'll create a new resource group called let's learn static web app details what are we going to call this i'll call this uh product list i'll use the free hosting plan for hobby and personal projects great for learning as well but deployment details where is this project well it's it's on github so i'll sign on to github and i got a little dialogue popping open to the side here asking me to log into github i'm going to verify oh i got the two-factor authentication lucky oh yes two off everybody should be using two two factor authentication um so i will key in my two factor uh what i'm out of time that's what happened it ticked over timed you out yeah yeah yeah lucky me oh the joys and security of two off um am i king in the wrong one was i looking at the wrong digits there we go uh yes go ahead yes yes yes authorize all right so i got through my github authorize and now github account and i'm going to select an organization i put this into c fritz and over here when i cloned it i put it in let's learn blazer so i will pull this down and find let's learn blazer there we go i'll choose a branch and i'm going to have this build off of the main branch so every time there's an update to the main branch we're going to update our website build details now this is the important part that's going to automatically generate a continuous integration script for us using github actions really cool here because it's pre-loaded with all kinds of frameworks and configuration that are going to build and run your application so whether you're running with angular react view svelt i'm going to choose blazer and it sets up these three folder locations for us client api and dub dub dub root these are the folders that are going to contain the output of the build when our github action runs so our client folder contain contains our client application that's going to be built our blazer content our api folder contains our azure functions we're going to build and interact with and our www root folder contains the output the static content that we're going to publish so i can click preview workflow file and it'll show me the yaml for my github actions here trust me it works you can review it if you'd like but i'm going to click review and create and what this is going to do is very quickly stand up and make that application available it's going to allocate some space on azure for us and deploy that first github action for us really really cool stuff that that we're going to see happen here in just a minute so there it is if i go to resource we're going to see here information that looks like a website that's running and my resource group and all this and i get this funky name nice coast and some mashup hexadecimal number azurestaticwebapps.net azurestaticapps.net and when i click that your azure static web app is live and waiting for my content and if we go back into my deployment history here we'll see we have a github action here that started 37 seconds ago that's building and getting ready to deploy so here it is building and it's going through it's already brought in all the dotnet stuff that it needs and it's going to compile there it goes checked out all my code and it'll deploy the application now there it is it runs two separate build processes uh first one for the webassembly client and a second one for the azure function so here it is um there it's building the client application and the blazer output it's putting into the dub dub root folder there we go and now we're going to see it's building the at it zipped up all the blazer content and now it's building the api it's building the azure function we're going to deploy as we're closing in on the end of end of the hour got about am i right we have about 15 minutes left yes we do and we want to save some time for a couple questions at the end if possible awesome awesome so this is going to finish there we go finished uploading to azure and it it pulls every 15 seconds to see that it's been updated it's ready to go and come on there we go it's going to clean up and if we go back over here and refresh there's my shopping list now loading data still isn't quite working um the module does have the learn module does have some instructions for what exactly we're going to put into our api over here i can start keying in and getting that information into this if there's a question you want to take while i start filling out that api real quick um yeah we could take a question um so from our watch party we do have a watch party going on hi watch party and we have our good friends over there um from the react and from our cloud advocates team and they ask does blazer server use the same routing system as mvc and is it possible for them to conflict with each other it's it's not completely the same there's it's a little bit different but it is isolated separately from mvc so you you you it is possible to see a conflict between them um and that's why um [Music] i'm trying to think how can i go and show let me do this let's do this let's add the other project add the existing project so i can show it real quick [Music] even though i'm not deploying it um there it is so inside startup you it's possible to have a conflict here at the bottom inside the configure method this is where we normally configure the routing right we say app use routing and then we tell it well here's the end points here and we can also provide some rules inside of the use routing method as well but this is where we're defining the priority order for those so you could tell it to resolve some of the mvc endpoints first before the blazer endpoint so that it does those interactions and provides both capabilities and whichever one is listed is yeah is listed first inside this method will be answered first will be the the one to respond so if you have both a to-do's page inside of your blazer application and you have a to-do's page as a razer page the order in which they're listed in this startup file whether it's uh map pages or matt blazer will determine which one comes up first which instance will be run yes they can conflict but um it's not too hard to to unwind that and understand uh which one takes priority so it's a fixable error oh if it occurs yep but but that might be something that folks want in their applications you never know sure depending on the async exactly so i'm going to add a new azure function here while you cue up a next question sure um so does blazer have a life cycle of events uh like how can i execute custom logic when a component is initialized or rendered fantastic um so every blazer component does have a a life cycle there's there's three events in the life cycle um and and they are on initialize on parameter set and on after render now uninitialize fires once when the when the component is initialized now each time you navigate to the component it will re-initialize so you can have initialize run multiple times in the life cycle of your application on parameter set will trigger each time that there are new parameters set on your component so we saw those parameter decorations on our component and i'm looking to see it i don't think there's one inside no i don't have one inside of here uh is it on product details i'm trying to remember there we go so each time that product id is set so maybe you have a parent child uh a child detail i'm sorry parent detail uh user interface right where you've got order details up at the top and order items listed at the bottom and those are two different components when you're passing and updating content on the child view every time this is updated that on parameter set event will run now the last event on after render renders that runs every time there's a bind that changes data on page so that can run a lot of times there is an input parameter to that it's a boolean parameter that's typically named first so that you can trap and interact with the first request for rendering the component now there is also a you can wire up dispose a a dispose interface to this a disposable interface so that it will clean up your content appropriately um if you have any long-running content that's running and you or long-running processes threads you can mark your components as disposable and clean them up appropriately i'm going to copy in some of this content from the sample here and uh yeah what else do we have uh sure so um what is a stat and sorry what is an azure static web app and how can i use my own domain for it so an azure static web app is is a website that has it doesn't have a server per se it just serves your your static content it serves your html javascript images fonts css sheets just as though it was a file system sitting out there on the other hand um you also have azure functions that run inside of an azure functions app and that's this api that we're about to deploy now when when our api runs it has functions like this one that answer on an http trigger a request into it and it goes and gets some very simple data to interact with not bad that's easy to understand but the benefit here is i i don't deploy an entire server that's running things and managing cash and and all the other things that go around go with managing a server so i've got a much simpler interaction to build and interact with plus it also comes with this continuous integration and continuous deployment capability really cool stuff that that's going to make it easier to build and work with now i'm going to skip over running this locally and i'm actually going to deploy this using um using a new pull request into into my application so you see there i've got some new files i will take a look i updated my solution file and i didn't really update that um but i am going to update and put that product set file in there so let's get add api product product get that's the one there we go uh let's actually let's put this on a new branch right so i will call this feature uh get right specify that's a new branch there we go and now i will commit uh added the get feature there we go um and i will push that out to github now this isn't structured like this in the um in the module but i want to make sure that i show this so this branch has pushes there's github helping us out i'm going to compare and create a pull request added the get feature fantastic i will create that pull request push the big green button down there just off screen and what github will do for us is it's going to run some checks it's going to compile my application and see if this works now this is something that i think is extremely valuable that is built and made available to you because i wouldn't use this feature in azure otherwise this is going to build my application and publish it into a deployment slot into a staging slot on on my um azure static web app that way anybody can navigate to it and check it out in the same way that you might consider like a um [Music] a public beta version of your application so this is going to build and we'll see it deploy in just a second here because it takes about two minutes to deploy this each time there we go moving along and we'll be able to interact with that out on azure i'm waiting [Music] now it doesn't just put it on the same address that that we built with and i know there was another part to that request that last question about well how do i put my own domain name in there um but it actually creates a a staging slot that has the pull request number built into it so that you can see it and interact with it it looks like i closed my firefox on this i had firefox for that portal so that we could jump right back into it let me while that's finishing building what else do we and i'll show you where you can set your own domain name for this as well okay great um are there bandwidth limits to the azure static web apps there are it's um for it at the free level um you can check out the pricing page to learn more about all of those it's extremely generous um but the the bandwidth limit that you'll see is uh quite high and it's not even a limit it's the lim the free limit is really what it is um so here i am looking at the step yeah oh sorry you can go around and play with it um for free absolutely so this is the static web app on on the azure portal you can click into not application insights into custom domains there's the default domain it has you can add um add your own domain it'll assuming you have it registered but you can add and define your own domain here and it will also allocate a https certificate for you so that right you can interact with it and get take advantage of http 2 and all of those features there we go so my build is done over here for my pull request so if i look back at the pull request you see it's got the green check because it's built properly and if i click into this i get this helpful message your stage site is ready you can go visit it here there's my stage site and now my get function works i could run it locally with the emulator but my get function works and i can see what's on my shopping list and it's running all out there amazing yeah and last thing that i want to show you about that is back over here in the portal if i take a look at the environments tab it will show you there's my main branch that's been deployed and here's the pull request even puts the title of the pull request with the branch that it's pulled from and when it was last updated so as you're updating that uh pull request with all the latest features the fixes that are being requested um this will be updated appropriately wow i love that i'm someone who really likes to see processes and procedures so for for me this is beautiful this really really helps me identify like how the app was being built over time oh my gosh last thing i want to show you before i take more questions when i confirm this merge and let it go through i'll delete the branch what this does behind the scenes it's going to run another check here to close the pull request we're gonna see this run in just a second come on come on do the thing come on let me there it is merged the pull request added the get feature if we click into this one there it is it's closing the pull request job and what it's actually doing is deleting that staging site it's going to go through and and reclaim that space and this merge pull request instance of the action that's running is going to rebuild and redeploy to my main url that's out there on the website so extremely and like you were saying a great workflow that helps you do the right thing from the start with this in the beginning yeah yeah wow this is this is amazing this is so beautiful um i'm so excited that we get to cover blazer um and find out actually how amazing blazer magic really really is um we have a couple more minutes yeah and then we deleted it right then and there it just updates automatically i love that um so we have a couple minutes and i want to get to a couple questions before we do um so from the watch party what is a good strategy for notifying events or state changes between sibling blazer components wow notifying state changes between components so there is a way and we recommend this ability to create application state um that you can pass between between components inside your page you create a class that you inject that that's a a poco a plain old c sharp object that contains some of those properties that you want to pass information between uh i'm sorry that you want to carry between your components you can pan you can update those properties and when they're injected into the other component they'll receive and have that property made available so you need to register that class and uh register that class with the dependency injection uh service and it will make that available anywhere you inject it you'll be able to set those properties the last thing you probably want to do is put some sort of an event next to those properties to to raise uh to raise and execute a method when that value changes right you want to actually have that other component hear that a change happened and publish and interact appropriately so you're going to want to create an event and there is a way to create some custom binding to those objects there's more details inside the documentation if you need it ah you're muted my favorite well that was absolutely fantastic jeff thank you so much for that really detailed overview um of getting started with blazer thank you everybody who joined us online thank you our moderators james sofia john in the background um all of those resources are published live at aka.mslash blazer underscore resources we hope you learned a lot today and we hope that you join us next month for let's learn f sharp so thanks everybody and have a wonderful rest of your day take care [Music] [Music] do [Music] [Music] you

Channel: dotNET

Views: 20,746

Keywords:

Id: 4Xzx7Cm9ykg

Length: 121min 30sec (7290 seconds)

Published: Fri Jun 25 2021