Hébergement site web Tunisie , serveur vps cloud – Zenhosting

final-logo

Découvrez nos offres d'hébergement Cloud

Hébergement Web Simple, rapide et sécurisé. Confiez-nous l’hébergement de votre site web dès maintenant.

hébergement web

Symfony UX : des outils pour s’affranchir du JavaScript

symfony+ux+java+script

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.

 

Cet Article est utile ? Votez
0 / 5 2

Your page rank:

Facebook
Twitter
LinkedIn
Pinterest

Plus à explorer

google+analytics+4
Cloud computing

Google Analytics 4 : ce que vous devez savoir

Des millions d’entreprises, grandes et petites, s’appuient sur Google Analytics pour comprendre leur audience. Avec Google Analytics 4 , l’objectif est de fournir des informations plus intelligentes et

laravel9
Coding

Quoi de neuf dans Laravel 9

Laravel est l’un des frameworks PHP les plus populaires depuis de nombreuses années. Il est élégant, évolutif, est devenu l’un des frameworks de facto pour les développeurs

workflow+symfony
Coding

LE COMPOSANT WORKFLOW DE SYMFONY

Depuis Symfony 3.2, un nouveau composant très utile a vu le jour : le composant Workflow. Celui-ci est en effet très pratique et peut très largement

 20% Réduction

Bénéficiez de 20 % de réduction pour votre 1 achat
Confirmer
*Offre valable uniquement pour les nouveaux inscrits
close-link

Mailsuite fonctionne sur Tous vos appareils

Prenez votre communication avec vous en installant des applications complètes sur votre appareil Android, iOS windows et MacOs

Mailsuite fonctionne sur Tous vos appareils

Prenez votre communication avec vous en installant des applications complètes sur votre appareil Android, iOS windows et MacOs