New in Symfony: UX Initiative – New JavaScript Ecosystem for Symfony

3 min


Since its inception, JavaScript has always focused on creating an innovative user experience (UX – User Experience). It allows developers to create as intuitive and convenient as possible UX for a specific task.

However, in practice, creating a great user experience with JavaScript is not an easy task. It will take a long time to select reliable packages, configure them, integrate them into your pages, and get the front-end code to interact with the rest of your infrastructure.

This problem is not new: it is very similar to the state of Symfony in PHP before Symfony Flex. We need the JavaScript equivalent of Symfony Flex – a tool that can create a great user experience as quickly as we can now customize. HTTP client, mail program or administration panel

Introducing Symfony UX.

Symfony UX: Building Highly Interactive Applications Using JavaScript Kits

Symfony UX is a set of tools that bridges the gap between Symfony and the JavaScript ecosystem. It stands on the shoulders of JavaScript giants like npm, Webpack Encore and Stimulus

Symfony UX not tied to any particular JavaScript framework: You can still use React, Vue or Angular if you like. it “Opinionated software”which takes standard HTML as a basis and maybe gradually take root in existing applications.

Symfony UX has three main components:

  1. Symfony Integrations for Stimulus, providing a new organization of JavaScript code in applications;

  2. Symfony Flex and Symfony Webpack Encore updates to automatically tune JavaScript supplied by PHP packages;

  3. A collection of core UX packages designed to be robust and composable to quickly create stunning interfaces.

Example: Displaying Charts in PHP Using Symfony UX Chart.js

A good example of Symfony UX capabilities is new Symfony UX Chart.js component… This component internally relies on the library Chart.js

To use Symfony UX, you first need to update your Symfony Flex and Webpack Encore dependencies:

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

And sync your recipes with the latest version:

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

Synchronizing your recipes can override some of your application’s code. Check the result of the manual command to choose what to keep!

After the upgrade, Symfony Flex will respond to every PHP package you install that contains JavaScript code. For example, now you can install the component Chart.js:

$ composer require symfony/ux-chartjs
Using version ^1.0 for symfony/ux-chartjs
./composer.json has been updated

Synchronizing package.json with PHP packages
Don't forget to run npm or yarn to refresh your Javascript dependencies!
...

(Message text: Synchronizing package.json with PHP packages

Don’t forget to run npm or yarn to update your Javascript dependencies!)

Symfony Flex just synced a file package.json of your project with PHP package you installed Chart.js… Now you can find a new JavaScript module in this file:

// package.json
{
    "devDependencies": {
        ...
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets"
    }
}

Symfony Flex has also updated a new file assets/controllers.json in your project. This file references all Stimulus controllers provided by the installed Symfony UX packages so that Webpack Encore can add them to your inline JavaScript files:

// assets/controllers.json
{
    "controllers": {
        "@symfony/ux-chartjs": {
            "chart": {
                "enabled": true,
                "webpackMode": "eager"
            }
        }
    },
    "entrypoints": []
}

Because of these changes, you should now install new JavaScript dependencies and compile the new files:

yarn install --force
yarn encore dev

And … that’s all! Thanks to Symfony Flex, Symfony UX Chart.js was installed and configured both as a Symfony package in PHP and as a JavaScript library compiled into your application’s embedded files.

This means that you can now build a diagram using this package:

// ...
use SymfonyUXChartjsBuilderChartBuilderInterface;
use SymfonyUXChartjsModelChart;

class HomeController extends AbstractController
{
    /**
     * @Route("https://habr.com/", 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,
        ]);
    }
}

Once created in PHP, the diagram can be displayed using Twig:

{{ render_chart(chart) }}

{# You can pass HTML attributes as a second argument to add them on the <canvas> tag #}
{{ render_chart(chart, {'class': 'my-chart'}) }}

All parameters and data for Chart.js provided as is. You can read the Chart.js documentation, to learn more about them.

Discover all Symfony UX packages at github.com/symfony/ux!

You can also see the slides from Fabien’s presentation and the report of Tetouan, to get a better idea of ​​the initiative!

Let’s build a wonderful ecosystem together

Symfony UX is initiative: its goal is to build an ecosystem. To do this, we need your help: what other packages could we create in Symfony UX? What about a library that automatically adds input mask into the text boxes of your Symfony forms? Or the ability to make the EntityType render with autocomplete ajax? Everything you do in JavaScript can be organized as a UX package.

We have some more ideas and we will release more packages soon. The rest is up to you: let’s create a wonderful ecosystem together!


And right now we invite everyone sign up for a free demo lesson of the Symfony Framework course on this topic: “Micro-frameworks: Comparing Symfony and Symlex Performance”



0 Comments

Leave a Reply