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
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre