Categories:

Symfony UX : une révolution pour le framework français ?

Dans le futur, on ne se rappellera peut-être pas de Symfony comme un framework PHP. En effet, le 3 décembre 2020 Symfony a ajouté à son écosystème Symfony UX.

Symfony UX, qu’est ce que c’est ?

  • Une nouvelle organisation pour le code JavaScript dans vos applications.
  • Mise à jour de Symfony Flex et Symfony Webpack Encore pour configurer automatiquement le code JavaScript fourni par les packages PHP.
  • Des composants JavaScripts liés à la logique de Symfony pour une utilisation rapide.

En une phrase, c’est votre environnement back-end PHP qui va commander la création d’un module JavaScript. Somptueux, n’est ce pas ?

Symfony UX, comment ça marche ?

Prenons l’exemple du très célèbre composant Chart.js.

Tout d’abord, il faut penser mettre à jour les dépendances Symfony Flex et Webpack Encore.

composer update symfony/flex
yarn upgrade "@symfony/webpack-encore@^0.32.0"

Ensuite, on synchronise Webpack Encore avec la dernière version.

composer recipes:install symfony/webpack-encore-bundle --force -v

On peut maintenant installer notre nouveau composant Symfony Ux : Chart.js.

composer require symfony/ux-chartjs

Grâce à l’ajout via composer, Symfony a ajouté la ligne suivante dans votre fichier composer.json.

"@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets"

Il ne reste plus qu’à installer vos nouvelles dépendances JavaScript via yarn.

yarn install --force
yarn encore dev

Ensuite, voyez par vous-même l’utilisation du composant Chart.js.

use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Model\Chart;

class HomeController extends AbstractController
{
    /**
     * @Route("/", name="homepage")
     */
    public function index(ChartBuilderInterface $chartBuilder): Response
    {
        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
        $chart->setData([
            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            'datasets' => [
                [
                    'label' => 'My First dataset',
                    'backgroundColor' => 'rgb(255, 99, 132)',
                    'borderColor' => 'rgb(255, 99, 132)',
                    'data' => [0, 10, 5, 2, 20, 30, 45],
                ],
            ],
        ]);

        $chart->setOptions([/* ... */]);

        return $this->render('home/index.html.twig', [
            'chart' => $chart,
        ]);
    }
}

Cette utilisation permet de centraliser les informations, au lieu d’avoir un fichier JavaScript à part. Tout ce qui concerne l’affichage de la page se fait dans ou via le Controller.

Le placement de notre graphique sur la page se fait naturellement avec Twig avec la commande suivante.

{{ render_chart(chart) }}

Tous les composants utilisables avec Symfony UX sont disponibles ici : https://github.com/symfony/ux/tree/main/src

Aussi, je vous joins la documentation Symfony qui m’a permis de réaliser cet article en grande partie, elle est en anglais : https://symfony.com/blog/new-in-symfony-the-ux-initiative-a-new-javascript-ecosystem-for-symfony

Symfony UX, pour conclure

Cette nouveauté va permettre à l’avenir de générer toute notre vue directement depuis le Controller. Tout ce qui est actuellement fait en JavaScript dans une application Symfony sera importé avec Symfony UX.

Laissons venir le futur jusqu’à nous …

Si vous voulez un peu plus de lecture je vous laisse avec mon dernier article qui traite de la sécurité sur internet : https://baptisteprieto.fr/securite/la-securite-sur-internet-le-mot-de-passe/

Ou pour revenir sur notre framework préféré, les commandes sur Symfony : https://baptisteprieto.fr/symfony/commande-symfony-import/

Prenez soin de vous.

Une question ? Une remarque ? Faites le moi savoir.

contact@baptisteprieto.fr | https://www.linkedin.com/in/baptiste-prieto/