С момента своего создания JavaScript всегда был ориентирован на создание инновационного пользовательского опыта (UX - User Experience). Он позволяет разработчикам создавать максимально интуитивно понятный и удобный UX под конкретную задачу. Однако на практике создание отличного пользовательского опыта с помощью JavaScript не такая простая задача. Потребуется немало времени, чтобы выбрать надежные пакеты, настроить их, интегрировать на свои страницы и заставить интерфейсный код взаимодействовать с остальной частью вашей инфраструктуры. Эта проблема не нова: она очень похожа на состояние Symfony в PHP до появления Symfony Flex. Нам нужен эквивалент Symfony Flex для JavaScript - инструмент способный создавать прекрасный пользовательский опыт так же быстро, как теперь мы можем настроить HTTP-клиент, почтовую программу или панель администрирования. Представляем вам Symfony UX. Symfony UX - это набор инструментов, который возводит мост между Symfony и экосистемой JavaScript. Он стоит на плечах таких гигантов JavaScript, как npm, Webpack Encore и Stimulus. Symfony UX не привязан к какой-либо конкретной структуре JavaScript: вы все равно можете использовать React, Vue или Angular, если они вам по душе. Это “opinionated software”, которое берет за основу стандартный HTML и может постепенно внедряться в существующих приложениях. Symfony UX состоит из трех основных компонентов: Интеграции Symfony для Stimulus, обеспечивающая новую организацию JavaScript-кода в приложениях; Обновления Symfony Flex и Symfony Webpack Encore для автоматической настройки JavaScript-кода, поставляемого PHP-пакетами; Набора основных пакетов UX, спроектированными быть надежными и компонуемыми для быстрого создания потрясающих интерфейсов. Хорошим примером возможностей Symfony UX является новый компонент Symfony UX Chart.js. Этот компонент внутренне полагается на библиотеку Chart.js. Чтобы использовать Symfony UX вам сначала нужно обновить свои зависимости Symfony Flex и Webpack Encore: И синхронизировать свои рецепты с последней версией: Синхронизация ваших рецептов может переопределить часть кода вашего приложения. Проверьте результат выполнения команды вручную, чтобы самому выбрать, что оставить!  После обновления Symfony Flex будет реагировать на каждый установленный вами PHP-пакет, содержащий JavaScript-код. Например, теперь вы можете установить компонент Chart.js: (Текст сообщения: Синхронизация package.json с PHP-пакетами  Не забудьте запустить npm или yarn, чтобы обновить Javascript-зависимости!)  Symfony Flex только что синхронизировал файл package.json вашего проекта с установленным вами PHP-пакетом Chart.js. Теперь вы можете найти в этом файле новый JavaScript-модуль: Symfony Flex также обновил новый файл assets/controllers.json в вашем проекте. Этот файл ссылается на все контроллеры Stimulus, предоставляемые установленными пакетами Symfony UX, чтобы Webpack Encore мог добавлять их в ваши встроенные JavaScript-файлы: Из-за этих изменений теперь вам следует установить новые JavaScript-зависимости и скомпилировать новые файлы: И… вот и все! Благодаря Symfony Flex, Symfony UX Chart.js был установлен и настроен одновременно как пакет Symfony в PHP и как библиотека JavaScript, скомпилированная во встроенные файлы вашего приложения. Это означает, что теперь с помощью этого пакет вы можете построить диаграмму: После создания в PHP диаграмму можно отобразить с помощью Twig: Все параметры и данные для Chart.js предоставляются как есть. Вы можете прочитать документацию Chart.js, чтобы узнать о них больше. Откройте для себя все пакеты Symfony UX на github.com/symfony/ux! Вы также можете ознакомиться со слайдами с презентации Фабьена и доклада Тетуана, чтобы получить более полное представление о инициативе! Symfony UX - это инициатива: ее цель - построить экосистему. Для этого нам нужна ваша помощь: какие еще пакеты мы могли бы создать в Symfony UX? А как насчет библиотеки, которая автоматически добавляет маску ввода в текстовые поля ваших форм Symfony? Или возможность сделать EntityType рендеринг с автозаполнением AJAX? Все, что вы делаете в JavaScript, можно организовать как UX-пакет. У нас есть еще несколько идей, и в ближайшее время мы выпустим больше пакетов. Остальное на вас: давайте вместе создавать замечательную экосистему! А прямо сейчас приглашаем всех желающих записаться на бесплатный демо-урок курса Symfony Framework по теме: "Микрофреймворки: сравнение производительности Symfony и Symlex".