UX Live Components (Partie 1)

Installation

Symfony UX Live Component est une extension puissante du framework Symfony, conçue pour simplifier la création d’interfaces dynamiques et réactives sans avoir à écrire de JavaScript complexe. Grâce à cela nous allons pouvoir développer des composants interactifs côté serveur.

Pour illustrer le fonctionnement, nous allons utiliser un exemple simple qui génère un nombre aléatoire lorsqu’on appuie sur un bouton de l’interface.

Commençons par installer l’extension :

composer require symfony/ux-live-component

Création du composant

Il est maintenant de possible de créer un nouveau composant via la commande :

symfony console make:twig-component

Allons dans le fichier RandomNumber.php qui vient d’être créé et ajoutons la méthode getRandomNumber() dans la classe :

#[AsLiveComponent]
final class RandomNumber
{
    use DefaultActionTrait;

    public function getRandomNumber(): int {
        return rand(1, 100);
    }
}

Dans le fichier RandomNumber.html.twig, nous allons mettre le code pour afficher le composant.

<div{{ attributes }}>
    <strong>{{ this.randomNumber }}</strong>
    <button data-action="live#$render">New Number</button>
</div>

Nous reviendrons plus tard sur la première ligne du code. À la ligne 2, nous récupérons le résultat de la méthode getRandomNumber(). Pour rappel, en twig, il n’y pas besoin de préciser le get. En revanche, il faut utiliser le mot-clé this, pour indiquer où se trouve la méthode.

On ajoute un bouton à la ligne 3, avec l’attribut data-action="live#$render". C’est cet attribut qui va indiquer qu’il faut régénérer le composant lorsqu’on appuie sur le bouton.

Utilisation du composant

Créons un nouveau contrôleur pour tester notre composant.

symfony console make:controller LiveComponentController

Dans le fichier twig, il suffit de faire au composant comme indiqué lors de la création du composant :

{% block body %>
[...]

   <twig:RandomNumber />

[...]
{% block body}

Vous pouvez tester en ouvrant la page correspondant au contrôleur. Appuyez plusieurs fois sur le bouton, le nombre se met à jour à chaque fois sans rechargement de la page. Si vous regardez la barre de debug de Symfony, vous pouvez voir que plusieurs requêtes ajax ont été envoyées au serveur.