Раніше я брався за Vue.js автоматично, майже рефлекторно. Кожен проєкт починався однаково: встановлення CLI, налаштування роутера, конфігурація стору та створення оболонки односторінкового застосунку (SPA). Неважливо, чи створював я дашборд у реальному часі, чи просту контактну форму. Vue був моїм стандартом за замовчуванням, і я вважав, що будь-що легше — це крок назад.

Це поширена звичка. Якщо ви провели роки в екосистемі React або Vue, модель SPA починає здаватися неминучою. Ви перестаєте запитувати, чи справді вам потрібен такий складний механізм. Ви просто берете його. З часом я помітив дещо тривожне. Я налаштовував сховища Vuex для адмін-панелей, яким потрібно було лише змінити статус і оновити таблицю. Я прописував логіку fetch для лендінгів, де потрібно було лише відправити адресу електронної пошти. Складність виникала не через проблеми, а через мій вибір інструменту.

Потім я почав використовувати HTMX. Ця зміна відбулася тихіше, ніж я очікував, але вона змінила мій підхід до вибору технологічного стека.

Що насправді робить HTMX

Більшість онлайн-дискусій помиляються. Люди подають це як битву Vue проти React проти HTMX. Таке порівняння зовсім не передає суті. HTMX — це не SPA-фреймворк. Він не має на меті замінити Vue. Це бібліотека, яка дозволяє HTML робити більше, ніж браузер надає «з коробки».

Замість того, щоб писати компонент, який монтується, завантажує JSON, парсить його у локальний стан і перемальовує список, ви просто додаєте атрибут до кнопки. Сервер повертає фрагменти HTML, а не пакети даних. Браузер замінює вміст на місці. Ви все ще працюєте з рендерингом сторінок на стороні сервера, але отримуєте ту саму інтерактивність, яку зазвичай асоціюють із важкими JavaScript-фронтендами.

Це не спрощення. Це інша модель. Vue пропонує вам побудувати клієнтський застосунок і керувати станом у браузері. HTMX пропонує зберігати стан на сервері та передавати HTML через мережу. Оскільки вони вирішують різні типи задач, обидва можуть співіснувати в одному проєкті без жодних конфліктів.

Коли Vue все ще є правильним вибором

Складні інтерфейси потребують Vue. Якщо ви створюєте дашборд для аналітики в реальному часі з віджетами drag-and-drop, вкладеною фільтрацією та живими графіками, що обмінюються даними між різними представленнями, вам потрібен реактивний фреймворк. Саме браузер має володіти цим станом. Ви ж не хочете робити запит до сервера щоразу, коли користувач перетягує графік або перемикає групу фільтрів. Компонентна модель Vue, його система реактивності та екосистема створені саме для цього.

Те саме стосується високоінтерактивних споживчих застосунків. Подумайте про інструмент дизайну, спільну онлайн-дошку або музичний секвенсор. Це не просто документи з кнопками. Це застосунки, які живуть у браузері. Для такої роботи Vue залишається моїм першим вибором.

Де HTMX бере на себе роль

Найбільш очевидний успіх прийшов, коли я поглянув на нудні частини своїх проєктів. Адмін-панелі змінилися першими. Бекенду адмін-панелі зазвичай потрібна таблиця записів, кілька кнопок дій, фільтри з пагінацією та одна-дві форми. Для всього цього не потрібен віртуальний DOM. Те, що йому справді потрібно — це швидкі часткові оновлення.

З HTMX кнопка видалення стає тегом з атрибутами hx-delete та hx-target. Натискаєте її, браузер надсилає запит, сервер відповідає оновленим рядком таблиці