Interfaces web modernes avec HTMX et Alpine.js

La plupart des interfaces n'ont pas besoin d'une single page application, d'une chaîne de build et d'une seconde base de code. Avec HTMX et Alpine.js, votre backend Python garde la main, et quelques attributs HTML suffisent pour l'interactivité qu'attendent les utilisateurs.

Durée : 3 jours · Niveau : intermédiaire

Pour qui : les développeurs backend et fullstack souhaitant créer des interfaces modernes sans framework frontend lourd.

Prérequis : les bases de HTML et CSS, la compréhension du protocole HTTP, l'expérience d'un framework côté serveur (Django, Flask, FastAPI…).

Tarifs Contact
Modern web interfaces with HTMX and Alpine.js

Jour 1 — Les bases de HTTP et HTMX

  • Architecture REST et principes HTTP
  • Introduction à l'approche hypermedia
  • Installation et configuration d'HTMX
  • hx-get et hx-post : requêtes asynchrones et formulaires
  • hx-target et hx-swap : quoi mettre à jour, et comment
  • Renvoyer des fragments HTML depuis Django, Flask ou FastAPI
  • Le pattern boosting pour une navigation fluide
  • Événements avec hx-trigger : standards et personnalisés
  • Modificateurs : once, delay, throttle
  • Indicateurs de chargement et feedback utilisateur
  • Formulaires dynamiques et validation
  • Mises à jour partielles avec hx-select

Jour 2 — Alpine.js et intégration

  • Philosophie et architecture d'Alpine.js
  • État réactif avec x-data
  • x-show et x-if : affichage conditionnel
  • x-for : boucles et listes
  • x-model : liaison bidirectionnelle
  • x-on : gestion des événements
  • Méthodes et propriétés calculées
  • Composants et réutilisabilité
  • Stratégies d'intégration des deux technologies
  • Communication entre composants : dispatching et listening
  • Patterns hybrides serveur/client
  • État global avec Alpine.store()

Jour 3 — Techniques avancées

  • Swaps out-of-band avec HTMX
  • WebSockets et Server-Sent Events
  • Extensions HTMX : JSON API, templates client, morphing
  • Plugins et extensions Alpine.js
  • Performances : lazy loading
  • Debouncing et throttling
  • Stratégies de cache
  • Protection CSRF avec HTMX sous Django, Flask et FastAPI
  • Prévention XSS

Passez au niveau supérieur en Python !

Contact Exemples de programmes