Building server-side web applications with htmx
Setup:
Please install the following:
Java 21
IntelliJ IDEA Community Edition or Ultimate
Gradle
Please clone the Git repository:
After opening the project, run the Setup and build all
run configuration.
IntelliJ Code Template
To create a new ViewComponent with one click we can create a new IntelliJ Code Template.
Go to settings -> Editor -> File and Code Templates
Click on the little plus icon
Name: ViewComponent
File Name: ${COMPONENT_NAME}Component.java
Select the ViewComponent and then click on the file plus icon next to the first one "Create Child Template"
File Name: ${COMPONENT_NAME}Component.jte
Extension: jte
Info
In each lab there are checkpoints:
You can find a branch for each lab with multiple checkpoint commits you can start over with or compare against if you are stuck:
Only the relevant imports that need to be added are shown. Imports that have already been defined before are omitted.
Labs
Lab 1: Server-side rendering with Spring Boot and JTE
This lab aims to build a simple user management application with base Spring Boot, JTE and htmx.
Lab 2: Introducing Spring ViewComponent
In this lab, we refactor the application to use Spring ViewComponent and htmx-spring-boot to delegate rendering responsibility to the ViewComponents and remove it from the Controller.
Lab 3: Inline Editing.
In this lab, we will create a group Management Page where we can add a user to a group and a navigation bar
Lab 4: Using Spring Beans to Compose the UI
In this short lab, we will use the dependency injection capabilities of Spring to show a navigation bar where we can add new items by just creating new Components
Lab 5: Lazy Loading
In this lab, we will lazily load the user table as it now contains a lot of users
Lab 6: Full Text Search
In this lab, we will enable our users to search the user table.
Lab 7: Infinite Scrolling using Pageable
In this lab, we will only load new users when we are scrolling down, improving our initial page speed
Lab 8: Exception Messages
In this lab, we will catch Exception using a Spring Controller Advice and show them to the user in a nice form
Lab 9: Server-Sent Events
In this lab, we will leverage the SSE capabilities of htmx to update our table live if a new user is created.
Last updated