HTMX + Django

HTMX + Django Jace Browning

Outline • The traditional request-response architecture • Incorporating AJAX to
build interactive websites • Applying the “HTML over the wire” pattern using HTMX • Demo

Server-Side Applications

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

Models Views Templates

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

# app/views.py def get_items(request): items = Item.objects.all() context = {“items”:
items} return render(request, “app/index.html”, context)

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

Ideal Use Cases • Largely-static content • Form-based websites •
“CRUD” portals (think Django admin)

Client-Side Applications (AJAX)

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

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

Models Routers Viewsets Serializers Routers Redux Components Django Not Django
JSON

Ideal Use Cases • Rich, dynamic websites • Large teams
that hire specialists • Multiple, independently-deployable frontends • Products with a mobile or embedded component

Disadvantages • Multiple technology stacks (2+ MVCs) • State managed
on the frontend and the backend • Potentially duplicated business logic • Backend often viewed as “second-class” to the frontend • Prototyping depends on establishing a data contract

Hybrid Applications (HTMX)

“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

# app/base.html <!DOCTYPE html> <html lang="en"> <body> {% block content
%}{% endblock content %} <script src="https://unpkg.com/htmx.org@1.8.0"></script> </body> </html>

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

# app/_item.html {{ item.name }} (count: {{ item.count }})
 Increment on click.

# app/_item.html 
{{ item.name }} (count: {{ item.count }})

# app/urls.py urlpatterns = [ path(“items”, view.get_items, name=”items”), path(“items/_update/<pk>, views.update_item,
name=”items-update”), ]

# 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)

Models Views Templates Partial Partial Partial Partial HTML HTML

Advantages • All logic stays in Python! • Backend is
solely responsible for stage management • Faster prototyping using existing HTML templates • Simplified testing of partial response endpoints

Inline Editing Docs: https://htmx.org/examples/click-to-edit/ Demo: https://lunchdown.com/visits/

Active Search Docs: https://htmx.org/examples/active-search/ Demo: https://memecomplete.com/examples/

Partial Update Docs: https://htmx.org/examples/click-to-load/ Demo: https://memecomplete.com/custom/

Inﬁnite Scroll Docs: https://htmx.org/examples/infinite-scroll/ Demo: https://mediavouch.com/feed/

HTMX + Django

HTMX + Django

Jace Browning

More Decks by Jace Browning

Other Decks in Programming

Featured

Transcript

HTMX + Django Jace Browning

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

Server-Side Applications

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

Models Views Templates

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

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

# app/index.html {% include “app/_navbar.html” %} <p>Items:</p> <ul> {% for

Ideal Use Cases • Largely-static content • Form-based websites •

Client-Side Applications (AJAX)

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

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

Models Routers Viewsets Serializers Routers Redux Components Django Not Django

Ideal Use Cases • Rich, dynamic websites • Large teams

Disadvantages • Multiple technology stacks (2+ MVCs) • State managed

Hybrid Applications (HTMX)

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

# app/base.html <!DOCTYPE html> <html lang="en"> <body> {% block content

# app/index.html {% include “app/_navbar.html” %} <p>Items:</p> <ul> {% for

# app/_item.html <p> {{ item.name }} (count: {{ item.count }})

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

# app/urls.py urlpatterns = [ path(“items”, view.get_items, name=”items”), path(“items/_update/<pk>, views.update_item,

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

Models Views Templates Partial Partial Partial Partial HTML HTML

Advantages • All logic stays in Python! • Backend is

Demo

Inline Editing Docs: https://htmx.org/examples/click-to-edit/ Demo: https://lunchdown.com/visits/

Active Search Docs: https://htmx.org/examples/active-search/ Demo: https://memecomplete.com/examples/

Partial Update Docs: https://htmx.org/examples/click-to-load/ Demo: https://memecomplete.com/custom/

Inﬁnite Scroll Docs: https://htmx.org/examples/infinite-scroll/ Demo: https://mediavouch.com/feed/