Tweet
Tweet

Slide 1

Slide 1 text

HTMX + Django Jace Browning

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Server-Side Applications

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Models Views Templates

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

# app/index.html {% include “app/_navbar.html” %}

Items:

    {% for item in items %}
  • {% include “app/_item.html” %}
    • {% endfor %}
# app/_item.html

{{ item.name }} (count: {{ item.count }})

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Client-Side Applications (AJAX)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Models Routers Viewsets Serializers Routers Redux Components Django Not Django JSON

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Hybrid Applications (HTMX)

Slide 21

Slide 21 text

“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

Slide 22

Slide 22 text

# app/base.html {% block content %}{% endblock content %}

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

# app/index.html {% include “app/_navbar.html” %}

Items:

    {% for item in items %}
  • {% include “app/_item.html” %}
    • {% endfor %}
# app/_item.html

{{ item.name }} (count: {{ item.count }})

Slide 25

Slide 25 text

# app/_item.html

{{ item.name }} (count: {{ item.count }})

Increment on click.

Slide 26

Slide 26 text

# app/_item.html

{{ item.name }} (count: {{ item.count }})

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Models Views Templates Partial Partial Partial Partial HTML HTML

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Demo

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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