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.
   

   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 💬
   ➔ contact@les-tilleuls.coop 💌
   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