HTMX with Thymeleaf in Spring Boot

Course details

Unlock the full potential of dynamic web applications with this comprehensive guide to HTMX, Thymeleaf, and Spring Boot. This course teaches you how to seamlessly integrate HTMX into your Spring Boot projects, enhancing your Thymeleaf templates and simplifying AJAX requests. Learn to leverage HTMX triggers and event handling to create interactive webpages, and master advanced features like DOM manipulation and out-of-band swapping for optimal user interactions. Additionally, explore techniques to control element visibility using HTMX request/response headers and ensure security with Spring Security integration. The course also covers real-time updates using WebSockets and server-sent events (SSE), as well as powerful HTMX extensions to elevate your application's functionality and responsiveness.

Learning objectives
Compare the advantages of using HTMX with other methods for dynamic web applications and explain its enhancement of Thymeleaf templates and AJAX requests within Spring Boot.
Install HTMX, integrate it into a Spring Boot project, and apply HTMX triggers and event handling for interactive web pages.
Illustrate HTMX swapping, manipulate different parts of the DOM, and implement out-of-band swapping for optimized user interactions.
Explain controlling visibility and behavior of elements using HTMX request/response headers and adapting HTMX with Spring Security.
Develop and integrate WebSockets and Server-Sent Events (SSE) for real-time updates in a Spring Boot application.
Investigate, classify, and implement powerful HTMX extensions to enhance application functionality and responsiveness.

Concepts

0. Introduction

01 - HTMX for Spring Boot - Thymeleaf developer
02 - What you should know

1. Getting Started with HTMX

03 - Analyze why and when to use and not use HTMX
04 - Benefits of using HTMX with Thymeleaf and Spring Boot
05 - HTMX resources (htmx.org, Twitter, GitHub)
06 - Project overview

2. Install and Leverage HTMX in Spring Boot

07 - Install and set up HTMX in a Thymeleaf Spring Boot project
08 - Integrate and use the HTMX & Thymeleaf IntelliJ plugin
09 - Understand the basics of HTMX without JSON data
10 - Transform your MPA into a SPA with HTMX
11 - Implement HTMX with Thymeleaf - hx-get and hx-target
12 - Understand basic natural events and triggers on elements
13 - Leverage HTMX trigger modifiers - keyup, changed, and timing
14 - Use hx-trigger in request headers for triggering a load

3. Mastering HTMX Swapping and Progressive Enhancement

15 - Learn to use HTMX swapping
16 - Differentiate between inner and outerHTML swapping
17 - Decide when to use hx-swap - afterbegin and beforebegin
18 - Implement hx-on functionality to listen for hx-swap events
19 - hx-swap - beforeend, afterend, and deleting elements
20 - Implement hx-swap and use view transition API
21 - Learn to use hx-swap scrolling modifiers
22 - Understand HTTP verbs with hypermedia
23 - Demonstrate hx-post and hx-delete with Spring Security
24 - Demonstrate hx-patch and hx-put with Spring Security

4. Optimizing HTMX with Advanced Response Handling and Spring Boot Integration

25 - Control visibility using HTMX request headers
26 - Browser influence with HTMX response headers with HX-Trigger
27 - Set HX-Retarget using HttpServletResponse
28 - Use HX-Reselect and HX-Reswap with HttpServletResponse
29 - Integrate and use the htmx-spring-boot library
30 - Method invocation filtering with HxRequest annotation
31 - Thymeleaf convenience processors for HTMX integrations
32 - Use HTMX response headers to set HTMX response headers
33 - Response header annotations

5. Enhance Interactivity with Out-of-Band Swaps and Advanced HTMX Techniques

34 - Update other content simultaneously
35 - Understand OOB swaps and locality of behavior
36 - Implement OOB swaps on student with animation
37 - Implement OOB swaps on student with edit of row
38 - Implement OOB swaps with Spring Boot 3.4.0
39 - Changes with Spring Boot and htmx-spring-boot-thymeleaf
40 - OOB swaps with row deletion using Spring Boot 3.4.0
41 - Trigger events and elements listening
42 - Implement OOB swap and OOB selects together using Thymeleaf

6. Advanced Client-Side Techniques and Enhancements with HTMX

43 - Demonstrate using hx-indicator to track progress
44 - Turn on debugging for HTMX events
45 - Customize the HTMX UI confirmations
46 - Integrate HTMX with Bootstrap modal
47 - Implement infinite scroll
48 - Implement active search
49 - Implement drag and drop with Sortable.js

7. Real-Time Communication with HTMX - WebSockets and Server-Sent Events

50 - Explore HTMX extensions and available options
51 - Review of WebSockets and server-sent events
52 - Enable WebSocket extension with a chat feature

Conclusion

53 - HTMX with Spring Boot and Thymeleaf - Next steps