Modern web interfaces with HTMX and Alpine.js

Most interfaces don't need a single page application, a build chain and a second codebase. With HTMX and Alpine.js your Python backend stays in charge, and a few HTML attributes give you the interactivity users expect.

Duration: 3 days · Level: intermediate

For: backend and fullstack developers who want modern interfaces without a heavy frontend framework.

Prerequisites: basic HTML and CSS, an understanding of HTTP, experience with a server-side framework (Django, Flask, FastAPI…).

Pricing Contact
Modern web interfaces with HTMX and Alpine.js

Day 1 — HTTP basics and HTMX

  • REST architecture and HTTP principles
  • The hypermedia approach
  • Installing and configuring HTMX
  • hx-get and hx-post: asynchronous requests and forms
  • hx-target and hx-swap: what to update, and how
  • Returning HTML fragments from Django, Flask or FastAPI
  • The boosting pattern for smooth navigation
  • Events with hx-trigger: standard and custom
  • Modifiers: once, delay, throttle
  • Loading indicators and user feedback
  • Dynamic forms and validation
  • Partial updates with hx-select

Day 2 — Alpine.js, and HTMX with it

  • The philosophy and architecture of Alpine.js
  • Reactive state with x-data
  • x-show and x-if: conditional display
  • x-for: loops and lists
  • x-model: two-way binding
  • x-on: handling events
  • Methods and computed properties
  • Components and reuse
  • Strategies for combining the two
  • Talking between components: dispatching and listening
  • Hybrid server/client patterns
  • Global state with Alpine.store()

Day 3 — Advanced, production

  • Out-of-band swaps with HTMX
  • WebSockets and Server-Sent Events
  • HTMX extensions: JSON API, client-side templates, morphing
  • Alpine.js plugins and extensions
  • Performance: lazy loading
  • Debouncing and throttling
  • Caching strategies
  • CSRF protection with HTMX in Django, Flask and FastAPI
  • Preventing XSS

Elevate Your Python Proficiency!

Contact Examples of programs