.NET 8 & Blazor: Server Side Magic!

hey Bobby here from coder founder and I'm working on an app called blog car creator and I'm building it with Blazer and net 8 and I came across a feature that I think everyone should know about when considering blazer for their next application so let's look at um a little bit what this app does then I'll talk about the feature I think everyone needs to be aware of first let's add up a new blog card to my app here so I'm gonna say taco cat a coding challenge and I'm going to add a prompt here for my image so I'm using um stability Ai and CV to generate a summary based on the title and a new image here so we hit save here now notice right away that I've changed the state this button by adding a spinner to let the user know hey I'm going out to the server and I'm doing some stuff but what you may not know is I'm not writing any JavaScript to change that state now you can see here our um application came back and we have a new summary and our AI inspired image kind of cool our Tony start cat there um and you're probably thinking hey Bobby I've been building web form applications or I've been using NBC for a long time that's really nothing new okay but once you understand what's going on behind the scenes here I think you have more appreciation of what Blazer's actually doing so let's understand the architecture of this app what's actually been built and then let's come back and look at some other features in this app now the thing that I'm using here is I'm using forms and I've built this app completely server side so let's look at what our form's doing so we have a form on our page here that has the title and the image that or the image prompt that the user wants and we send those values from our form over to our server so this is a remote machine running and that has some C code on it and it calls stability AI an AI an API for that and API for chat GDP and returns a summary and a new image and then we take that information and we save that to a SQL database we also run a query against our SQL B database to get all of the cards or the current card Block cards that we have and then re we assemble that into an HTML page and we return the entire HTML page to the browser and replaces the current okay so we had a page when it first started out before the form post then we make the form post we go to our API we save to database and then return the the entire new page with the new post and all the existing posts right and this has been traditionally called serers side programming or this is a serers side application now this has some pros and some cons to do it this way some of the pros are I believe these are easier to build with the modern Frameworks are out there today and you may be using NBC or razor Pages or web forms or some other some of the Java flavors to build it I think they're pretty easy to build one other feature that's important to note is that the code is executed on the server with react and angular your code is on the client meaning that it's downloaded directly to your computer or here the code is never downloaded to the client it only executes on the server and that we also can validate the inputs on the server and so we can make sure that all of the values that we're expecting are there we can also valid that they're in the correct format and so a lot of this leads to the secur application but by being able to validate the inputs on the server and our business logic and our code is kept on the server as well so someone can't download our source code which may be an intellectual property or it could be used to uncover a way to attack our application so this does limit security like xss or cross-side scripting or seel injection um doesn't completely eliminate it but Blazer has built-in um antiforgery tokens and then you should be writing your um queries in way that avoids SQL injection but that also runs all on the server so they can't change um how these the code is written and our client ends up being super fast because it's just our HTML and there's no other things happening so when our page does come back it's going to be pretty quick now Service app Frameworks like this like web forms NVC and razor Pages have been around for over 20 years so it's a well-armed path by Microsoft and other vendors and this is well thought out and and served us well over the years but there are some cons to form posting form posting usually causes a page flash or a refresh meaning that the entire page is replaced and since it's replaced our browser will Flash the old page while the new page is being written there and it'll cause a flash or a p page refresh this also can cause a loss of navigation let's say you're halfway down a page of entered in a form for a mortgage and it's a really long form and then you hit submit and the page comes back and you lose where your place was a lot of times you also without view state or something like that you can also use lose the state the application if it's not pushed back from the server so there's a lot of problems with with this as well and every action that you have is around trip so when you think about that bandwidth and server speed and load or bottlenecks now it's less than it used to be if you go back Circle 20,000 2000 2002 bandwidth was way less than it is today and servers were a lot slower now with modern um modern clouds like ads and Azure that's not as much as a concern concern but the server can get busy can get overloaded and not every user has super high bandwidth okay so they are B bottlenecks we need to con concern ourselves with and these are some of the main reasons why we even have JavaScript Frameworks because JavaScript Frameworks try to address some of these problems with Forum posting but what if you could get all the benefits of a server side processing but the app behave like a client side app without writing JavaScript well what I'm about to show you is you can do this with blazer let's check it out okay so we're back here at our um our app here and you notice here I've got some buttons here a little pencil and a delete and what these really are are links so if you're looking in the bottom left corner down around here when I Mouse over it you will see that'll pop up and it'll say edit equals 89 okay and that's a query string and what it's going to do is when I click this it'll reload this page with a query parameter okay now we're not sending any new information from a form post this is just a query parameter and watch what happens it renders just this card and gives me an edit form and so now I can say this great for interviews something like that and now when I click save it makes a post back to my SQL database and then it returns everything back to the page so this page was actually replaced but if you notice here we've got a scroll bar here nothing moved all right so I'm going to scroll down here and show you this again so we've got a couple of other articles that we already created here we'll take this one in the middle because the the middle case is always the problem when you're doing inline editing I'm going to click edit here and I'm say in fiz a coding challenge um is awesome something like that solt let's say solved I'll hit save now you notice that that my browser bar my scroll bar here never moved and it kept its location and you're probably thinking okay did you do that with a form poost or is there JavaScript involved because normally this is behaving like a react app or an angular app or something written with JavaScript on the front end and we're calling over to some API and we're just doing these inline editings and it's not this is all done through forms and so if you click here you can see it's rendering here and I got a form here so we can put it back and I can hit save kind of cool all right let's add one more card here and say breaking into Tech a developer Journey so we can see it one more time and then we'll look at the code here and see if uh we can figure out what's going on here so I'm going to put my image prompt here it's save notice here the state of my button changes and it's going it's posting this form back to the server it's called stability AI chat GDP saving it to a database and it's going to return a new card which it just did okay so now we have a brand new image here and we have our new summary all generated from it all right now one other thing that we can do here too I've got another action here and I've got delete here and you can see here at the bottom if you look in the bottom left down here um it says delete equals 89 so this has an ID with it and I can delete this card and it rerenders it again with a different form all right I hit delete and it's gone and notice my position on my brow browser didn't change but the data did because I removed that card from the database right and this is all done server side without any need for JavaScript so let's look at the code here and um I think it'll make more sense when we look at the code now this is a razor page now one of the great things about Blazer is it does have a really sophisticated view engine or templin engine that allows you to conditionally make your front ends now this works client side in web assembly also works server side like what you're seeing today all right and this is called SSR server side rendered now what you see this is um I think a lot of development teams are thinking I need to make everything interactive I need to do it exactly the way a JavaScript framework could do it but because we have enhanced page navigation um and that the way Blazer is rendering the updates to the page instead of it Returns the whole page but it's smart about how it writes that to the page instead of just replacing it it patches in the updates and that's really slick the way it does it and we don't have to write any code for this to happen but let's look at razor syntax here you can see at the top of my form here I have this thing called an edit form now edit form is a traditional form tag the reason we have Ed edit form here is because we want to take advantage of the Blazer edit form component that allows us to do things like validation on the client side and on the server side and so these are built in and then you know if you've coming from react come from angular na um validation and while it's possible to do and everyone does it every single day it's not the most easiest thing to accomplish right and so what we can do is post this form back when our model is valid which is kind of cool which means that if someone hits the post button and the model isn't valid based on whether something is required or being in the right format it simply won't post and that's kind of neat okay the other thing that's built into this form here is um support for antiforgery tokens or to avoid cross-side scripting meaning that someone can't stand up another website create a form that does the exact same thing and post to this endpoint and this will will know that it came from the place that it needs to come from because it generates a token on every render of this form all right now you can see here we also have our C code here our razor syntax starting with the at sign and we can conditionally change this form based on values that we see and you can see here this is where this spinner happens and then this is where it just says it's just a save all right so it either says save or we have this spinner showing based on this variable called loading okay so let's lookit how that could work I'm going to go down here to our code behind and so you can see here I have this private bull called loading okay and it just it's true or false navigates are true or false and if I run the create blog card task all right it'll set loading equals to true and then try to make our call to our server side and then um when it's complete it'll set it to false and it'll change that right back now what's cool about this is this is just a variable the values change based on what's executed here on our code and the other thing you need to know is that this code isn't running in the client side it's not JavaScript code this is a fully backend server side um C method that runs on post on the server and this doesn't run in the client at all and so it changes this but our U I changes up here at the top here it changes automatically and then it still goes to the process of rendering everything else now how that's achieved is we also have a for each Loop here that's looping over our blog card list right and so our blog card list is being set from our backend process okay and you're thinking um well this isn't done yet how is the page being rendered before this is done I thought it sent back the whole page and that's true it does but one of the things that's important here is we have this attribute called stream rendering which means that there's no signal R there's no websocket there's no client side code running at all it just keeps the HTTP request open for a pretty long time and it'll conditionally render it based on the values that it sees inside of our code so that means that it goes and posts the page back all right and it has a current set of cards but this loading values change so it'll change the spinner and so now you have that part of the page being changed the um the async process create Block cards finishes it sends those results back over the wire and then it patches in the new card that we just added all right and then it loads the page and sets that the false and our page changes and all this happens in one post it's a really long HTTP request that they keep open and through some Blazer magic they can conditionally change this page based on values or things that's happening Inside My Method okay it's pretty slick all right so let's go and look at it one more time and um we can look at our card here so now that you've seen how that work you can see here now I have the for each Loops happening here and building all my cards out and then if I click on this and I just want to change something maybe put a comment in here and hit save that happens really quick now the thing that you need to understand is that this is blazingly quick and that's why people like server side rendering because it is really fast unless you have a long running process on the server side then it can take a little time to render but in the case of streamer rendering we can give notifications to the user that something's happening and then when it does happen the page just updates and so we have a really nice user experience only using forms and I think this is a game changer now one of the things that I think is going to happen as people look into Blazer and they're building applications with blazer um I think early on in the process when Blazer was being developed people were thinking well how do I build it with web assembly or what render modes are we going to use we make everything interactive and that's what we're going to do but once I you see this and you're like oh well I really don't need this to be interactive I can conditionally render this page with forms and links sign me up and so you can see where a lot of things even this inline editing here is fairly easy to do and you can see as I go through here as my query string changes my render changes too you Noti that these went back to the display mode and this is now in the render mode pretty SL all right so that is server side rendering um and it behaves like react it's pretty pretty fast and I think this is a game Cher for Microsoft and the Blazer team and I really believe that a lot of people are going to adopt Blazer coming in 2024 so head over to coder Foundry and get on our Blazer course coming in 2024 where you can learn about Blazer and building web applications whether you're new to this or you're a veteran coming in just want to learn the new stack we're going to have a course buil for you anyway I hope this helps good luck and keep coding

Channel: Coder Foundry

Views: 5,917

Keywords: learn to code, dotnet, .net, c#, programming, software developer, coder foundry, coding bootcamp in north carolina, blazor, .net8, .net 8, server side rendering, dotnet 8, c# projects, c# programming, programming language

Id: 6SaYkzxAULo

Length: 18min 23sec (1103 seconds)

Published: Fri Dec 29 2023