Разработка фронтенда сайта на HTMX

Разработка фронтенда сайта на HTMX

HTMX — библиотека, которая возвращает AJAX, WebSocket и Server-Sent Events обратно в HTML-атрибуты. Вы описываете поведение прямо в разметке, сервер отдаёт HTML-фрагменты, браузер вставляет их в нужное место DOM. JavaScript не нужен вообще.

Это не шаг назад — это осознанный выбор архитектуры HATEOAS (Hypermedia as the Engine of Application State), где сервер управляет состоянием, а клиент — только отображает.

Принцип работы

Классический AJAX: сервер → JSON → клиент парсит → обновляет DOM через JS.

HTMX: сервер → HTML-фрагмент → HTMX вставляет в целевой элемент.

<!-- Вместо fetch + JSON + DOM manipulation -->
<button
  hx-post="/cart/add"
  hx-vals='{"product_id": "42"}'
  hx-target="#cart-count"
  hx-swap="innerHTML"
>
  В корзину
</button>

<span id="cart-count">3</span>

Сервер на /cart/add возвращает просто <span>4</span> — и счётчик обновился. Весь JS — это htmx.min.js (14 KB gzip).

Атрибуты и возможности

Паттерн: таблица с сортировкой и пагинацией

<!-- templates/users/table.html -->
<table id="users-table">
  <thead>
    <tr>
      <th>
        <a
          hx-get="/users?sort=name&order=asc"
          hx-target="#users-table"
          hx-push-url="true"
        >Имя ↕</a>
      </th>
      <th>Email</th>
      <th>Роль</th>
    </tr>
  </thead>
  <tbody>
    {% for user in users %}
    <tr>
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
      <td>{{ user.role }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<div
  hx-get="/users?page={{ next_page }}"
  hx-target="#users-table tbody"
  hx-swap="beforeend"
  hx-trigger="revealed"
>
  <!-- Бесконечная прокрутка: загружается когда элемент появляется в viewport -->
</div>

Серверный обработчик на Laravel:

public function index(Request $request): Response
{
    $users = User::query()
        ->when($request->sort, fn($q) => $q->orderBy($request->sort, $request->order ?? 'asc'))
        ->paginate(20);

    // Если HTMX-запрос — возвращаем только фрагмент таблицы
    if ($request->header('HX-Request')) {
        return response()->view('users.table', compact('users'));
    }

    // Обычный запрос — полная страница
    return response()->view('users.index', compact('users'));
}

Инлайн-редактирование

<tr id="user-42">
  <td>Иван Петров</td>
  <td>[email protected]</td>
  <td>
    <button
      hx-get="/users/42/edit"
      hx-target="#user-42"
      hx-swap="outerHTML"
    >Редактировать</button>
  </td>
</tr>

Сервер на /users/42/edit возвращает <tr> с формой. После сохранения — возвращает обновлённый <tr> с данными. Без единой строки JavaScript.

Интеграция с Alpine.js

HTMX и Alpine.js отлично сочетаются: HTMX управляет сетевыми запросами и обновлением DOM, Alpine.js — локальной интерактивностью (дропдауны, табы, валидация форм):

<div
  x-data="{ open: false }"
  hx-get="/notifications"
  hx-trigger="load"
  hx-target="#notifications-list"
>
  <button @click="open = !open" class="relative">
    Уведомления
    <span id="notifications-count" class="badge">0</span>
  </button>
  <div x-show="open" @click.outside="open = false">
    <ul id="notifications-list"></ul>
  </div>
</div>

WebSocket и SSE для реального времени

<!-- Server-Sent Events: обновление в реальном времени -->
<div hx-sse="connect:/events/prices">
  <span
    hx-sse="swap:price-update"
    hx-target="this"
    hx-swap="innerHTML"
    id="btc-price"
  >Загрузка...</span>
</div>

Сервер отправляет:

event: price-update
data: <span>$67,234</span>

Цена обновляется без polling, без JS-обработчиков.

Сроки реализации

• Неделя 1: интеграция HTMX в существующий backend (Laravel/Django/Rails/Go), настройка базовых паттернов request/response
• Неделя 2: CRUD-интерфейсы, пагинация, поиск, сортировка
• Неделя 3: real-time через SSE/WebSocket, оптимистичные обновления, индикаторы загрузки
• Неделя 4: тестирование, оптимизация, документация паттернов для команды

Для существующих серверных приложений HTMX позволяет добавить SPA-like поведение без переписывания фронтенда. Это особенно ценно при миграции с классического MPA к интерактивному UI без смены backend-технологии.