Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTMX + Django

HTMX + Django

HTMX is a library to build interactive web applications by accessing the power of “hypertext” directly from HTML. No custom JavaScript! This talk explores the benefits of this architecture and shows how it can be applied to a Django project through simple modifications to your existing HTML templates.

Eff2cdaa8474520ed29ebc38031fab87?s=128

Jace Browning

July 19, 2021
Tweet

Transcript

  1. HTMX + Django Jace Browning

  2. Outline • The traditional request-response architecture • Incorporating AJAX to

    build interactive websites • Applying the “HTML over the wire” pattern using HTMX • Demo
  3. Server-Side Applications

  4. https://en.wikipedia.org/wiki/File:MVC-Process.svg

  5. Models Views Templates

  6. # app/urls.py urlpatterns = [ path(“items”, view.get_items, name=”items”), ]

  7. # app/views.py def get_items(request): items = Item.objects.all() context = {“items”:

    items} return render(request, “app/index.html”, context)
  8. # app/index.html {% include “app/_navbar.html” %} <p>Items:</p> <ul> {% for

    item in items %} <li> {% include “app/_item.html” %} </li> {% endfor %} </ul> # app/_item.html <p> {{ item.name }} (count: {{ item.count }}) </p>
  9. Ideal Use Cases • Largely-static content • Form-based websites •

    “CRUD” portals (think Django admin)
  10. Client-Side Applications (AJAX)

  11. https://en.wikipedia.org/wiki/File:Ajax-vergleich-en.svg

  12. Typical Progression 1. Add JavaScript to existing HTML templates 2.

    Pull in a component library for rendering (e.g. React) 3. Hand over routing control to the frontend 4. Rewrite all HTML views as JSON APIs (i.e. Django REST Framework viewsets) 5. Completely extract the frontend from the backend
  13. Models Routers Viewsets Serializers Routers Redux Components Django Not Django

    JSON
  14. Ideal Use Cases • Rich, dynamic websites • Large teams

    that hire specialists • Multiple, independently-deployable frontends • Products with a mobile or embedded component
  15. Disadvantages • Multiple technology stacks (2+ MVCs) • Potentially duplicated

    business logic • Backend often viewed as “second-class” to the frontend • Prototyping depends on establishing a data contract
  16. Hybrid Applications (HTMX)

  17. “HTMX allows you to access AJAX, CSS Transitions, WebSockets and

    Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.” https://htmx.org
  18. # app/base.html <!DOCTYPE html> <html lang="en"> <body> {% block content

    %}{% endblock content %} <script src="https://unpkg.com/htmx.org@1.5.0"></script> </body> </html>
  19. # app/index.html {% include “app/_navbar.html” %} <p>Items:</p> <ul> {% for

    item in items %} <li> {% include “app/_item.html” %} </li> {% endfor %} </ul> # app/_item.html <p> {{ item.name }} (count: {{ item.count }}) </p>
  20. # app/_item.html <p> {{ item.name }} (count: {{ item.count }})

    </p> Increment on click.
  21. # app/_item.html <p hx-trigger=”click” hx-get=”{% url ‘items-update’ item.pk %}” hx-swap=”outerHTML”>

    {{ item.name }} (count: {{ item.count }}) </p>
  22. # app/urls.py urlpatterns = [ path(“items”, view.get_items, name=”items”), path(“items/_update/<pk>, views.update_item,

    name=”items-update”), ]
  23. # app/views.py def get_items(request): items = Item.objects.all() context = {“items”:

    items} return render(request, “app/index.html”, context) def update_item(request, pk): item = Item.objects.get(pk=pk) item.count += 1 item.save() context = {“item”: item} return render(request, “app/_item.html”, context)
  24. Models Views Templates Partial Partial Partial Partial HTML HTML

  25. Advantages • All logic stays in Python! • Faster prototyping

    • Simplified testing
  26. Demo