HTMX: что это за библиотека и почему она может вытеснить Vue и React

В 2020 году программист Карсон Гросс представил JavaScript-библиотеку HTMX, которая позволяет создавать современные веб-интерфейсы с помощью обычного HTML. Некоторым идея настолько понравилась, что стали поговаривать, будто фреймворкам вроде React или Angular скоро придёт конец. В этой статье попробуем разобраться, что вообще такое HTMX, какие проблемы она решает и правда ли теперь можно не учить React.

Читайте дальше, чтобы узнать:

• в чём главная проблема современного фронтенда;
• какое решение предлагает HTMX;
• как работает эта библиотека;
• в чём её плюсы и минусы;
• когда следует выбирать HTMX;
• стоит ли учить HTMX вместо React.

Проблемы современного фронтенда

Причины появления HTMX нужно рассматривать в контексте развития веб-разработки в последние годы. Существующие веб-приложения можно условно поделить на две большие группы.

Многостраничные приложения (MPA), которые обновляют всю страницу при каждом взаимодействии пользователя с ней. При этом подходе состояние страницы обычно контролируется сервером. Однако перезагрузка страницы при каждом изменении может замедлять работу приложения.

Одностраничные приложения (SPA), в которых управление состоянием осуществляется с помощью JavaScript, выполняющегося в браузере. SPA взаимодействуют с сервером посредством вызовов API, которые возвращают данные, обычно в формате JSON. Затем приложение обновляет интерфейс, не перезагружая страницу целиком.

Читайте также:

Как создать SPA на JavaScript и PHP за час

Несмотря на очевидные плюсы SPA, у этой модели есть недостаток, с которым не все готовы мириться, — высокая сложность. Чтобы SPA работало как надо, браузер должен загрузить и выполнить целую кучу файлов JavaScript. Из-за этого SPA могут подтормаживать и подъедать оперативку, особенно если эти файлы плохо оптимизированы и каждую секунду забрасывают сервер десятками запросов.

Но главная проблема, конечно, не в скорости. Чтобы написать полноценную клиентскую логику на JavaScript, нужно подключить массу сопутствующей инфраструктуры: фреймворков, библиотек, NPM-модулей, сборщиков. Начинается вакханалия проблем с зависимостями: как состыковать два компонента, как поменять одну часть приложения, чтобы не сломалась другая, как безболезненно перенести проект с одного фреймворка на другой.

Из-за раздутого арсенала инструментов фронтендерам приходится постоянно переучиваться. Всю жизнь работал с React? Не беда, освоишь Vue. На прошлой работе использовал Redux? Придётся повозиться с MobX. Как это ты не знаешь, чем различаются Nuxt, Next и Nest? И всё в этом духе.

Возникает закономерный вопрос: а не проще ли тогда вообще отказаться от всей этой романтики с фреймворками, JavaScript и клиентским рендером?

Библиотека HTMX — это попытка уйти от перечисленных выше проблем, сохранив при этом современную функциональность приложений. Она позволяет достичь тех же целей, что и популярные фреймворки, но более простым путём.

Так что же такое HTMX

HTMX — библиотека, которая позволяет создавать динамические веб-интерфейсы, используя только HTML и немного JavaScript. Идея в том, что мы можем запускать интерактивные элементы, написанные с помощью AJAX, CSS Transitions, WebSockets и Server Sent Events, прямо из HTML-кода.

HTMX сохраняет преимущества SPA, не требуя полной перезагрузки страницы, и в то же время по простоте она ближе к MPA. В этой модели рендеринг страницы происходит на сервере, а клиенту передаётся уже готовый HTML-код, который затем встраивается в нужное место DOM-дерева сайта. Браузеру не нужно ничего интерпретировать и визуализировать — все эти вычисления берёт на себя сервер. Такой подход упрощает процесс разработки за счёт минимизации сложности клиентской стороны.

Для примера давайте сравним, как выглядит код простого счётчика, написанный на JavaScript с помощью React и на HTMX. Начнём с React:

import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  incrementCount() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

