$30 off During Our Annual Pro Sale. View Details »

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. Symfony
    ImportMaps
    The modern toolchain for low-JS
    projects.

    View Slide

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

    View Slide

  3. ➔ 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

    View Slide

  4. Do You Still Need JavaScript?

    View Slide

  5. The Symfony UX Initiative

    View Slide

  6. View Slide

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

    View Slide

  8. Symfony UX Turbo

    View Slide

  9. Installing Symfony UX (Turbo)

    View Slide

  10. Installing Symfony UX (Turbo)

    View Slide

  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…

    View Slide

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

    View Slide

  13. JavaScript Modules

    View Slide

  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

    View Slide

  15. View Slide

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

    View Slide

  17. Here Come Import Maps

    View Slide

  18. Part of The HTML Spec

    View Slide

  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

    View Slide

  20. View Slide

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

    View Slide

  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

    View Slide

  23. The importmap.php file
    your local JS code

    View Slide

  24. The Symfony ImportMaps Component

    View Slide

  25. The CLI and the Twig integration

    View Slide

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

    View Slide

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

    View Slide

  28. 103 Early
    Hints
    © Google

    View Slide

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

    View Slide

  30. 103 Early Hints and FrankenPHP

    View Slide

  31. 103 Early Hints and Symfony

    View Slide

  32. Import Maps and 103 Early Hints

    View Slide

  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

    View Slide

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

    View Slide