htmx talk 2021
1.0.0
Этот репозиторий содержит пример кода и слайды доклада «Серверная сторона мертва! Да здравствует серверная часть (+ HTMX)», проведённого на DjangoCon US 2021, а затем (изменённого) для Code Code Code в декабре 2021 года.
Примеры
Функциональность почтового ящика (чтение/архивирование)
Настройки в один клик
Несколько форм на нескольких вкладках
Ленивые всплывающие окна с данными
Слайды
Видео
Ресурсы
Вот скриншоты примеров, которые я рассказываю, переходя от простых шаблонов Django (плюс немного ajax в примере settings ) к Django + HTMX. Папка examples содержит проект django с каждым из этих примеров.
Имейте в виду, что эти примеры сокращены до абсолютного минимума, чтобы сделать концепции, которые я обсуждаю в докладе, максимально ясными, поэтому примеры не учитывают лучшие практики безопасности. Например, в примере settings вы захотите украсить представление @login_required .
Пример включает в себя приспособления для быстрого запуска и запуска. После миграции, загрузки фикстур и запуска сервера запуска войдите в систему администратора (http://127.0.0.1:8000/admin/) с pass данными user , а затем перейдите на домашнюю страницу (http://127.0.0.1:8000/). .
Как добавить возможность щелкнуть значок для архивации сообщений без необходимости обновлять всю страницу, чтобы увидеть изменения? Вот пример.
В этом примере мы разрешаем текущему пользователю изменять свои настройки с помощью набора флажков (которые относятся к полям BooleanField в базе данных) без обновления страницы. Они также получают мгновенное уведомление об обновлении.
В этом примере представлен вариант использования, когда на одной веб-странице необходимо несколько форм, каждая из которых скрыта на отдельной вкладке. Мы используем HTMX для загрузки содержимого каждой вкладки только при необходимости и для отправки каждой формы без необходимости обновления страницы.
В этом примере представлен вариант использования, когда карта с большим объемом данных (или таблица данных и т. д.) использует всплывающие окна с дополнительной информацией. Вместо того, чтобы загружать весь контент всплывающего окна при загрузке страницы, мы можем лениво загружать содержимое всплывающего окна, когда пользователь нажимает на функцию карты.
К каждому шаблону, обсуждаемому в докладе, прилагается демонстрационный проект.
Установите требования pip install -r requirements.txt
Миграция python manage.py migrate
Установите фикстуры python manage.py loaddata fixtures.json
Запустить сервер python manage.py runserver
Войдите в систему администратора http://127.0.0.1:8000/admin/ с учетными данными: user и pass
Перейдите на домашнюю страницу http://127.0.0.1:8000/ и используйте параметры навигации, чтобы опробовать различные демонстрации. Подсказка: откройте панель инструментов разработки вашего браузера.
Слайды доступны в папке мультимедиа. Вы можете получить к ним доступ прямо здесь:
Скачать файл презентации OpenDocument
Просмотр файла презентации OpenDocument Flat XML
Видео о плейлисте YouTube DjangoConUS 2021 Видео о плейлисте Code Code Code на YouTube
Ресурсы, упомянутые в докладе:
htmx.org — дом для примеров, ссылок и дополнительных ресурсов HTMX.
django-htmx — пакет django Адама Джонсона с полезными утилитами, упрощающими интеграцию Django и HTMX.
Awesome-htmx — ссылки на обсуждения, сообщения в блогах, примеры и другие вещи, связанные с HTMX.
HTMX Discord — очень активное сообщество для обсуждения HTMX и Django + HTMX.
r/htmx на Reddit
HTMX на GitHub
_hyperscript — спекулятивная библиотека JavaScript, предназначенная для работы вместе с HTMX. Упрощает написание обработчиков событий и разработку быстродействующих пользовательских интерфейсов.
Alpine.js — легкая библиотека JavaScript для создания поведения непосредственно в разметке, которая прекрасно работает с HTMX.