Что здесь происходит. В примере выше мы создаём компонент Counter, который хранит значение счётчика (по умолчанию — 0). Когда пользователь нажимает на кнопку, компонент вызывает метод incrementCount, который увеличивает значение счётчика на 1. Это заставляет React перерисовать компонент с новым значением счётчика в параграфе.

Теперь посмотрим, как та же функциональность реализована в HTMX:

<div>
  <p hx-get="/count">Count: 0</p>
  <button hx-post="/increment" hx-swap="outerHTML">Increment</button>
</div>

Что здесь происходит:

• Создаём обычный HTML-класс <div>, в котором прописываем параграф <p> и кнопку под названием Increment.
• Когда страница загрузится, HTMX запросит у сервера значение счётчика с помощью атрибута hx-get, а потом подставит его в параграф.
• Когда пользователь нажмёт на кнопку, HTMX отправит сигнал об этом серверу с помощью hx-post.
• Сервер увидит сигнал и вернёт клиенту обновлённый HTML всего элемента, который подставится в общую разметку с помощью hx-swap.

Разница — есть. Первое, что бросается в глаза, — количество кода. А ведь в примере с React мы даже не реализовали взаимодействие с сервером — только клиентскую логику. Но главное — в HTMX счётчик обновляется без полной перезагрузки страницы. Основная работа происходит на сервере, а на клиенте остаётся HTML-разметка и элементы HTMX.

Ясность и простота HTMX в сравнении с React и другими JS-фреймворками подтверждается не только синтетическими кейсами, но и практикой. В 2022 году на конференции DjangoCon разработчик Давид Гило рассказал, как разработчики компании Contexte перенесли проект, написанный на React с бэкендом на Django, на библиотеку HTMX.

И вот какие результаты это дало:

• Размер кодовой базы уменьшился на 67%.
• Количество JS-зависимостей уменьшилось на 96% — c 255 до 9.
• Время сборки сайта сократилось на 88% — с 40 секунд до 5.
• Скорость первой загрузки страницы выросла на 50–60% — с 2–6 секунд до 1–2.
• Приложение стало обрабатывать гораздо большие объёмы данных, с которыми React просто не справлялся.
• Загруженность памяти снизилась на 46% — с 75 до 40 МБ.
• Качество пользовательского взаимодействия (UX) при этом не пострадало.

За HTMX радеют разработчики, которые устали ежедневно ковыряться в сотнях компонентов, оптимизировать запросы и следить за зависимостями и просто хотят наслаждаться аутентичной лёгкостью и надёжностью HTML. В основном это, как ни странно, бэкендеры :)

Как работает HTMX

С определениями разобрались — теперь давайте разберём парочку примеров работы HTMX. Как мы помним, смысл этой библиотеки в том, что мы можем использовать возможности современных браузеров напрямую из HTML, минуя JavaScript.

Например, следующая запись говорит браузеру: когда пользователь кликнет по этой ссылке, сделай HTTP-GET-запрос к /blog и загрузи содержимое ответа в окно браузера.

<a href="/blog" hx-get="/blog">Blog</a> 

А следующий код говорит браузеру: когда пользователь нажмёт на кнопку, выполни HTTP-POST-запрос по адресу /clicked и используй содержимое ответа для замены элемента с id parent-div в DOM. Это пример того, как HTMX выполняет AJAX-запрос к серверу.

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Click Me!
</button>

HTMX существенно расширяет возможности HTML, добавляя новые атрибуты к стандартным HTML-тегам, которые позволяют им выполнять AJAX-запросы и обновлять части страницы без перезагрузки. Она помогает нам добавить на страницу динамику и интерактив без использования скриптов.

При этом сервер отдаёт сразу HTML, а не JSON, как это происходит при работе с JavaScript и основанными на нём фреймворками.

Также HTMX легко взаимодействует с CSS. Например, разработчики могут использовать атрибут hx-indicator для отображения лоадера, используя CSS-анимацию.

<div hx-get="/load-content" hx-trigger="click" hx-indicator="#spinner">
  Click to Load
</div>
<div id="spinner" class="hidden">
  Loading...
</div>

Подобный подход фактически опровергает распространённое мнение о том, что для создания динамических веб-приложений необходимо использовать JavaScript, и показывает, что есть и более простой способ создания веб-приложений.

