Делаем гипер быстрые сайты с использованием HTMX, WordPress & WooCommerce

Примеры использования HTMX

Ниже приведены несколько примеров использования HTMX.

AJAX-запросы

HTMX позволяет легко выполнять AJAX-запросы. Например, можно создать кнопку, которая отправляет POST-запрос на сервер при нажатии:

<button hx-post="/clicked" hx-trigger="click">Нажми меня</button>

Этот код отправляет запрос на указанный URL, когда пользователь нажимает на кнопку, и обновляет часть страницы с ответом сервера.

Динамическое обновление контента

С помощью атрибута hx-swap можно управлять тем, как будет происходить замена контента на странице.

Например, можно обновить содержимое <div>:

<div id="content" hx-get="/new-content" hx-swap="innerHTML">Старый контент</div>

При выполнении GET-запроса на /new-content содержимое <div> будет заменено на ответ сервера.

Использование WebSockets

HTMX поддерживает WebSockets, что позволяет создавать приложения с реальным временем. Например, можно настроить обновление данных на странице при получении новых сообщений:

<div hx-ws="connect:/ws" hx-swap="innerHTML">Сообщения</div>

Этот код подключается к WebSocket-серверу и обновляет содержимое <div> при получении новых данных.

Переходы с использованием CSS

HTMX позволяет добавлять анимации при замене контента. Например, можно использовать CSS-переходы для плавного обновления:

<div hx-get="/new-content" hx-swap="innerHTML" hx-swap-oob="true" hx-transition="fade">Контент</div>

Здесь hx-transition может быть настроен для применения CSS-анимации при замене контента.

Формы и валидация

HTMX также упрощает работу с формами. Например, можно отправить форму и обновить часть страницы с сообщением об успехе или ошибке:

   <form hx-post="/submit" hx-target="#response">
       <input type="text" name="data" required>
       <button type="submit">Отправить</button>
   </form>
   <div id="response"></div>

После отправки формы содержимое <div id="response"> будет обновлено в зависимости от ответа сервера.

Эти примеры демонстрируют, как HTMX может значительно упростить разработку динамичных веб-приложений, позволяя разработчикам сосредоточиться на HTML и минимизировать использование JavaScript.

HTMXer — плагин для WP про HTMX

Я поискал разные плагины, нашел парочку, но все они оказались кривыми и косыми.

Потому пришлось написать свой плагин.

Плагин направлен на улучшение функциональности WordPress и WooCommerce за счет использования возможностей HTMX для динамического обновления контента без полной перезагрузки страницы. Этот современный подход улучшает пользовательский опыт и производительность сайта, сохраняя совместимость с существующими темами и плагинами WordPress.

Простой пример использования HTMXer

Мне нужно чтобы сайт грузился быстро через nginx fastCGI cache или через EdgeCache от CloudFlare.

В качестве базовой задачи — понимаем что нам нужен тулбар или кнопки для админа — но они должны грузиться асинхронно — чтобы не сбивать быстрый синхронный поток загрузки сайта. Но при этом чтобы были динамически и понимали пользователя.

Берем и делаем плагин https://github.com/aiiddqd/aab/

Он реализует все ключевые фишки:

• контент в базе статичен и про кеш — грузится очень быстро
• весь динамический контент про пользователя — загружается асинхронно
• это позволяет работать с сайтом быстро — но при этом можно работать авторизованно

Готовый API под WordPress

У плагина есть ряд хуков

Базовый враппер

Использует теги HTMX

<div hx-get="/wp-json/htmxer/toolbar" hx-trigger="load delay:0s" hx-swap="outerHTML"></div>

url https://github.com/aiiddqd/aab/blob/main/main.php

AJAX ответ

На основе запроса — используем хук по аналогии с WP AJAX. Но иная структура.

По сути тоже самое — ответ на AJAX.

add_action('htmxer/toolbar', function ($context) {
    echo 'Hello World';
});

Контекст (опционально)

Контекст — это если надо что то передать внутрь AJAX.

add_filter('htmxer/context', function ($context) {
    global $wp;
    $post_id = get_post()->ID ?? null;
    $context['post_id'] = $post_id;
    $context['url'] = site_url($wp->request);
    return $context;
});

Итого

Вот так работают все современные и быстрые сайты.

Весь базовый контент грузится как статичный кеш страниц и быстро.

А все что про пользователя — грузится как динамические острова.

Так работают все: NextJS, TALL-stack или все кто угодно.

Но вот это решение приносит подобное решение для WordPress & WooCommerce.

Дальше больше )