Почему вам стоит выбрать 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.

Далее
Мд Саидур Рахман