1 of 37

HTMX

Make web development simple and fun again

DjangoCon EU 2021

You are looking at the old slides.

The new slides:

HTMX Slides v3

2 of 37

My opinionated Odyssey

…. finding a simple way to do web development

3 of 37

Start of Odyssey

1999: CGI Scripting with Shell and Perl

​

2001: Python

​

2006: No fancy JS, boring DB applications.

​

2008..today: Python and Django

​

​

​

4 of 37

Hypes of the past

​

Perl, Visual Basic, CORBA

​

XML+XSLT

​

Java Applets

​

Macromedia/Adobe Flash

​

​

​

​

More about this topic: Deadends of IT

5 of 37

2014: Angular

Wow, that’s the future: The server sends JSON to the browser.

Like “real” application.

But customers kept us busy doing the things we did before (Django with some jQuery)

JSON = Clean

HTML = Dirty

6 of 37

7 of 37

2020: React / Vue

I played with React.

​

React ... like in-browser PHP

​

Vue is nice ...

​

Great for native App…

​

But, I don’t want a native App. First endpoint in DRF, then FE … grrr

​

​

​

​

8 of 37

2021 Small project from scratch

​

Spare-time vs Business Context.

​

Reduce Cognitive Load

​

9 of 37

Spare-time Project:

Too many options!

​

Analysis Paralysis

​

→ make list/spreadsheet of options.

10 of 37

I don’t get paid by the hour

  • Sparetime vs Business Context

​

  • I want FE and BE to be easy

​

  • Nobody says use tool A for task B

11 of 37

Frontend Blues

​

... But I still haven't found what I'm looking for ...

12 of 37

Om - What do I like?

  • I like the Django Forms library
    • Create HTML (on the server)
    • Validate user input (on the server)

​

  • I like Django ORM

​

  • HTTP & HTML & CSS

​

  • WebVitals: Fast Page Load

​

  • Javascript

13 of 37

What do I want to improve?

  • Full Page Reload after submitting a form. Post/Redirect/Get Grrrr

​

  • jQuery … outdated.

​

  • DIY JS library for submitting/reloading snippets: No fun.

​

14 of 37

One Page, several Parts

Part 1

Part 2

Part 3

15 of 37

I want to update each part on its own

Part 1

Part 2

Part 3

GET https://example.com/news

PUT https://example.com/chat

POST https://example.com/foo-form

16 of 37

SPA ?

Single Page Application?

​

….. no, not needed.

​

I just want to Submit/Reload parts of the page.

17 of 37

Form Validation in the Browser?

nice to have validation on the client side …. but

​

but I need to validate on server, too.

​

html5 has some fine stuff

​

I don’t need JS based form validation on the client side now (maybe later)

​

Write everything in JS to re-use three lines of code?

18 of 37

SSR Hype

  • Looked at Server-Side-Rendering React/Vue
  • wait ! ! !
  • This huge stack ....
  • I want good web vitals
  • Are there alternatives to SSR?

19 of 37

Rendering on the Web (https://developers.google.com/)

20 of 37

Is there no alternative?

21 of 37

JSON HTML Fragments over the wire

  • Unpoly: unpoly.com
  • Hotwire: hotwire.dev
  • …
  • HTMX: htmx.org

​

_! Revolution !_

Breaking up with JS frameworks (Henning Koch)

22 of 37

HTMX

FrOW: Which Lib?

  • Unpoly
  • Hotwire
  • HTMX
  • Vanilla JS
  • ...

23 of 37

One Page, several Parts

Part 1

Part 2

Part 3

24 of 37

Partial Page Updates with HTMX

….

​

<button

hx-get=”URL"

hx-swap="outerHTML">

Press me

</button>

​

….

​

​

​

….

​

​

<div>Simple div</div>

​

​

​

….

​

​

​

<div>Simple div</div>

jsfiddle

Response from URL:

25 of 37

HTML Fragments over the wire

  1. User clicks on button
  2. htmx receives the click event.
  3. htmx does a HTTP GET/POST to the URL
  4. Server sends fragment/snippet to browser
  5. htmx merges fragment into the page

​

​

​

26 of 37

HTMX is declarative like ...

like HTML

like CSS

like SQL

like Django admin.py

like Terraform

like K8s manifest

​

…. nice!

27 of 37

HTMX

​

​

  • JS Lib, so that you can avoid JS

​

  • Works with every language (server side)

​

  • ~10k min.gz

​

  • WebVitals: 0 kByte needed for first paint!!!

28 of 37

htmx.org/examples/

​

Click to Edit

Cascading Selects

Infinite Scroll

Tabs

Animations

29 of 37

Separation of Concerns

​

Locality of Behaviour

​

  • Backend Code (Python)
  • HTML / Templates
  • CSS
  • JS
  • Backend Code
    • Django: format_html()
    • Atomic/Inline CSS

​

​

30 of 37

Django

  • Small methods return small fragments
  • Function-based-views instead of class-based
  • SafeString is super cool and format_html() is back
  • No need for the django template language.

​

31 of 37

My Naming Pattern

Django Function based views:

​

foo_page(request, ...) → returns page response. URL: /foo

​

foo_hx(request, ...) → returns fragment response. URL: /foo_hx

​

foo_html(...) → returns HTML SafeString (for internal re-use)

32 of 37

HTMX is great for:

  • SEO: super fast Largest Contentful Paint (LCP) (Great first-time-user experience). Compare this to loading of Gmail.
  • Professional, serious (but boring) stateless applications (like Shops, ERP systems, database front-ends)
  • MVP, optimize later.

NOT:

  • offline-first applications (like React native)
  • Interactive Chart-Library
  • WYSIWYG Editor

33 of 37

Rethinking “Smart” re-use of API?

JSON

HTML

SQL

34 of 37

Serve the matching format

gRPC (JSON)

HTML

Stable API

Improve daily, A/B Testing

SQL

35 of 37

End of Odyssey?

It is just the beginning :-)

36 of 37

Example Project

https://github.com/guettli/django-htmx-fun

37 of 37

Thomas Güttler, June 2021

Thank you for listening.

​

Feedback is welcome!

@guettli