.NET 8 Blazor SSR + HTMX

hey y'all Wes here I've been working on a proof of concept to combine Blazer and HTM X and I pretty much got it complete and I wanted to show it to you guys so this is the new proof of concept for spark.net this will be the default template and let's hop over to the code so the only thing different than a reg regular Blazer SSR app is this uses HTM X instead of the normal blazer. web.js so the normal blazer. web.js adds enhanced navigation and form handling which is really nice but HDMX does the same thing but also adds quite a few more features uh that we'll kind of go through in this demonstration so the first thing I want to show you is the form handling so here's a edit profile page you can edit your name or you can update your password now normally in a regular Blazer app using the the enhanced form handling you would have you know your edit Blazer component here then you'd have two forms and you'd have to supply names for those uh but using HTM X I've went ahead and I've split them up into two different components so I have an update profile form and update password form and these are your standard edit forms but I'm adding HTM X directives to it and I also give it its own uh URL on the app page directive so now this component can be called through an htps request so on the initial profile edit load all it's doing is rendering the forms it has nothing to do with the actual urls but when the form submitted it can call itself and this is nice because one you keep your page scroll because the only thing being replaced is the form on the page and two all your validation messages will show up so if I come back to uh the browser and I hit save I get immediate feedback that all these are required now this is actually doing a trip to the server to do the validation and we're just getting back the HTM as a response and then HTM X does everything else from there as far as updating the Dom uh so we can go ahead and fill this in now I'm putting in a pass my current password is incorrect here so if I hit save immediate feedback again that the current password is incorrect and then uh if we actually put in the correct password hopefully that's the right one and hit save okay yep that was the correct one so our initial response passes the form values uh then in our password form on valid submit Handler is called which is the onsubmit function here we take care of all the password updating and then finally we do I added an extension method called X navigate 2 on the navigation manager this is similar to the regular navigate 2 except this one simply pins a header now HTM X allows you to appin headers to tell HTM X to do certain things the HX location header accepts a URL and then on the client side HTM X will do a location update uh but without reloading the page so if you come back here you'll see in our headers in the response we have an X xh location of profile edit and then you'll see see down here we have another Network request where HTM X says oh we need to change the location to profileedit so the page is essentially reloaded and I mean we're basically doing you know a a standard uh form post redirect here but there is no page reload and ideally I'll probably add in the future some sort of uh like pop up here saying your password was updated so the user can get some feedback uh the the form up here works the exact same way if I remove this the name field is required we're keeping our page page position it's not moving uh and then if we put in an actual name here you'll see everything's updated even our nav is updated here and that's because we're posting the form our headers our response headers say we need to change the location to profileedit so HDMX does uh a second request requesting the page and a standard get request which refreshes all the markup including this nav so that's why we're getting uh this great feedback and the entire UI is being refreshed with that new name now the second thing I want to show you is on our homepage I have this random number generator and you'll see here it's getting updated about every two or I think it's every two seconds if we go to our Network tab you'll see here we have all these uh get requests that are just being sent every second and we're getting a response so how this is working is I have a component over here called random number with an app page directive setting the URL to components SL random number and then we're using some HTM X directives to say every 2 seconds submit a get request to this URL so it's submitting to itself self and then our Blazer component on initialization is updating that random number setting it in the markup and returning it back to the client and then HDMX updates the client Dom again so it's really nice because you can have components contained to themselves where you call them the client sends a get request to to a single component that component updates itself sends back the updated markup and then h H TMX handles updating the Dom from that so everything's nice and contained this is uh this is something I've been working on for a while and uh it's really nice how agnostic HTM X is to where you can plug and play in different Frameworks and it really fits seamlessly into Blazer and adds a bunch of extra features that you wouldn't get with normal Blazer SSR but again this is all just server side technology so you're keeping your your SEO you're not losing that because you're using you know wasm you're not having dependency on websockets uh but you still get this rich interactivity on all your pages that's it thanks for watching

Channel: Spark Labs

Views: 4,554

Keywords:

Id: hFCnyoS8jx8

Length: 7min 18sec (438 seconds)

Published: Fri Dec 15 2023