Twig 3.24.0, sorti avec Symfony 7.4, introduit des fonctionnalités avancées pour simplifier la création de composants UI réutilisables, répondant aux besoins des systèmes de design modernes et des frameworks comme Tailwind. Parmi les nouveautés, la fonction html_attr, la stratégie d'échappement html_attr_relaxed et les opérateurs null-safe améliorent la gestion des attributs HTML et des données dynamiques, réduisant ainsi la complexité des templates.
L'article explique comment abandonner les tableaux non structurés pour des DTOs strictement typés et validés, combinés à des attributs PHP 8.x et à Symfony 7.4's #[MapRequestPayload], afin de transmettre des données propres et validées directement aux templates Twig. Cela renforce la robustesse des applications tout en maintenant une bonne expérience de développement.
Pour utiliser ces fonctionnalités, il est nécessaire d'installer les packages twig/html-extra, symfony/serializer et symfony/validator, et de vérifier que Twig 3.24.0 ou supérieur est bien installé. L'article détaille également la configuration requise et présente un exemple concret de création d'un composant Button avec des DTOs stricts.
La sortie de Symfony UX 3.0.0 marque une évolution majeure en abandonnant les dépendances obsolètes de la version 2.x et en relevant les exigences minimales à PHP 8.4 et Symfony 7.4. Cette version se concentre sur des composants Twig robustes, une intégration frontend-backend fluide et des standards web natifs, simplifiant ainsi le développement sans JavaScript personnalisé.
L’article propose un tutoriel pratique pour créer une plateforme immobilière moderne en exploitant les nouvelles fonctionnalités, comme les composants Twig, l’autocomplétion pour les commodités et l’outil Cropper.js pour les galeries d’images. L’installation repose sur des packages spécifiques, avec une vérification des composants via la commande debug:twig-component.
Enfin, l’exemple illustre la création d’un composant réutilisable PropertyCard en PHP 8.4, utilisant des attributs et des classes CSS dynamiques via la fonction html_cva de twig/html-extra, pour un rendu optimisé et maintenable.
L’article explique comment utiliser le même pool de cache Symfony à la fois dans un contrôleur et dans Twig afin d’éviter de recalculer plusieurs fois les mêmes données. L’idée consiste à injecter le même service de cache (par exemple cache.app) dans le contrôleur pour stocker ou récupérer des données coûteuses, puis à l’utiliser également dans Twig via l’extension de cache pour mettre en cache un fragment de template avec la même clé ou les mêmes tags. Cette approche permet de centraliser la logique de cache, de partager les données mises en cache entre backend et rendu Twig, et de faciliter l’invalidation (par exemple via des tags) lorsque les données changent.
Ce billet explique l'impact souvent méconnu des délimiteurs Twig sur l'espace blanc dans le HTML généré, causant des problèmes de mise en page, des diffs Git bruyants et des réponses HTTP plus lourdes. L'auteur partage son expérience et détaille comment maîtriser ces délimiteurs ({{-}, {%-}, etc.) pour contrôler précisément l'espace blanc et améliorer la qualité du code. Une lecture essentielle pour les développeurs Symfony souhaitant optimiser leurs templates.
Le filtre tailwind_merge résout les conflits de classes Tailwind CSS dans Twig en gardant la dernière classe de chaque groupe (propriété CSS). Par exemple, si vous avez un composant bouton avec des classes par défaut et que vous ajoutez des classes personnalisées, tailwind_merge garantit que les classes personnalisées écrasent les classes par défaut de manière prévisible. Cela évite les bugs visuels et rend les composants plus maintenables. Le pattern à retenir est d'utiliser {{ ('classes-de-base ' ~ attributes.render('class'))|tailwind_merge }} pour gérer les conflits de classes de manière cohérente.
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