.NET 8 Blazor: Render Modes + Demo App Download

that coder founder were getting ready to go through a little bit of a transition as we prep and get ready to teach.net 8 and specifically we're moving away from building apps with NVC and we're going to utilize the Blazer framework now this has caused us to do a lot of research because we're having to use the.net 8 preview and naturally questions arise when you're trying to do this and we figure if we have questions about some of these things then a lot of other people will too now one of the first questions everyone will run into is what are Blazer render modes and you may be asking yourself what is a render mode but if you know what they are then you're also probably wondering when do I use them what do I use them for and what do they really do these are all questions we had in researching blazerwith.net8 so we built an application called Blazer movie to explore these different render modes and we're going to give that app to you so let's take a look so what we built here is a Blazer application that explores the render modes and you can see here on the home page we have a write-up about each type and the pros and cons and kind of the common case use cases for each of these render modes and we've grouped them together Blazer wasm down here with auto signalr kind of sits in the middle and then we have our SSR modes whether that be streaming or standard SSR all of those are our five render modes that we're going to discuss in kind of detail today and how they work this application here uses the movie DB API to bring back movies but it each page is used at different render mode and so it shows you kind of how they work and how they behave now notice here I've got these cards here and I click more button and I pop a modal which has detailed information about the movie okay so I'm going to go over how each of these work and show you how the differences between the render modes and I think this will help you understand when I should use them where I should build them now what of note is what's very powerful about Blazer is that these render modes aren't on a page by Page basis they're on a component by component basis what means that a page can have one to many components and each of those components can be rendered with a different mode and this is very powerful and it's one of the reasons people are so excited about.net 8 and that I no longer have to figure out do I want to run this on the server or do I run on the client and have to pick one way to build my entire application now I can mix and match these render modes to make it the best use case for the particular component or page as I'm building out my whole app as a whole and that's very powerful um so let's let's talk a little bit about the render modes and explain what they are so Blazer if you didn't know is a web application development framework it's built and maintained by Microsoft and it's used primarily to build web applications to bring Rich UI interactivity now they are exploring and trying to bring this into the desktop Arena maybe the mobile Arena but right now today as we talk about this we're primarily concerned with web application development now the tooling the components and the framework makes building applications I think easy and fast especially when you compare two things like react or angular and even NBC so when we we're building apps with NBC for the past several years and I think this is a game changer in the speed at which we can build apps but also the capabilities which is you'll see that we can do a lot of the interactivity with minimal to no JavaScript now we're never going to get totally rid of JavaScript because that's kind of how the browsers work so you need JavaScript to do certain things but the common things like I want to filter a grid or I want to click on a button I want something to happen no longer those interactions have to be built with JavaScript we can run those inside a Blazer and it can behave like a spa framework like it runs on the client or that process can even be run on the server but it still behaves like a client-side app and that is very powerful and that's why people are very excited about Blazer so let's explore these render modes to show you how this works with blazer underneath We have basically five render modes and one Behavior we have a behavior called enhanced navigation and then we have these five render modes we have server side rendered or SSR we have streaming rendered or SSR streaming we have server mode with signalr and webassembly what we call wasm and finally we have the new auto mode in.net8 so enhanced pad page navigation Blazer supports this by intercepting the request and in order to apply to the response to the existing Dom per serving as much as possible so let me show you um how this works right so if you pay attention to the app here let's let's look at the home page here and also Watch What Happens here in the top of the browser here so you can see here if I hit refresh this has a little spinner and it refreshes the page I'll let you I'll do that again it refreshes the page in this case the entire page was downloaded but if I click over here to movie scr or SSR you'll notice that it doesn't reload the page it just does the middle parts and now my navigation and even my footer has already been loaded and it makes a smoother transition from page to page all right so if we go back over here you'll notice that it doesn't load the page anymore it just puts the things in the middle that it needs so it's pretty smart about what's currently in the Dom and we'll let me just send you just the changes and that's enhanced navigation and so we call this a behavior because this isn't something that we set this just kind of works out of the box so let's talk about server side rendered and what server side render does let's say that we have a browser and it sends a request to go to a page and so I want to go to mywebsite.com index or you can think of it as going to that index here on Blazer movie okay when we hit that index it goes to the server the server will say okay what page is it and if it needs to go to the database or whatever it has to do it's going to return a payload in the response which will be the complete HTML page all right and so this is a complete server side rendered full page static page that comes back to the browser now you may be asking yourself a question isn't that a lot like NVC or Razer pages today and the answer is yeah it's exactly like that it behaves the same way and people think well why don't we just continue to use NBC and that's a valid question the reason is is components because components we don't really have a great component story with NBC or razor pages but now under Blazer we do so we get the same benefit of a really fast server response we get a full static page rendered which means our security and everything runs on the server and we just resend results back and this is really quick but we can um also use components to build our page and that's that's a game changer for a Blazer so let's talk about the next thing that happens here and while I'm going to demo this one let's talk about streaming mode let's say that we have you know a web page that maybe has some movies in it all right and that could be a long running process so what we could do is send a request that goes to movies and then it comes back with the first payload and so the first payload would be just some HTML then it knows it can load this could be a maybe an H1 tag that says popular movies I'll show you this in a second and then some placeholder content while the process runs and then behind the scenes the request is still open it doesn't close a request after this first response it keeps it open and eventually sends a second payload with the HTML for just the movies not the whole page just the movies and this is kind of powerful all right so let's look at that so I'm going to go over here to this SSR mode here and you can see right away that it just comes up here and just um brings up our movies now in streaming mode and I've got a purposeful delay in here to show you how this works so Watch What Happens here so when I stream it out you can see the H1 tag for popular movies came up but also had the placeholder content and then after three seconds because I put a delay in there the movies render and appear so let's do that one more time I'm gonna refresh the page here and you can notice here we got our placeholder content and boom and then our movies up here and this is pretty powerful now you can put whatever you want in here and by default it has like spinning loaders and those types of things and what I'm using here to do this is bootstrap with placeholder content gives us a little animation like it's loading that mimics what the content's gonna look like I think that's a good way to do it and I show you in when you download the code you can see how we did this with bootstrap okay the next mode that we're going to talk about is signal R and this is what used to be called Blazer server so if you've been watching blazer for a while over the years and then the releases came out we had something called the laser server and we're just going to call it server mode now or signalr the reason I call it signal R is because the other one is called server side rendered and this is called server they're different modes and they behave completely different differently all right but they're kind of names similarly so I just call it signalr mode and what this happens is I go to the request to request my movies and then it sends a response with the HTML page and then it also has a runtime to establish a signalr connection to the Dom okay so every element in the Dom is now on the server and what this can do as I have interactive components I use signalr to figure out the changes that are required for the Dom and any events that are sent back to the server it sends back data that is then inserted or patched in or overlaid into the Dom and this is very powerful so this is a lot like if you've been building JavaScript sites before using react angular even vanilla JavaScript you basically would have to do something like git element by ID and then you call an API endpoint the data comes back in and then you map that data into the Dom with code this at Blazer does this automatically and this is very powerful so let me show you kind of how this works all right so I'm going to go over to the signal R mode page here and it's going to connect up and then I've got a delay in here as well this is a lot faster than normally and I've got a delay here and it loads in my movies and you're saying well that's just like streaming it is but I want to show you this notice here that I have a more info button and so now once I'm here I need to pop a modal and then fill that modal full of information all right so it's going to load out there comma API and then it takes that and pulls all that information from my API request and it just patches it into the modal so I don't have a copy of this modal for every movie I have one template that when I click on a different more info button it loads in and now all of these are dynamically placed in it now what you should know is this takes zero JavaScript to do basically I have an object on the back end that is called movie details and if movie details changes this component will render whatever exists inside the movie details change I don't have to tell it to render I don't have to write JavaScript to do that I just change the object underlining my code and this thing will render correctly it's pretty powerful so we can look at one more here look at maybe Spider-Man here and you can see here it's loading in and I've also put a delay in there to show you that the component can also tell you that it's loading and then when the change happens it displays it correctly so what's real important to notice here is that when I click more info here I've actually already displayed the modal the modals there and then my async process completes and then it binds it into the Dom it's pretty powerful and no JavaScript to do that so let's look at webassembly and webassembly is you know what got initially everyone excited about Blazer when we saw this the first time we're like wow I don't have to write JavaScript I can run C sharp on my client and and think of this as a replacement or it does the same thing as the react and angular Frameworks so if you're looking at JavaScript front-end Frameworks webassembly is sits alongside of those and so typically if you're looking at building a client-side project you're going to either pick Blazer web assembly or reactor angular you don't use these in conjunction with each other there are separate and they do the same thing so if we request over to the movies and then we're running this under web assembly the response comes back and has an HTML page and then the.net and the web assembly runtime have to download and this is one of the weaknesses of webassembly is that it will take a second for this to happen depending on what's downloading and so you do have a delay for your initial load and initially a lot of people didn't like this or like oh that can't use that because I have an initial download time and so um that is kind of it's kind of a weakness to the firmware but if you can get over that it's pretty powerful once you get the app started up all right now it is kind of architected differently um before with server we're just making calls to our backend and it comes back with an HD H um it comes back with a response but now we have to use HTTP client over on calling out to an API and so an API is the architecture for webassembly is a little bit different a little bit more complex and uh but it is the same as if you were running angular or react you have some type of API back in you issue either a Fetch and HTTP client is the c-sharp equivalent to that and so we get Json back and then when those results come back components detect their changes and they update their own Dom and so this is where it does change from other Frameworks in that the only thing that happens is is that I get a result back and because that result came back components will detect their own changes and map them in the Dom so I don't have to write all of this Dom update code especially if you're using some light vanilla JavaScript where you write get them out by ID look for a response make sure it comes back none of that plumbing that you have to do webassembly takes care of all of that you just call the HTTP client or call the web API with HTTP client the Json comes back and then the components do the rest it's kind of powerful and this is why people are really excited about that and finally we have auto mode and I do believe um when you talk about how our apps going to get built how our Enterprise is going to adopt Blazer I think this is the one that they're going to adopt okay so the request will go out to movies and initially it's going to come back um with a server-side rendered application it'll come back with just the the um the HTML and a signalr connection just like it does in a Blazer server okay so it's rented on the server and come down now in the background it will download webassembly in the background so on a different thread it'll download that and then the next time you make a call it works just like webassembly because it'll run on the client at that point so it can either run on the server while it's downloading web something in the background and then then the next call will go over HTTP client and then pull this back as a Json response and update the Dom just like in webassembly mode and so this requires a little bit of pre-planning like how you build your components whether they run on the server or on the client a little bit of architecture and how you build this out but I think when you go to very complex or bigger websites I auto mode is kind of where everyone's going to land but the really cool thing about Blazer is is that they can you can do this on a component by component basis so let's talk about one quick thing here we did on the home page here and we'll get out of here so server side rendered um is this really quick framework that brings back a complete HTML page and it's a static HTML and it's really fast and so one of the use cases that I think is going to come here is that if you have a landing page a contact page and maybe even dashboards content that's generally only read only you can just render that with the SSR and then you can render everything else and run it on the client if you have an application all right so if you build an application say a bug tracker and people are managing tickets and and sending out emails and notifications and all those kind of things all of that can run a client side but you could have a landing page that just has your static content that tells people about the app or where to log in or just present them with a login page that could be done server side because it'd be fast they don't have to download webassembly to do it and so you can really start mixing and matching all of these render modes to do it and I believe that when we get down to Auto right here this is how the Enterprise is going to do this they're going to use a mixture of signalr and wasm for their components and let the browser figure out which way to run in auto mode and then for everything else that's static they're just going to run this as SSR and maybe even a stream so I can see us building out a dashboard for something that you log into the dashboard has like three graphs and a grid on it and you could run most of that static comes back just displays but you could also stream in and use a streaming mode to stream in just the component that may has a grid of rows or tickets in it maybe there's a lot of them or 10 000 items or whatever you could do that or maybe this component was also in the dashboard could be a signalr component so maybe you have two graphs and a grid and the grid has filtering and sorting and a lot of interactivity you could build that component to run through signalr and everything else on the page could be a server side rendered and it can make your pages fast responsive and also give you the ability to write these really rich uis and we think that this is why people are excited about Blazer go to GitHub clone or download the repo run it and get familiar with blazer because in 2024 a lot of companies are going to be adopting this here at coder Foundry this is what we're going to be teaching going forward because we believe that this is how people are going to be building web applications in the future specifically with.net and so we want to make sure that you have all the training you need to be relevant in the job market I hope this helps good luck and keep coding

Channel: Coder Foundry

Views: 8,532

Keywords: coding bootcamp, learn to code, dotnet, .net, c#, programming, software developer, coder foundry, coding bootcamp in north carolina, blazor, blazor render modes, .net 8, signalR, SSR, WASM, Web Assembly, webassembly, blazor .net 8.0

Id: u4azTLLGt8U

Length: 20min 35sec (1235 seconds)

Published: Tue Sep 05 2023