/htmx-talk-2021

Code examples and slides from my 2021 talk Server-Side is Dead! Long Live Server-Side (+ HTMX), presented at DjangoCon and Code Code Code

Primary LanguageJavaScript

Server-Side is Dead! Long Live Server-Side (+ HTMX)

This repository contains the example code and slides for the talk "Server-Side is Dead! Long Live Server-Side (+ HTMX)", given at DjangoCon US 2021 and then (modified) for Code Code Code in December of 2021.

Contents

Examples

Here are screenshots of the examples I talk through, transitioning from plain Django templates (plus a bit of ajax in the settings example), to Django + HTMX. The examples folder contains a django project with each of these examples.

Keep in mind these examples are stripped to the absolute minimum in order to make the concepts I discuss in the talk as clear as possible, so the examples do not take security best practices into account. For instance, in the settings example, you would want to decorate the view with @login_required.

The example includes fixtures for getting up-and-running quickly. After migrating, loading fixtures, and starting runserver, log into admin (http://127.0.0.1:8000/admin/) with credentials user pass, and then go to the homepage (http://127.0.0.1:8000/).

Messaging

How do you add the ability to click on an icon to archive messages, without having to refresh the entire page to see the changes? Here's an example.

Messages screenshot

Settings

In this example, we allow the current user to change their settings via a set of checkboxes (which relate to BooleanField fields in the database) without refreshing the page. They also get a momentary alert of the update.

One-click settings screenshot

Tabs-With-Forms

This example presents a use-case where multiple forms are needed on a single webpage, each hidden within its own tab. We use HTMX to load each tab's contents only when needed and to submit each form without needing a page refresh.

Tabbed forms screenshot

Maps with Lazy Data Popovers

This example presents a use-case where a data-rich map (or datatable, etc) utilized popovers with additional information. Rather than loading all of the popover content on page load, we can load the popover contents lazily when the user clicks on the map feature.

Lazy Data Popovers screenshot

Demonstration Project

A demonstration project is provided with each pattern discussed in the talk.

  1. Install the requirements pip install -r requirements.txt
  2. Migrate python manage.py migrate
  3. Install fixtures python manage.py loaddata fixtures.json
  4. Run server python manage.py runserver
  5. Log into admin http://127.0.0.1:8000/admin/ with credentials: user & pass
  6. Go to the home page http://127.0.0.1:8000/ and use the navigation options to try out the various demonstrations. Hint: open your browser's development tools pane.

Slides

Slides are available in the media folder. You can access them directly here:

Video

Video on DjangoConUS 2021 YouTube Playlist Video on Code Code Code YouTube Playlist

Resources

Resources mentioned in the talk:

  • htmx.org - The home for HTMX examples, references, and further resources.
  • django-htmx - Adam Johnson's django package with helpful utilities for making integration of Django and HTMX easier.
  • awesome-htmx - Links to talks, blog posts, examples, and other things related to HTMX.
  • HTMX Discord - Very active community board for discussing HTMX and Django + HTMX.
  • r/htmx on Reddit
  • HTMX on GitHub
  • _hyperscript - A speculative javascript library designed to work alongside HTMX. Simplifies writing event handlers and developing highly responsive user interfaces.
  • Alpine.js - A lightweight javascript library for composing behavior directly in your markup which plays nicely with HTMX.