HMPL — лучшая альтернатива HTMX
- пятница, 18 октября 2024 г. в 00:00:07
Всем привет! В данной статье рассмотрим такой javascript модуль как HMPL и как он может заменить HTMX в проекте. Также, рассмотрим в чём их отличия, преимущества и недостатки.
При дальнейшем сравнение двух модулей стоит учесть, что один является языком шаблонов, когда как другой является набором инструментов для работы с HTML, реализуемых через атрибуты и не только.
Начнём с общей концепции для двух модулей.
Концепция сокращения javascript кода путём выноса компонентов пользовательского интерфейса на сервер
Модуль HMPL схож по концепции с HTMX. Мы также можем брать HTML с сервера по API, заменяя тем самым современные фреймворки и библиотеки для создания UI. Возьмём небольшой пример, иллюстрирующий работу HMPL и HTMX, а также такого фреймворка как Vue.js:
Vue.js пример:
createApp({
setup() {
const count = ref(0);
return {
count,
};
},
template: `<div>
<button @click="count++">Click!</button>
<div>Clicks: {{ count }}</div>
</div>`,
}).mount("#app");Size: 226 bytes (4KB on disk)
HMPL пример:
document.querySelector("#app").append(
hmpl.compile(
`<div>
<button>Click!</button>
<div>Clicks: {{ "src": "/api/clicks", "after": "click:button" }}</div>
</div>`
)().response
);Size: 206 bytes (4KB on disk)
HTMX пример:
<div>
<button hx-post="/api/increment" hx-target="#counter" hx-swap="outerHTML">Click!</button>
<div id="counter">Clicks: 0</div>
</div>140 bytes (4 KB on disk)
На примере простого кликера можно увидеть (с небольшими оговорками по данным на стороне сервера и на стороне клиента, а также по html и js разметке, но не в это главная идея), что мы получаем одинаковый интерфейс, хотя размеры файлов на клиенте будут совершенно разными. В этом как раз и основное преимущество подхода создания уже готового, или шаблонного компонента UI на стороне сервера, чтобы пользователь сайта загружал его быстрее с сохранением результата.
Теперь, вспомним, насколько большие приложения сегодня, ну, или по крайней мере раньше (когда server-side rendering не был ещё настолько популярным), могли получаться при использовании фреймворков и библиотек. Тот же SPA (Single Page Application), генерирует весь контент через javascript, когда в html у нас буквально одна строчка, но в том и прикол, что при 10 килобайтном html мы получаем javascript файл размером в несколько десятков мегабайт. Такой сайт, первом заходе, пользователи могут грузить долго.
К примеру, если потенциальный клиент захочет по быстрому заказать себе цветы, то он не будет ждать 10-15 секунд, пока сайт магазина доставки прогрузится, он перейдёт на другой сайт, где сайт будет грузиться быстрее.
Есть ещё много прикладных примеров работы сайтов, которые могут влиять на воронку продаж. Но, суть в том, что главное - это скорость и удобство интерфейса, а вот тут уже есть различия в подходах. Но, лучше сделать это в отдельной статье. Тут же рассматривается сравнение HMPL и HTMX.
Зачем использовать HMPL и в чём его преимущества перед HTMX?
В данном разделе постараюсь рассказать про несколько основных причин, по которым вы можете выбрать, в некоторых случаях, HMPL вместо HTMX:
При схожей идее сокращения кода, два модуля отличаются в понятиях. В случае HTMX, с одной стороны, мы получаем удобный инструментарий работы с уже существующим DOM, но с другой, всё это происходит через HTML и обновляется буквально в режиме реального времени. Мы с большим трудом, через нетипичиные решения, можем работать более ли менее через javascript, а по сути, работа с javascript почти полностью отсутствует. В случае HMPL, с одной стороны, мы без труда можем работать с javascript; генерировать кастомный RequestInit, создавать тысячи отдельных DOM узлов с той же поддержкой серверного UI, что и на HTMX, но с другой - всё таки работа происходит с кодом, что не всегда удобно, когда хочется создавать проекты быстрее. Возьмём пример кода:
HMPL пример:
import { compile ) from "hmpl-js";
const templateFn = compile(
`<div>
<form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form">
<div class="form-example">
<label for="name">Enter your email: </label>
<input type="text" name="email" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Register!" />
</div>
</form>
<p>Email {
{
"src":"/api/register",
"after":"submit:#form",
}
} successfully registered!</p>
</div>`
);
const initFn = (ctx) => {
const event = ctx.request.event;
return {
body: new FormData(event.target, event.submitter),
credentials: "same-origin"
};
};
const obj = templateFn(initFn);
wrapper.appendChild(obj.response);HTMX пример:
<script src="/path/to/htmx.min.js"></script>
<div>
<form hx-post="/api/register" hx-target="#notification" hx-swap="outerHTML">
<div class="form-row">
<label for="name">Enter your email: </label>
<input type="text" name="email" id="email" required />
</div>
<div class="form-row">
<input type="submit" value="Register!" />
</div>
</form>
<p id="notification"></p>
</div>На данном примере чётко видно, что HTMX - это больше про максимальное убыстрение и укорачивание кода, когда как HMPL - это нечто комбинированное между HTMX и современным фреймворком или библиотекой для создания UI. Можно сказать, что мы получаем несколько похожий результат, но с учётом того, что мы можем кастомизировать запрос на сервер.
Синтаксис HMPL тоже является в своём роде преимуществом, потому что объекты запроса не привязаны к какому-либо тегу. При рендеринге они заменяются на коментарии, которые не засоряют DOM ненужными тегами. Пример синтаксиса:
HMPL полностью построен на fetch заросах, которые ввели как стандарт в 2015 году. HTMX для поддержки IE13 по дефолту использует XMLHTTPRequest, который был введён в 2000 году. Функция fetch позволяет использовать современные возможности javascript в браузерах, такие как AbortController, signals и другое
И, есть ещё достаточное количество преимуществ, по типу отдельного расширения файла .hmpl при работе с вебпаком и другие, но, на мой взгляд, те, которые я выделил, являются наиболее важными. Вебпак конфиг:
Недостатки HMPL
Также, у hmpl есть ряд недостатков, о которых мне бы хотелось рассказать:
У HMPL пока нету поддержки WebSocket, что может усложнить внедерение кода в проект. В HTMX данная поддержка присутствует.
Так как происходит использование fetch, то в некоторых старых версиях браузера вёрстка поддерживаться не будет.
HTMX - это годами протестированная технология, когда как HMPL - это новый модуль.
Вывод
Язык шаблонов HMPL может заменить HTMX в тех случаях, когда требуется гибкая настройка запроса, а также непосредственная работа с узлами через javascript; Если вы, допустим, хотите создать цикл из 1000 одинаковых узлов, и при этом иметь преимущества серверо-ориентированного UI, то он также подойдёт для задачи. Если же цель стоит в полной минимизации работы с javascript, либо же в использовании устоявшегося протестированного модуля и простым подключением к серверу с минимальным количеством HTML кода, то тут HTMX хорош.