Spring Boot + HTMX = Easy Full Stack

hi my name is will and today i'm going to show you how to be a full stack java developer without writing javascript so i'm going to assume that you're a java developer and that you'd like to build websites but you don't really want to work in the javascript ecosystem you want to stick in the java ecosystem so you want to work with things like maven you want to write java code you like writing html and css is fine but when you start looking at having to fold in npm and the javascript tooling you wind up having to maintain two different code bases but you don't really want to do is be in a situation where you're having to run a java spring boot app and it's just doing json services work and then you have a completely separate javascript framework and then you're constantly trying to keep those two things in sync let's say instead you want to build a high performance app you want to use java to do it you'd like to be able to update the page dynamically like you would with javascript app but you don't want to have to deal with that tool chain okay so the thing that makes this all work is a framework called htmx and what we'll see here is an example we just load in this script and then for the htmx javascript itself and what it does is it looks at a bunch of additional attributes that you can add to your html and then dynamically update portion of the page what this is saying here is in this case if i've got this button and i click on it i just want to go ahead and swap out the content so before we go into the java examples i'm just going to show you some of the examples up here so let's say that we want to add in a very simple infinite scroll so the way this works is here we want to be as you scroll this page is it goes ahead and it loads additional data and it'll keep doing it forever the way this works is we're just saying here's our row and go ahead and call make get requests whenever something's revealed and then swap at to the end so that's all the changes that we have to make to html in order to enable this what we're doing here is we're using a get to fetch the additional data it's sending back html that just gets added into the dom as we scroll along it's really simple easy way to do this let's go ahead and look at some of the other examples here's click to edit so in this case here we have a div with an editable page and then this is the form that comes back and then it pops it in so basically when you click this button here it issues a request with the click to edit and then this is the form that gets put in and then once the form is submitted with the button here it then swaps it back out either with the contact or just with a regular submit and here we can see it working just click on a submit add some things hit submit that's it so the page isn't refreshing just this one little portion of it so as i played around with htm x i thought was pretty cool it's got lots of trick lots of different triggers for things it's got animations in it history websockets tons of stuff a bunch of which i haven't had a chance to play with yet but what i wanted to do is be able to take htmx and then show integrating that in with spring boot for the server side so i went ahead and created a project that i put up on github to illustrate how this works so if we go to github and we can see my prop my demo project here so this is my project up on github and what i've got here anybody who wants to pull it down check it out can you can use it as a template what i thought would be fun to do for the rest of the video here is to just do a quick code review to show you how this works and how the spring boot side plays with hdmx to give you nice dynamic pages so let's go ahead and i've got my project open in intellij but before i do anything here i'm going to go ahead and just run the app so you can see what what i'm what i'm actually have built so i'm just running the spring boot app like normal the only thing that you might notice is that there's a lot less debug noise and that's because i've got login configuration to turn down spring boots usual logging noise and you can see how much faster that launched when people complain about spring boot taking time to launch just turn off the logging and it launches a lot faster all right so let's go ahead and hit localhost and here's the app let's go ahead and look at the piece of code that we're going to tunnel into today which is the little to do app so this is the standard javascript sort of example app it's how do you do a to-do list so this to-do list lets you add things new things and i can also remove stuff cool and so the animation is being handled by htmx there we go and if we go ahead and inspect this and we look at the network i'm going to go ahead and delete this and you saw a little delete that hit the server and came back and let's add something and we hit add and what we'll see here is that's actually hitting a request to add this little chunk of html now if we click in and look at this we can actually see a preview of it so this is because there's a little chunk of html and here's the html that's coming back so if we look at this a little more closely we'll see that there's nothing else in the page just the little fragment that's then getting appended in so that's how our web service from the spring boot app is returning a little html fragment and putting that in the page we can see that we were adding things dynamically to the page and changing stuff but if we like look at the github repo there's no javascript in this project at all instead it's all just java and html and teeny little bit of a hyperscript which we'll talk about later so for the code review let's go ahead and just start by looking at the maven project file so this is just the standard palm and what we can see here is that we are pulling in the spring boot as the base for the project spring boot is the parent and what we're doing is i've i did go ahead and fold in some additional dependencies for things like spring security and time leaf which is a rendering frame which is the rendering framework because i i did add in a login page um there's some stuff related to spring security but we're not going to look at that for this if you wanted to look at more closely the spring security demo actually shows a little bit of integrating some of htmlx's features with spring security so that way things like if you've logged out of a page and refresh a request it'll update the whole page nicely until when you log out so most of this is just standard spring boot staff we added in time leaf layout dialect so that way i'm able to reuse a lot of the header the header declarations and several different pages without repeating myself and i'm using assert4j assertj for assertions in my test cases and here are the web jars so the web jars are the first thing that's that's interesting i think for for a lot of developers who are just have been doing rest services with java basically web jars allows you to suck in anything that's available up on npm as a java project so let's go ahead and just find let's go go ahead and go to web jars real quick and what you'll see on web jars so it's java it's client-side libraries packaged into jar files and so what that means is that like we can go in here and see all sorts of classic packages like jquery so here's jquery and i can see that if i just copy and paste this in i can add in a web jar which will then grab an npm package and pop it in so what slick is is if i want to add anything else on on the np npm if it doesn't have a web jar today you can just go up here hit add pap it pop in the npm information let's search for jquery if i wanted to i could redeploy jquery 36 but i don't actually want to do that right now but the part of the idea here is that any any npm package that is out on the net maybe i want to grab a javascript charting package maybe i want to grab i don't know whatever i can just go ahead and pop in the the coordinates and if it's not already available as a web jar all i have to do is pop this in and then it will create a jar for me that's managed by maven which is great so that's what this is doing now if you're using spring boot with web jars it will automatically put all the web jars that it downloads onto the path for the browser to be able to load so let's go ahead and look at that really quick so here we can see i've got some declarations on the web jar path and then here i'm referring to the bootstrap css and javascript here's the htmx here's some icons right so i'm basically able to just simply add web jar declarations to my palm these are all think packages that would be up on npm and now they're available in java which is pretty cool so let's go back and let's go ahead and look through the rest of this palm file plugin management is just because i'm a little fussy about making sure i've got the current versions of all the different maven plugins and otherwise nothing particularly unusual or interesting i do have this dependency report generation turned on so this will tell me when i write run my site command with maven if any of my dependencies are out of date which is pretty nice especially with web jars and things like that where some of those may be moving pretty quickly it's very nice to see now let's look at the project structure a little bit more closely so most of this is just pretty vanilla spring boot stuff let's just sort of start from the high level the demo i have a bunch of controllers most of these controllers are just open to the public i'm not using spring security there is one controller where i show some spring security demo stuff what we're interested in right now is the to-do list so we'll actually start by just looking at the to-do list itself so basically what we have here is a standard spring controller here i've got the default mapping for the to do which is just simply taking the page that comes back and returns the to-do view and i go ahead and add in the current date and time and then i also just to show for the rendering and then i also show i'm just adding in a string for the item and then it returns the to-do so i can go ahead and open this up and this is the html for the to-do page so let's go ahead and start at the top and take a look what we got here so i do have one little bit of custom css for the swap which is when um it's that's where you see that little animation the css animation that plays whenever there's an element being removed the content is you'll notice i don't have any declarations for the javascript to the css up here and that's because i'm actually pulling that stuff in with a content fragment so if we see the document itself is saying to be decorated with layout.html and i can open that up and this is the wrapper for the whole page so every page in the project uses this same wrapper so this is where i've got my standard declarations for my view my css and my javascript stuff i do add in a little bit of html specific css for the indicator so if there's a slow page load it'll automatically display a little icon and then here i'm doing some really basic setup for a nav bar at the top a loading indicator so that's the slow spinning circles indicator that would appear if x was slow to respond and then here you can see i've got the fragment content page content goes here so the way this works is that when someone hits the page asking for the to do view the to do view set notices that it's being or requests to be decorated by the layout html file so that provides the wrapper and then the wrapper kicks in wraps the page back and then it returns the full page with all the content in it specifically the content fragment here where it's saying that this is the actual content for the page so that's what's going on with layouts it may seem a little confusing but what it means is that when i'm building out my templates with time leaf i'm able to just build small little page html pages for each view and then i have one master layout that's controlling everything and people can you can use these kinds of layouts and fragments for things like standardizing your navbar or your footer or what have you as well okay next step so that's what that layout up here is this is the decorator and then this is saying this is my actual content so this is just the sort of the ui for wrapping it up now the part that's kind of interesting here is i have a table with the to-do list and then i've got a block here and this is the fragment here that represents the to do item so this is just standard timely stuff but the only thing that you'll notice is that i do have this timeline timely fragment declaration on here so i'm saying is is that this block of html is a fragment so when it's first rendered that is just ignored so let's go ahead and go to the running app just so we can see what's going on here okay so what happens is when this page is first requested it goes ahead and it fetches it renders this whole view from and it's getting the data to render this from the controller including this item but over here we can see it says get stuff done so here we can see the fragment that is rendering in this case this to do item here but you may notice that says get groceries over here and the default here is saying get stuff done and that's because time leaf will automatically replace this text with whatever values being passed into the passed into this view so let's go ahead and look at that controller again a little bit more closely and what we see is that when the for when the page is first rendered it's going to pas stuff in an item get stuff done and this is just a demo placeholder thing but then it's going to return the view the to-do view so the first time the page is rendered it's going to put in this get stuff done now we can see a couple of one interesting bit of stuff here already which are these hx attributes confirm target swap trigger and then delete so what's going on here let's go ahead and click this delete button and see what happens so when i click on the delete button htmx confirm is already is what's providing the are you sure confirmation and so i say sure now it goes ahead and deletes it and if we go ahead and add another thing again here we didn't put anything in so if i say let's go ahead and add in something and let's go ahead and look at the inspector so we can see what's actually happening over the network here when i click on delete it did actually go ahead and send back this delete but there's no response nothing came back except for the delete and that was just a delete request so let's go ahead and look at what happened here so right now i have nothing i have a delete on the server but i actually don't do anything with that and that's because this is just a demo but i wanted to show that there was still a server ping for delete occurring now let's go ahead and look at the ad so for the ad i have a little text field input here that's what this is and then i have some htm x on this button so i'm doing a couple of things so the first thing is on htmlx after request put this into the new to do value so what that's saying is is that when i click the button ht hyperscript is going to fire up and say that on this button when it first fires or when it's first initialized it's saying anytime that a request is sent to htmx go ahead and clear out the value in this to do and that makes sense that's basically just a little nice utility thing to clear the value out now this is hyperscript and we can like i said we'll come back to that later and basically hyperscript is another way of writing javascript really cleanly and simply um so this is just listening for an event and then it's going to stuff a value into this to do item into this form right up here the new to do it's got an id and then it's saying here the most interesting part is when i do a post go ahead and hit the post url and go ahead and include the new to do so that's this id here so it's saying when you click on this button grab this this form element and include that into the request the post that we're doing right here i'm saying before end so the target is the to-do list so that's the the actual list up here and we're saying before the end so go ahead and take the html that comes back from this post and stick it in up there and the trigger is the click and the classes are just that's just bootstrap stuff all right let's go ahead and submit the request and once again when i hit the submit on that we can see the response down here and sure enough we can look at it sent the request and then it sent a response and you'll note that the form data it did include in the form data the hello world from this button that's interesting because it doesn't actually it's not even actually wrapped in a form element instead all i'm doing is just clicking on this button and then grabbing this and then submitting the data back so let's look at the controller and see what's happening so if we look at the create controller it's a post and then what we can see is that it's looking for the new to do parameter which is the same one that we have right here and then it says okay let's go ahead and stick that to do into the model for what we send back this is the really interesting part here is that when we return we're saying return to do so this is just like the controller return up here except that we're also adding in this little set fragment declaration the fragment declaration is what tells time leaf go ahead and fetch just this portion that fragment so this is built in timely functionality all i have to do is if i want to grab an existing fragment use that colon colon syntax and then boom now i've got it into the page that's really all there is to it the controller all i'm doing is just returning the view and then when i want to update a fragment i just return the fragment i want to update it's not that complicated the one the other last thing is i do think it's worth taking just a moment you'll know i used a little bit of hyperscript so hyperscript is a very simplified language for working with the web it's in comparison with javascript it's much cleaner and simpler let's go ahead and compare some of the javascript with vanilla javascript jquery and hyperscript really quick so this is an example this is actually the fade and remove is exactly the thing that we're doing right now so this is what you would do in regular javascript you'd set a transition then you'd have to wait for the animation frames to make sure the frame rate's right and then you go ahead and add in the transition and remove it so that's how that works here's a similar thing written in jquery where i'm looking for the div to remove attaching a click function to it with the fade out and then once the timer finishes it removes it and here is the hyperscript version on click transition opacity to zero then remove me so obviously the hyperscript is much simpler and easier to work with and part of what i really like about hyperscript is especially for anything like event handlers or what have you is that it's async transparent so i'm not having to worry about handling all the javascript async stuff to be able to use it i can just write really simple little scripts and then i attach them with this underscore so that's the what that's what hyperscript is looking for for how it attaches hyperscripts to elements on the page so that is what i am doing on the chunk of hyperscript here so now that we've seen a little hyperscript we know that we're adding a button on the button when the button's first initialized we say the button is going to listen for html after request events and then it puts that value into the value for this id and that's it so that is a very very quick demo of using spring boot with htmx to send html over the wire and then update your pages live now this was a very very simple example it was actually it's it's kind of intended to just make it really really clear what's going on what's one of the things that's really slick about this is it's extremely easy to test it's extremely easy to understand what's going on and if you've been working with java and timeleaf and all that good stuff before then you get to stay in all that ecosystem so one last thing before you go i wanted to quickly run through the rest of the demos just so you can see what was in the project for the htmx demo stuff and know that you've got a bunch of great stuff that you can crib for your own projects so i still have the project running the server running it's just the spring boot run and then here is the application and over here is intellij with the code so i'm just going to flip through really quick and show you the other stuff so for click to edit it's the same thing as the htmx demo but this time it's on top of spring boot click to edit hit update that is the most interesting part is the click to edit controller which you can see is really tiny and in this case i've got a couple of separate forms it would actually be really easy to just make this one html page and then just swap out the pieces if we go back let's look at the next one infinite scroll so infinite scroll this is a classic pattern and basically you want to just be able to let data keep loading you'll notice i have the indicator in the bottom corner and the reason that that indicator is kicking in is if we look at infinite scroll we can see that the in this case i'm actually just using little snippets of inline html which i wouldn't recommend for anything real but it does make it simple to follow what's going on and you'll notice i have a thread sleep kicking off so that's part of what gives the little indicator time to fire off so there you go infinite scrolls really easy it's just appending little chunks of html and sending them back and then it puts those on the end really easy to do in spring boot let's go ahead and look at the next one we already looked at the to-do list the value select is just a way of updoing dynamic updates for what the sub menus have and again very very simple demo in this case the data for the popups just right there and then it returns it and this is kind of ugly but it's just a demo you get the idea now in this case i'm injecting handlebars and so it's actually processing this and returning this back with handlebars which is a different templating language handlebars is got support across a huge variety of languages so if you want the most sort of standard templating language that you can flop around between different languages handlebar is a good pick timeleaf is more java centric and has support in spring boot for a lot of extra features so it's just kind of a decision on what you want to go with there and so spring security integration that one allows you to go through a little sign in process and then you can see that if you refresh a chunk of the page and that the session's expired it goes ahead and kicks you back to the login page which that's probably worth another whole separate video but the last one i want to show you which is really interesting i think is the ui demo so this is basically every single spring boot ui control out of the box but it's implemented with this pretty simple controller here and what it's doing is it's illustrating the ways to pass in whatever's happening over here into a format that spring boot knows how to process so for example like select multiple so this is an example here so right here i've got one two three and i can hold and shift or command click on a mac and i can select different things and you can see down here it's showing what's been selected so this is showing how this ui control is bound live to whatever's going on in the spring boot controller so that's pretty slick and we can see that in a few cases we've got things like a color picker and so once i pick a color now it's actually converting that to hex and rgb so if we look down here we can actually see i've got a color string and then i'm actually using some built-in java stuff to transform that color the hex value that comes back into the rgb values it's pretty cool here's one that's a classic file picker so there we go i can see some my head is some of my headshots so i'm just going to go ahead and pick my headshot and when i see that i can see that i actually went ahead and uploaded it live so i'm doing all that with just simple javascript stuff and if we look over here we can actually see the spring boot to be able to handle the file upload so there's a bunch of other things like for example telephone so that's going to set the value but that would not validate um when i hit hit the submit button so here i can see i've submitted the form and it sent all these values back i don't have the validation turned on all of this stuff but get an idea what's coming back so that is pretty cool um check switches this is an intermediate inter indeterminate checkbox so i've got samples showing how to do that some cool stuff so there you go that's a quick overview of the all the different things that are in the spring boot demo package up on github and feel free to go up and grab everything for your own projects so i hope you like the video if you do you know what to do about likes and subscribes and all that fun stuff hope to catch you later bye

Channel: ChangeNode

Views: 18,153

Keywords:

Id: 38WAVRfxPxI

Length: 27min 57sec (1677 seconds)

Published: Wed Aug 25 2021