HTMX, c'est quoi ?

HTMX est une bibliothèque JavaScript minimaliste (14 Ko) qui permet d'ajouter du dynamisme à vos pages via de simples attributs HTML. Plus besoin de React, Vue ou Angular pour un formulaire AJAX ou une mise à jour partielle de page.

Comment ça marche

HTMX étend le HTML avec des attributs comme :

  • hx-get / hx-post : envoyer des requêtes HTTP depuis n'importe quel élément
  • hx-target : indiquer où insérer la réponse du serveur
  • hx-swap : contrôler comment le contenu est injecté (innerHTML, outerHTML, beforeend...)
  • hx-trigger : définir l'événement déclencheur (click, submit, revealed, every 2s...)

Le serveur retourne du HTML, pas du JSON. C'est le serveur qui gère le rendu, pas le client.

Pourquoi c'est pertinent

  • Simplicité : pas de build, pas de bundler, pas de state management. Ajoutez un script et c'est parti.
  • Compatible avec tout : fonctionne avec PHP, Laravel, Django, Rails, Go... Le serveur retourne du HTML, point.
  • Performance : 14 Ko vs 100+ Ko pour un framework SPA. Moins de JavaScript = plus de performance.
  • Progressif : vous pouvez l'ajouter à un site existant sans tout réécrire.

Les cas d'usage parfaits

HTMX brille pour les interfaces qui nécessitent du dynamisme sans la complexité d'un SPA :

  • Recherche en temps réel avec suggestions
  • Pagination infinie
  • Formulaires avec validation côté serveur en temps réel
  • Tableaux de bord avec actualisation partielle

HTMX + Laravel = bonheur

La combinaison HTMX + Laravel (ou Symfony) est particulièrement élégante. Blade gère le rendu, HTMX gère le dynamisme, et vous gardez une base de code simple et maintenable. C'est l'approche que nous adoptons de plus en plus chez YouOnline pour les projets qui ne justifient pas un SPA.

HTMXHTMLJavaScriptLaravelfront-endsimplification
Partager