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.
Ce billet explique comment améliorer l'interface utilisateur d'EasyAdmin en ajoutant une fonctionnalité d'édition inline pour divers types de champs (texte, enums, dates, associations) sans recharger la page. L'auteur utilise Symfony UX Turbo et Stimulus pour créer une expérience utilisateur plus fluide, similaire à un tableur. Le processus implique la création d'un contrôleur JavaScript pour gérer l'édition, la validation et l'annulation, ainsi qu'une action et un service PHP pour traiter les requêtes HTTP. L'architecture est détaillée et le code est fourni pour implémenter cette fonctionnalité.
Ludovic Frank partage plusieurs contrôleurs Stimulus prêts à l’emploi, utilisables aussi bien avec Symfony (via Symfony-UX) qu’avec Ruby on Rails. L’article détaille comment charger ces contrôleurs de manière asynchrone pour optimiser les performances, et propose des exemples concrets : un bouton qui se cache lors de la navigation dans une Turbo Frame, un accordéon avec DaisyUI, une intégration de carte OpenFreeMap (LFMaps) chargée à la demande, et une mise à jour du contrôleur intl-tel-input pour la gestion des numéros de téléphone internationaux. Il souligne aussi l’intérêt de la stack Hotwired (Stimulus + Turbo), commune aux deux frameworks, et mentionne la bibliothèque Stimulus Components pour des composants supplémentaires. Une ressource utile pour enrichir rapidement le front-end de vos applications
Intégrer Cloudflare Turnstile avec Hotwired Turbo et Stimulus – Ludovic Frank explique comment protéger efficacement les formulaires publics contre le spam dans une application utilisant Turbo (Hotwire), où le rechargement partiel du DOM pose problème pour les widgets comme Turnstile. L’article détaille les défis (mise en cache, race conditions, rechargement du widget) et propose une solution clé en main : un contrôleur Stimulus portable qui gère dynamiquement le chargement et le rechargement du script Turnstile, évitant ainsi les doublons et optimisant les performances. Le code source et les templates sont fournis, rendant l’intégration simple et réutilisable dans d’autres projets. Une lecture utile pour les développeurs travaillant avec Symfony UX Turbo ou des SPAs similaires.
Tout est dans le titre
JoliCode a créé une application de "citation du jour", prétexte à l'exploration de technologies, à savoir Symfony UX (notamment Turbo et Twig LiveComponent) et l'utilisation de la fonctionnalité ResultSetMapping de Doctrine (bien pratique pour utiliser des fonctionnalités avancées de PostgreSQL)
L'auteur présente les avantages de Symfony UX / Turbo / Stimulus