@@ -8,34 +8,45 @@ more advanced - like scaffolding your front-end with a tool like Next.js.
88However, Symfony *does * come with two powerful options to help you build a modern,
99fast frontend, *and * enjoy the process:
1010
11- * :ref: `Webpack Encore <frontend-webpack-encore >` is a powerful tool built with `Node.js `_
12- on top of `Webpack `_ that allows you to write modern CSS & JavaScript and handle
13- things like JSX (React), Vue or TypeScript.
14-
15- * :ref: `AssetMapper <frontend-asset-mapper >`, is a production-ready simpler alternative
16- to Webpack Encore that runs entirely in PHP.
17-
18- ================================ ================= ======================================================
19- Encore AssetMapper
20- ================================ ================= ======================================================
21- Production Ready? yes yes
22- Stable? yes yes
23- Requirements Node.js none: pure PHP
24- Requires a build step? yes no
25- Works in all browsers? yes yes
26- Supports `Stimulus/UX `_ yes yes
27- Supports Sass/Tailwind yes :ref: `yes <asset-mapper-tailwind >`
28- Supports React, Vue, Svelte? yes yes :ref: `[1] <ux-note-1 >`
29- Supports TypeScript yes no :ref: `[1] <ux-note-1 >`
30- ================================ ================= ======================================================
11+ * :ref: `AssetMapper <frontend-asset-mapper >` (recommended for new projects) runs
12+ entirely in PHP, doesn't require any build step and leverages modern web standards.
13+
14+ * :ref: `Webpack Encore <frontend-webpack-encore >` is built with `Node.js `_
15+ on top of `Webpack `_.
16+
17+ ================================ ================================== ==========
18+ AssetMapper Encore
19+ ================================ ================================== ==========
20+ Production Ready? yes yes
21+ Stable? yes yes
22+ Requirements none Node.js
23+ Requires a build step? no yes
24+ Works in all browsers? yes yes
25+ Supports `Stimulus/UX `_ yes yes
26+ Supports Sass/Tailwind :ref: `yes <asset-mapper-tailwind >` yes
27+ Supports React, Vue, Svelte? yes :ref: `[1] <ux-note-1 >` yes
28+ Supports TypeScript :ref: `yes <asset-mapper-ts >` yes
29+ ================================ ================================== ==========
3130
3231.. _ux-note-1 :
3332
34- **[1] ** Using JSX (React), Vue or TypeScript with AssetMapper is possible, but you'll
33+ **[1] ** Using JSX (React), Vue, etc with AssetMapper is possible, but you'll
3534need to use their native tools for pre-compilation. Also, some features (like
3635Vue single-file components) cannot be compiled down to pure JavaScript that can
3736be executed by a browser.
3837
38+ .. _frontend-asset-mapper :
39+
40+ AssetMapper (Recommended)
41+ -------------------------
42+
43+ AssetMapper is the recommended system for handling your assets. It runs entirely
44+ in PHP with *no * complex build step or dependencies. It does this by leveraging
45+ the ``importmap `` feature of your browser, which is available in all browsers thanks
46+ to a polyfill.
47+
48+ :doc: `Read the AssetMapper Documentation </frontend/asset_mapper >`
49+
3950.. _frontend-webpack-encore :
4051
4152Webpack Encore
@@ -50,83 +61,15 @@ It *wraps* Webpack, giving you a clean & powerful API for bundling JavaScript mo
5061pre-processing CSS & JS and compiling and minifying assets. Encore gives you a professional
5162asset system that's a *delight * to use.
5263
53- Encore is inspired by `Webpacker `_ and `Mix `_, but stays in the spirit of Webpack:
54- using its features, concepts and naming conventions for a familiar feel. It aims
55- to solve the most common Webpack use cases.
56-
57- .. tip ::
58-
59- Encore is made by `Symfony `_ and works *beautifully * in Symfony applications.
60- But it can be used in any PHP application and even with other server-side
61- programming languages!
62-
63- .. _encore-toc :
64-
65- Encore Documentation
66- --------------------
67-
68- Getting Started
69- ...............
70-
71- * :doc: `Installation </frontend/encore/installation >`
72- * :doc: `Using Webpack Encore </frontend/encore/simple-example >`
73-
74- Adding more Features
75- ....................
76-
77- * :doc: `CSS Preprocessors: Sass, LESS, etc. </frontend/encore/css-preprocessors >`
78- * :doc: `PostCSS and autoprefixing </frontend/encore/postcss >`
79- * :doc: `Enabling React.js </frontend/encore/reactjs >`
80- * :doc: `Enabling Vue.js (vue-loader) </frontend/encore/vuejs >`
81- * :doc: `/frontend/encore/copy-files `
82- * :doc: `Configuring Babel </frontend/encore/babel >`
83- * :doc: `Source maps </frontend/encore/sourcemaps >`
84- * :doc: `Enabling TypeScript (ts-loader) </frontend/encore/typescript >`
85-
86- Optimizing
87- ..........
88-
89- * :doc: `Versioning (and the entrypoints.json/manifest.json files) </frontend/encore/versioning >`
90- * :doc: `Using a CDN </frontend/encore/cdn >`
91- * :doc: `/frontend/encore/code-splitting `
92- * :doc: `/frontend/encore/split-chunks `
93- * :doc: `/frontend/encore/url-loader `
94-
95- Guides
96- ......
97-
98- * :doc: `Using Bootstrap CSS & JS </frontend/encore/bootstrap >`
99- * :doc: `jQuery and Legacy Applications </frontend/encore/legacy-applications >`
100- * :doc: `Passing Information from Twig to JavaScript </frontend/encore/server-data >`
101- * :doc: `webpack-dev-server and Hot Module Replacement (HMR) </frontend/encore/dev-server >`
102- * :doc: `Adding custom loaders & plugins </frontend/encore/custom-loaders-plugins >`
103- * :doc: `Advanced Webpack Configuration </frontend/encore/advanced-config >`
104- * :doc: `Using Encore in a Virtual Machine </frontend/encore/virtual-machine >`
105-
106- Issues & Questions
107- ..................
108-
109- * :doc: `FAQ & Common Issues </frontend/encore/faq >`
110-
111- Full API
112- ........
113-
114- * `Full API `_
115-
116- .. _frontend-asset-mapper :
117-
118- AssetMapper
119- -----------
120-
121- AssetMapper is an alternative to Webpack Encore that runs entirely in PHP
122- without any complex build steps. It leverages the ``importmap `` feature of
123- your browser, which is available in all browsers thanks to a polyfill.
124-
125- :doc: `Read the AssetMapper Documentation </frontend/asset_mapper >`
64+ :doc: `Read the Encore Documentation </frontend/encore/index >`
12665
12766Stimulus & Symfony UX Components
12867--------------------------------
12968
69+ Once you've installed AssetMapper or Encore, it's time to start building your
70+ front-end. You can write your JavaScript however you want, but we recommend
71+ using `Stimulus `_, `Turbo `_ and a set of tools called `Symfony UX `_.
72+
13073To learn about Stimulus & the UX Components, see:
13174the `StimulusBundle Documentation `_
13275
@@ -139,10 +82,9 @@ Other Front-End Articles
13982.. _`Webpack Encore` : https://www.npmjs.com/package/@symfony/webpack-encore
14083.. _`Webpack` : https://webpack.js.org/
14184.. _`Node.js` : https://nodejs.org/
142- .. _`Webpacker` : https://github.com/rails/webpacker
143- .. _`Mix` : https://laravel.com/docs/mix
144- .. _`Symfony` : https://symfony.com/
145- .. _`Full API` : https://github.com/symfony/webpack-encore/blob/master/index.js
14685.. _`Webpack Encore screencast series` : https://symfonycasts.com/screencast/webpack-encore
14786.. _StimulusBundle Documentation : https://symfony.com/bundles/StimulusBundle/current/index.html
14887.. _Stimulus/UX : https://symfony.com/bundles/StimulusBundle/current/index.html
88+ .. _Stimulus : https://stimulus.hotwired.dev/
89+ .. _Turbo : https://turbo.hotwired.dev/
90+ .. _Symfony UX : https://ux.symfony.com
0 commit comments