Инструменты фронтенда: работа с CSS и JavaScript
Дата обновления перевода 2024-07-29
Инструменты фронтенда: работа с CSS и JavaScript
Symfony дает вам возможность выбрать любой фронтенд-инструмент по своему усмотрению. В целом существует два подхода:
- построение вашего HTML с PHP и Twig ;
- построение вашего фронтенда с фреймворком JavaScript вроде React, Vue, Svelte, и др.
Оба варианта работают отлично - о них мы расскажем ниже.
Использование PHP и Twig
Symfony поставляется с двумя мощными опциями, которые помогут вам создать современный и быстрый фронтенд:
- AssetMapper (рекомендуется для новых проектов) работает полностью на PHP, не требует шагов сборки и использует современные веб-стандарты.
- Webpack Encore построен с использованием Node.js. поверх Webpack.
[1] Использование JSX (React), Vue и т. д. с AssetMapper возможно, но вам придется использовать их собственные инструменты для предварительной компиляции. Кроме того, некоторые функции (например однофайловые компоненты Vue) не могут быть скомпилированы в чистый JavaScript, который может быть выполнен браузером.
[2] Если вы используете npm, вам доступны программы проверки обновлений (например,
npm-check).
AssetMapper (рекомендовано)
AssetMapper - это рекомендуемая система для работы с вашими ресурсами. Она работает полностью
на PHP без сложных шагов сборки или зависимостей. Для этого она использует
функцию importmap вашего браузера, которая доступна во всех браузерах благодаря
полизаполнению.
Webpack Encore
Screencast
Вы предпочитаете видеоуроки? Ознакомьтесь с серией скринкастов Webpack Encore.
Webpack Encore - это упрощенный способ интеграции Webpack в ваше приложение. Он становится оберткой для Webpack, предоставляя вам чистый и мощный API для создания JavaScript-модулей, предварительной обработки CSS и JS, а также компиляции и сокращения ресурсов.
Stimulus и компоненты Symfony UX
После того как вы установили AssetMapper или Webpack Encore, самое время приступить к созданию фронтенда. Вы можете писать свой JavaScript как угодно, но мы рекомендуем использовать Stimulus, Turbo и набор инструментов под названием Symfony UX.
- Чтобы узнать о Stimulus и компонентах UX, см.
- документацию StimulusBundle.
Использование фронтенд-фреймворка (React, Vue, Svelte, и др.)
Если вы хотите использовать фронтенд-фреймворк (Next.js, React, Vue, Svelte и др.), мы рекомендуем использовать их родные инструменты, а Symfony использовать как чистый API. Замечательный инструмент для этого - Платформа API. Их стандартный дистрибутив поставляется с бекенд API на базе Symfony, фронтендом на Next.js (другие фреймворки также поддерживаются) и интерфейсом админа React. Дистрибутив полностью докеризован и даже содержит веб-сервер.