Рассмотрены практические подходы к созданию современных динамичных веб-интерфейсов и веб-приложений с использованием HTMX — технологии, позволяющей строить интерактивные приложения на основе HTML с минимальным объемом JavaScript- кода. Подробно описаны принципы работы с HTMX в связке с Java, Spring Boot и Thymeleaf. Показаны базовые приемы замены DOM-элементов с использованием различных триггеров, работа с запросами и заголовками, а также использование библиотеки htmx-spring-boot. Рассказано, как использовать замены Out Of Band. Описаны способы реализации современных UI-паттернов, таких как ленивая загрузка, активный поиск, бесконечная прокрутка и валидация форм в реальном времени. Рассматриваются возможности подключения веб-компонентов и усиления клиентской логики с помощью JavaScript и библиотеки Alpine.js. Описано, как обеспечить безопасность веб-приложений на HTMX, как обрабатывать события, отправляемые сервером, и использовать веб-сокеты.
Создание динамичных и интерактивных веб-интерфейсов больше не требует сложного программирования на JavaScript. Благодаря технологии HTMX — революционному подходу к фронтенд-разработке — вы можете строить мощные веб-приложения, используя минимум скриптов и привычный HTML. Эта книга поможет вам освоить HTMX в связке с Java, Spring Boot и Thymeleaf, изменив ваше представление о веб-разработке.
Автор последовательно вводит в основы работы с HTMX — от простых механизмов замены DOM-элементов с использованием различных триггеров до полноценной интеграции с контроллерами Spring Boot. Показаны современные UI-паттерны: ленивая загрузка, активный поиск, бесконечная прокрутка, валидация форм в реальном времени и другие. Рассматриваются возможности использования веб-фреймворков и компонентов JavaScript для усиления интерактивности на стороне клиента.
Вы узнаете:
• Как устроен синтаксис HTMX: триггеры, цели, замены
• Как работать с заголовками запросов и ответов
• Как использовать библиотеку htmx-spring-boot
• Что такое замены Out Of Band и зачем они нужны
• Как использовать JavaScript и библиотеку Alpine.js вместе с HTMX
• Как обеспечить безопасность приложений на HTMX
• Как реализовать ленивую загрузку, бесконечную прокрутку и активный поиск
• Как выполнять валидацию форм в реальном времени
• Как интегрировать HTMX с веб-компонентами и обмениваться данными в реальном времени
• Как обрабатывать события, отправляемые сервером, и использовать веб-сокеты
Книгу “Современные фронтенды на базе HTMX” можно купить в нашем интенет-магазине.
Напутственное слово……………………………………………………………………………….. 9
Предисловие…………………………………………………………………………………………… 11
Благодарности……………………………………………………………………………………….. 13
ГЛАВА 1. Используемые методы……………………………………………………………. 15
1.1. HTMX…………………………………………………………………………………………………………………………………… 15
1.2. Spring Boot……………………………………………………………………………………………………………………………. 16
1.3. Spring Framework…………………………………………………………………………………………………………………. 16
1.4. Thymeleaf…………………………………………………………………………………………………………………………….. 17
1.5. Alpine……………………………………………………………………………………………………………………………………. 17
1.6. Tailwind CSS…………………………………………………………………………………………………………………………. 18
ГЛАВА 2. Начало работы………………………………………………………………………. 19
2.1. Предварительные настройки……………………………………………………………………………………………… 19
2.1.1. macOS/Linux………………………………………………………………………………………………………………. 19
2.1.2. Windows……………………………………………………………………………………………………………………… 20
2.2. Инструмент ttcli…………………………………………………………………………………………………………………… 20
2.2.1. Суть вопроса……………………………………………………………………………………………………………… 20
2.2.2. Установка…………………………………………………………………………………………………………………… 21
2.2.3. Генерация проекта……………………………………………………………………………………………………. 21
2.2.4. Запуск приложения…………………………………………………………………………………………………… 25
2.3. Плагины IntelliJ IDEA………………………………………………………………………………………………………….. 26
2.4. Краткие выводы………………………………………………………………………………………………………………….. 27
ГЛАВА 3. Начало работы с HTMX…………………………………………………………. 29
3.1. Пример «Hello World»………………………………………………………………………………………………………….. 29
3.2. Триггеры………………………………………………………………………………………………………………………………. 34
3.2.1. Модификаторы триггеров………………………………………………………………………………………… 34
3.2.2. Фильтры триггеров……………………………………………………………………………………………………. 35
3.2.3. Особые события………………………………………………………………………………………………………… 35
3.2.4. Пример……………………………………………………………………………………………………………………….. 37
3.3. Цели……………………………………………………………………………………………………………………………………… 43
3.4. Замена………………………………………………………………………………………………………………………………….. 43
3.5. HTTP-глаголы……………………………………………………………………………………………………………………… 47
3.6. Краткие выводы………………………………………………………………………………………………………………….. 47
ГЛАВА 4. Заголовки запроса/ответа………………………………………………………. 49
4.1. Заголовки запроса………………………………………………………………………………………………………………. 49
4.2. Заголовки ответа…………………………………………………………………………………………………………………. 51
4.3. Библиотека htmx-spring-boot……………………………………………………………………………………………… 52
4.4. Краткие выводы………………………………………………………………………………………………………………….. 55
ГЛАВА 5. Проект 1: TodoMVC……………………………………………………………….. 57
5.1. Начальная реализация……………………………………………………………………………………………………….. 57
5.2. Усиление приложения………………………………………………………………………………………………………… 69
5.3. Тонкая реализация HTMX…………………………………………………………………………………………………. 70
5.3.1. Добавление нового элемента todo…………………………………………………………………………… 70
5.3.2. Обновление количества пунктов……………………………………………………………………………… 74
5.3.3. Пометка пункта как завершенного………………………………………………………………………….. 77
5.3.4. Удаление пункта……………………………………………………………………………………………………….. 79
5.4. Краткие выводы………………………………………………………………………………………………………………….. 81
ГЛАВА 6. Замена Out Of Band………………………………………………………………… 83
6.1. Общие принципы…………………………………………………………………………………………………………………. 83
6.2. Пример…………………………………………………………………………………………………………………………………. 84
6.2.1. Генерация проекта……………………………………………………………………………………………………. 84
6.2.2. Модель предметной области……………………………………………………………………………………. 85
6.2.3. Настройка пользовательского интерфейса…………………………………………………………….. 88
6.2.4. Ввод продолжительности регистрации времени……………………………………………………. 91
6.2.5. Итоги дня……………………………………………………………………………………………………………………. 95
6.3. Краткие выводы………………………………………………………………………………………………………………….. 97
ГЛАВА 7. Скрипт на стороне клиента……………………………………………………. 99
7.1. Vanilla JavaScript…………………………………………………………………………………………………………………. 99
7.1.1. Конфигурация проекта…………………………………………………………………………………………… 100
7.1.2. Программный интерфейс Numbers………………………………………………………………………… 100
7.1.3. Веб-интерфейс…………………………………………………………………………………………………………. 103
7.1.4. Индикатор выполнения…………………………………………………………………………………………… 105
7.1.5. Обработка ошибок………………………………………………………………………………………………….. 107
7.2. Alpine.js………………………………………………………………………………………………………………………………. 112
7.2.1. Настройка проекта…………………………………………………………………………………………………. 112
7.2.2. Модель предметной области…………………………………………………………………………………. 113
7.2.3. Встроенное редактирование краткого содержания проблемы…………………………… 121
7.2.3.1. Визуальная индикация………………………………………………………………………………. 121
7.2.3.2. Реализация технологии Happy Flow…………………………………………………………. 122
7.2.3.3. Реализация отмены потока (cancel flow)………………………………………………….. 127
7.2.3.4. Обработка ошибок……………………………………………………………………………………… 131
7.2.4. Использование технологии drag-and-drop…………………………………………………………….. 133
7.3. Краткие выводы………………………………………………………………………………………………………………… 140
ГЛАВА 8. Безопасность………………………………………………………………………… 141
8.1. HTMX и безопасность………………………………………………………………………………………………………. 141
8.2. Закладки…………………………………………………………………………………………………………………………….. 141
8.2.1. Инициализация проекта…………………………………………………………………………………………. 141
8.2.2. Добавление Spring Security……………………………………………………………………………………… 142
8.3. Классическая настройка Thymeleaf……………………………………………………………………………….. 143
8.4. Добавление закладки с помощью HTMX……………………………………………………………………….. 149
8.5. Удаление закладки……………………………………………………………………………………………………………. 151
8.5.1. Удаление с помощью скрытого ввода…………………………………………………………………… 153
8.5.2. Удаление с помощью метатегов…………………………………………………………………………….. 153
8.5.3. Удаление с помощью встроенного синтаксиса Thymeleaf для JavaScript…………. 154
8.6. Обработка выхода из системы………………………………………………………………………………………… 156
8.7. Краткие выводы………………………………………………………………………………………………………………… 157
ГЛАВА 9. Проект 2: приложение для работы с контактами…………………. 159
9.1. Настройка проекта…………………………………………………………………………………………………………… 159
9.2. Добавление контакта……………………………………………………………………………………………………….. 167
9.3. Поиск………………………………………………………………………………………………………………………………….. 174
9.4. Просмотр контакта…………………………………………………………………………………………………………… 176
9.5. Редактирование и удаление контакта…………………………………………………………………………….. 179
9.6. Удаление с помощью HTMX……………………………………………………………………………………………. 185
9.7. Встроенная проверка наличия дубликатов адресов электронной почты…………………… 188
9.7.1. Реализация пользовательского валидатора…………………………………………………………. 188
9.7.2. Триггер валидации в процессе ввода…………………………………………………………………….. 191
9.7.3. Улучшение пользовательского опыта…………………………………………………………………… 193
9.7.4. Использование hx-validate для предотвращения лишних запросов…………………… 196
9.8. Пагинация………………………………………………………………………………………………………………………….. 196
9.8.1. Генерация контактов с помощью Datafaker…………………………………………………………. 197
9.8.2. Ручная пагинация……………………………………………………………………………………………………. 197
9.8.3. Шаблон «Click to load»……………………………………………………………………………………………. 201
9.8.4. Бесконечная прокрутка………………………………………………………………………………………….. 202
9.9. Активный поиск…………………………………………………………………………………………………………………. 203
9.9.1. Пагинация поиска……………………………………………………………………………………………………. 203
9.9.2. Поиск по типу………………………………………………………………………………………………………….. 205
9.10. Удаление строки из списка…………………………………………………………………………………………….. 207
9.10.1. Настройка перенаправления кнопки Delete……………………………………………………….. 210
9.11. Архивация списка контактов…………………………………………………………………………………………. 211
9.11.1. Архиватор……………………………………………………………………………………………………………… 211
9.11.2. Создание архива…………………………………………………………………………………………………… 215
9.11.3. Ссылка на скачивание………………………………………………………………………………………….. 217
9.12. Краткие выводы………………………………………………………………………………………………………………. 220
ГЛАВА 10. Веб-компоненты…………………………………………………………………. 221
10.1. Что такое веб-компоненты?……………………………………………………………………………………………. 221
10.2. Интеграция Shoelace……………………………………………………………………………………………………….. 221
10.3. Дерево GitHub…………………………………………………………………………………………………………………. 222
10.3.1. API GitHub……………………………………………………………………………………………………………. 222
10.3.2. Реализация ленивой загрузки…………………………………………………………………………….. 226
10.3.3. Добавление релизов репозитория……………………………………………………………………… 229
10.3.4. Отображение примечаний к релизу…………………………………………………………………… 230
10.4. Краткие выводы………………………………………………………………………………………………………………. 233
ГЛАВА 11. События, отправляемые сервером, и веб-сокеты………………… 235
11.1. События, отправляемые сервером………………………………………………………………………………… 235
11.1.1. Что такое «события, отправляемые сервером»?………………………………………………. 235
11.1.2. Использование расширения HTMX SSE…………………………………………………………… 235
11.1.2.1. Настройка проекта………………………………………………………………………………. 235
11.1.2.2. Загрузка файла…………………………………………………………………………………….. 238
11.1.2.3. Отображение обрабатываемых строк……………………………………………….. 241
11.1.2.4. Отображение индикатора хода выполнения…………………………………….. 246
11.1.2.5. Проверка активности подключения……………………………………………………. 249
11.2. Веб-сокеты………………………………………………………………………………………………………………………. 252
11.2.1. Что такое веб-сокеты?………………………………………………………………………………………… 252
11.2.2. Использование расширения HTMX WS……………………………………………………………. 252
11.2.2.1. Настройка проекта………………………………………………………………………………. 252
11.2.2.2. Отправка HTML-кода обратно с помощью шаблонов Thymeleaf….. 258
11.3. Краткие выводы………………………………………………………………………………………………………………. 261
Заключение………………………………………………………………………………………….. 263
ПРИЛОЖЕНИЕ. Журнал изменений……………………………………………………. 265
Предметный указатель…………………………………………………………………………. 267
