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 explique comment éviter les coûts imprévisibles des services comme Google Maps ou Mapbox en utilisant des solutions open source auto-hébergées. Après avoir testé Photon, jugé peu performant pour les adresses françaises, il recommande Addok, bien plus efficace pour la France. Le tutoriel détaille l’installation via Docker, propose un contrôleur Stimulus pour l’intégration front, et montre comment remplir automatiquement les champs d’adresse (rue, code postal, ville) à partir d’une base de données locale. Une alternative économique et maîtrisée, idéale pour les projets freemium ou sensibles aux coûts.
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
Tout est dans le titre... le commentaire de Javier Eguiluz est aussi instructif
Tout est dans le titre
Tout est dans le titre
L'auteur présente les avantages de Symfony UX / Turbo / Stimulus
Tout est dans le titre
Un framework JavaScript développé par l'équipe de Basecamp... une valeur sûre donc :-)