Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Symfony ImportMaps: Manage Your JavaScript Dependencies Without Node

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!

Kévin Dunglas

March 24, 2023
Tweet

More Decks by Kévin Dunglas

Other Decks in Programming

Transcript

  1. Kévin Dunglas ➔ Symfony Core Team ➔ Creator of API

    Platform ➔ Co-founder of Les-Tilleuls.coop @dunglas
  2. ➔ Symfony, JS and Cloud experts ➔ 100% employee-owned co-op

    ✊ ➔ Democratically managed 💬 ➔ [email protected] 💌 12 YEARS OF EXPERTISE 70 COOPERATORS 300 CUSTOMERS 50 PROJECTS/YEAR
  3. ➔ Turbo SPAs-like (almost) without JS ➔ Stimulus when you

    really need JavaScript ➔ Strada (not released yet) mobile hybrid apps (used by Hey) Hotwire
  4. ➔ 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…
  5. ➔ The web platform evolved, we can now do simpler!

    ➔ No Node, no NPM, no Webpack?! ➔ It’s possible with modern browsers! #UseThePlatform
  6. ➔ 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
  7. ➔ Importing “NPM packages” is not standard ➔ This syntax

    isn’t supported by default! ➔ But it’s very very common What About NPM Packages?
  8. ➔ 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
  9. ➔ Use JS modules to manage your modern JS ➔

    No Node ➔ No NPM ➔ No Webpack! ➔ Inspired by rails/importmap-rails The Symfony ImportMaps Component
  10. ➔ 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
  11. ➔ 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