Symfony Video Tutorial: Discovering Symfony UX

In this tutorial I invite you to discover Symfony UX. An initiative from the symfony team which allows easy access to advanced interface components.

The goal

The objective is to allow easy access to certain interface elements for Symfony developers while remaining the framework ecosystem.
For example, to set up a graphic on a page, we start by installing the dependency via composer.

composer require symfony / ux-chartjs
yarn install --force
yarn run dev-server # We restart the development server

Then in the controller you can initialize the information to send to the graph.

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,
        ));
    }
}

And finally we render the element in our Twig page.

{{render_chart (chart)}}

This is an example component but there are other components available for Symfony UX.

How does it work ?

Symfony UX is based on the Stimulus framework which allows JavaScript behaviors to be grafted to HTML elements through specific attributes. When installing a component, Symfony UX will add a dependency in the file package.json and edit a file controller.json to add a Stimulus controller to the list of controllers to load.

{
    "controllers": {
        "@ symfony / ux-chartjs": {
            "chart": {
                "enabled": true,
                "fetch": "eager"
            }
        }
    },
    "entrypoints": ()
}

This controller will then be used by the elements generated by the Twig function offered by the package.

It will read the HTML attributes (here data-view) and then send them to ChartJS to initialize the charts.

For what type of developer?

At first glance, the approach offered by Symfony UX may seem counterproductive for several reasons:

• We install JavaScript dependencies through the PHP dependency system.
• We add an intermediate layer with the final JavaScript library which can make the extensibility complex.
• The system requires the use of the Stimulus framework.

Also, I don't think Symfony UX is of interest to developers familiar with the front-end ecosystem.

However, if we look at this tool from the point of view of a back-end developer (not necessarily familiar with the front-end), it becomes interesting to simply and quickly connect advanced interface elements and that can be interesting.