Symfony UX : des outils pour s’affranchir du JavaScript

Symfony UX est une initiative et un ensemble de bibliothèques permettant d’intégrer de manière transparente des outils JavaScript dans votre application. Par exemple, vous souhaitez afficher un graphique avec Chart.js ? Utilisez UX Chart.js pour créer le graphique en PHP. Le JavaScript est géré automatiquement pour vous.

L’objectif est de permettre un accès simple à certains éléments d’interface aux développeurs Symfony en restant dans l’écosystème du framework.
Par exemple, pour mettre en place un graphique sur une page on commence par installer la dépendance via composer.

composer require symfony/ux-chartjs 
yarn install --force 
yarn run dev-server # On relance le serveur de développement

Puis dans le controller on peut initialiser les informations à envoyer au graphique.

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([ 
'scales' => [ 
   'yAxes' => [ 
     ['ticks' => ['min' => 0, 'max' => 100]],  
  ], 
 
 ], 
]);
 return $this->render('home/index.html.twig', [ 
      'chart' => $chart, 
  ]); 
 } 
}

Et enfin on rend l’élément dans notre page Twig.

<div>{{ render_chart(chart) }}</div>

Ceci est un exemple de composant mais il existe d’autres composants disponibles pour Symfony UX.

Comment cela fonctionne ?

Symfony UX repose sur le framework Stimulus qui permet de greffer des comportements JavaScript aux éléments HTML au travers d’attributs spécifiques. Lors de l’installation d’un composant, Symfony UX va ajouter une dépendance dans le fichier package.json et modifier un fichier controller.json afin d’ajouter un controller Stimulus à la liste des controllers à charger.

{ 

  "controllers": { 

      "@symfony/ux-chartjs": { 

          "chart":  {  

             "enabled": true, 

              "fetch": "eager" 

   } 

  } 

}, 

"entrypoints": [] 

}

Ce controller sera alors utilisé par les éléments générés par la fonction Twig offerte par le package.

<div data-controller="symfony--ux-chartjs--chart" data-view="{.....}"></div>

Il lira les attributs HTML (ici data-view) pour ensuite les envoyer à ChartJS pour initialiser les graphiques.

Tous les packages Symfony UX

• ux-autocompleteEntityType : Transforme ChoiceTypeou n’importe quel <select> élément en un champ de saisie semi-automatique basé sur Ajax ( voir démo )
• ux-chartjs : Graphiques faciles avec Chart.js ( voir démo )
• ux-cropperjs : Type de formulaire et outils de recadrage des images ( voir démo )

• ux-dropzone : type de formulaire pour la “zone de dépôt” stylisée pour les téléchargements de fichiers

  ( voir démo )

• ux-lazy-image : Optimiser le chargement des images avec BlurHash ( voir démo )
• ux-live-component : Construire des interfaces dynamiques sans JavaScript ( voir démo )
• ux-notify : Envoie une notification native envoyée par le serveur avec Mercure ( voir démo )
• ux-react : composant Render React de Twig ( voir démo )
• ux-swup : Intégration avec Swup ( voir démo )
• ux-turbo : intégration avec Turbo Drive pour une expérience d’application d’une seule page ( voir démo )
• ux-twig-component : Construire des composants Twig soutenus par une classe PHP ( voir démo )
• ux-typé : Intégration avec Typed ( voir démo )
• ux-vue : composant Render Vue de Twig ( voir démo )

Contrôleurs paresseux

Par défaut, tous vos contrôleurs (c’est-à-dire les fichiers dans assets/controllers/+ contrôleurs dans assets/controllers.json) seront téléchargés et chargés sur chaque page.

Parfois, vous pouvez avoir un contrôleur qui n’est utilisé que sur certaines pages, ou peut-être uniquement dans votre zone d’administration. Dans ce cas, vous pouvez rendre le contrôleur “paresseux”. Lorsqu’un contrôleur est paresseux, il n’est pas téléchargé lors du chargement initial de la page. Au lieu de cela, dès qu’un élément apparaît sur la page correspondant au contrôleur (par exemple <div data-controller="hello">), le contrôleur – et tout ce qu’il importe – sera chargé paresseusement via Ajax.

import { Controller } from '@hotwired/stimulus';

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    // ...
}

Pour rendre un contrôleur tiers paresseux, dans assets/controllers.json, réglez fetchsur lazy.