Tutorial sample: Django HTMX and friends

This is a sample of a tutorial that is part of a workshop run by Prelude.tech

Prelude supports the Guild of Educators

The Guild of Educators is a friendly and curious community dedicated to spreading evidence-based education techniques and best practices. Their mission is to empower educators.

If you are interested in the art and science of teaching tech (especially Python) then you are welcome to join.

• Pro educators with years of experience are welcome, come and share your skills!
• New educators, occasional volunteer educators, people who might want to get into education one day, and the curious are also more than welcome

We are a community. We share skills and experiences. Our goal is to empower educators.

Guild of Educators is free to join!

Tutorial time!

Once upon a time, if you wanted to build a modern frontend web experience using a Python based web framework, an obvious choice was to expose a bunch of APIs and build your frontend in something else entirely (eg React).

Times have changed.

Tools like HTMX and AlpineJS have made HTML great again.

These tools make full stack web dev fast and fun, they simplify development, shrink code bases, and give backend devs the ability to do modern frontend work. In my personal experience I've seen the adoption of these tools lead to massive productivity gains for junior and senior devs alike.

This workshop will walk you through the process of building and testing a CRUD application with a rich and modern frontend.

As we build this out, you will implement a few patterns for handling some of web development’s most common frontend requirements. For example, hydration.

We'll be making use of:

• Django
• HTMX
• a sprinkle of AlpineJS
• a touch of of Tailwindcss
• Playwright for testing

Even though this is a Django-based tutorial, we wont be covering any super advanced Django functionality. Our focus will be on the frontend, and testing the frontend.

If you would like to see what these tools are about, here are a few talks:

• DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it's awesome!
• DjangoCon US Keynote: Testing Modern Web Apps Like a Champion with Andrew Knight

Directory structure

There are 2 directories to know about:

1. tutorial
2. demo

1. Tutorial

This is where the magic is at. This is a series of markdown files that walk you through all the things. Start at the top.

2. Demo

This is the application that gets built up during the demo. You can poke around here to see the finished product of what we are doing.