HTMX: что это за библиотека и почему она может вытеснить Vue и React
2026-02-21 13:38 Diff
https://skillbox.ru/media/code/htmx-chto-eto-za-biblioteka-i-pochemu-ona-mozhet-vytesnit-vue-i-react/

#статьи

  • 22 сен 2023
  • 0

Современный фронтенд — это боль. Но есть и лекарство.

Иллюстрация: Оля Ежак для Skillbox Media

Востоковед, интересующийся IT. В прошлом редактор раздела «Системный блок» журнала «Fакел», автор журналов Computer Gaming World RE, Upgrade Special, руководитель веб-ресурсов компании 1С-Softclub.

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

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

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

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

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

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

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

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

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

«Если лучшие в мире фронтенд-инженеры не могут заставить текст и изображения работать без пяти мегабайт JavaScript, то, возможно, нам стоит просто отказаться от веб-платформы».

Рич Харрис,
один из разработчиков Svelte.js, Have Single-Page Apps Ruined the Web?

Мем с официального сайта HTMX, иллюстрирующий сложность современного фронтенда
Скриншот: HTMX / Skillbox Media

Библиотека 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 — это не очередная JS-поделка, снискавшая популярность. HTMX и его аналоги — это протест. Отказ от того, что предлагает индустрия для разработки приложений в браузере. Протест — по определению более сильная вещь, чем хайп, потому что в его основе [лежит] идея».

Иван Гришаев,
IT-инженер, статья в авторском блоге

С определениями разобрались — теперь давайте разберём парочку примеров работы 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-запросы и обновлять части страницы без перезагрузки. Она помогает нам добавить на страницу динамику и интерактив без использования скриптов.

Вот ещё несколько бенефитов.

Теперь отправить HTTP-запрос может любой элемент разметки — а не только якоря и формы.

Теперь вызвать запрос может любое событие — а не только щелчок мышью или отправка формы.

Теперь объектом обновления в запросе может быть любой элемент страницы — а не только всё окно целиком.

При этом сервер отдаёт сразу 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 можно назвать следующее.

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

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

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

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

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

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

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

«Самое большое преимущество, которое я вижу в HTMX, — это минимальный объём JavaScript, который мы пишем или посылаем браузеру. Фактически можно создавать насыщенные интерактивные веб-приложения, используя только HTMX, без написания кода для стороны клиента».

Раджасегар Чандран,
фронтенд-архитектор в Freshworks, HTMX and HTML Driven Development

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

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

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

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

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

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

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

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

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

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

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

«Реальность такова, что сегодня React является стандартом. Как бы мне ни нравился HTMX, если бы кто-то пришёл ко мне и сказал: „Эй, я ничего не знаю о программировании, и мне нужна работа на фронтенде. Что мне изучать?“, я бы сказал ему: „Учи React“. Потому что если вы зайдёте на сайт indeed.com и зададите в поиске „React“, то в вашем регионе будет 30 тысяч вакансий. Если вы введёте в поиск „HTMX“, то их будет ноль. Я думаю, что ставить на React гораздо более безопасно, чем на что-то вроде HTMX».

Карсон Гросс,
создатель HTMX, Go Time — Episode #266

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

Бесплатный курс по Python ➞
Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу