HTMX для вашего API

HTMX для вашего API

Довольно часто приходится «по-быстрому» сделать веб-морду к существующему 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.

Добавить комментарий