Symfony Level Up #9
La newsletter pour performer en Symfony 🚀
Symfony UX 3.0 est là !
Salut collègue développeuse / développeur,
J’ai mis en pause cette newsletter quelques mois, et il s’en est passé des choses ! Dans cette 9ème édition de la newsletter — qui compte maintenant plus de 400 inscrites et inscrits, merci pour ton soutien 🙏— nous n’échapperons donc pas à la déferlante IA et son impact sur l’écosystème Symfony.
Avant de commencer, si la lecture de cette newsletter t’apporte quelque chose mais que tu n’es pas encore abonné, ou si tu souhaites la partager avec tes collègues qui comme toi, souhaitent performer en Symfony, le lien d’inscription est juste là :
Symfony UX passe la toisième
Gros jalon côté UX : Symfony UX 3.0.0 est sorti le 13 avril.
Comme toutes les versions majeures de Symfony, la 3.0 fait un grand ménage : toutes les features dépréciées pendant le cycle 2.x ont été retirées, les requirements passent à PHP 8.4 et Symfony 7.4.
La version marque également la dépréciation de plusieurs packages (Swup, LazyImage, Typed, TogglePassword) qui n’étaient que des wrappers autour de librairies JS, facilement remplaçables par un simple contrôleur Stimulus. L’équipe préfère ainsi limiter le nombre de packages à maintenir pour se concentrer sur ceux apportant davantage de valeur côté PHP.
J’en parlais déjà dans ma précédente newsletter, mais c’est officiel : le package Symfony UX Toolkit est sorti. L’idée : plutôt que de réinventer chaque composant d’interface dans chaque nouveau projet, tu pioches des recettes prêtes à l’emploi dans des kits de composants (Shadcn et Flowbite pour l’instant, un Bootstrap en préparation), tu les copies chez toi, et tu les adaptes à tes besoins. On est dans une vraie logique de composants pré-stylisés (et potentiellement interactifs via des contrôleurs Stimulus dédiés, comme pour l’ouverture d’une modale par ex).
Le kit principal basé sur Shadcn reprend déjà la plupart des composants, et de nouveaux sont ajoutés régulièrement. Récemment, quatre nouvelles recettes Shadcn viennent d’être ajoutées : radio-group, collapsible, typography et toggle-group. Le kit Shadcn devient une vraie bibliothèque de composants prêts à copier/coller dans ton projet.
Ces composants permettent une forte personnalisation, mais cela implique souvent un grand nombre de sous-composants : ex pour un composant Dialog
<twig:Dialog id="delete_account">
<twig:Dialog:Trigger>
<twig:Button {{ ...dialog_trigger_attrs }}>Open</twig:Button>
</twig:Dialog:Trigger>
<twig:Dialog:Content>
<twig:Dialog:Header>
<twig:Dialog:Title>Are you absolutely sure?</twig:Dialog:Title>
<twig:Dialog:Description>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</twig:Dialog:Description>
</twig:Dialog:Header>
</twig:Dialog:Content>
</twig:Dialog>De ce fait, le passage d’une propriété d’un composant parent à un composant enfant imbriqué N niveau plus bas pouvait être fastidieux car il n’était possible que de passer la propriété à son enfant immédiat. Pour faciliter les choses, un nouveau couple d’helper provide() et inject() permettent de passer une propriété directement d’un parent à l’enfant de son choix, quel que soit le niveau d’imbrication.
Autre nouveauté dévoilée le mois dernier : Symfony UX Native. L’idée, c’est de transformer ton app web Symfony en app mobile native iOS/Android sans réécrire l’interface. Concrètement, le package s’appuie sur Hotwire Native (le même projet qui est à l’origine de Stimulus et Turbo), qui enveloppe une webview dans une coque native et orchestre la navigation, les animations et l’accès aux APIs de la plateforme. Tu gardes ton HTML/CSS/Twig côté serveur, tu ajoutes des Bridge Components pour les écrans qui doivent être vraiment natifs, et tu livres sur les stores. Installation : composer require symfony/ux-native
Symfony AI : l’écosystème prend forme
Comme je te le disais en introduction, avec ces quelques mois d’absence, je n’avais pas pu évoquer LE sujet du moment : Symfony AI. À l’instar de Symfony-ux, ce projet officiel dispose d’un repo et d’un site web séparés de celui de symfony (et donc possède sa propre roadmap). Le projet qui avance très vite, regroupe différentes briques pour construire des apps AI en Symfony.
Pour résumé très rapidement, Symfony AI est un ecosystème constitué de plusieurs composants :
Le composant Platform pour se connecter simplement aux principales plateformes et utiliser des modèles variés (LLM text, image, voix)
Le Store component, couche d’abstraction de base de données vectorielles, permettant de stocker et récupérer des données pour des intégrations IA comme le RAG (Retrieval-Augmented Generation)
L’Agent component permet de créer et des agent IA ayant accès à des outils personnalisés et pouvant interagir avec d’autres agents
Le Chat component simplifie l’interaction de type chat avec un modèle (gestion du contexte, réponses streamées en temps réel)
Le MCP bundle qui permet de créer des serveurs MCP (Model Context Protocol) qui exposent des outils et des ressources à n’importe quel agent IA, ou de construire des clients qui se connectent à des serveurs MCP existants
Rien qu’en avril, deux releases majeures — v0.7 puis v0.8 (suivies d’un v0.8.1 de correctifs) — qui trahissent un rythme effréné (mais on parle d’IA donc c’est normal que ça aille vite 😅). On est encore en 0.x, donc l’API peut bouger d’une release à l’autre, mais ça fonctionne déjà pour des projets en prod, il faut juste être attentifs aux changements possibles et fréquents sur le projet.
Deux points marquants parmi les features livrées :
Une abstraction Provider avec model routing. Jusqu’ici, ton code appelait un bridge (OpenAI, Anthropic, Gemini…) en dur. Avec la 0.8, tu peux déclarer un Provider, définir des règles de routage, et laisser Symfony aiguiller dynamiquement ton prompt vers le bon modèle selon le contexte. En pratique : tu changes de modèle en config, pas en code — et vu la vitesse à laquelle les modèles sortent et se périment, ce n’est pas plus mal 😅.
AI-Mate, le serveur MCP pour le dev assisté. On sort de la création d’apps AI avec Symfony, pour utiliser l’AI afin de développer ses apps Symfony. Mate est un autre composant de Symfony AI, qui expose les données internes de ton app (profiler, logs, requêtes DB, services DI) via MCP.
L’installation est classique :
composer require --dev symfony/ai-mate
vendor/bin/mate init
vendor/bin/mate serveTu branches assistant IA préféré (Claude Code ou autre) sur ce MCP afin qu’il accède à de nombreuses information sur ton app. Tu peux ensuite lui demander : “résume-moi les dernières erreurs dans mes logs” ou “pourquoi ce service n’est pas autowiré ?”, “ aide-moi à optimiser les requêtes SQL de cette page”, etc.
Le composant est encore en pleine évolution et ajoute de plus en plus de possibilités. À l’heure où j’écris, plus d’une dizaine de PR concernant Mate sont ouvertes. À suivre !
En parlant de profiler, dérivons un instant avec cette amélioration de l’accessibilité : deux PR signées @Nitram1123 ont amélioré l’accessibilité du WebProfilerBundle — la toolbar et les pages du profiler sont désormais plus correctes pour les lecteurs d’écran. Ça envoie un beau signal : l’a11y, ce n’est pas réservé aux pages publiques d’une app. Les outils internes du framework, ceux qu’on utilise tous les jours, méritent aussi le même soin. Si dans ton équipe quelqu’un utilise une techno d’assistance, ces petits gestes comptent ❤️.
TUI, un composant en phase terminale
Dernier sujet, et pas des moindres : Fabien Potencier a proposé un nouveau composant Symfony TUI. La PR a été mergée il y a quelques jours, mais il manque encore pas mal de fonctionnalités. Le composant devrait être présent dans la prochaine version de Symfony (certainement en expérimental).
L’idée derrière TUI : compléter le composant Console (qui reste centré sur les commandes et leurs arguments) par une vraie couche de widgets pour construire des interfaces riches dans le terminal.
Le composant console historique de Symfony permet déjà de réaliser beaucoup de choses. Un bon exemple, les commandes du maker : une suite de questions et d’instructions séquentielles, qui font défiler le terminal de haut en bas. Il y a même possibilité d’ajouter de l’autocomplétion et un rendu stylisé avec du texte et des blocs colorés. Mais on est cependant loin du rendu d’une page web, l’interactivité reste limitée, et le mode séquentiel empêche de revenir en arrière.
Mais une interface riche dans un terminal apporte de tout nouveaux paradigmes. La fenêtre du terminal devient un veritable espace de travail. Plutôt que de défiler au fur et à mesure, une boucle s’exécute en permanence pour rafraichir le rendu de l’écran, offrant ainsi une expérience nouvelle et une interactivité toute autre. Un exemple simple : afficher une date dans un coin de l’output, qui s’actualise chaque seconde. Côté technique : utilisation de PHP Fibers et Revolt, donc zéro extension requise.
Côté UI, plusieurs widgets sont déjà disponibles : TextWidget, InputWidget, EditorWidget pour afficher et saisir un texte simple ou multiligne, SelectListWidget et SettingsListWidget pour effectuer des choix, MarkdownWidget (Affichage de markdown avec coloration syntaxique), ProgressBarWidget, TabsWidget (PR en cours), etc.
Mais s’arrêter là serait trop simple, qui dit UI, dit style. Et là Fabien Potencier ne fait pas les choses à moitié, puisque c’est un vrai système de style, très largement inspiré de CSS, qui est proposé, avec un système de classe et de cascade - support de style basique comme background, color, padding, border - un système de layout (flex like, gestion de gap et d’alignements) avec l’usage de ContainerWidget (équivalent de div) - gestion du responsive (lors des redimensionnement de la fenêtre du terminal) - système de classe alternatif à la Tailwind (p-2 bg-emerald-500 border-rounded) - pseudo-classes en fonction de l’état du widget (:focused, :selected ...)
La vidéo ci-dessous montre un exemple d’interface réalisée avec TUI, montrant une horloge dans la zone supérieure, un widget de selection à gauche, un texte changeant selon la sélection au centre, le tout s’adaptant à la taille de la fenêtre du terminal si celle-ci est redimensionnée.
Mais le projet ne s’arrête pas là puisque d’autres fonctionnalités encore plus folles sont attendues :
gestion de la souris
gestion d’overlay (afficher l’équivalent de fenêtres modales par dessus le reste du contenu)
écriture de la partie “front” de la console directement dans des templates Twig avec de nouvelles balises spécifiques !
Autant dire que tout cela est super ambitieux. Avec ça, il va être possible de créer des interfaces super jolies et ergonomiques, à une époque où nous voyons un vrai revival des applications full console dans le style de Claude Code.
Partenariat
Pour cette édition, je te propose un lien d’affiliation pour l’excellent site Code-Garage du non moins excellent Nicolas Brondin-Bernard.
Si tu ne connais pas encore Code-Garage, c’est un site proposant de nombreux cours de qualité autour du développement.
Avec ce lien et le code SYMFONYLEVELUP, tu bénéficieras de 10% de réduction sur les cours payants et l’abonnement Pro !
Conclusion
Si tu veux discuter, pointer une erreur ou juste me dire ce que tu penses de cette édition — écris-moi à levelup@sylvainblondeau.dev ou sur mon Linkedin.
Si cette newsletter te plait, repartage-la et parles-en autour de toi.
Enfin, si ton entreprise cherche à booster son équipe avec un freelance Symfony expérimenté, n’hésite pas à me contacter sur mon Linkedin ou sur jobs@sylvainblondeau.dev.
Et maintenant, retourne coder — on se retrouve bientôt pour débloquer le niveau suivant ;-)
Clair et précis, toujours un plaisir de commencer la journée avec de la qualité ! 💯💯