Розробка фронтенду сайту на 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), налаштування базових паттернів запит/відповідь
• Тиждень 2: CRUD-інтерфейси, пагінація, пошук, сортування
• Тиждень 3: real-time через SSE/WebSocket, оптимістичні оновлення, індикатори завантаження
• Тиждень 4: тестування, оптимізація, документація паттернів для команди

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