Symfony ImportMaps: Manage Your JavaScript Dependencies Without Node

by Kévin Dunglas

Slide 1

Slide 1 text

Symfony ImportMaps The modern toolchain for low-JS projects.

Slide 2

Slide 2 text

Kévin Dunglas ➔ Symfony Core Team ➔ Creator of API Platform ➔ Co-founder of Les-Tilleuls.coop @dunglas

Slide 3

Slide 3 text

➔ 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

Slide 4

Slide 4 text

Do You Still Need JavaScript?

Slide 5

Slide 5 text

The Symfony UX Initiative

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

➔ Turbo SPAs-like (almost) without JS ➔ Stimulus when you really need JavaScript ➔ Strada (not released yet) mobile hybrid apps (used by Hey) Hotwire

Slide 8

Slide 8 text

Symfony UX Turbo

Slide 9

Slide 9 text

Installing Symfony UX (Turbo)

Slide 10

Slide 10 text

Installing Symfony UX (Turbo)

Slide 11

Slide 11 text

➔ 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…

Slide 12

Slide 12 text

➔ The web platform evolved, we can now do simpler! ➔ No Node, no NPM, no Webpack?! ➔ It’s possible with modern browsers! #UseThePlatform

Slide 13

Slide 13 text

JavaScript Modules

Slide 14

Slide 14 text

➔ 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 ﬁles JavaScript Modules

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

➔ Importing “NPM packages” is not standard ➔ This syntax isn’t supported by default! ➔ But it’s very very common What About NPM Packages?

Slide 17

Slide 17 text

Here Come Import Maps

Slide 18

Slide 18 text

Part of The HTML Spec

Slide 19

Slide 19 text

➔ String substitution for JavaScript modules imports ➔ Basically allow to use NPM (and other) JS packages! ➔ Natively supported by modern browsers ➔ A Polyﬁll exists for older browsers! Import Maps

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

➔ Use JS modules to manage your modern JS ➔ No Node ➔ No NPM ➔ No Webpack! ➔ Inspired by rails/importmap-rails The Symfony ImportMaps Component

Slide 22

Slide 22 text

➔ 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

Slide 23

Slide 23 text

The importmap.php ﬁle your local JS code

Slide 24

Slide 24 text

The Symfony ImportMaps Component

Slide 25

Slide 25 text

The CLI and the Twig integration

Slide 26

Slide 26 text

Download Packages Locally $ bin/console importmap:require @hotwired/stimulus --download

Slide 27

Slide 27 text

Modules Preloading $ bin/console importmap:require @hotwired/stimulus --preload

Slide 28

Slide 28 text

Slide 29

Slide 29 text

➔ Module preloading using 103 Early Hints thanks to 103 Early Hints and PHP

Slide 30

Slide 30 text

103 Early Hints and FrankenPHP

Slide 31

Slide 31 text

103 Early Hints and Symfony

Slide 32

Slide 32 text

Import Maps and 103 Early Hints

Slide 33

Slide 33 text

➔ 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

Slide 34

Slide 34 text

Thanks for your attention! ➔ Any questions ? dunglas.dev @dunglas