HTMX & Django

Florian Demmer

Django Meetup, 2024-01-16

Intermission

SummitLynx ist ein weltweit verfügbares digitales Gipfel- und Tourenbuch für Wanderer und Alpinisten.

www.summitlynx.com

... suchen Unterstützung für Modernisierung und Weiterentwicklung des Frontend Stack.

HTMX in 100 Seconds

django-htmx

  • by Adam Johnson (adamchainz)
  • Does not include HTMX itself
  • HtmxMiddleware (→ request.htmx)
  • HTTP helper/tools
  • Debug Error Response Handler
  • Example Project & Tips

Provide & Configure HTMX

https://unpkg.com/browse/htmx.org/dist/

{% load static %}
<!-- 
  avoid CDN for privacy and performance reasons 
  https://blog.wesleyac.com/posts/why-not-javascript-cdn
-->
<script src="{% static 'js/htmx/htmx.min.js' %}" defer></script>
<!-- optionally add HTMX extensions -->
<script src="{% static 'js/htmx/debug.js' %}" defer></script>

<!-- example configuration -->
<meta name="htmx-config" content='{"historyCacheSize": 15}'>

<!-- enable/disable extension -->
<div hx-ext="debug">
    <button hx-post="/do">Debug me!</button>
    <button hx-post="/do" hx-ext="ignore:debug">Send it!</button>
</div>

HtmxMiddleware

def my_view(request):
    # serve partial if HTMX made the request
    # HX-Request
    if request.htmx:  # HtmxDetails
        template_name = "partial.html"
    else:
        template_name = "complete.html"
    return render(template_name, ...)
  
  
def get_secret_partial(request):
    if not request.user.is_authenticated:
        # use current URL in the browser, instead of request.path
        # HX-Current-URL
        next_url = request.htmx.current_url_abs_path or ""
        return HttpResponseClientRedirect(
            f"{settings.LOGIN_URL}?next={next_url}"
        )

HTTP helper/tools

def get_secret_partial(request):
    if not request.user.is_authenticated:
        next_url = request.htmx.current_url_abs_path or ""
        # Trigger client-side redirect, instead of redirect()
        # HX-Redirect
        return HttpResponseClientRedirect(
            f"{settings.LOGIN_URL}?next={next_url}"
        )

      
# <div hx-get="/news" hx-trigger="every 2s"></div>
def my_pollable_news_view(request):
    if event_finished():
        # make HTMX stop polling
        # HTTP status code 286
        return HttpResponseStopPolling()

Error Response Handler

document.addEventListener("htmx:beforeOnLoad", function (event) {
  const xhr = event.detail.xhr;
  if (xhr.status == 500 || xhr.status == 404) {
    // Tell htmx to stop processing this response
    event.stopPropagation();
    // Replace the page with response content
    document.children[0].innerHTML = xhr.response;
  }
});
{% load django_htmx %}
<!doctype html>
<html>
  ...
  <script src="{% static 'js/htmx/htmx.min.js' %}" defer></script>
  {% django_htmx_script %}
  </body>
</html>

django-htmx

  • Example Project
  • Tips

All the things

https://htmx.org

https://htmx.org/extensions

https://django-htmx.readthedocs.io

  https://blog.wesleyac.com/posts/why-not-javascript-cdn

  • 🐘  https://wien.rocks/@fdemmer

  • 📜  https://slides.com/fdemmer

Made with Slides.com