Інструменти фронтенду: робота з CSS та JavaScript
Дата оновлення перекладу 2024-06-07
Інструменти фронтенду: робота з CSS та JavaScript
Symfony надає вам гнучкість у виборі будь-яких фронтенд-інструментів, які ви хочете. Існує є два підходи:
- побудова вашого HTML за допомогою PHP та Twig ;
- :ref:`побудова фронтенду за допомогою JavaScript-фреймворку <frontend-js>, такого як React, Vue, Svelte тощо.
Обидва варіанти чудово працюють - і обговорюються нижче.
Використання PHP і Twig
Symfony постачається з двома потужними опціями, які допоможуть вам створити сучасний та швидкий фронтенд:
- AssetMapper (рекомендується для нових проектів) працює повністю на PHP, не вимагає жодного кроку збірки і використовує сучасні веб-стандарти .
- Webpack Encore збирається за допомогою Node.js. поверх Webpack.
| AssetMapper | Encore | |
|---|---|---|
| ??????? ?? ???????????? | ??? | ??? |
| ??????????? | ??? | ??? |
| ?????? | ?????? | Node.js |
| ??????? ???? ??????? | ?? | ??? |
| ?????? ? ???? ?????????? | ??? | ??? |
| ????????? Stimulus/UX | ??? | ??? |
| ????????? Sass/Tailwind | ??? | ??? |
| ????????? React, Vue, Svelte? | ??? [1] | ??? |
| ????????? TypeScript | ??? | ??? |
| ??????? ????????? ? JavaScript | ?? | ??? |
| ??????? ????????? ? CSS | ?? | ?? |
| ???????????? ??????? | ?????? | ??????????? |
| ???? ?????????? ???????? ?????? | ??? | ?? [2] |
[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. Він поставляється повністю сумісним з Docker і навіть містить веб-сервер.