Édition simultanée simple avec Hotwire

Nous avons créé une plateforme d'évaluation pour les W3C Web Sustainability Guidelines. Ces directives prennent la forme d'un large questionnaire posant des questions sur les meilleures pratiques pour des applications web durables. Nous avons ajouté un système de notation qui attribue des notes pour chaque chapitre des directives. À chaque question correspond une valeur en points. Plus l'impact de la question est important, plus de points lui sont attribués. En fonction du pourcentage atteint des points maximaux, nous notons la durabilité du projet de A (meilleur) à G (pire).

Nous expérimentons actuellement l'évaluation de la durabilité du W3C en interne et nous écrirons davantage sur ce sujet lorsque nous serons prêts à vous aider avec l’évaluation. Cet article se concentre sur la technologie que nous avons utilisée pour créer l'application d’évaluation. L'application n'est pas limitée aux directives du W3C, mais pourrait également être utilisée pour d'autres questionnaires d'évaluation.

Nous avons utilisé l'outil Hotwire pour créer une application web hautement interactive pouvant se passer d'une application Javascript massive fonctionnant dans le navigateur. Au lieu de cela, toute la logique métier fonctionne côté serveur. Pour fournir une expérience utilisateur rapide sans rechargements de page complets, les modifications sont envoyées sous forme de fragments au navigateur. Nous avons utilisé le framework Symfony pour construire le backend, ce dernier étant bien intégré avec Hotwire.

Démonstration

Voyons ce que cela donne en pratique. Chaque chapitre d'évaluation possède des statistiques montrant combien de questions ont déjà été répondues. Au début, rien n'est répondu, alors répondons aux deux premières questions:

Remarquez comment la note, les points, le sujet et le nombre de questions sont mis à jour au fur et à mesure que nous répondons aux questions. Nous avons écrit le code Javascript pour sauvegarder automatiquement la réponse immédiatement. La note mise à jour et les statistiques sont ensuite poussées par le backend, sans besoin de Javascript de notre part.

Grâce à l'auto-enregistrement et aux pushs de Hotwire, la valeur se met à jour immédiatement lorsqu'une nouvelle note est atteinte. Ce retour direct motive l'utilisateur à continuer à travailler sur le questionnaire:

Avec le système de push en place, il a été facile d'ajouter un mode de collaboration simultanée à l'application. En plus de pousser la note et les statistiques, nous poussons également la réponse donnée à tous les autres clients qui ont le même chapitre ouvert. Plusieurs personnes peuvent maintenant travailler sur la même évaluation et voir immédiatement les mises à jour de tout le monde:

Bien que nous n'ayons pas conçu la plateforme d'évaluation pour qu'elle fonctionne sur des smartphones, Hotwire prend également en charge les navigateurs des téléphones mobiles.

Conclusions

L'architecture promue par Hotwire consiste à garder la logique métier et le rendu dans le backend, et à diffuser les changements vers l'interface utilisateur pour conserver la fluidité des applications à page unique. En plus de Hotwire, il existe aussi la bibliothèque HTMX avec le même objectif. Cette architecture présente plusieurs avantages par rapport à l'approche classique avec une application frontend lourde:

• Logique cohérente: toute la logique métier est concentrée dans le backend, et a un accès facile à toutes les données dont elle a besoin.
• Sécurité: tout ce qui est fait dans le navigateur peut ne pas être digne de confiance pour le backend, car un acteur malveillant pourrait manipuler les requêtes. Avec Hotwire, il n'y a pas de logique métier dans le frontend, et donc pas de surcharge ni de risque d'erreurs liées à une validation manquante.
• Moins de charge de développement: les applications frontend entraînent la duplication de la logique métier entre le backend et le frontend. Avec Hotwire, nous évitons ce problème en gardant la logique métier hors du frontend.
• Moins de technologies: pour une application frontend lourde, l'équipe a besoin d'experts dans le framework choisi (React, Vue, etc.). Avec Hotwire, l'équipe n'a pas besoin d'experts en Javascript frontend.

Nous allons poursuivre notre travail sur l'application d'évaluation et partagerons avec vous les nouvelles fonctionnalités que développées. Nous prévoyons également d'implémenter d'autres applications avec l'outil Hotwire. C'est une technologie puissante qui permet de simplifier considérablement l'implémentation des applications web réactives.