Micro Frontends with Module Federation: Beyond the Basics

Transcript

1. @ManfredSteyer
   ManfredSteyer
   Make Module Federation Work
   Manfred Steyer, ANGULARarchitects.io
   

   View Slide

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

   View Slide

3. @ManfredSteyer
   

   View Slide

4. @ManfredSteyer
   

   View Slide

5. @ManfredSteyer
   

   View Slide

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

   View Slide

7. @ManfredSteyer
   #1
   Version
   Mismatches
   #2
   Mono vs.
   Multirepo
   #3
   Dynamic
   Federation
   #4
   Multiple
   Frameworks/
   Versions
   

   View Slide

8. @ManfredSteyer
   #1
   Version
   Mismatches
   #2
   Mono vs.
   Multirepo
   #3
   Dynamic
   Federation
   #4
   Multiple
   Frameworks/
   Versions
   #0
   Module
   Federation 101
   

   View Slide

9. @ManfredSteyer
   Manfred Steyer
   

   View Slide

10. @ManfredSteyer
    

    View Slide

11. @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

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

    View Slide

13. @ManfredSteyer
    1) ng add @angular-architects/module-federation
    2) Adjust generated configuration
    3) ng serve
    

    View Slide

14. @ManfredSteyer
    

    View Slide

15. @ManfredSteyer
    

    View Slide

16. @ManfredSteyer
    Selecting the highest compatible version
    10.0 10.1
    

    View Slide

17. @ManfredSteyer
    Make sure, your Angular-based code
    sees exactly the same Angular version
    at runtime it was built with!
    (Don't use ^ or ~ in your package.json)
    

    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
    shared: {
    "my-lib": {
    requiredVersion: ">=1.0.1 <11.1.1"
    }
    }
    

    View Slide

22. @ManfredSteyer
    •Several options baked-in
    •However, best option: avoid conflicts upfront
    

    View Slide

23. @ManfredSteyer
    

    View Slide

24. @ManfredSteyer
    Booking Boarding Shared
    Feature Feature Feature Feature Feature
    … … … … … … … … …
    Booking App Boarding App Publish shared libs
    seperately via npm
    Repository n
    Repository 2
    Repository 1
    Version Mismatches?
    Strict Borders
    

    View Slide

25. @ManfredSteyer
    Booking Boarding Shared
    Feature Feature Feature Feature Feature
    … … … … … … … … …
    Booking App Boarding App
    

    View Slide

26. @ManfredSteyer
    

    View Slide

27. @ManfredSteyer
    

    View Slide

28. @ManfredSteyer
    https://nrwl.io/nx
    Smart, Fast and Extensible Build System
    

    View Slide

29. @ManfredSteyer
    

    View Slide

30. @ManfredSteyer
    Dynamic Module Federation
    Shell (Host) Microfrontend (Remote)
    remotes: {
    mfe1: "http://..."
    }
    exposes: {
    Cmp: './my.cmp.ts'
    }
    import('mfe1/Cmp')
    

    View Slide

31. @ManfredSteyer
    Dynamic Module Federation
    Shell (Host) Microfrontend (Remote)
    remotes: {
    }
    exposes: {
    Cmp: './my.cmp.ts'
    }
    import('mfe1/Cmp')
    

    View Slide

32. @ManfredSteyer
    Dynamic Module Federation
    Shell (Host) Microfrontend (Remote)
    remotes: {
    }
    exposes: {
    Cmp: './my.cmp.ts'
    }
    loadRemoteModule({
    type: 'module',
    remoteEntry: 'http://…',
    exposedModule: './Cmp'
    })
    

    View Slide

33. @ManfredSteyer
    Dynamic Module Federation
    Shell (Host) Microfrontend (Remote)
    remotes: {
    }
    exposes: {
    Cmp: './my.cmp.ts'
    }
    loadRemoteModule({
    type: 'module',
    remoteEntry: 'http://…',
    exposedModule: './Cmp'
    })
    Helper Function using
    the Webpack API
    

    View Slide

34. @ManfredSteyer
    

    View Slide

35. @ManfredSteyer
    

    View Slide

36. @ManfredSteyer
    const Component = await import('other-app/cmp');
    

    View Slide

37. @ManfredSteyer
    const main = await import('other-app/main');
    main.bootstrap();
    

    View Slide

38. @ManfredSteyer
    const main = await import('other-app/main');
    main.bootstrap();
    const rootElm = document.createElement('app-root')
    document.body.appendChild(rootElm);
    

    View Slide

39. @ManfredSteyer
    await import('other-app/main'); // Self-Bootstrapping
    const rootElm = document.createElement('app-root')
    document.body.appendChild(rootElm);
    

    View Slide

40. @ManfredSteyer
    await import('other-app/main');
    const rootElm = document.createElement('app-root')
    document.body.appendChild(rootElm);
    WrapperComponent
    

    View Slide

41. @ManfredSteyer
    

    View Slide

42. @ManfredSteyer
    

    View Slide

43. @ManfredSteyer
    

    View Slide

44. @ManfredSteyer
    https://red-ocean-0fe4c4610.azurestaticapps.net
    

    View Slide

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

    View Slide

46. @ManfredSteyer
    Conclusion
    Baked-in Strategies
    for Version
    Mismatches
    Monorepo vs.
    Multirepo:
    Self-restriction vs.
    (Costly) Freedom
    Webpack Runtime
    API: Dynamic
    Federation
    Frankenstein:
    Bootstrapping
    Several SPAs
    

    View Slide

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

    View Slide