htmx talk 2021
1.0.0
Dieses Repository enthält den Beispielcode und Folien für den Vortrag „Server-Side is Dead! Long Live Server-Side (+ HTMX)“, der auf der DjangoCon US 2021 und dann (modifiziert) für Code Code Code im Dezember 2021 gehalten wurde.
Beispiele
Funktionalität für den Nachrichteneingang (Lesen/Archivieren)
Ein-Klick-Einstellungen
Mehrere Formulare in mehreren Registerkarten
Faule Daten-Popovers
Folien
Video
Ressourcen
Hier sind Screenshots der Beispiele, die ich bespreche, beim Übergang von einfachen Django-Vorlagen (plus ein bisschen Ajax im settings ) zu Django + HTMX. Der examples enthält ein Django-Projekt mit jedem dieser Beispiele.
Beachten Sie, dass diese Beispiele auf das absolute Minimum reduziert sind, um die Konzepte, die ich im Vortrag bespreche, so klar wie möglich zu machen, sodass die Beispiele keine bewährten Sicherheitspraktiken berücksichtigen. Im settings möchten Sie beispielsweise die Ansicht mit @login_required dekorieren.
Das Beispiel enthält Vorrichtungen für eine schnelle Inbetriebnahme. Melden Sie sich nach der Migration, dem Laden von Fixtures und dem Starten des Runservers bei Admin (http://127.0.0.1:8000/admin/) mit den Anmeldeinformationen user pass an und gehen Sie dann zur Homepage (http://127.0.0.1:8000/). .
Wie fügen Sie die Möglichkeit hinzu, auf ein Symbol zu klicken, um Nachrichten zu archivieren, ohne die gesamte Seite aktualisieren zu müssen, um die Änderungen zu sehen? Hier ist ein Beispiel.
In diesem Beispiel ermöglichen wir dem aktuellen Benutzer, seine Einstellungen über eine Reihe von Kontrollkästchen (die sich auf BooleanField-Felder in der Datenbank beziehen) zu ändern, ohne die Seite zu aktualisieren. Sie erhalten außerdem eine kurze Benachrichtigung über das Update.
Dieses Beispiel stellt einen Anwendungsfall dar, bei dem auf einer einzelnen Webseite mehrere Formulare benötigt werden, die jeweils in einer eigenen Registerkarte verborgen sind. Wir verwenden HTMX, um den Inhalt jeder Registerkarte nur bei Bedarf zu laden und jedes Formular abzusenden, ohne dass eine Seitenaktualisierung erforderlich ist.
Dieses Beispiel stellt einen Anwendungsfall dar, bei dem eine datenreiche Karte (oder Datentabelle usw.) Popovers mit zusätzlichen Informationen verwendet. Anstatt den gesamten Popover-Inhalt beim Laden der Seite zu laden, können wir den Popover-Inhalt verzögert laden, wenn der Benutzer auf die Kartenfunktion klickt.
Zu jedem im Vortrag besprochenen Muster wird ein Demonstrationsprojekt bereitgestellt.
Installieren Sie die Anforderungen pip install -r requirements.txt
Migrieren Sie python manage.py migrate
Installieren Sie Fixtures python manage.py loaddata fixtures.json
Führen Sie server python manage.py runserver aus
Melden Sie sich beim Administrator http://127.0.0.1:8000/admin/ mit den Anmeldeinformationen user & pass an
Gehen Sie auf die Homepage http://127.0.0.1:8000/ und nutzen Sie die Navigationsmöglichkeiten, um die verschiedenen Demonstrationen auszuprobieren. Hinweis: Öffnen Sie den Bereich „Entwicklungstools“ Ihres Browsers.
Folien sind im Medienordner verfügbar. Hier können Sie direkt darauf zugreifen:
Laden Sie die OpenDocument-Präsentationsdatei herunter
OpenDocument Flat XML-Präsentationsdatei anzeigen
Video zur DjangoConUS 2021 YouTube-Playlist. Video zur Code Code Code YouTube-Playlist
Im Vortrag erwähnte Ressourcen:
htmx.org – Die Startseite für HTMX-Beispiele, Referenzen und weitere Ressourcen.
django-htmx – Adam Johnsons Django-Paket mit hilfreichen Dienstprogrammen zur einfacheren Integration von Django und HTMX.
awesome-htmx – Links zu Vorträgen, Blogbeiträgen, Beispielen und anderen Dingen im Zusammenhang mit HTMX.
HTMX Discord – Sehr aktives Community-Forum zur Diskussion von HTMX und Django + HTMX.
r/htmx auf Reddit
HTMX auf GitHub
_hyperscript – Eine spekulative Javascript-Bibliothek, die für die Zusammenarbeit mit HTMX entwickelt wurde. Vereinfacht das Schreiben von Event-Handlern und die Entwicklung reaktionsschneller Benutzeroberflächen.
Alpine.js – Eine leichte Javascript-Bibliothek zum Erstellen von Verhalten direkt in Ihrem Markup, die gut mit HTMX zusammenspielt.
