Présentation de Misago

Misago est un logiciel de forum qui fonctionne actuellement avec React.js et Django. Le processus de fonctionnement est le suivant : - L'utilisateur demande une page. - La vue Django récupère les données pour afficher la liste des threads. - La vue Django rend un modèle qui contient presque tout le HTML avec la liste des threads, ainsi qu'un JSON avec les mêmes données utilisées pour rendre cet HTML. Cependant, il n'y a pas d'interactivité car les formulaires sont désactivés. - Le JavaScript est téléchargé et exécuté, il lit le JSON intégré dans le corps de la page et remplace la plupart du HTML rendu à partir des modèles Django par du HTML provenant de composants React.js.

Problèmes avec l'approche actuelle

Cette approche présente plusieurs problèmes, notamment : - De nombreuses pages de Misago sont implémentées deux fois, en tant que modèles Django et composants React.js. - Les personnes qui commencent à personnaliser le HTML sont surprises car elles éditent les modèles Django et voient leurs modifications s'afficher brièvement sur le site avant d'être remplacées par le HTML React.js qu'elles ne savaient pas qu'elles devaient également personnaliser. - Chaque vue accessible aux utilisateurs et aux invités doit être faite deux fois : en tant que vue Django avec des modèles et en tant que route React.js avec des composants. Cela nécessite également une API et des sérialiseurs JSON pour alimenter la récupération de données. - La sérialisation JSON pour pré-baker les données pour l'application React.js ralentit la génération de réponses. - Une grande partie des messages de traduction est dupliquée, vivant à la fois dans les fichiers django.po et djangojs.po. Les fichiers de traduction JavaScript augmentent également la taille de téléchargement initiale. - Beaucoup de JavaScript peuvent tuer les performances, en particulier sur les appareils mobiles plus anciens et plus lents. - L'activation des plugins pour remplacer ou injecter du HTML personnalisé dans la page nécessite que ces plugins implémentent à la fois des modèles Django et des composants React.js.

Adaptation d'HTMX pour l'interactivité

HTMX est une petite bibliothèque qui permet aux développeurs de spécifier des parties de HTML comme des îles dynamiques qui peuvent être échangées par du HTML rendu sur le serveur à l'interaction. Par exemple, la liste des threads réels est une telle île. Avec un peu d'HTMX inclus dans le modèle Django, le changement de catégorie dans la liste des threads pourrait extraire de nouvelles données HTML de Django uniquement pour la nouvelle liste de threads de la catégorie sélectionnée, tout en gardant le reste de la page d'HTMX (par exemple, les résultats de recherche déjà chargés dans la barre de navigation) inchangé. Le code backend de Misago n'aurait besoin que d'être modifié pour renvoyer uniquement le HTML pour cette île lorsque la demande provient d'HTMX, au lieu de la page complète. Il n'y a pas besoin de faire de sérialisation JSON ou d'écrire du JavaScript dédié ou React.js.

Avantages de l'approche HTMX

L'approche HTMX présente plusieurs avantages, notamment : - Elle élimine la nécessité de dupliquer le code pour les vues et les modèles. - Elle réduit la quantité de JavaScript nécessaire, ce qui améliore les performances. - Elle permet une personnalisation plus facile du HTML sans avoir à modifier le code React.js. - Elle est plus simple à mettre en œuvre et à maintenir que l'approche actuelle.