Symfony UX Toolkit : quand le frontend devient (enfin) un plaisir

En décidant de devenir développeur backend, j’avais conclu un pacte avec les technos frontend : « never ever, blocked, banned, sashay away ». Si vous lisez ce billet, c’est que je n’ai pas tenu parole. Depuis quelque temps, Symfony est en train de me réconcilier avec le style grâce à une série de bundles qui ont révolutionné la DX (Developer Experience).

Le dernier né, Symfony UX Toolkit, apporte aux vues Twig cette élégance et cette rigueur que l'on ne trouvait auparavant que dans le monde PHP.

Le cauchemar du « fait maison »

Je ne vais pas vous apprendre la chanson, vous en connaissez le refrain. On crée une modale pour l’inscription à la newsletter, puis une deuxième pour les cookies, puis une troisième pour les promos.

Le constat est souvent amer :

• Incohérence : 3 modales = 3 implémentations différentes.
• Accessibilité (A11y) : Navigation au clavier bancale et lecteurs d'écran ignorés.
• Maintenance : Un bug corrigé dans un composant ne l'est jamais dans les autres.

La perspective de devoir encore dupliquer du code pour la prochaine lightbox me réjouissait autant qu'une migration de base de données un vendredi soir.

La révolution Shadcn/ui sauce Symfony

J'ai découvert shadcn/ui via l'écosystème React. Sa philosophie est radicale : ce n'est pas une dépendance NPM. C'est du code que vous copiez, que vous adaptez et que vous possédez.

Symfony UX Toolkit adapte cette philosophie à notre framework préféré. En tapant une simple commande :

## On installe le bundle
composer require --dev symfony/ux-toolkit

## On cherche à installer un composant en particulier
bin/console ux:install alert-dialog

La commande génère tout l’UI kit. La documentation est vraiment très complète sur toutes les possibilités et composants disponibles Component Alert Dialog - Shadcn UI Kit

Pourquoi c'est un game-changer ? Contrairement à un bundle classique enfermé dans votre dossier /vendor, vous avez ici un contrôle total. Vous voulez changer une classe Tailwind spécifique ou modifier le comportement Stimulus ? Vous ouvrez le fichier dans votre projet et vous modifiez. C'est l'Ownership complet.

Comment ça marche sous le capot ?

L'installation génère un trio gagnant :

• Twig Component : Une classe PHP pour gérer la logique et les props.
• Template Twig : Un HTML sémantique utilisant les "slots" pour une flexibilité totale.
• Stimulus Controller : Un pont JS léger qui gère tout ce qu'on oublie (Focus Trap, touche Echap, attributs ARIA 1.2).

Le verdict

Le passage d'une structure "bricolée" vers un composant normé produit des résultats immédiats.

Le mot de la fin

Il y a dix ans, j’écrivais du jQuery pour tout. Ensuite, j’ai voulu mettre tout le JavaScript et le CSS sur une île déserte pour tout brûler. Aujourd'hui, avec Symfony UX Toolkit, créer une interface complexe est devenu une affaire d'assemblage de briques standardisées.

L'analogie est simple : avant, créer un composant, c'était construire une maison en partant de rien. Aujourd'hui, c'est utiliser des fondations solides (ARIA), des murs robustes (Stimulus) et choisir sa propre décoration (Tailwind).

Commencez par migrer votre composant le plus simple. Une fois que vous aurez goûté à la puissance des Twig Components couplés à Shadcn, vous ne voudrez plus jamais écrire une balise <div class="modal"> à la main.