Довольно часто приходится «по-быстрому» сделать веб-морду к существующему API. Профессионально эту задачу умеют решать фронтэндеры, но иногда приходится обходиться своими силами. Речь пойдет о библиотеке HTMX, которая помогает сделать веб-морду не погружаясь в дебри JavaScript. Но знание и понимание языка разметки HTML никто не отменял.
Зачем вам нужен HTMX
Идея в том, чтобы добавить к HTML-тегами дополнительные атрибуты, в которых указывать как именно взаимодействовать с API.
<button hx-post="/clicked" hx-trigger="click" hx-target="#parent-div" hx-swap="outerHTML"> Click Me! </button>
В этом примере из документации к HTMX, по нажатию на кнопку (hx-trigger=»click») мы хотим отправить POST-запрос на адрес /clicked (hx-post=»/clicked») и содержимым ответа заменить тег с id=»parent-div» (hx-target=»#parent-div»). Атрибут hx-swap=»outerHTML» — говорит о том, что менять надо тег с id=»parent-div» целиком, а не только его содержимое (в этом случае hx-swap=»innerHTML»).
Не забудьте подключить библиотеку к вашей странице, например так:
<script src="https://unpkg.com/htmx.org@1.6.0"></script>
Триггеры
Помимо элементарных вещей библиотека позволяет реализовывать различные сценарии поведения на веб-странице с помощью атрибута hx-trigger.
- Элементы input, textarea & select отправят запрос при их изменении
- Элемент form «улетит» по нажатию на кнопку Submit
- На все остальные элементы надо кликнуть :)
По умолчанию, AJAX-запросы инициируются обычными событиями HTML-элементов:
Это поведение можно изменить как раз с помощью атрибута hx-trigger. Хотите, чтобы запрос отправлялся когда мышка попадает в область конкретного элемента? Вот:
<div hx-post="/mouse_entered" hx-trigger="mouseenter"> [Here Mouse, Mouse!] </div>
Этим не ограничивается мощь hx-trigger, он еще понимает разные модификаторы, среди которых:
- once — выполнить один раз
- changed — срабатывает если значение элемента изменилось
- delay: — ждет заданное время перед отправкой запроса
Обновление результатов без перезагрузки
Часто требуется обновлять содержимое части страницы без ее перезагрузки. HTMX умеет это «из коробки»:
<div hx-get="/news" hx-trigger="every 2s"> </div>
Каждые 2 секунды запроашиваем /news, получаем свежие новости и можем их куда-нибудь вывести (hx-target).
Выводы
Таким образом, библиотека позволит вам быстро, просто и понятно создать веб-страницу с довольно богатым функционалом или продемонстрировать работоспособность API в браузере. У HTMX отличная документация с примерами.
Однако, есть небольшая особенность: HTMX в ответ на запросы ожидает HTML. Если ваш API возвращает JSON, то требуется еще один шаг, чтобы подружить ваш API с HTMX — использовать hx-ext или расширения. В частности расширение client-side-templates позволит вам возвращаемый JSON преобразовать в HTML прямо на вашей странице. Поддерживаются шаблонизаторы mustache, handlebars и nunjucks.