Modern Web Development with Blazor & .NET 5

all right yes okay so our next session is with dan roth and javier cavarro nelson and they're going to discuss modern web development with blazer and net 5. that's right hi everyone i'm daniel roth i'm a program manager on the asp.net team and i'm julia calvar nelson i'm a software engineer in the asp.net core team and we're super excited that.net 5 has now shipped with enhanced support for building full stack web apps with asp.net core and blazer in this session we're going to take a look at how asp.net core and blazer work hand in hand to create great modern web apps now.net has been the workhorse powering web apps from the server for many years many of the biggest names on the web are powered by.net with asp.net core in.net 5 you get unparalleled support for building web apps that are fast and secure asp.net asp.netcore.net 5 is the fastest.net web framework we've ever shipped and ranks in the top 10 for almost every public tech and power benchmark far outperforming most other popular web frameworks asp.net core and five also helps keep your web app secure with the latest security protocols and best practices now with asp.net core you get everything you need to build beautiful web ui and powerful back-end services with the addition of blazer to asp.net core you can expand your reach of your doc your reach of your network uh web apps to the client blazer enables asp.net core apps to remotely handle browser ui interactions over a real-time signalr collection and also to run.net code directly in the browser using a webassemblybase.net runtime blazer gives your.net web apps that rich interactive feel and enables taking full advantage of the client device's capabilities there's no need to rewrite your existing asp.net core app to take advantage of laser you can add blazer components to your existing asp.net core app while preserving existing functionality so let's take a look at how asp.net core and blazer can be used together in net 5 to build modern web apps now i have an existing web app here let me pull it up this is an mvc application it's uh it's been around for a little while this is the parts unlimited app it's a basically a online auto parts store and i've been working on it it's got all the mvc code here i've been updating it to net5 and to use asp.net core let me show you the running app so you can see what it looks like you know pretty basic e-commerce site we can pick an auto part that we want to buy and then we can add that to our shopping cart has a little shopping cart ui and then what i want to do is i'd like to implement the remove functionality here like if i click on this remove button it doesn't currently do anything click click click doesn't do nothing what i want that to do is to remove the item from my shopping cart and i'd like that to happen without having to like refresh the whole page i just want to remove this one item now normally that would require me to write some javascript but i'm hoping that i can do that with donet and c sharp using blazer uh javier what do you think can i do this with blazer absolutely you can just add blazer components to your nbc eraser pages app okay um but if i do that am i gonna have to like rewrite my entire application i mean i've got a lot of code here no problem you can just add blazer components in the parts of your app where you want to add interactivity and you can leave the rest of your app untouched that sounds great um can you help me do that how do i do that okay so the easiest way to get started is to use placer server blazer server runs on the server like your mvc and razer pages apps but it sets up a real-time connection using signalr so that when you want to handle your ui you can do so with remote interactions using blazer components in fact i went ahead and i started setting up your app to use place observer why don't we switch over to a solution and we take a look all right let me go ahead and close this this one down and i'll stop the app okay let me switch the solution you sent me okay we've got parts unlimited blazer server now and yeah looks looks the same i see all my code here let me go ahead and run this let's see what it looks like um see how it how it functions so we're kicking off a build i can see the server is starting excellent and here it is okay yeah okay so this looks like my my app looks like the app looked before let's uh let's add a battery this time to my shopping cart uh it looks like my shopping cart has disappeared javier yeah that's because i left the ac part for you so i already refactored the shopping cart into a blazer component if you go to the eraser components folder you'll find it there okay let me look at the code go back here razer components and let me give a little more space oh yeah okay i can see all these razor files these i assume are the components uh is this one it the shopping cart details widget yeah yeah okay this is my markup from before this is what i used to have for my shopping cart looks pretty much the same there's some extra component componenty stuff here at the bottom but uh yeah this looks familiar um how do i add this back to my app okay so to add this component to the page you need to use the component tag helper let me send you a snippet that has the component to the page okay and probably go to the index view within the shopping cart folder in the views folder shoppingcar index.cshtml so this is the mvc view and i'll paste in what you sent me and tell what is this doing okay so let me explain to you what the parameters to the component tag helper are so first we pass in the render mode which tells the browser to start up a blazer server application at that point in the document now the next thing is the type which is the type of the component that we want to render the third one is the shopping cart id and that's an interesting one so blazer components are for client-side ui so you need to think that there are things that are not available in that context like for example the http context for that reason the normal thing that we do is we grab all those things ahead of time and then we pass them as parameters to the blazer component now the next one is the details template and this is also an interesting one so this is a string that we use as a template to generate links to the item details page inside the blazer components there are some concepts that npc concept that don't really make sense on the context of a place of application like link generation but one cool trick that we can do is we can pass that link to to the blazer component and then simply use a quick stream format to replace the values and produce the link ah clever okay yeah the final one is the checkout parameter is the same thing as the details template but it doesn't have any arguments so we can just pass the generated link directly so basically you're like grabbing all the stuff that you need the the context of the request for and passing that into the component using component parameters okay well i've saved this let's take a look and see how it looks and looks like it already refreshed and there's my uh there's my items let me add let me add another one let's add a it's got a light bulb and boom sweet okay well let me check to remove i'm going to click uh looks like remove still doesn't work click yeah that's because i wanted to show you how to handle the remove event in the component so why don't we go back to visual studio and open the shopping cart details widget to see how we can implement remove all right uh so i see the remove button right here it looks like it has this on click handler now yeah so that ties the dom on click event to the method that is being called within the lambda so if you scroll all the way to the bottom you can find that method so it's not implemented yet i see it right here remove from cart okay so like we should need to add some code in here yeah let me send you the code that we need to do to to implement that functionality all right cool i'm gonna paste that in and what's this doing okay so it's doing three things the first thing is using a service to remove the item from the card that service internally uses entity framework to talk to the database and remove the item there's the shopping cart service yeah okay i see the db context there okay that makes sense yeah the next thing we're doing is we are fetching the data again from the database to update the ui okay and the final thing is a surprise feature that i built in that is we're notifying other components that we've removed an item from the application so the widget on the top right level corner of the page is also a laser component and when you click on an item to be removed you'll see that the widget on top gets updated oh sweet so this little guy up here that's also a blazer component there's more blazer components in this app than just the the shopping cart okay let me make sure i've saved because i don't think i've saved yet all right there's doing its auto refresh thing boop boop i love the little little icon in the corner svs he manages that okay and so now i should be able to remove an item by cart and i see the shopping cart updated that's super awesome so that that little guy that must be this shopping cart widget yeah and i can see that it's using that that same notification service so that it gets the update that the item has been removed and that must be being added somewhere in the layout since it appears up there at the top right it's in this top header let's look through the layout i'm expecting to see a component tag helper there it is all right there's the shopping cart widget okay cool so we've got multiple blazer components in my mvc app um we did it we were able to add some interactivity to my mvc app without having to deal with javascript just using blazer that's super nice i do have one little complaint though i did notice um that when if i click away and let me come back to the cart you see that loading cart details dot dot dot it's like it's like there's a delay before the car actually shows up is there anything we can do about that yes so the way blazer server works is blazer updates to dom after it has been rendered from the server the loading card details section that you see is displayed while the data is being loaded from the database once that data is available the component renders the shopping cart details so what we can do instead is we can pre-render a component from the server that way we render the content as part of the initial page render on the server so all right now yeah if you want to do that go to the index html view on your shopping cart okay and then change the render mode to server render server pre-rendered hopefully i get some intellisense and i do server pre-rendered it is all right perfect now we also need to pass down the model we need to do an extra thing let me send you the snippet for that okay all right i got it what's this what's this for okay so what we're doing here is we are passing the model down to the applique to the component as a parameter instead of fetching it again from the database when the application starts on the on the browser that way what we get is that we avoid having to go to the database for the data and we skip shipping is keep showing that uh loading details uh component that essentially happens on blazer whenever you do any type of asynchronous work okay so we're basically grabbing all the data up front on the server and passing that into the component and that will get then set up so that we don't have to like load it twice we don't want to do any async work to load the component okay it's also important that that parameter needs to be serializable because we send it down to the client and then it sends it back to us oh so it's like persisted in the page like we're going to persist that parameter in the page okay so let me try this now let me click away and come back and boom it just it just loads it's like almost instantaneous i'm clicking refresh refresh refresh and it's fast and smooth i love it all right that's really nice so yeah great we were able to use blazer server to create my shopping cart um you know i have to admit you know part of me is just uh just feels a little bit disappointed i keep hearing about this web assembly stuff that it lets that lets me run it code directly in the browser this is still technically running on the server correct yes so blizzo server has a lot of advantages it runs on the server like your nbc eraser pages apps you can reuse the same libraries and service normally the authentication works in the same ways as for any other server rendered app now that said webassembly is it also has its advantages you can leverage the device resources for rendering the ui it supports the scenarios where there is no server involved and it doesn't require you to have a constant connection between the browser and the server however if you factor your components well you can use the same component on blazer server and laser web assembly with minimal or no changes so the only the only thing you need to think about is that authoring a web a webassembly component takes a bit more work because you need to go through the api to fit through an api to fetch or modify data for example got it okay so if i want to use blazer webassembly instead um can you walk me through how i would do that it sounds like i'm going to need some sort of api and then a way for my blazer client to then call that api correct yes so i have an alternative version of the app that does that just does that let me show it to you all right let me close this one down and i'll grab the solution you sent me let me see okay here we have parts unlimited blazer web assembly now oh i see we have some some additional projects yeah so all of the components now live in the client project so that's the part of the of the application that will be running on the browser the other project the share one contains code that is shared between the client and the server okay all right so how do we what do we what do we have to do then to switch this to assembly okay so i've also made some changes on the server to host laser web assembly in a similar way to how it's done on the template if you look at the index.html for the shopping cart okay still have our so that's not that one this one still have our shopping cart view yeah you'll see that we've updated the component tag helper to render a webassembly component i see yes excellent okay so do you want to try it out uh that's okay yeah let me go ahead and run it here's the running app all right so let me go ahead and click on things and yeah that's where it looks like i haven't ran this before i have a few uh few products yeah so that's that looks like it's working pretty good so that must be but this is now running on the client so that must be calling some sort of api yeah so now that the component runs on the browser i had to do a couple more additions to enable the component to access data on the server so if you go to the api folder i wrote a shopping cart api controller there it is yeah so this is what's accessing the do managing the shopping cart updates now by accessing the database so we can get get our shopping cart details we can get the summary we can remove remove from cart okay so here's our api got it and then how are we calling this thing then from the client the the other thing is on the program.cs i use this tb client factory to register a card client and that's what it's used to talk to the database so if you if you step into the client you'll see that it uses http client so this is the cart client used on the in the client project in the blazer wasm project it's using an hp client to call our api i'm guessing i should then see that someplace where's the where's the component yeah here here we're now injecting the icar client into our shopping cart component and that's probably being used down here someplace to actually call the api yeah there it is if you see by by factoring our components well the code is almost identical to the one on the server so it's very easy to replace one with the other perfect okay i get that and it seems to be working great now i can add stuff i can remove stuff um you know now that we're running on the the client though it does make me wonder about security um like how do we handle securing those api calls in my mvc app i use an authentication cookie from azure ad b2c and that seemed to work just fine with blazer server but if we want to call a protected api from blazer webassembly i'm guessing i probably need some sort of access token right so there are now two application models running under the same host the parts that are rendered on the server behave like a traditional web application so this is for example the parts that are implemented using mdc or reso pages now the other model is the interactive parts of the application that run on the browser using webassembly those behave more like a single page application now that said there are many ways of securing this type of application but it is common to rely on the cookie for the parts that are rendered on the server and to use an access token for the interactive parts on the on the browser in fact i was already working on on this do you want us to finish it together yeah i think that would be useful to see okay awesome so let's go back to the solution and the first thing we need to do is we need to go to the shopping cart controller shopping cart controller that'd be in the controllers folder okay yeah so we need to make sure that we protect the access to the shopping cart so just don't count this guy right here so we're gonna have a secure shopping cart now you have to be authenticated to see your shopping cart exactly so now we want to protect our api endpoints i already set up a microsoft identity web to protect the apis using json web tokens but we need to make sure that the action on the shopping cart api controller require the token before doing any action so why don't we go to the shopping api i see that i'll just it's already commented out here i'll just uncomment these guys so some more authorized attributes uh but these are now using the job bearer authentication scheme which will be uh presumably based on an access token yeah so the the next thing we need to do is we need to make sure that we only render the shopping cart when the user is authorized so uh to do that we need to wrap the shopping cart details widget you so if you go to the shopping cart in the csml okay we can replace that shopping cart details widget with protected shopping cart details widget okay so this is a new component the new new piece of blazer stuff um where is that implemented okay i see it here it's in the client project uh okay what is this doing yeah so this component does the following it makes the authentication state of the webassembly app available to other components now the authorized view renders two different fragments depending on whether the user is authenticated or not if the user is authorized then it displays the shopping cart if the user is not authorized it uses the authenticate component to establish the authentication state on the webassembly app okay it makes sense yeah since we pre-authenticated the user on the server doing this doesn't actually require the user to enter his username and password we're just setting up the state on the on the browser for the javascript application clever so we have an authentication state on the server and now we're establishing it on the client yeah so there are a couple more things that we need to do so to to config we need to configure the client to actually be able to authenticate so for that we need to use the msl support that we that we ship so let me send you a snippet with the msr configuration that you can put in your program.cs okay okay i see that's what that's what's going to tell this authenticate component what to do in some sense uh let me paste that i pasted it here in program cs so this guy oh okay so these look like the normal set of parameters that you use when setting up uh msl right you got your authority and client id exactly so the the last thing we need to do is we need to make sure that we actually attach the token to the request when we query for for data so for that we're going to use the base address authorization message handler uh so let me send you the snippet that adds that to the car client and got it okay that was a that was a long one base address authorization message handler okay so this is a message handler this guy is going to handle acquiring the token and then attaching it to requests as they as they go out yeah exactly all right should we see if that works okay the app's restarted let me go back now let me go to the home page all right now let me try and add i don't know let's add a filter set to our cart oh okay so now we need to log in right because uh this is a secure a secure shopping cart not everyone can see my shopping cart now exactly log in here okay there's a little i saw a little like pop-up blip there other than my last pass kicking in but that must be i'm guessing that's the microsoft authentication library acquiring the the authentication state for the client and getting an access token i'll should be all set up now let me see if i can remove remove an item and i can okay and just to see that that's actually doing an authenticated call let me bring up the browser dev tools and i'm just going to click remove and there you can see is the api call and give myself a little bit more space here yeah so call to api shopping cart remove it's a delete and 200 okay and the reason why it worked is because the request headers have an authorization header and there's my access token that's being sent with the request that's what that message handler is doing awesome okay so that's how you can do authenticated calls from the client that makes total sense um i did notice one thing that i'll have here like when i click away let me come back to the cart you see how it doesn't show up immediately again like let me do one more time click away come back it's not there and it's there um it looks like we have that delay back uh can we get some of that pre-rendering goodness back again yes we clamp we can pre-render our component on the server and laser web assembly will wire up the things for interactivity on the client after the runtime is downloaded okay so yeah so now we think we need to think about a couple of things when we do this we need to think about that we're going to have components running on the on the server and running on the on the client so why don't you switch to visual studio and we go to the index.html and we change that to webassembly prerender web assembly pre-rendered now a new feature dot net f5 love it okay we'll save that perfect so now as i was saying we now have uh two different implementations of the cart client one that needs to to do http calls and the other one that runs on the server and can skip over all the overall http details so luckily i created already that implementation so if you go to server card client where that's in the servers folder here services yeah server cart client ah okay so this is an icar client but this one is using that shopping cart service we saw previously which just talks directly to the database so it's like a server friendly implementation exactly okay so i already registered that on startup and what will happen is that when the application prerenders it will use the server card client and when it runs on the browser it will use the card client that makes http requests nice okay yeah so there is one final detail that we need to do here so we need to go and we need to update or protect the shopping cart details widget component what do we what do we got to do here yeah so now that we are pre-rendering on the server we want to avoid the ui flickering uh so we need to pass down the model to the webassembly component so we did that already that's this thing right here okay yeah and we also need to make sure that the shopping cart stays rendered on the page until the user is authorized on the browser we can do this because we already authorized the user on the server so that we know the user can access this data but the webassembly application takes some time to establish the authentication context and determine that the user is authorized so let me send you a snippet that will do just that all right let me grab that so this is a updated version of our protected component oh wow okay looks like we're rendering the shopping cart details widget a lot more times yes so what will happen is that we will pre-render the shopping cart on the server but with the buttons to remove items disabled and we will wait until the user is authorized on the blazer web assembly application to enable them okay all right so that makes sense let me go ahead and save that and let me go back to the app so now if i click away it's doing its little refresh thing click away let me add a a new light bulb oh wow yeah let me refresh refresh refresh refresh fresh it loads fast and smooth like before and i can see that the the button is being just briefly disabled before the uh what that's the pre-rendered version and then when the authentication states established it becomes enabled and now i can remove it so we did it wow we were able to add some client-side interactivity to my mvc app um using blazer without having to write any javascript thank you so much javier no problem dan i will send you my bill oh man cool all right so just in summary what we just saw is how you can take an existing mvc app and add client-side logic to it using blazer server or blazer webassembly we saw how you can improve the perceived load time using pre-rendering and how you can flow state from the server to the client we also saw how we can make authenticated api calls from the client to apis on our server we hope you've enjoyed this this session and that you'll try out blazer and dot net 5 today there are many more blazer sessions at dotnet conf many more today and then a whole bunch tomorrow and on the third day as well um we thank you so much for watching and we'll be happy to stick around to answer some questions all right thanks so much stan and xavier that was awesome i think we have time for at least one question we got a ton of questions so let's just do that real quick uh here's one from iraqi and they want to know does blazer support other web assembly widgets written in different languages c plus plus rus that's a great great question so blazer is just built on open web standards right it's it's web assembly websockets html css and blazer supports uh doing interop with javascript like if you have javascript code that you want to bring in you can call into arbitrary libraries like you may have some existing libraries that you want to reuse so with a webassembly widget i can imagine that you could try to call into that that webassembly module using javascript interop um there's no like uh direct mode right now for calling from like the blazer webassembly runtime into a different webassembly module that's not a thing that exists currently but you may be able to do it using javascript interop cool awesome all right thank you again uh for this awesome session

Channel: dotNET

Views: 55,556

Rating: 4.7833934 out of 5

Keywords: .NET

Id: CEjqhTGrqDY

Length: 29min 1sec (1741 seconds)

Published: Thu Nov 12 2020