Spring Boot + HTMX = Easy Full Stack
ฝัง
- เผยแพร่เมื่อ 1 ธ.ค. 2024
- In this video we do a code review of a web application that does dynamic partial page updates - rich interactivity on a web page - without any complex JavaScript frameworks or tooling.
GitHub repo covered in video:
github.com/wiv...
The secret is combing Thymeleaf Fragments and htmx.org - by just adding a few htmx attributes and return fragments of Thymeleaf HTML, your web application becomes dynamic.
Many common UI patterns are shown, including infinite scroll, instant file uploads, and more. Dynamic websites with Java have never been easier.
Tech covered:
Spring Boot, Maven, Thymeleaf, HTMX, hyperscript, WebJars, npm via WebJars, and much more.
Table of Contents:
01:03 - What is HTMX?
03:31 - GitHub Sample Project
04:30 - Running ToDo sample
06:15 - Maven pom.xml review
07:36 - WebJars to access NPM modules
10:03 - Spring Boot code review
13:26 - Thymeleaf fragments
19:24 - What is hyperscript?
21:53 - Lots of HTMX demos
22:49 - Infinite Scroll demo
23:45 - Handlebars template example
25:04 - Input catalog demo
Many thanks, Will for this video. As you mentioned at the beginning of the video, they are some backend guys like me who do not want to maintain two code bases for the same (Business) functionalities. Definitely, I have to explore htmx.
Lots of useful information complementary to the topic.
Thanks for sharing! I also saw the talk from Wim de Blauwe here on TH-cam and am now enthusiastic to try out Spring Boot in combination with HTMX.
Nice! Also Wim has a book which now covers both www.wimdeblauwe.com/books/modern-frontends-with-htmx/ also fyi there is a bundle w/related stuff
Absolute legend! Thanks
Looking at your github repo, is it correct there is no hot reloading? What is your workflow? Make changes and then restart the server manually? To enable refreshing I added the following to resources/application.yml:
thymeleaf:
cache: false
prefix: file:src/main/resources/static/public/
IIRC I was basically getting close to hot-reload by just refreshing/touching in IntelliJ w/Spring Boot Dev Tools. That looks better. :)
What is your opinion as a BE engineers can we build modern and beautiful top bars and side bars for example with SSR?
Sure - just takes work. :)
Really appreciated this video, thanks. Very useful info, delivered articulately and calmly!
Quick question I don't see already answered: which IntelliJ plugins are you using? There some different (ie better) syntax highlighting/differentiation going on for you than when I try the same, so I presume it's plugin-related...
also you're able to click through from the thymeleaf template return (e.g. "todo") straight to the html file, whereas mine doesn't know the declaration to go to...
I have the bundled Thymeleaf plugin turned on. It's part of the paid (not free) version.
www.jetbrains.com/help/idea/thymeleaf.html
I'm on the "done" side of more than a few SPA projects and I can tell you that maintining logic on the frontend and backend is far too painful for the benefit of SPAs ... and I've kind of forgotten what the benefits were ... hudreds of NPMs that need to be kept current. Ugh. The list goes on.... so thanks for this. Your repo and this video really got me started. One question: I will try Handlebars, Thymeleaf and j2html but can you recommend one approach that you might like over the others. I like the promise of j2html, but do you know of any walls we might hit with it + htmx? Is Thymeleaf our best option?
If you want to stay fully in the Java/Spring Boot stack, IMHO Thymeleaf is the most well documented and popular. You will find a ton of resources, including some great stuff at www.wimdeblauwe.com/ including many more examples of how to use Thymeleaf w/HTMX.
@@ChangeNode Thanks! I had just purchased Wim's e-book on Taming Thymeleaf. I appreciate the guidance.
Thanks.
What is your opinion about mix htmx with Alpine JS?
Works great! :) The two obvious choices for htmx pairings are hyperscript and AlpineJS.
I think importing JS and CSS libraries using CDN make the page faster in loading unlike using WebJars
Totally, that's a whole front end convo that is kind of outside the scope of the focus of this one. Mostly I'm just showing WebJars as an option, but yeah, depending on what you are doing may or may not make sense. I think in 2022 if someone is really worried about that sort of thing I would push them to a more robust front-end option with modern front-end tooling. Hmm... that would make a good video, lol.