Ruby on Rails

HTMX — это библиотека для улучшения взаимодействия с веб-страницей с помощью минимального использования JavaScript. Она позволяет отправлять HTTP-запросы и обновлять содержимое страниц без полной перезагрузки. Вместо использования тяжёлых фреймворков JavaScript, таких как React или Angular, HTMX делает акцент на работе с HTML и серверной логикой. Это упрощает создание динамичных интерфейсов, сохраняя большую часть логики на серверной стороне. HTMX можно интегрировать с различными серверными фреймворками, в том числе и с Ruby on Rails. В этой части статьи рассмотрим, как эффективно использовать HTMX с Rails.

Интеграция HTMX в Rails

Ruby on Rails предоставляет отличные инструменты для создания веб-приложений. Одной из главных особенностей является возможность создавать «реактивные» интерфейсы, используя серверные запросы, что идеально сочетается с философией HTMX. Основная идея заключается в том, чтобы обрабатывать динамические изменения интерфейса с помощью серверных рендеров вместо использования JavaScript, который выполняется на клиентской стороне.

Установка HTMX

Для начала необходимо подключить HTMX к Rails-проекту. Это можно сделать несколькими способами, но чаще всего используется включение библиотеки через CDN. Для этого достаточно добавить следующий тег в файл application.html.erb:

<head>
  <script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>

Это подключит последнюю версию библиотеки HTMX. Если необходимо использовать более конкретную версию, можно указать нужную версию в URL.

Другой способ — скачать библиотеку и подключить её через ассеты Rails. В таком случае нужно добавить HTMX в файл application.js:

//= require htmx

Основные атрибуты HTMX

HTMX использует несколько основных атрибутов HTML-элементов для работы с сервером и обновления контента:

  • hx-get — инициирует GET-запрос к серверу.
  • hx-post — инициирует POST-запрос.
  • hx-target — указывает элемент, который должен быть обновлён результатом запроса.
  • hx-swap — задаёт способ замены содержимого (например, innerHTML, outerHTML, beforebegin и другие).
  • hx-trigger — определяет, какое событие должно инициировать запрос (например, клик по кнопке или изменение значения в форме).

Пример использования HTMX для загрузки данных с сервера:

<button hx-get="/load_data" hx-target="#result">Загрузить данные</button>
<div id="result"></div>

В данном примере при клике на кнопку будет отправлен GET-запрос на URL /load_data, и полученные данные будут вставлены в элемент с id result.

Серверная обработка запросов

После того как HTMX отправляет запрос на сервер, важно правильно обработать этот запрос и вернуть нужный ответ. В случае использования Ruby on Rails серверная обработка не отличается от стандартных контроллеров.

Предположим, что мы хотим загружать список пользователей с сервера. Для этого создадим контроллер, который будет обрабатывать запросы:

class UsersController < ApplicationController
  def index
    @users = User.all
    render partial: "users_list", locals: { users: @users }
  end
end

Здесь метод index загружает всех пользователей и рендерит частичную вьюшку users_list.html.erb, которая будет вставлена в элемент, указанный в hx-target.

Частичная вьюшка (_users_list.html.erb) будет содержать HTML-разметку для отображения списка пользователей:

<ul>
  <% users.each do |user| %>
    <li><%= user.name %></li>
  <% end %>
</ul>

HTMX автоматически обновит содержимое на клиенте, заменив элемент с id result на новый HTML-код, который вернёт сервер.

Обработка POST-запросов

Иногда нужно отправить данные на сервер, например, при создании нового пользователя. Это можно сделать с помощью HTMX через POST-запрос. Пример использования формы:

<form hx-post="/users" hx-target="#users-list" hx-swap="beforeend">
  <input type="text" name="user[name]" placeholder="Имя пользователя" />
  <button type="submit">Добавить</button>
</form>

В этом примере, когда форма отправляется, создаётся POST-запрос на URL /users. Сервер обрабатывает запрос и возвращает обновлённый список пользователей, который будет добавлен в начало элемента с id users-list.

Контроллер, который обрабатывает создание нового пользователя, может выглядеть следующим образом:

class UsersController < ApplicationController
  def create
    @user = User.new(user_params)
    if @user.save
      @users = User.all
      render partial: "users_list", locals: { users: @users }
    else
      render partial: "form", locals: { user: @user }
    end
  end

  private

  def user_params
    params.require(:user).permit(:name)
  end
end

Здесь контроллер обрабатывает создание пользователя и возвращает обновлённый список пользователей, который будет вставлен на клиентскую страницу.

Советы по работе с HTMX и Rails

  1. Минимизация использования JavaScript: HTMX позволяет значительно уменьшить необходимость в JavaScript, что особенно полезно для простых приложений, где динамические элементы не требуют сложной логики на клиенте. Вместо того чтобы создавать весь фронтенд с использованием сложных JS-фреймворков, можно использовать серверные шаблоны для динамического обновления интерфейса.

  2. Использование турбо-страниц: В Rails 7 по умолчанию используется Turbo для асинхронных обновлений страниц. Turbo и HTMX могут работать вместе, но важно правильно настроить обработку событий, чтобы избежать конфликтов между ними.

  3. Отложенные обновления: Если запросы с использованием HTMX могут выполняться несколько раз подряд (например, при фильтрации данных), можно использовать атрибут hx-trigger с параметром load, чтобы обновление происходило при первоначальной загрузке страницы.

  4. Управление состоянием: Для более сложных сценариев, например, когда необходимо поддерживать состояние формы или страницы, можно использовать серверную логику для отслеживания состояния и отправки соответствующих данных в ответ на запросы HTMX.

  5. Обработка ошибок: HTMX позволяет удобно обрабатывать ошибки с помощью атрибутов hx-on-error. Это позволяет перехватывать ошибки запросов и отображать их в интерфейсе пользователя.

Заключение

HTMX — это удобный инструмент для работы с динамическими веб-страницами, позволяющий значительно упростить разработку фронтенда. Взаимодействие с сервером происходит через простые HTML-атрибуты, что позволяет значительно сократить количество JavaScript-кода. В сочетании с Ruby on Rails, HTMX позволяет создать быстрые и эффективные веб-приложения с минимумом клиентского кода и сильной серверной логикой.

Оглавление