Сегодня веб-пользователи ожидают плавного и динамичного взаимодействия с одностраничными приложениями (SPA). Однако при создании SPA часто используются сложные фреймворки, такие как React и Angular, которые могут быть сложными для изучения и работы. В этом модуле мы рассмотрим htmx — библиотеку, которая предлагает свежий взгляд на создание динамичного веб-интерфейса за счет использования таких функций, как переходы Ajax и CSS непосредственно в HTML.
В этом шаге мы рассмотрим возможности HTMX, как он упрощает динамическую веб-разработку и как вы можете использовать его потенциал для улучшения процесса веб-разработки.
Что такое HTMX и как он работает?
При создании интерактивных веб-приложений у разработчиков традиционно было два основных варианта, каждый со своими компромиссами:
С одной стороны, существуют многостраничные приложения (MPA), которые обновляют всю страницу каждый раз, когда пользователь взаимодействует с ней. Такой подход гарантирует, что сервер контролирует состояние приложения, а клиент точно представляет его. Однако полная перезагрузка страницы может привести к медленной и неуклюжей работе пользователя.
С другой стороны, существуют одностраничные приложения (SPA), которые полагаются на JavaScript, работающий в браузере, для управления состоянием приложения. Они взаимодействуют с сервером с помощью вызовов API, которые возвращают данные, часто в формате JSON. Затем SPA использует эти данные для обновления пользовательского интерфейса без обновления страницы, обеспечивая гораздо более плавный пользовательский интерфейс, что-то вроде родного настольного или мобильного приложения. Однако и этот подход не идеален. Вычислительные накладные расходы обычно выше из-за существенной обработки на стороне клиента, начальное время загрузки может быть медленнее, поскольку клиенту приходится загружать и анализировать большие пакеты JavaScript перед рендерингом первой страницы, а настройка среды разработки часто связана со сложной сборкой, инструментами и рабочими процессами.
htmx представляет собой нечто среднее между этими двумя крайностями. Он предлагает преимущества пользовательского интерфейса SPA — без необходимости полной перезагрузки страницы — при сохранении простоты MPA на стороне сервера. В этой модели вместо возврата данных, которые клиент должен интерпретировать и отображать, сервер отвечает фрагментами HTML. htmx затем просто заменяет эти фрагменты, чтобы обновить пользовательский интерфейс.
Этот подход упрощает процесс разработки за счет минимизации сложности на стороне клиента, а также значительного использования JavaScript, характерного для SPA. Он не требует сложной настройки и обеспечивает плавный и отзывчивый пользовательский интерфейс.
Ajax-запросы: подход HTMX
Одним из основных преимуществ htmx является то, что он дает разработчикам возможность отправлять запросы Ajax непосредственно из элементов HTML, используя набор различных атрибутов. Каждый атрибут представляет отдельный метод HTTP-запроса:
hx-get: отправляет GET запрос на указанный URL.
hx-post: отправляет POST запрос на указанный URL.
hx-put: отправляет PUT запрос на указанный URL.
hx-patch: отправляет PATCH запрос на указанный URL.
hx-delete: отправляет DELETE запрос на указанный URL.
Эти атрибуты принимают URL-адрес, на который они будут отправлять запрос Ajax. По умолчанию запросы Ajax запускаются «естественным» событием HTML-элемента (например, щелчком в случае кнопки или событием изменения в случае поля ввода).
Рассмотрим следующее:
<button hx-get="/api/resource">Load Data</button>В приведенном выше примере элементу button назначается hx-get атрибут. Как только кнопка нажата, GET-запрос отправляется на /api/resource URL-адрес.
Что происходит, когда данные возвращаются с сервера? По умолчанию htmx вставит этот ответ непосредственно в инициирующий элемент — в нашем примере это button. Однако htmx не ограничивается этим поведением и предоставляет возможность указывать различные элементы в качестве места назначения для данных ответа.
