В 2023 году веб-разработку захлестнула волна «vibe coding» — когда программисты отказываются от громоздких фреймворков в пользу инструментов, которые приносят удовольствие и упрощают жизнь. Один из ярких трендов — удаление React.js из проектов и замена его на Htmx. По данным опроса State of JS 2023, 22% разработчиков признались, что хотели бы убрать React из своих проектов из-за растущей сложности экосистемы. Htmx, напротив, набрал 78% положительных отзывов и стал библиотекой года. Что стоит за этим сдвигом и как на практике перейти на Htmx — разбираемся в статье.
Проблемы React.js, которые заставляют пересмотреть выбор
React — мощный инструмент, но его использование имеет обратную сторону:
- Размер бандла: минимальное приложение с React и ReactDOM весит около 120 КБ (gzip), а с учётом библиотек управления состоянием (Redux, Zustand) — до 200 КБ. Для простых лендингов или админок это непозволительная роскошь.
- Сложность стека: нужно знать JSX, хуки, контекст, асинхронные запросы. Новички тратят недели на освоение.
- Скорость итераций: каждая доработка требует сборки (webpack/Vite) и перезагрузки. Разработка тормозится.
- Поддержка legacy: проекты на старых версиях React (классовые компоненты) требуют дорогого рефакторинга.
Именно эти боли подталкивают команды искать альтернативы. Htmx — не единственный кандидат (есть ещё Alpine.js, Stimulus), но он радикально меняет подход.
Что такое Htmx и почему он подходит для vibe coding
В официальной документации Htmx (htmx.org) описана как «библиотека, которая позволяет получать доступ к современным возможностям браузера напрямую из HTML». Вместо того чтобы писать тонны JavaScript, вы добавляете атрибуты к элементам:
- hx-get, hx-post, hx-put, hx-delete — задают тип запроса и URL.
- hx-target — определяет, куда вставить ответ.
- hx-swap — как заменить контент (innerHTML, outerHTML, beforeend).
- hx-trigger — событие, запускающее запрос (click, change, load).
Пример: кнопка, которая обновляет счётчик без полной перезагрузки страницы.
<button hx-get="/counter/increment" hx-target="#counter" hx-swap="innerHTML">
Увеличить на 1
</button>
<div id="counter">0</div>
Сервер (Django, Rails, Go) обрабатывает GET /counter/increment и возвращает HTML-фрагмент. Никакого состояния на клиенте, никаких хуков. Всё просто, прозрачно, легко отлаживается.
Пошаговый гайд: заменяем React-компонент на Htmx
Допустим, у вас есть форма обратной связи на React. Типичная реализация:
function ContactForm() {
const [message, setMessage] = useState('');
const [status, setStatus] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
const res = await fetch('/api/contact', {
method: 'POST',
body: JSON.stringify({ message })
});
if (res.ok) setStatus('Спасибо!');
};
return (
<form onSubmit={handleSubmit}>
<textarea value={message} onChange={e => setMessage(e.target.value)} />
<button type="submit">Отправить</button>
{status && <p>{status}</p>}
</form>
);
}
Теперь убираем React и используем Htmx с серверным рендерингом:
- HTML-шаблон (Django/Jinja2):
<form hx-post="/contact" hx-target="#form-result" hx-swap="innerHTML">
{% csrf_token %}
<textarea name="message" required></textarea>
<button type="submit">Отправить</button>
</form>
<div id="form-result"></div>
- Серверный обработчик (Python/Django):
def contact(request):
if request.method == 'POST':
message = request.POST['message']
# сохраняем, отправляем письмо...
return HttpResponse('<p>Спасибо! Мы ответим в ближайшее время.</p>')
return HttpResponse('')
- Подключаем Htmx (через CDN или npm):
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
Результат: форма работает без перезагрузки, код сократился в 3 раза, нет зависимости от React. При этом поддерживаются все современные браузеры (IE не поддерживается, но это 2026 год — IE уже не актуален).
Преимущества для команды и бизнеса
- Скорость разработки: новые фичи делаются за часы, а не дни. Нет необходимости в state-менеджере.
- Снижение багов: меньше клиентской логики — меньше ошибок. Сервер остаётся единственным источником правды.
- Лёгкий вход: HTML/CSS разработчики без глубоких знаний JS могут реализовывать динамику.
- Производительность: бандл Htmx — 14 КБ (gzip) против 120+ КБ у React. Страницы грузятся быстрее, особенно на мобильных устройствах.
- SEO: серверный рендеринг «из коробки» — поисковики видят контент сразу, без дожидания JavaScript.
Реальные кейсы внедрения
Команда HEY (почтовый сервис от Basecamp) полностью построена на Htmx в сочетании с Ruby on Rails. Разработчики отмечают, что им не приходится писать клиентские модели данных — вся логика на сервере. Другой пример — проект PizzaQL, где Htmx заменил React для панели администрирования, сократив время разработки на 40%.
Миграция не обязана быть одномоментной. Тактика «stripping React» — постепенная замена компонентов. Начинайте с простых элементов (кнопки, формы, списки), затем — целые страницы. Параллельно можно оставить React для сложных интерактивных модулей (например, графики или drag-and-drop), пока не найдётся подходящая замена.
Подводные камни и когда Htmx не подходит
Htmx не решит всех проблем:
- Сложные взаимодействия (многошаговые анимации, офлайн-режим, чат в реальном времени) — лучше реализовывать на JavaScript.
- Зависимость от сети: каждый клик отправляет запрос на сервер. При медленном соединении UX страдает.
- Отладка: традиционные DevTools не всегда удобны для отслеживания магии Htmx (хотя расширения для браузера уже есть).
Тем не менее, для большинства бизнес-приложений (CRM, админки, лендинги, блоги) Htmx — это идеальный выбор. Вы избавляетесь от «React fatigue» и возвращаете себе радость веб-разработки, собственно, ту самую vibe coding.
Заключение
Убирать React из кодовой базы — не каприз, а осознанный шаг к упрощению. Htmx доказывает, что современный веб может быть быстрым и интерактивным без тонн JavaScript. Попробуйте взять небольшой проект, заменить в нём React на Htmx и посчитать разницу в скорости разработки и объёме кода. Скорее всего, вы не захотите возвращаться.
Комментарии