<style> .reveal { font-size: 32px; } li { margin-top: 20px; } .reveal blockquote { width: 100%; } </style> # Django og HTMX --- # Hvad er HTMX? Et javascript library der muliggør HTML elementer at lave AJAX, CSS transitions, web sockets og andet ved at referere til HTML attributter. --- # Hvorfor HTMX? Så man slipper for at page-reloade hele DOM'en eller lave en masse boilerplate javascript når man gerne vil have dynamisk indhold. F.eks. CRUD-funktionalitet, paginering, progress-bars. --- # HTMX Eksempel - tilføj medarbejder Man definerer snippets af template filer der udskiftes med (htmx-get, htmx-post osv.) Eksempel: ```html <button id="add_medarbejder" class="btn btn-primary" hx-get="{% url 'htmxdemo:medarbejder_create_htmx' %}" hx-target="#medarbejder_list" hx-swap="beforeend">Tilføj medarbejder </button> ``` **hx-get**: Lav et GET request til URL'en hvor man returnerer sin HTMX template. **hx-target**: CSS selector for elementet der skal opdateres. **hx-swap**: Hvor elementet skal indsættes i DOM elementet ift. hx-target (f.eks. "beforeend" som sidste child i elementet). --- # HTMX Eksempel - progress bar med 100ms interval ```html <div id="progressbar-{{object.medarbejder.pk}}" {% if status < 100 %} hx-target="this" hx-get="{% url 'htmxdemo:job_view' object.pk %}" hx-trigger="load delay:100ms" hx-swap="outerHTML" {% endif %}> <div class="progress"> <div id="pb" class="progress-bar" style="width:{{ status }}%"></div> </div>{{status|floatformat:2}}% </div> ``` **hx-trigger**: Specificerer eventet der trigger requestet (hx-get f.eks.) --- # HTMX + Django * Form views kan rendere en template der kan indsættes med HTMX og modtage f.eks. POST requests hvor response indsættes med HTMX. * Djangos POST-REDIRECT-GET cycle virker out-of-the-box med HTMX, vi skal blot sørge for at det vi redirecter til renderer noget vi kan sætte ind med HTMX. --- # Demo + Kildekode https://git.magenta.dk/internal/udviklerdage/sommer-2022/htmx