Что такое Htmx? Как Htmx может упростить ваш сайт?

Сообщество веб-разработчиков в последнее время много обсуждает Htmx, но что это за новая технология? Оказывается, это гораздо проще, чем можно было ожидать, но польза от htmx огромна.

Что такое HTMLX?

htmx — небольшая библиотека JavaScript узкой направленности. Он обеспечивает общие функции JavaScript через атрибуты HTML. Вот простой пример:

О

Этот код отображает пользовательский атрибут HTML hx-get. Если вы нажмете эту ссылку, библиотека htmx отправит запрос AJAX и загрузит целевую страницу без обновления всего браузера.

htmx имеет дополнительный функционал, позволяющий отправлять запросы:

1. Из элементов, отличных от a и form.
2. О событиях, кроме щелчка и отправки.
3. Используйте методы HTTP, отличные от GET и POST.
4. Замените любую часть страницы, а не всю.

Хотя htmx поддерживает такие технологии, как CSS-анимация и WebSockets, его основная цель — упростить обработку HTTP-запросов.

Как использовать htmx в простом веб-приложении

htmx касается конкретных функций веб-приложения или веб-сайта, а не работы всего приложения.

Большим преимуществом библиотеки является то, что с ней очень легко начать. При желании вы можете скачать и установить копию, но, поскольку у нее нет зависимостей, все, что вам нужно сделать для начала, — это добавить ссылку на скрипт в CDN:

Для локальной разработки и тестирования вам потребуется настроить веб-сервер, например Apache, если он у вас еще не работает. Это обязательное требование, даже если вы просто тестируете статические файлы, поскольку протокол file: не разрешает запросы AJAX.

Простой пример использования бесконечной прокрутки

Примечание. Вы можете скачать этот простой пример из репозитория GitHub.

Бесконечная прокрутка — распространенный метод, который такие сайты, как Twitter, используют для своих каналов. Когда вы дойдете до конца списка, бесконечная прокрутка загрузит больше элементов, чтобы вы могли продолжить чтение.

Эта функция, естественно, требует JavaScript для проверки положения прокрутки страницы и загрузки новых элементов без обновления страницы. Но htmx может сделать все это за вас.

Следующая разметка представляет список сообщений, используя изображение для каждого сообщения:

Представьте, что у вас есть эти элементы в одном файле,feed1.html, а также другие элементы в файлеfeed2.html и т. д. На каждой странице будет отображаться подмножество элементов, которые вы можете прокручивать:

Теперь вы можете использовать ссылку «Следующая страница» для перехода от страницы к странице, но вы также можете легко выполнять бесконечную прокрутку. Просто измените последнюю запись на:

Добавление этих 4 свойств к последнему элементу списка приведет к бесконечной прокрутке. Вот значение каждого атрибута:

Характеристики

Ценить

Значение

hx-триггер

раскрытый. раскрытый

Когда этот элемент впервые появляется на экране.

hx-получить

фид2.html

. отправьте запрос GET на файлfeed2.html, .

hx-выбрать

ли

. выберите элементы li из ответа, .

hx-своп

окончание

.и добавьте их после этого элемента.

Прокручивая список вниз, обратите внимание, как страница автоматически загружает новый контент. Вы можете убедиться в этом, наблюдая за полосами прокрутки и проверив инструменты разработчика вашего браузера:

Обратите внимание, что при этой простой настройке статической страницы страницаfeed2.html включает последний элемент, для атрибута hx-get которого установлено значениеfeed3.html и т. д. Также обратите внимание, как htmx добавил прослушиватель для события прокрутки.

Другие потенциальные варианты использования htmx

Вы можете использовать htmx для многих других распространенных взаимодействий, в том числе:

1. Разбивка на страницы: загружает и заменяет элементы, когда посетители нажимают на ссылки с нумерацией страниц.
2. Проверка формы: при отправке замените форму сообщением проверки или подмножеством формы.
3. Индикатор выполнения: периодически обновляет значение индикатора выполнения в зависимости от ответа на запрос ping.
4. Встроенное редактирование: заменяет элемент текстовой областью, содержащей значение этого элемента.

Каждый из этих примеров может быть создан с использованием стандартного JavaScript, htmx значительно упрощает процесс.

Преимущества и ограничения htmx

Преимущества HTMLX

htmx может значительно упростить общие взаимодействия, которые могут принести пользу многим веб-приложениям и даже многим веб-сайтам. Это позволяет дизайнерам и другим лицам, работающим с интерфейсными веб-сайтами, добавлять функциональность без необходимости изучения JavaScript.

Абстрагируя общее поведение, htmx обеспечивает согласованность между вашими проектами и между ними. Бесконечная прокрутка будет работать одинаково от страницы к странице, независимо от того, кто ее реализовал.

Поскольку в нем делается упор на декларативный подход (что), а не на императивный подход (как), функциональность htmx зачастую легче понять и рассуждать.

Ограничения HTMLX

Хотя htmx может помочь вам забыть о JavaScript во многих контекстах, он не может решить все ваши проблемы! Вам все равно придется писать код для обработки конкретной бизнес-логики и многих функций нижнего уровня.

Поскольку htmx выполняет большую часть работы за вас, возможности настройки поведения ограничены. Зачастую это положительный компромисс, но вы должны быть готовы отказаться от контроля.

Html может помочь вам избежать написания JavaScript, но вы все равно должны помнить, что код JavaScript выполняется в фоновом режиме. Возможно, вы захотите использовать атрибут hx-get для каждой ссылки вместо атрибута href. Но это создает зависимость от JavaScript; Если по какой-либо причине код не запускается, у ваших пользователей останется ссылка, которая ничего не делает. Чтобы предотвратить это, вам всегда следует практиковать прогрессивные подъемы.