Modern frontends with htmx: Use htmx with Spring Boot and Thymeleaf to build dynamic and interactive web applications

Table of contents :
Modern frontends with htmx
Foreword
Acknowledgements
Introduction
Source code
1. Technologies used in the book
1.1. htmx
1.2. Spring Framework
1.3. Spring Boot
1.4. Thymeleaf
1.5. Alpine
1.6. Tailwind CSS
2. Getting started
2.1. Prerequisites
2.1.1. macOS/Linux
2.1.2. Windows
2.2. ttcli
2.2.1. What is it?
2.2.2. Installation
2.2.3. Project generation
2.2.4. Run the application
2.3. IntelliJ IDEA plugins
2.4. Summary
3. Starting with htmx
3.1. Hello world example
3.2. Triggers
3.2.1. Trigger modifiers
3.2.2. Trigger filters
3.2.3. Special events
3.2.4. Example
3.3. Targets
3.4. Swapping
3.5. HTTP verbs
3.6. Summary
4. Request and response headers
4.1. Request headers
4.2. Response headers
4.3. Htmx-spring-boot library
4.4. Summary
5. Project 1: TodoMVC
5.1. Initial implementation
5.2. Boost the application
5.3. Fine-grained htmx implementation
5.3.1. Add a new todo item
5.3.2. Update number of items
5.3.3. Mark item as completed
5.3.4. Delete item
5.4. Summary
6. Out of Band Swaps
6.1. General principles
6.2. Example
6.2.1. Project generation
6.2.2. Domain model
6.2.3. UI setup
6.2.4. Input of time registration durations
6.2.5. Day totals
6.3. Summary
7. Client-side scripting
7.1. Vanilla JavaScript
7.1.1. Project setup
7.1.2. Numbers Api
7.1.3. Web UI
7.1.4. Progress indicator
7.1.5. Error handling
7.2. AlpineJS
7.2.1. Project setup
7.2.2. Domain model
7.2.3. Inline editing of issue summary
7.2.3.1. Visual indication
7.2.3.2. Implementation happy flow
7.2.3.3. Implementation cancel flow
7.2.3.4. Error handling
7.2.4. Using drag and drop
7.3. Summary
8. Security
8.1. Htmx and security
8.2. Bookmarks
8.2.1. Initialize project
8.2.2. Add Spring Security
8.3. Classic Thymeleaf setup
8.4. Use htmx for adding a bookmark
8.5. Deleting a bookmark
8.5.1. Delete with hidden input
8.5.2. Delete with meta tags
8.5.3. Delete with Thymeleaf inlining syntax for JavaScript
8.6. Handle logout
8.7. Summary
9. Project 2: Contact application
9.1. Setup project
9.2. Add a contact
9.3. Search
9.4. View contact
9.5. Edit and delete a contact
9.6. Delete using htmx
9.7. Inline validation of duplicate email addresses
9.7.1. Implement custom validator
9.7.2. Trigger validation while typing
9.7.3. Improve the user experience
9.7.4. Use hx-validate to avoid unnecessary requests
9.8. Pagination
9.8.1. Generate contacts using Datafaker
9.8.2. Manual pagination
9.8.3. Click to load
9.8.4. Infinite scroll
9.9. Active search
9.9.1. Search pagination
9.9.2. Search on type
9.10. Delete row from list
9.10.1. Fix the delete button redirect
9.11. Archive list of contacts
9.11.1. Archiver
9.11.2. Create an archive
9.11.3. Download link
9.12. Summary
10. Web components
10.1. What are web components?
10.2. Integrating Shoelace
10.3. GitHub Tree
10.3.1. GitHub API
10.3.2. Make it lazy
10.3.3. Add repository releases
10.3.4. Show release notes
10.4. Summary
11. Server-sent events & websockets
11.1. Server-sent events
11.1.1. What are Server-sent events?
11.1.2. Using the htmx sse extension
11.1.2.1. Project setup
11.1.2.2. Upload file
11.1.2.3. Show lines being processed
11.1.2.4. Show progress bar
11.1.2.5. Check if connection is active
11.2. Websockets
11.2.1. What are websockets?
11.2.2. Using the htmx ws extension
11.2.2.1. Project setup
11.2.2.2. Send HTML back using Thymeleaf templates
11.3. Summary
12. Closing
Appendix A: Change log