Новое в Symfony: инициатива UX — новая экосистема JavaScript для Symfony

Автор оригинала: Titouan Galopin
  • Перевод

С момента своего создания 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".


OTUS. Онлайн-образование
Цифровые навыки от ведущих экспертов

Комментарии 4

    +5

    Здравствуй, Отус.
    Я знаю что не в тему, но уже давно хочу спросить, да всё случай не представлялся. Однажды на русском стаковерлое я увидел ссылку на вот это:


        $login = $_POST['login']; 
        $password = $_POST['password'];
        //запрашивается строка из базы данных с логином, введённым пользователем      
        $rez = mysql_query("SELECT * FROM users WHERE login=$login"); 
        //если нашлась одна строка, значит такой юзер существует в базе данных       
        if (mysql_num_rows($rez) == 1) 
        {           
            $row = mysql_fetch_assoc($rez);             
             //сравнивается хэшированный пароль из базы данных 
            //с хэшированными паролем, введённым пользователем 
            if (md5(md5($password).$row['salt']) == $row['password']) 

    Ну то есть я понимаю, что технически это реклама курса "Backend-разработчик на PHP", и наглядная, так сказать, демонстрация конечного продукта. Но… честно говоря, даже по меркам "Курсы по пэхапе" это немного перебор. Я три раза дату проверил. Там реально стоит 2019 год, а не 1999.


    Переводы — это конечно хорошо, но куда интереснее актуальное онлайн-образование, которое у вас можно получить.

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

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое