Cet article explique comment rendre une application web monopage (SPA) réactive sans utiliser React ou Vue, en utilisant Symfony UX. L’auteur montre comment ajouter de l’interactivité à un tableau Kanban statique en combinant Stimulus pour gérer le glisser-déposer, Turbo Streams et Mercure pour la mise à jour en temps réel via des événements serveur envoyés (SSE), et une base de données SQLite. L’approche repose sur des technologies standards et évite les bibliothèques lourdes.
L’idée principale est d’utiliser Stimulus, un framework JavaScript minimaliste, pour interagir avec l’API native de glisser-déposer du HTML5 et effectuer des mises à jour optimistes de l’interface. Un contrôleur Stimulus gère les événements de glisser-déposer, tandis qu’un contrôleur Symfony reçoit les requêtes et met à jour la base de données.
Enfin, Turbo Streams et Mercure permettent de diffuser les modifications du serveur vers tous les clients connectés, actualisant automatiquement le DOM sans rechargement de page. Cette méthode simplifie le développement tout en offrant une expérience utilisateur fluide et réactive.
L'auteur partage son expérience de création d'une application de suivi d'habitudes (SmartHabit Tracker) en partant d'un template Symfony/SvelteKit préconfiguré. Le projet met en avant une approche statistique (algorithme MAD) pour des notifications intelligentes, adaptées aux habitudes réelles des utilisateurs, et une synchronisation en temps réel via Mercure. L'architecture évite Firebase au profit de solutions open source (Web Push, ntfy, APNs), avec une attention particulière portée aux tests (PHPStan, mutation testing) et à la scalabilité. Un exemple concret de l'importance des bonnes pratiques dès la conception.
L’article présente un patron appelé “Orchestrated UI” qui combine Symfony UX, Mercure et Temporal pour créer des interfaces utilisateur live pilotées par des workflows côté serveur sans gestion d’état complexe côté frontend, illustré par un exemple de commande de repas où chaque étape du processus est orchestrée par un workflow et poussée en temps réel au navigateur via Mercure afin de recharger dynamiquement les composants Symfony Live sans JavaScript sophistiqué ; l’intérêt principal est de simplifier la construction d’applications web interactives à états complexes tout en restant dans un seul codebase PHP, avec des exemples et une bibliothèque nommée StepKit disponibles pour tester cette approche.
Ce partage explique comment utiliser Symfony 7 et Mercure pour créer une session live réactive sans WebSocket. L'auteur, Jean-Sébastien Christophe, explore l'intégration de Mercure, un protocole de Server-Sent Events (SSE), pour gérer des états de session en temps réel, comme la présence des utilisateurs, sans nécessiter de requêtes répétées ou de boucles côté client. Il détaille la stack technique utilisée (Symfony 7.3, PHP 8.4, Docker, PostgreSQL, MailCatcher) et les avantages de Mercure pour des applications temps réel, tout en prévoyant une future intégration avec FrankenPHP pour optimiser les performances et la sécurité.
L'auteur fait un état de l'art des différentes solutions pour les modifications en temps réel de ressources web : Braid, PREP et Mercure
Tout est dans le titre
Il s'agit d'un cas concret d'utilisation de Mercure : lorsque 2 administrateurs éditent simultanément la même ressource, Mercure permet de notifier lorsque le premier des deux valide ses modifications.
Tout est dans le titre
Tout est dans le titre, sauf que ça concerne Mercure
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre, un tuto pas mal fait :)
Tout est dans le titre... Certaines conférences (comme celles sur le DDD par Meetic) ont l'air très intéressantes
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre