Чому ви повинні вибрати HTMX для вашого наступного веб-проєкту - і відмовитися від застарілого MPA та складного SPA

Я створюю багато побічних проектів, тому завжди шукаю технології та парадигми, які дозволяють мені будувати їх швидше та дешевше з подібною якістю. Протягом останніх кількох місяців я експериментую зі створенням веб-додатків за допомогою низько-js інструментів, таких як HTMX та Alpine.

У цьому пості я поділюся, чому вважаю, що HTMX є чудовим вибором для швидшої та дешевшої розробки веб-додатків і чому він тепер є основною частиною мого технологічного стеку - HAM Stack.

MPA проти SPA
MPA проти SPA

Багатосторінкові додатки (MPA)
На початку у нас були багатосторінкові програми (MPA).

Кожен URL веде на веб-сторінку
Ця веб-сторінка відображається на сервері та надсилається назад користувачу
Якщо вам потрібно оновити щось на сторінці (, оскільки користувач щось змінює або потрібно оновити ), тоді вся сторінка повинна перезавантажитися.
Це працює добре, але створює дуже повільне / незграбне відчуття, оскільки вам потрібно перезавантажити ВСЕ кожного разу, коли щось на сторінці змінюється. Для прикладу цього - подумайте про веб-сайт державного уряду, більшість з них все ще є старомодними MPA і вони виглядають старими та незграбними в порівнянні з більшістю сучасних додатків.

Плюси та мінуси MPA

Плюси: Просто будувати
Недоліки: Відчувається повільним і незграбним через оновлення
Односторінкові додатки (SPA)
Щоб вирішити це, були створені односторінкові програми (SPA).

URL завантажує великий JS вантаж, що містить купу логіки програми
Цей JS відповідає за рендеринг сторінки
Він використовує внутрішній стан, щоб визначити, як повинна виглядати сторінка, і виконує передачу даних за лаштунками, тому потрібно оновлювати лише ті частини сторінки, які потрібно змінити.
Це відчувається краще для користувача, оскільки зміни відбуваються швидше. Сторінка оновлюється лише там, де це потрібно, і нам не потрібно повне оновлення сторінки для зміни даних. Більшість додатків / вебсайтів сьогодні відчуваються саме так, оскільки це загалом забезпечує кращий користувацький досвід.

Переваги: Багатий "сучасний" користувацький досвід
Недоліки: Складно на великій шкалі - обробка передачі даних (graphQL був створений для цього), абстракції та логіка додатків розміри вантажу
Отже, в загальному:

Багатосторінкові додатки (MPA) - Легко створити, але важко отримати "сучасний" користувацький досвід
Односторінкові додатки (SPA) - Складно будувати, але можуть забезпечити багатий "сучасний" користувацький досвід
MPA проти HTMX проти SPA
MPA проти HTMX проти SPA

Натхнення для зображення від u/Abhilash26 на r/htmx.

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

HTMX в основному розширює HTML, щоб він міг виконувати часткові перезавантаження сторінки.

Будь-який елемент може вказати, як він може отримувати актуальні дані та коли це слід робити.
Елемент може вказати, що робити з новими даними - замінити себе або інші елементи на сторінці.
Якщо ми поглянемо на порівняння MPA та SPA, ми можемо побачити, що відсутність часткових перезавантажень сторінки насправді є головною перешкодою для MPA. Тому додавання цієї можливості в MPA в значній мірі дозволяє отримати більшість багатих "сучасних" користувацьких вражень SPA з рівнем складності MPA.

HTMX для побічних проектів
Мета побічного проекту часто полягає в тому, щоб просто створити річ. Ви, ймовірно, не маєте команди інженерів або фінансування від венчурних капіталістів для цього - це просто ви і ваш комп'ютер.

Отже, зниження вартості будівництва - у часі та грошах - є вирішальним для успіху побічного проекту.

З моєї точки зору, HTMX забезпечує чудовий баланс між можливістю створення сучасних додатків з дуже низькою складністю (і, отже, витратами часу та грошей ). Таким чином, це стало основною частиною мого технологічного стеку - HAM Stack.

Далі
Мд Сайдуру Рахману