Упрощение динамической веб-разработки с Django и HTMX (Часть 3): Интеграция с Django

Надежный бэкэнд с философией "батарейки в комплекте" — Django — и HTMX, который ловко использует свежеиспеченные фрагменты HTML от этого бэкэнда, образуют поистине фантастический дуэт.

В этом посте, продолжая серию "Упрощение динамической веб-разработки с Django и HTMX", мы рассмотрим два конкретных метода интеграции HTMX в реальный проект Django.

Изображение, демонстрирующее интеграцию Django и HTMX

1. Прямое использование без сторонних пакетов

Это самый чистый и легкий способ. Без сложной установки, просто добавив одну строку скрипта в HTML-шаблон, вы можете сразу же использовать функции HTMX.

Метод установки

Официальная документация HTMX предлагает несколько методов установки, но самый быстрый способ — это использование CDN.

  • Использование CDN (самый быстрый): Просто вставьте следующий код в тег <head> вашего base.html.
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js" integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" crossorigin="anonymous"></script>
  • Прямая загрузка: Если важна безопасность или работа в офлайн-среде, вы можете загрузить htmx.min.js, поместить его в папку static вашего проекта и указать путь.
  • npm: Если вы используете систему сборки, вы можете установить HTMX с помощью команды npm install htmx.org.

Перейти к официальной документации по установке HTMX

2. Использование пакета django-htmx

В экосистеме Django существует специальная библиотека, которая помогает использовать HTMX "по-джанговски". Это django-htmx.

Установка и настройка

Следуйте инструкциям из официальной документации django-htmx:

  1. Установка пакета

    bash python -m pip install django-htmx

  2. Регистрация в INSTALLED_APPS

    python INSTALLED_APPS = [ ..., "django_htmx", ..., ]

  3. Добавление промежуточного ПО (Middleware)

    python MIDDLEWARE = [ ..., "django_htmx.middleware.HtmxMiddleware", ..., ]

Насколько удобен django-htmx?

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

Согласно официальной документации django-htmx, его главная особенность заключается в расширении объекта request через промежуточное ПО (middleware). После регистрации middleware появляется атрибут request.htmx, через который можно легко получить доступ к таким деталям, как:

  • Проверка информации о запросе: boosted, current_url, current_url_abs_path, history_restore_request, prompt
  • Управление целью и триггером: target, trigger, trigger_name, triggering_event

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

  • {% htmx_script %}: Основной тег для вставки скрипта библиотеки HTMX.
  • {% django_htmx_script %}: Вспомогательный тег, который добавляет только расширенный скрипт для отладки, если HTMX был подключен через CDN или статически.

Особенно впечатляет модуль django_htmx.http, который содержит 11 полезных методов. Среди них выделяется trigger_client_event(). Он позволяет легко формировать заголовок HX-Trigger на стороне сервера и отправлять его вместе с ответом, тем самым контролируя события клиента напрямую с сервера. Это мощный инструмент, который становится очень часто используемым, как только вы к нему привыкнете.

Конечно, все эти функции разработчик может реализовать самостоятельно, написав свое промежуточное ПО или вручную манипулируя заголовками. Поэтому, если вы, как и я, предпочитаете создавать все самостоятельно, этот пакет может не показаться вам обязательным.

В заключение, django-htmx — это не "обязательный", а скорее "пакет, который определенно делает разработку более комфортной". Объем официальной документации невелик, и его можно освоить за час-два, так что вы можете решить, стоит ли его внедрять, исходя из особенностей вашего проекта.

Завершение

Если вы планируете реализовать лишь несколько простых функций, таких как кнопка-переключатель или функция "лайк", то прямого использования (CDN) будет вполне достаточно. В конце концов, минимизация ненужных зависимостей может быть наиболее экономичной.

Однако, если масштаб проекта увеличивается, и вам часто приходится одновременно обрабатывать как полные, так и частичные страницы в одном представлении, то стоит рассмотреть django-htmx.

Какой подход вам больше по душе? На самом деле, django-htmx — не тяжелый пакет, он довольно легкий, поэтому, возможно, правильным решением будет просто установить его без лишних раздумий. Все зависит от настроения и характера разработчика. Я думаю, это определяется склонностью разработчика: "минимизировать зависимости" или "делать большинство вещей самостоятельно".

Но какой бы выбор вы ни сделали, с HTMX вы сможете насладиться возвращением к простоте HTML, отойдя от JavaScript.

Читать по теме :