Turbo (Symfony UX) : Des applications ultra-rapides sans SPA complexe
Turbo (qui fait partie de l'écosystème Hotwire et intégré nativement dans Symfony via Symfony UX) est un ensemble de technologies JavaScript légères conçues pour accélérer drastiquement la navigation et les interactions sur un site web.
Son but ultime est d'offrir l'expérience utilisateur fluide et instantanée d'une SPA (Single Page Application) type React ou Vue, mais en conservant une architecture classique où le HTML est entièrement rendu côté serveur (Server-Side Rendering) par Symfony et Twig.
⚙️ Comment ça marche ? (Les 3 piliers de Turbo)
Turbo découpe ses fonctionnalités en trois modules majeurs qui transforment la manière dont le navigateur charge vos pages Symfony :
1. Turbo Drive (La navigation accélérée)
- À chaque fois que vous cliquez sur un lien ou validez un formulaire, Turbo intercepte l'action.
- Au lieu de recharger entièrement la page (ce qui ferait clignoter l'écran et re-téléchargerait vos scripts CSS/JS d'AssetMapper), Turbo effectue une requête
fetch en arrière-plan.
- Il récupère le HTML de la nouvelle page, remplace uniquement le contenu du
<body> et fusionne le <head>. La page s'affiche instantanément sans rupture visuelle.
2. Turbo Frames (Le découpage en composants autonomes)
- Permet de diviser une page Twig en blocs indépendants entourés d'une balise
<turbo-frame id="mon-bloc">.
- Lorsqu'un lien ou un formulaire situé à l'intérieur de ce bloc est activé, seule la zone ciblée est mise à jour avec le HTML renvoyé par le serveur Symfony. Le reste de la page reste totalement inchangé.
- Exemple typique : Un système d'onglets, l'édition rapide d'une ligne dans un tableau ou un espace de commentaires.
3. Turbo Streams (Les mises à jour réactives et asynchrones)
- Permet de modifier à distance des éléments précis du DOM (ajouter, remplacer, supprimer ou modifier un bloc HTML) en envoyant de petits fragments de code HTML via des réponses HTTP classiques ou des WebSockets (par exemple avec le composant Mercure de Symfony).
- Exemple typique : Une notification de chat en temps réel qui apparaît sur l'écran d'un utilisateur, ou un tableau de bord qui se met à jour en direct dès qu'une entité Doctrine change en base de données.
📊 Pourquoi est-ce une révolution pour le développeur Symfony ?
- Simplicité architecturale extrême : Vous continuez à coder vos contrôleurs Symfony et vos fichiers Twig à l'ancienne. Pas besoin de monter d'API REST/GraphQL complexe, ni de gérer deux dépôts de code séparés (un back et un front).
- Performances explosives : Le navigateur conserve en mémoire tout l'environnement JavaScript (vos contrôleurs Stimulus, vos styles). La navigation est fluide, sans aucune latence.
- SEO natif impeccable : Comme le serveur Symfony renvoie toujours du vrai HTML valide et complet, l'indexation par les moteurs de recherche (Google, etc.) fonctionne nativement et parfaitement, sans avoir besoin de configurer du SSR JavaScript complexe.
⚠️ L'alliance parfaite : Turbo + Stimulus
Si Turbo s'occupe de la structure et des transitions de vos pages HTML, il laisse la gestion des petits comportements interactifs côté client (comme une modale à ouvrir, un menu déroulant, ou un sélecteur de date) à Stimulus. C'est ce combo (Turbo + Stimulus) qui forme le cœur de l'expérience moderne Symfony UX.