Symfony ImportMaps: Manage Your JavaScript Dependencies Without Node

Yarn, NPM, pnpm, Babel, SWC, Webpack, TurboPack, Rollup, Parcel... Is it really necessary to introduce so much complexity to create a beautiful and interactive website?

The Symfony UX initiative greatly simplified how to build frontend applications with Symfony by going back to the roots: server-side generated HTML (goodbye JSX, our good old Twig is back), and minimalist JavaScript thanks to Hotwire. However, to use Symfony UX, you still need to install, set up, and maintain a full JS toolchain... which is no picnic.

Is it still really necessary?! Browers recently gained features making it possible to do without most of them. Let's see how to get rid of the complexity by using the web platform... and the new Symfony ImportMap component!

Transcript

1. Symfony ImportMaps The modern toolchain for low-JS projects.
2. Kévin Dunglas ➔ Symfony Core Team ➔ Creator of API Platform ➔ Co-founder of Les-Tilleuls.coop @dunglas
3. ➔ Symfony, JS and Cloud experts ➔ 100% employee-owned co-op ✊ ➔ Democratically managed 💬 ➔ contact@les-tilleuls.coop 💌 12 YEARS OF EXPERTISE 70 COOPERATORS 300 CUSTOMERS 50 PROJECTS/YEAR
4. Do You Still Need JavaScript?
5. The Symfony UX Initiative
7. ➔ Turbo SPAs-like (almost) without JS ➔ Stimulus when you really need JavaScript ➔ Strada (not released yet) mobile hybrid apps (used by Hey) Hotwire
8. Symfony UX Turbo
9. Installing Symfony UX (Turbo)
10. Installing Symfony UX (Turbo)
11. ➔ Node (JS runtime) ➔ NPM or Yarn (package manager) ➔ Webpack: JS bundler ➔ Encore: because Webpack is hard ➔ And many optional dependencies This is too much complexity! And hard to maintain. So You Need…
12. ➔ The web platform evolved, we can now do simpler! ➔ No Node, no NPM, no Webpack?! ➔ It’s possible with modern browsers! #UseThePlatform
13. JavaScript Modules
14. ➔ Are supported by all modern browsers… ➔ …and by Node ➔ But only allow to import relative or absolute URLs ➔ Performance boost: download your modules in parallel thanks to HTTP/2+ multiplexing ➔ Better cache dynamics than large JS files JavaScript Modules
16. ➔ Importing “NPM packages” is not standard ➔ This syntax isn’t supported by default! ➔ But it’s very very common What About NPM Packages?
17. Here Come Import Maps
18. Part of The HTML Spec
19. ➔ String substitution for JavaScript modules imports ➔ Basically allow to use NPM (and other) JS packages! ➔ Natively supported by modern browsers ➔ A Polyfill exists for older browsers! Import Maps
21. ➔ Use JS modules to manage your modern JS ➔ No Node ➔ No NPM ➔ No Webpack! ➔ Inspired by rails/importmap-rails The Symfony ImportMaps Component
22. ➔ JS package manager ➔ CLI similar to Composer: require / update / remove ➔ Converts NPM as ESM module ➔ Relies on JSPM (open source CDN) ➔ Handles your local JavaScript code Features
23. The importmap.php file your local JS code
24. The Symfony ImportMaps Component
25. The CLI and the Twig integration
26. Download Packages Locally $ bin/console importmap:require @hotwired/stimulus --download
27. Modules Preloading $ bin/console importmap:require @hotwired/stimulus --preload
28. 103 Early Hints © Google
29. ➔ Module preloading using 103 Early Hints thanks to 103 Early Hints and PHP
30. 103 Early Hints and FrankenPHP
31. 103 Early Hints and Symfony
32. Import Maps and 103 Early Hints
33. ➔ CSS assets (we’re working on it) ➔ TypeScript, JSX and other non-standard JS: use Webpack Encore… ➔ …or better: API Platform! Next Steps and Limitations
34. Thanks for your attention! ➔ Any questions ? dunglas.dev @dunglas