Symfony : – Le moteur de templates Twig

Twig est un moteur de templates puissant et flexible, conçu pour gérer la couche de présentation dans les applications basées sur le modèle MVC. Il permet de séparer clairement la logique métier de la vue en regroupant tout le code lié à la présentation dans des fichiers spécifiques, appelés templates.

Contrairement à du simple HTML, ces templates peuvent inclure des instructions dynamiques écrites dans un langage spécifique à Twig, souvent désigné comme du « Twig ».

• Origine : Créé en 2008 par Armin Ronacher, Twig s’inspire fortement du moteur de templates Jinja (utilisé en Python).
• Intégration : Twig est maintenant maintenu par l’équipe Symfony et est le moteur de templates par défaut du framework.
• Site officiel : https://twig.symfony.com

Pourquoi Twig ?

Une question légitime serait de demander : pourquoi Twig et non PHP directement ? Voici quelques raisons qui rendent Twig incontournable dans les projets Symfony :

1. Performances élevées : Twig compile ses templates en code PHP pur, mis en cache pour éviter de recalculer à chaque requête.
2. Sécurité renforcée : Les sorties sont protégées par défaut contre les attaques comme le Cross-Site Scripting (XSS).
3. Syntaxe adaptée aux templates : Twig offre des fonctionnalités et des raccourcis spécifiques qui simplifient la création de vues complexes, tout en gardant un code lisible.
4. Communauté et support : Twig est largement adopté, et la plupart des bundles et ressources Symfony reposent sur lui.

Mise en pratique : Twig en action

Exemple de base : un contrôleur et un template

Prenons un exemple simple où un contrôleur rend une vue via Twig.

Contrôleur :

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class DefaultController extends AbstractController
{
    #[Route("/")]
    public function hello(): Response
    {
        return $this->render('default/hello.html.twig');
    }
}

Template Twig (templates/default/hello.html.twig) :

Hello world!

Dans cet exemple :

• Le contrôleur utilise la méthode render() pour retourner une réponse basée sur un template Twig.
• Le fichier de template est situé dans le dossier templates/, suivant la convention Symfony.

Organisation des templates

Les fichiers Twig sont placés dans le répertoire templates/ par convention. Ce répertoire peut être organisé en sous-dossiers :

• Templates généraux : templates/base.html.twig pour les gabarits globaux.
• Templates spécifiques aux contrôleurs : un dossier dédié pour chaque contrôleur.

Exemple de structure :

templates/
├── base.html.twig
├── default/
│   └── hello.html.twig
└── admin/
    └── dashboard.html.twig

Extensions et organisation avancée

Symfony permet d’ajouter d’autres répertoires pour organiser les templates. Cela se fait via la configuration dans config/packages/twig.yaml.

Exemple :

twig:
    paths:
        'admin/templates': 'admin'
        'backend/templates': 'back'

Dans cet exemple, les répertoires admin/templates et backend/templates sont ajoutés avec des espaces de noms respectifs @admin et @back. Les fichiers sont alors référencés comme suit :

{% include '@admin/index.html.twig' %}

Syntaxe et fonctionnalités de Twig

Twig offre une syntaxe lisible et intuitive. Voici quelques exemples de base :

a) Variables

<p>{{ variable }}</p>

b) Boucles

{% for item in items %}
    <p>{{ item }}</p>
{% endfor %}

c) Conditions

{% if user.isAdmin %}
    <p>Bienvenue, admin !</p>
{% else %}
    <p>Bienvenue, utilisateur.</p>
{% endif %}

d) Inclusions

{% include 'header.html.twig' %}

---

Remarques sur l’utilisation

Twig, comme tout autre composant Symfony, est un service accessible à travers le conteneur de services. La méthode render() du contrôleur est un exemple d’utilisation de ce service.

---

Annotation @Template

Le bundle SensioFrameworkExtraBundle permet une autre approche pour utiliser Twig. L’annotation @Templatesimplifie le rendu en permettant à Symfony de deviner le template basé sur le nom du contrôleur et de l’action.

Exemple :

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;

class DefaultController extends AbstractController
{
    /**
     * @Route("/")
     * @Template
     */
    public function hello()
    {
        return ['name' => 'John'];
    }
}

Le template attendu ici sera default/hello.html.twig.

Ressources utiles

1. Documentation officielle Twig
2. Documentation Symfony sur Twig
3. Cheatsheet Twig

 

Twig est bien plus qu’un simple moteur de templates : c’est un outil conçu pour améliorer la lisibilité, la sécurité et les performances des vues dans une application Symfony. Son adoption massive et sa parfaite intégration avec Symfony en font un choix incontournable pour les développeurs cherchant à créer des interfaces web élégantes et efficaces.