Преимущества HTMX

В числе плюсов HTMX можно назвать следующее.

✅ Независимость от фреймворков или языков. Благодаря этому библиотеку можно использовать с самыми разными серверными платформами: Node, Django, Phoenix, Laravel и другими.

✅ Небольшой размер кодовой базы в сравнении с другими библиотеками и фреймворками, такими как React или Angular.

✅ Простота использования. Нет необходимости в дополнительных этапах сборки и сложных инструментах вроде Webpack.

Читайте также:

Основы Webpack: самый подробный гайд

✅ Экономия ресурсов. С помощью HTMX вы можете обойтись меньшим количеством разработчиков и инструментов, что снижает затраты на разработку и поддержку.

✅ Не нужно устанавливать тысячи NPM-пакетов — инструментов, библиотек и приложений, необходимых для проекта.

✅ Единая кодовая база. Так как рендеринг происходит на стороне сервера, больше не нужна отдельная кодовая база для клиента, как в случае с SPA. Мы можем использовать один и тот же код для генерации HTML на сервере и для отображения его на стороне клиента, что значительно упрощает его поддержку.

✅ Лёгкая интеграция. HTMX изначально предназначен для взаимодействия с разными серверными технологиями, поэтому во многих случаях будет работать «из коробки». Тогда как фреймворки и библиотеки вроде React нередко требуют дополнительной настройки, особенно если проект построен не только в экосистеме JavaScript.

Недостатки HTMX

Парадокс: хотя HTMX изначально разрабатывалась для упрощения разработки, её применение связано с целым ворохом сложностей.

❌ Сложная серверная логика. Теперь все сценарии взаимодействия с пользователем придётся прописывать прямо в бэкенде. Например, если раньше в ответ на нажатие кнопки репоста мы просто отдавали в браузер JSON с какими-то данными, то теперь придётся подробно прописывать, какие анимации при этом сработают, какие опции появятся у клиента и так далее.

❌ Сложности с динамическими страницами. HTMX не подойдёт для динамиеских приложений вроде онлайн-игр или карт, где состояние постоянно меняется. В этом случае фреймворки подойдут лучше, поскольку они позволяют не так часто обмениваться данными с сервером.

❌ Сложности в изучении. Новая технология — новые знания. Хотя HTMX и упрощает процесс разработки, для её эффективного применения нужно детально изучить соответствующие атрибуты, методы и подходы. Плюс ко всему, как мы выяснили, HTMX требует хорошего понимания работы бэкенда.

Когда следует выбирать HTMX

Давайте коротко расскажем про основные случаи, в которых использовать HTMX будет уместно уже сегодня:

Маленькие проекты. HTMX — это легковесная библиотека, которая может быть отличным выбором для небольших проектов, требующих динамической интерактивности без расходов на полноценный фронтенд-фреймворк. Если же у вас масштабное приложение с частыми обновлениями, то лучше подойдёт тот же React с виртуальным DOM.

Простое взаимодействие с сервером. Если вам нужна простая отправка форм и AJAX-запросы, без необходимости в сложном управлении состоянием, обновлений в реальном времени и оптимизации рендеринга, то HTMX — хороший вариант.

Отключённый JavaScript. Если вы хотите убедиться, что сайт будет доступен и не потеряет часть функциональности даже для пользователей с отключённым JavaScript.

Минимум JavaScript, или «мечта бэкендера». HTMX прекрасно подойдёт для бэкендеров, которые хотят добавить интерактивности в свой проект, не прибегая к JavaScript и не погружаясь в пучины фреймворков.

Если же вам нужно масштабное комплексное решение с поддержкой сообщества, со сложными пользовательскими интерфейсами и обновлениями в реальном времени, то React, Vue или Angular подойдут лучше.

Так что в итоге? Стоит ли учить HTMX?

Популярность HTMX постепенно растёт, но в основном среди профессиональных разработчиков. Если же вы джун, изучающий технологии фронтенда и желающий побыстрее найти работу, то вот совет от автора HTMX.

Если вы всё же решитесь, то на официальном сайте есть всё, что нужно для старта.