HTMX - это небольшая библиотека JavaScript, которая позволяет использовать технологию AJAX и другие современные техники веб-разработки для создания интерактивных пользовательских интерфейсов.
Библиотека HTMX была впервые выпущена в 2020 году. Ее создал Бретт Хелмер (Brett Helmer), который работал над проектом, когда ему пришла идея о том, чтобы использовать HTML и HTTP в сочетании с AJAX-запросами. Он создал HTMX как простое решение для обновления содержимого веб-страниц на основе HTML и HTTP, без необходимости написания JavaScript кода.
HTMX может быть использован как самостоятельная библиотека или вместе с другими библиотеками, такими как jQuery, Vue.js, React и другие.
На данный момент в русскоязычном интернете не сильно много информации о HTMX, т.к библиотека появилась недавно и еще не завоевала достаточное количество поклонников, но за-то на иностранных источниках, информации о HTMX достаточно.
Официальный сайт: https://htmx.org/
Загрузку библиотеки можно произвести очень простым способом - использую CDN:
<script src="https://unpkg.com/htmx.org@1.9.2" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"></script>
Также библиотеку можно установить через пакетный менеджер npm -npm install htmx.org; или же просто скачав файлы и поместим их к себе в проект.
HTMX предлагает такой функционал, как триггеры, которые позволяют связывать события на стороне клиента с запросами на сервер, без написания JavaScript кода.
Вот несколько примеров триггеров HTMX:
1. `hx-get`: триггер, который отправляет GET-запрос на сервер при событии клика. Например, `<div hx-get="/api/data">` отправит GET-запрос на сервер по адресу `/api/data`, когда пользователь кликнет на этот элемент.
2. `hx-post`: триггер, который отправляет POST-запрос на сервер при событии клика. Например, `<form hx-post="/api/data"><input type="text" name="username"></form>` отправит POST-запрос на сервер по адресу `/api/data` со значением `username`.
3. `hx-trigger`: триггер, который отправляет запрос на сервер по определенному событию клиента. Например, `<input type="checkbox" hx-trigger="change" hx-post="/api/data">` отправит POST-запрос на сервер по адресу `/api/data`, когда пользователь изменит состояние чекбокса.
4. `hx-swap`: триггер, который заменяет содержимое элемента на полученные данные от сервера. Например, `<div hx-get="/api/data" hx-swap="innerHTML"></div>` отправит GET-запрос на сервер по адресу `/api/data` и заменит содержимое элемента на полученные данные.
Таким образом, триггеры HTMX упрощают взаимодействие между клиентом и сервером, предоставляя легкий способ отправки AJAX-запросов.
Ознакомится с документацией HTMX можно по ссылке: https://htmx.org/docs/
Пример использования HTMX для загрузки данных по клику на кнопку:
<button hx-get="/get-data" hx-target="#data-container">Get Data</button>
<div id="data-container"></div>
В этом примере мы создаем кнопку со свойством hx-get, которое говорит о том, что мы хотим выполнить GET-запрос на адрес /get-data, когда пользователь нажмет на кнопку. Мы также указываем hx-target, который говорит о том, что результаты запроса должны быть обновлены в элементе с идентификатором data-container.
Пример отправки данных формы:
<form hx-post="/save-data" hx-target="#data-container">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">Submit</button>
</form>
<div id="data-container"></div>
В этом примере мы создаем форму со свойством hx-post, которое говорит о том, что мы хотим выполнить POST-запрос на адрес /save-data, когда пользователь отправляет форму. Мы также указываем hx-target, который говорит о том, что результаты запроса должны быть обновлены в элементе с идентификатором data-container.
Когда происходят ошибки при загрузке данных, HTMX предоставляет несколько способов обработки ошибок. Один из них – это использование свойства hx-err, которое позволяет определить элемент, в который будет добавлен текст ошибки при возникновении ошибки.
Пример обработки ошибки:
<button hx-get="/get-data" hx-target="#data-container" hx-err="#error-message">Get Data</button>
<div id="data-container"></div>
<div id="error-message"></div>
В этом примере мы создаем кнопку со свойством hx-get и указываем элемент с идентификатором error-message в свойстве hx-err. Если произойдет ошибка, сообщение об ошибке будет добавлено в этот элемент.
В заключении:
HTMX – это мощная библиотека, которая значительно упрощает работу с веб-приложениями. Она позволяет добавлять динамические элементы на страницу без необходимости перезагружать ее, работать с формами и обрабатывать ошибки. Использование HTMX может увеличить производительность и уменьшить количество кода, который необходимо написать для создания интерактивных веб-приложений.
