Введение

htmx в кратком изложении

htmx — это библиотека, которая позволяет вам получать доступ к современным возможностям браузера непосредственно из HTML, а не с помощью JavaScript.

Чтобы понять htmx, сначала рассмотрим тег якоря:

<a href="/blog">Блог</a>

Этот тег якоря говорит браузеру:

Когда пользователь нажимает на эту ссылку, выполни HTTP GET запрос к /blog и загрузи содержимое ответа в окно браузера.

Учитывая это, рассмотрим следующий фрагмент HTML:

<button
    hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Нажми меня!
</button>

Это говорит htmx:

Когда пользователь нажимает на эту кнопку, выполни HTTP POST запрос к /clicked и используй содержимое ответа для замены элемента с id parent-div в DOM.

htmx расширяет и обобщает основную идею HTML как гипертекста, открывая множество новых возможностей непосредственно в языке:

• Теперь любой элемент, а не только якоря и формы, может выполнять HTTP-запрос.
• Теперь любое событие, а не только клики или отправки форм, может инициировать запросы.
• Теперь можно использовать любой HTTP-метод, а не только GET и POST.
• Теперь любой элемент, а не только всё окно, может быть целевым объектом для обновления по запросу.

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

При желании можно добавлять префикс data- при использовании htmx:

<a data-hx-post="/click">Нажми меня!</a>

Наконец, версия 1 htmx всё ещё сопровождается и поддерживает IE11.

Руководство по миграции с 1.x на 2.x

Если вы переходите на htmx 2.x с htmx 1.x, пожалуйста, ознакомьтесь с руководством по миграции htmx 1.x.

Если вы переходите на htmx с intercooler.js, пожалуйста, ознакомьтесь с руководством по миграции с intercooler.