HTMX
Новость 2021 год – как красиво использовать HTML и уменьшить объем кода. Это библиотека, которая позволяет создавать современные и мощные
пользовательские интерфейсы с простой разметкой. С ее помощью
AJAX-запросы, запуск CSS-переходов, вызов WebSocket и событий,
отправленных сервером, можно проводить непосредственно из элементов
HTML.
<!-- Кнопка, отправляющая POST-запрос по клику через AJAX, без JS -->
<button hx-post="/clicked" hx-swap="outerHTML">ЖМИ!</button>
hx-post - куда отправляем POST-запрос, а hx-swap - куда пишем результат запроса, внешне (заменяя родительский элемент) или внутрь (меняя содержимое)
Еще одно преимущество htmx — отсутствие инструментов сборки веб-приложений. Вы можете использовать инструмент через CDN:
<script src="<https://unpkg.com/htmx.org@1.3.3>"></script>
Поведение единицы кода должно быть максимально очевидным, если смотреть только на эту единицу кода.
<div hx-get="/clicked">Жми уже</div>
Современный HTMX отличается от старого формата HTA (от Микрософт) :
- HTMX - это современная библиотека JavaScript, которая позволяет обновлять содержимое веб-страницы без перезагрузки страницы или использования AJAX Она предоставляет простой и эффективный способ создания интерактивных веб-приложений, используя технологию серверного рендеринга и обновления содержимого на клиентской стороне.
- HTA (HTML Application) - это устаревший формат, разработанный компанией Microsoft для создания приложений на основе HTML, CSS и JavaScript HTA-приложения выполняются в специальном режиме Internet Explorer и имеют доступ к ресурсам операционной системы, таким как файлы и базы данных Однако HTA-приложения не обновляются динамически и требуют перезагрузки страницы для обновления содержимого.
- HTMX предоставляет более современный и гибкий подход к разработке веб-приложений, позволяя обновлять только необходимые части страницы без перезагрузки всей страницы. Он также интегрируется лучше с современными фреймворками и инструментами разработки, такими как React и Vue.js HTMX упрощает создание интерактивных веб-приложений, сохраняя преимущества REST-архитектуры и обеспечивая более богатый клиентский опыт.
- Поддерживается Инкрементальная загрузка: HTMX поддерживает инкрементальную загрузку данных с сервера. Вместо загрузки всех данных сразу, HTMX может получать только необходимые части информации, поэтому задержка может быть снижена до минимума.
- Кэширование: HTMX поддерживает кэширование данных на клиентской стороне. Это позволяет избежать повторных запросов к серверу, когда данные уже были получены ранее. Кэширование помогает снизить задержку и улучшает производительность приложения.
- Компрессия данных: HTMX поддерживает сжатие данных при их передаче по сети. Это позволяет сократить объем передаваемых данных и уменьшить задержку при передаче.
Развитие
HTMX - это относительно новая библиотека JavaScript, и за последние 3 года она претерпела несколько изменений и улучшений. Вот некоторые из них:
- Улучшенная производительность: HTMX был разработан с упором на быструю загрузку страниц. Благодаря своей легковесной природе и отсутствию необходимости загружать обширные библиотеки JavaScript, HTMX обеспечивает быстрые взаимодействия и снижает задержку.
- Улучшенный пользовательский опыт: HTMX позволяет обновлять содержимое страницы динамически без полной перезагрузки страницы. Это создает плавные переходы и улучшает взаимодействие пользователя с приложением.
- Интеграция с существующими технологиями: HTMX разработан для плавной интеграции с существующими технологиями и фреймворками. Это означает, что вы можете использовать HTMX вместе с вашими текущими инструментами разработки без необходимости в крупных изменениях.
- Поддержка серверного рендеринга: HTMX поддерживает серверный рендеринг, что позволяет предварительно загружать содержимое страницы на сервере и отправлять его клиенту. Это может улучшить производительность и SEO-оптимизацию вашего приложения.
- Расширенные возможности: HTMX предоставляет различные возможности для создания интерактивных веб-приложений, такие как обработка событий, анимации и динамическое обновление содержимого страницы.
Это лишь некоторые из изменений, которые произошли в HTMX за последние 3 года. HTMX продолжает развиваться и улучшаться.
Свежие примеры кода HTMX
Комментарии
