Новое в Symfony: Экосистема JavaScript для Symfony

С момента своего создания JavaScript всегда был ориентирован на создание инновационного пользовательского опыта. Это позволяет разработчикам создавать максимально интуитивно понятный и удобный пользовательский интерфейс для конкретной проблемы.

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

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

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

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

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

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

  • интеграция Symfony для Stimulus, чтобы предоставить новую организацию для кода JavaScript в приложениях
  • обновления для Symfony Flex и Symfony Webpack Encore для автоматической настройки кода JavaScript, поставляемого пакетами PHP
  • серия базовых пакетов 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@^1.0.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!
...

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,
                "fetch": "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  tag #}
{{ render_chart(chart, {'class': 'my-chart'}) }}

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

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

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

Назад

Наверх