htmx: гипермедиа против фронтенд-фреймворков
Библиотека на 14 килобайт добавляет к HTML атрибуты для AJAX, WebSocket и частичных обновлений. Сервер снова отдаёт разметку, а не JSON.
Идея в одном абзаце
В обычном HTML только два элемента умеют делать запросы: ссылка и форма. И оба умеют только заменять всю страницу. htmx снимает оба ограничения: любой элемент может отправить запрос по любому событию и вставить ответ в любое место страницы. Ответ при этом — обычный HTML, который сгенерировал сервер.
<button hx-post="/posts/42/like"
hx-target="#likes"
hx-swap="outerHTML">
Нравится
</button>
Нажатие отправляет POST, сервер возвращает кусок разметки со свежим счётчиком, htmx заменяет им элемент #likes. Ни состояния на клиенте, ни сериализации, ни второго языка шаблонов.
Почему это работает
Большинство интерактивности на сайтах — это «нажал, обновился фрагмент». Формы, фильтры, пагинация, лайки, модальные окна, бесконечная прокрутка. Для всего этого не нужен клиентский роутер и виртуальный DOM. Нужен сервер, который умеет отдавать не только целые страницы, но и их части.
Такой подход возвращает логику туда, где уже лежат данные, права доступа и шаблоны. Одна валидация вместо двух, один язык вместо двух, один деплой вместо двух.
Что ещё умеет
hx-trigger— запрос по любому событию:keyup changed delay:300msдля живого поиска,revealedдля бесконечной ленты,every 10sдля опроса.hx-boost— превращает обычные ссылки и формы в AJAX-переходы с сохранением истории.- Расширения для WebSocket и Server-Sent Events.
- Заголовки ответа вроде
HX-RedirectиHX-Trigger, которыми сервер управляет клиентом. - View Transitions для анимированных замен, если браузер их поддерживает.
Ограничения
htmx не подходит, когда интерфейс по-настоящему живёт на клиенте: редакторы, канбан-доски с перетаскиванием, приложения, работающие офлайн. Там нужно клиентское состояние, и лучше взять инструмент, который для него сделан.
Ещё htmx требует дисциплины на стороне сервера. Нужны частичные шаблоны, продуманные идентификаторы, аккуратная обработка ошибок. Это не сложно, но это другой стиль, чем «API отдаёт JSON, а дальше не моя забота».
Соседи по подходу
Та же идея живёт в Hotwire у Rails, в Phoenix LiveView, где сервер держит состояние и шлёт диффы по WebSocket, в Unpoly и Alpine AJAX. htmx среди них самый минималистичный и самый независимый от стека: он работает с любым бэкендом, который умеет отдавать HTML.
Итог
За несколько лет htmx превратился из курьёза в серьёзный аргумент в спорах об архитектуре. Не потому что он делает что-то невозможное, а потому что напоминает: для большинства сайтов фронтенд-фреймворк — это цена, а не выгода.
Войти, чтобы оценить материал
Комментарии
Войти, чтобы оставить комментарий