В последнее время сообщество веб-разработчиков только и говорит о htmx, но что же это за новая захватывающая технология? Оказывается, все гораздо проще, чем можно было бы предположить, но полезность htmx может оправдать шумиху.
Что такое htmx?
htmx - это небольшая библиотека JavaScript с узкой направленностью. Она делает обычные функции JavaScript доступными через атрибуты HTML. Вот простой пример:
Этот код показывает пользовательский HTML-атрибут, hx-get. Если вы нажмете на эту ссылку, библиотека htmx отправит AJAX-запрос и загрузит целевую страницу без полного обновления браузера.
htmx имеет дополнительную функциональность, позволяющую отправлять запросы:
- От элементов, отличных от a и form .
- На события, отличные от click и submit.
- С помощью методов HTTP, отличных от GET и POST.
- Заменять любые части страницы, а не только ее целиком.
Хотя htmx поддерживает такие технологии, как CSS-анимация и WebSockets, его основной целью является упрощение обработки HTTP-запросов.
Как можно использовать htmx в простом веб-приложении
htmx решает конкретные функциональные задачи внутри веб-приложений или веб-сайтов, а не поведение всего приложения.
Одним из главных преимуществ библиотеки является простота ее использования. При желании вы можете скачать и установить копию, но поскольку у нее нет зависимостей, все, что вам нужно сделать для начала работы, - это добавить ссылку на скрипт в CDN:
Для локальной разработки и тестирования вам потребуется установить веб-сервер, например Apacheесли он у вас еще не запущен. Это обязательное условие, даже если вы просто экспериментируете со статическими файлами, потому что протокол file: не позволяет выполнять AJAX-запросы.
Бесконечная прокрутка - распространенная техника который сайты вроде Twitter используют для своей ленты. Когда вы достигаете нижней части списка, бесконечная прокрутка загружает больше элементов, чтобы вы могли продолжить чтение.
Эта функция, естественно, требует JavaScript для проверки позиции прокрутки страницы и загрузки новых элементов без обновления страницы. Но htmx может сделать все это за вас.
Возьмем следующую разметку, которая представляет собой список постов, используя изображение для каждого:
Представьте, что эти посты находятся в файле feed1.html, а еще больше постов - в feed2.html и т. д. На каждой странице будет отображаться одно небольшое подмножество элементов, которое можно прокручивать:
Теперь вы можете использовать ссылки "следующая страница" для перехода с одной страницы на другую, но вы также можете легко реализовать бесконечную прокрутку. Просто измените последний элемент на:
Добавление этих четырех атрибутов к последнему элементу списка реализует бесконечную прокрутку. Вот что означает каждый атрибут:
Прокручивая список до самого низа, обратите внимание на то, как страница автоматически загружает новое содержимое. Вы можете убедиться в этом, наблюдая за полосой прокрутки и проверив инструменты разработчика вашего браузера:
Обратите внимание, что при такой простой настройке статической страницы страница feed2.html включает последний элемент с атрибутом hx-get, установленным на feed3.html , и так далее. Также обратите внимание, как htmx добавил слушателя для события прокрутки.
Вы можете использовать htmx для многих других распространенных взаимодействий, включая:
- Пагинация: загрузка и замена элементов, когда посетитель нажимает на ссылку пагинации.
- Проверка формы: при отправке заменить форму либо сообщением о подтверждении, либо подмножеством формы.
- Прогресс-бары: периодически обновляйте значение прогресс-бара на основе ответа на пинг.
- Встроенное редактирование: замена элемента на текстовую область, содержащую значение этого элемента.
Каждый из этих примеров можно создать с помощью стандартного JavaScript, htmx просто значительно упрощает процесс.
Преимущества и недостатки htmx
htmx может значительно упростить общие взаимодействия, что может принести пользу многим веб-приложениям и даже многим веб-сайтам. Он позволяет дизайнерам и другим людям, работающим с внешними веб-страницами, добавлять функциональность без необходимости изучать JavaScript.
Абстрагируясь от общего поведения, htmx обеспечивает согласованность в ваших проектах и между ними. Бесконечная прокрутка будет вести себя одинаково от страницы к странице, независимо от того, кто ее реализовал.
Поскольку в htmx используется декларативный (что), а не императивный (как) подход, функциональность htmx обычно легче понять и осмыслить.
Хотя htmx позволяет забыть о JavaScript во многих контекстах, он не может решить все проблемы за вас! Вам все равно придется писать код для обработки специфической бизнес-логики и более низкоуровневой функциональности.
Поскольку htmx делает много работы за вас, у вас меньше возможностей для настройки поведения. Зачастую это положительный компромисс, но вы должны быть готовы к передаче контроля.
html может позволить вам не писать JavaScript, но вы все равно должны знать, что код JavaScript выполняется в фоновом режиме. У вас может возникнуть соблазн использовать атрибут hx-get в каждой ссылке вместо атрибута href. Но это введет зависимость от JavaScript; если код по какой-то причине не будет запущен, ваши пользователи получат ссылку, которая ничего не сделает. Вам всегда следует использовать прогрессивное улучшение чтобы избежать этого.
Если тебе понравилась статья - подпишись на канал, чтобы не пропустить ещё много полезных статей!
Также ты можешь читать меня здесь:
- Телеграм: https://t.me/gergenshin
- Яндекс Дзен: https://dzen.ru/gergen
- Официальный сайт: https://www-genshin.ru
