Import Maps: The Next Evolution Step for Micro Frontends?

Transcript

1. @ManfredSteyer
   Import Maps:
   The Next Evolution Step for Micro Frontends?
   ManfredSteyer
   

   View Slide

2. @ManfredSteyer
   

   View Slide

3. @ManfredSteyer
   

   View Slide

4. @ManfredSteyer
   Booking App Check-in App
   Boarding App
   Luggage App
   

   View Slide

5. @ManfredSteyer
   

   View Slide

6. @ManfredSteyer
   const Component = await import('other-app/xyz')
   

   View Slide

7. @ManfredSteyer
   const Component = await import('other-app/xyz')
   

   View Slide

8. @ManfredSteyer
   

   View Slide

9. @ManfredSteyer
   

   View Slide

10. @ManfredSteyer
    

    View Slide

11. @ManfredSteyer
    #1
    Module Federation
    101
    #2
    Import Maps
    #3
    Module Federation
    on Import Maps
    

    View Slide

12. @ManfredSteyer
    Manfred Steyer
    

    View Slide

13. @ManfredSteyer
    

    View Slide

14. @ManfredSteyer
    Shell (Host) Microfrontend (Remote)
    // Maps Urls in
    // webpack config
    remotes: {
    mfe1: "http://..."
    }
    // Expose files in
    // webpack config
    exposes: {
    './Cmp': './my.cmp.ts'
    }
    import('mfe1/Cmp')
    

    View Slide

15. @ManfredSteyer
    Shell (Host) Microfrontend (Remote)
    RemoteEntry.js
    
    

    View Slide

16. @ManfredSteyer
    Shell (Host) Microfrontend (Remote)
    shared: [
    "@angular/core", "…"
    ]
    shared: [
    "@angular/core", "…"
    ]
    

    View Slide

17. @ManfredSteyer
    Selecting the highest compatible version
    ^10.0 ^10.1
    

    View Slide

18. @ManfredSteyer
    Conflict: No highest compatible version
    11.0 10.1
    

    View Slide

19. @ManfredSteyer
    shared: {
    "my-lib": {
    singleton: true
    }
    }
    11.0 10.1
    

    View Slide

20. @ManfredSteyer
    shared: {
    "my-lib": {
    singleton: true,
    strictVersion: true // Error instead of warning!
    }
    }
    11.0 10.1
    

    View Slide

21. @ManfredSteyer
    

    View Slide

22. @ManfredSteyer
    <br/>import { format, parseISO } from 'date-fns';<br/>const date = parseISO('2022-08-15');<br/>const weekday = format(date, 'EEE');<br/>console.log(`It's a ${weekday}.`);<br/>
    

    View Slide

23. @ManfredSteyer
    <br/>import { format, parseISO } from 'date-fns';<br/>const date = parseISO('2022-08-15');<br/>const weekday = format(date, 'EEE');<br/>console.log(`It's a ${weekday}.`);<br/>
    

    View Slide

24. @ManfredSteyer
    <br/>{<br/>"imports": {<br/>"date-fns": "./libs/date-fns.js"<br/>}<br/>}<br/>
    

    View Slide

25. @ManfredSteyer
    <br/>{<br/>"imports": {<br/>"date-fns": "./libs/date-fns.js",<br/>"is-long-weekend": "http://this-app/module.mjs",<br/>"is-bridging-day": "http://that-app/module.mjs"<br/>}<br/>}<br/>
    

    View Slide

26. @ManfredSteyer
    <br/>{<br/>"imports": { […] },<br/>"scopes": {<br/>"http://this-app/module.mjs": {<br/>"date-fns": "./libs/this-date-fns.js"<br/>},<br/>"http://that-app/module.mjs": {<br/>"date-fns": "./libs/that-date-fns.js"<br/>}<br/>}<br/>}<br/>
    

    View Slide

27. @ManfredSteyer
    const im = document.createElement('script');
    im.type = 'importmap';
    im.textContent = JSON.stringify(importMap);
    document.currentScript.after(im);
    

    View Slide

28. @ManfredSteyer
    [https://caniuse.com/import-maps]
    

    View Slide

29. @ManfredSteyer
    

    View Slide

30. @ManfredSteyer
    

    View Slide

31. @ManfredSteyer
    

    View Slide

32. @ManfredSteyer
    Meta Data
    • Providing at
    compile time
    • Loading at
    runtime
    Bundling
    • Remotes
    • Shared
    packages
    • Angular
    compiler
    Import Map
    • Generate using
    meta data
    • Scopes for
    version
    mismatches
    

    View Slide

33. @ManfredSteyer
    

    View Slide

34. @ManfredSteyer
    @gioboa/vite-module-federation
    @softarc/native-federation
    @angular-architects/native-federation yours
    Example: VanillaJS and React with esbuild
    Example: Vite with Svelte and Angular (AnalogJS)
    

    View Slide

35. @ManfredSteyer
    

    View Slide

36. @ManfredSteyer
    

    View Slide

37. @ManfredSteyer
    

    View Slide

38. @ManfredSteyer
    

    View Slide

39. @ManfredSteyer
    

    View Slide

40. @ManfredSteyer
    Once, Angular CLI supports esbuild:
    Move to Native Federation
    

    View Slide

41. @ManfredSteyer
    If you already use esbuild or vite:
    Native Federation
    

    View Slide

42. @ManfredSteyer
    In general: Native Federation is your insurance for
    the mid- and long-term
    

    View Slide

43. @ManfredSteyer
    Free eBook (5th Edition)
    ANGULARarchitects.io/book
    Module Federation & Nx
    

    View Slide

44. @ManfredSteyer
    Module
    Federation: Mental
    Model rocks!
    Import Maps:
    Provide low level
    building blocks
    Native
    Federation:
    Insurance
    Works with
    esbuild, vite,
    etc.
    

    View Slide

45. @ManfredSteyer
    

    View Slide

46. @ManfredSteyer
    d
    Slides & Examples Remote Company Workshops
    and Consulting
    http://angulararchitects.io
    

    View Slide