Simplifier le développement web dynamique avec Django et HTMX (Partie 3) : Intégration avec Django

Avec sa philosophie des « batteries incluses », Django constitue un backend robuste, tandis que HTMX excelle à exploiter intelligemment les fragments HTML fraîchement préparés par ce backend. C'est une combinaison vraiment parfaite.

Dans cet article, troisième partie de notre série Simplifier le développement web dynamique avec Django et HTMX, nous explorerons deux méthodes concrètes pour intégrer HTMX dans un projet Django existant.

Image de l'intégration de Django et HTMX

1. Utilisation directe sans package tiers

C'est la méthode la plus pure et la plus légère. Sans processus d'installation complexe, il suffit d'ajouter une ligne de script dans votre template HTML pour utiliser immédiatement les fonctionnalités de HTMX.

Méthode d'installation

La documentation officielle de HTMX propose plusieurs méthodes d'installation, mais la plus rapide reste l'utilisation d'un CDN.

  • Utilisation du CDN (le plus rapide) : Il suffit d'insérer le code suivant à l'intérieur de la balise <head> de votre base.html.
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js" integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" crossorigin="anonymous"></script>
  • Téléchargement direct : Si la sécurité ou un environnement hors ligne est crucial, vous pouvez télécharger htmx.min.js, le placer dans le dossier static de votre projet et spécifier son chemin.
  • npm : Si vous utilisez un système de build, vous pouvez l'installer avec la commande npm install htmx.org.

Accéder à la documentation officielle d'installation de HTMX

2. Utilisation du package django-htmx

Dans l'écosystème Django, il existe une bibliothèque dédiée pour utiliser HTMX de manière plus « à la Django ». Il s'agit de django-htmx.

Installation et configuration

Suivez les étapes ci-dessous, conformément à la documentation officielle de django-htmx.

  1. Installation du package

    bash python -m pip install django-htmx

  2. Enregistrement dans INSTALLED_APPS

    python INSTALLED_APPS = [ ..., "django_htmx", ..., ]

  3. Ajout du middleware

    python MIDDLEWARE = [ ..., "django_htmx.middleware.HtmxMiddleware", ..., ]

Quelle est la commodité de django-htmx ?

HTMX est un outil si simple qu'on peut se demander s'il est vraiment nécessaire d'ajouter un package supplémentaire comme django-htmx. En effet, il est tout à fait possible d'implémenter les fonctionnalités essentielles sans ce package. Cependant, en examinant les fonctionnalités pratiques qu'il offre, on comprend pourquoi de nombreux développeurs choisissent de l'adopter.

Selon la documentation officielle de django-htmx, la principale caractéristique de ce package est qu'il étend l'objet request via un middleware. Une fois le middleware enregistré, un attribut request.htmx est créé, permettant d'accéder très facilement aux informations détaillées suivantes :

  • Vérification des informations de requête : boosted, current_url, current_url_abs_path, history_restore_request, prompt
  • Contrôle de la cible et du déclencheur : target, trigger, trigger_name, triggering_event

De plus, il prend en charge deux balises dédiées pour faciliter le travail avec les templates.

  • {% htmx_script %} : La balise principale qui insère le script de la bibliothèque HTMX.
  • {% django_htmx_script %} : Une balise auxiliaire qui insère uniquement le script d'extension pour le débogage, lorsque HTMX est inclus directement via CDN ou des fichiers statiques.

Ce qui est particulièrement impressionnant, ce sont les 11 méthodes utiles incluses dans le module django_htmx.http. Parmi elles, trigger_client_event() se distingue. Elle permet de configurer facilement l'en-tête HX-Trigger côté serveur et de l'envoyer avec la réponse, offrant ainsi la possibilité de contrôler directement les événements côté client depuis le serveur. Une fois maîtrisée, c'est un outil puissant que vous utiliserez très fréquemment.

Bien sûr, toutes ces fonctionnalités peuvent être implémentées manuellement en créant votre propre middleware ou en manipulant les en-têtes. Par conséquent, si vous avez une préférence pour le développement manuel, ce package ne vous semblera pas indispensable.

En conclusion, django-htmx n'est pas un « must-have », mais il est incontestablement un package qui « rend le développement plus agréable ». La documentation officielle n'étant pas très volumineuse, une ou deux heures suffisent pour en comprendre les bases. N'hésitez pas à décider de son adoption en fonction des spécificités de votre projet.

Pour conclure

Si vous envisagez d'implémenter de simples boutons à bascule ou quelques fonctionnalités de « j'aime », l'utilisation directe (CDN) est amplement suffisante. Ne pas augmenter les dépendances inutiles peut s'avérer la solution la plus économique.

Cependant, si la taille de votre projet augmente et que vous vous retrouvez souvent à devoir gérer simultanément des pages complètes et des fragments de page depuis une seule vue, alors django-htmx mérite d'être envisagé.

Quelle approche vous séduit le plus ? En réalité, django-htmx n'est pas un package lourd ; il est même plutôt léger. Il pourrait donc être judicieux de l'installer sans trop y réfléchir. Au final, tout dépend de l'humeur et de la personnalité du développeur. Je pense que le choix est souvent dicté par la préférence du développeur : « Je veux minimiser les dépendances » ou « Je préfère tout faire moi-même ».

Cependant, quel que soit votre choix, avec HTMX, vous retrouverez le plaisir de vous éloigner de JavaScript pour revenir à la simplicité de HTML.

Articles connexes :