Spring Boot + HTMX = Easy Full Stack

Подписаться 9 тыс.

Просмотров 18 тыс.

50% 1

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/wiverson/htmx-demo
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

Хобби

Опубликовано:

24 авг 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 19

@arnaudpoutieu1331 Год назад

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.

@aejazmuslim2183 2 года назад

Lots of useful information complementary to the topic.

@laserlock6491 2 месяца назад

Thanks for sharing! I also saw the talk from Wim de Blauwe here on RU-vid and am now enthusiastic to try out Spring Boot in combination with HTMX.

@ChangeNode 2 месяца назад

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

@harmonicseries6582 10 месяцев назад

Absolute legend! Thanks

@aza484 Год назад

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...

@aza484 Год назад

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...

@ChangeNode Год назад

I have the bundled Thymeleaf plugin turned on. It's part of the paid (not free) version. www.jetbrains.com/help/idea/thymeleaf.html

@ivanivanov7617 Год назад

What is your opinion as a BE engineers can we build modern and beautiful top bars and side bars for example with SSR?

@wiverson Год назад

Sure - just takes work. :)

@lts8683 Год назад

Thanks. What is your opinion about mix htmx with Alpine JS?

@ChangeNode Год назад

Works great! :) The two obvious choices for htmx pairings are hyperscript and AlpineJS.

@stephennewport92 Год назад

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?

@ChangeNode Год назад

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.

@stephennewport92 Год назад

@@ChangeNode Thanks! I had just purchased Wim's e-book on Taming Thymeleaf. I appreciate the guidance.

@laserlock6491 2 месяца назад

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/

@ChangeNode 2 месяца назад

IIRC I was basically getting close to hot-reload by just refreshing/touching in IntelliJ w/Spring Boot Dev Tools. That looks better. :)

@lts8683 Год назад

I think importing JS and CSS libraries using CDN make the page faster in loading unlike using WebJars

@ChangeNode Год назад

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.