Symfony UX Toolkit révolutionne l'expérience de développement frontend en intégrant la philosophie de Shadcn/ui, permettant de créer des composants UI personnalisables et accessibles directement dans Twig. En copiant et adaptant du code plutôt que d'utiliser des dépendances NPM, les développeurs gagnent en contrôle et en flexibilité. L'outil génère des composants avec une logique PHP, des templates Twig sémantiques et des contrôleurs Stimulus pour une accessibilité et une maintenance optimisées. Le résultat est une réduction significative du volume de code, une accessibilité standardisée et une productivité accrue.
Les Live Components de Symfony permettent de créer des interfaces réactives en PHP/Twig, sans JavaScript : une classe PHP gère la logique et l’état (avec #[LiveProp] et #[LiveAction]), tandis que le template Twig affiche et déclenche les actions via data-action="live#action" et data-model. Exemple : un menu dynamique, une recherche en temps réel (avec debounce intégré), ou des mises à jour partielles du DOM — le tout avec typage strict, validation, et optimisations (cache, requêtes limitées). Réactivité côté serveur, simplicité côté dev.
Les Twig Components permettent de créer des composants réutilisables et typés en PHP/Twig, inspirés de React/Vue, mais sans JavaScript.
Points clés :
#[AsTwigComponent]: Déclare un composant (ex:Hero) avec son template Twig.#[ExposeInTemplate]: Expose des méthodes/propriétés dans le template (ex:{{ punchline }}).- Architecture claire : Séparation logique (classe PHP) et affichage (template), avec typage strict.
- Avantages : Réutilisabilité, encapsulation, cache intégré, et fin du mélange logique/affichage.
Exemple :
#[AsTwigComponent(name: 'Hero', template: 'components/Layout/Hero.html.twig')]
class Hero {
#[ExposeInTemplate('punchline')]
public function getPunchline(): ?PunchlineEntity { ... }
}→ Des composants modernes, mais 100% Symfony.
L'auteur montre comment se prémunir des attaques XSS dans Symfony : pour les templates Twig en les échappant systématiquement, pour les entrées utilisateur en les "sanitizant" et en utilisant une politique de sécurité de contenu (CSP)
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
Une proposition d'architecture intéressante
Une extension twig pour faire de la coloration syntaxique
Tout est dans le titre
L'auteur montre comment utiliser Testing Library ( https://testing-library.com/ - un ensemble d'utilitaires pour faire des tests unitaires Front End ) avec Twig - dans un article précédent ( https://www.julienpradet.fr/tutoriels/testing-library-comment-rediger-des-tests-en-react/ ) il montrait l'utilisation avec React
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