С момента своего создания JavaScript всегда был ориентирован на создание инновационного пользовательского опыта (UX - User Experience). Он позволяет разработчикам создавать максимально интуитивно понятный и удобный UX под конкретную задачу.

Однако на практике создание отличного пользовательского опыта с помощью JavaScript не такая простая задача. Потребуется немало времени, чтобы выбрать надежные пакеты, настроить их, интегрировать на свои страницы и заставить интерфейсный код взаимодействовать с остальной частью вашей инфраструктуры.

Эта проблема не нова: она очень похожа на состояние Symfony в PHP до появления Symfony Flex. Нам нужен эквивалент Symfony Flex для JavaScript - инструмент способный создавать прекрасный пользовательский опыт так же быстро, как теперь мы можем настроить HTTP-клиент, почтовую программу или панель администрирования.

Представляем вам Symfony UX.

Symfony UX: создание высокоинтерактивных приложений с с использованием китов JavaScript

Symfony UX - это набор инструментов, который возводит мост между Symfony и экосистемой JavaScript. Он стоит на плечах таких гигантов JavaScript, как npm, Webpack Encore и Stimulus.

Symfony UX не привязан к какой-либо конкретной структуре JavaScript: вы все равно можете использовать React, Vue или Angular, если они вам по душе. Это “opinionated software”, которое берет за основу стандартный HTML и может постепенно внедряться в существующих приложениях.

Symfony UX состоит из трех основных компонентов:

1. Интеграции Symfony для Stimulus, обеспечивающая новую организацию JavaScript-кода в приложениях;

2. Обновления Symfony Flex и Symfony Webpack Encore для автоматической настройки JavaScript-кода, поставляемого PHP-пакетами;

3. Набора основных пакетов UX, спроектированными быть надежными и компонуемыми для быстрого создания потрясающих интерфейсов.

Пример: отображение диаграмм в PHP с использованием Symfony UX Chart.js

Хорошим примером возможностей Symfony UX является новый компонент Symfony UX Chart.js. Этот компонент внутренне полагается на библиотеку Chart.js.

Чтобы использовать Symfony UX вам сначала нужно обновить свои зависимости Symfony Flex и Webpack Encore:

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

И синхронизировать свои рецепты с последней версией:

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

Синхронизация ваших рецептов может переопределить часть кода вашего приложения. Проверьте результат выполнения команды вручную, чтобы самому выбрать, что оставить!

После обновления Symfony Flex будет реагировать на каждый установленный вами PHP-пакет, содержащий JavaScript-код. Например, теперь вы можете установить компонент 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!
...

(Текст сообщения: Синхронизация package.json с PHP-пакетами 

Не забудьте запустить npm или yarn, чтобы обновить Javascript-зависимости!)

Symfony Flex только что синхронизировал файл package.json вашего проекта с установленным вами PHP-пакетом Chart.js. Теперь вы можете найти в этом файле новый JavaScript-модуль:

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

Symfony Flex также обновил новый файл assets/controllers.json в вашем проекте. Этот файл ссылается на все контроллеры Stimulus, предоставляемые установленными пакетами Symfony UX, чтобы Webpack Encore мог добавлять их в ваши встроенные JavaScript-файлы:

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

Из-за этих изменений теперь вам следует установить новые JavaScript-зависимости и скомпилировать новые файлы:

yarn install --force
yarn encore dev

И… вот и все! Благодаря Symfony Flex, Symfony UX Chart.js был установлен и настроен одновременно как пакет Symfony в PHP и как библиотека JavaScript, скомпилированная во встроенные файлы вашего приложения.

Это означает, что теперь с помощью этого пакет вы можете построить диаграмму:

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

После создания в PHP диаграмму можно отобразить с помощью 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'}) }}

Все параметры и данные для Chart.js предоставляются как есть. Вы можете прочитать документацию Chart.js, чтобы узнать о них больше.

Откройте для себя все пакеты Symfony UX на github.com/symfony/ux!

Вы также можете ознакомиться со слайдами с презентации Фабьена и доклада Тетуана, чтобы получить более полное представление о инициативе!

Давайте строить замечательную экосистему вместе 

Symfony UX - это инициатива: ее цель - построить экосистему. Для этого нам нужна ваша помощь: какие еще пакеты мы могли бы создать в Symfony UX? А как насчет библиотеки, которая автоматически добавляет маску ввода в текстовые поля ваших форм Symfony? Или возможность сделать EntityType рендеринг с автозаполнением AJAX? Все, что вы делаете в JavaScript, можно организовать как UX-пакет.

У нас есть еще несколько идей, и в ближайшее время мы выпустим больше пакетов. Остальное на вас: давайте вместе создавать замечательную экосистему!

А прямо сейчас приглашаем всех желающих записаться на бесплатный демо-урок курса Symfony Framework по теме: "Микрофреймворки: сравнение производительности Symfony и Symlex".