Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Camel and Eye of a Needle: Integration of SPA-based Micro Frontends

Camel and Eye of a Needle: Integration of SPA-based Micro Frontends

Manfred Steyer

November 28, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer
    ManfredSteyer
    Camel and Eye of a Needle
    Manfred Steyer, ANGULARarchitects.io
    Integration of SPA-based Micro Frontends

    View full-size slide

  2. @ManfredSteyer
    Which one is the best?

    View full-size slide

  3. @ManfredSteyer
    It’s all about
    consequences in
    your very situation!

    View full-size slide

  4. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  6. @ManfredSteyer
    Shared
    Booking Boarding
    Repository n
    Repository 2
    Repository 1
    Strict Borders

    View full-size slide

  7. @ManfredSteyer
    Shared
    Booking Boarding
    Repository n
    Repository 2
    Repository 1
    Strict Borders

    View full-size slide

  8. @ManfredSteyer
    Shared
    Booking Boarding

    View full-size slide

  9. @ManfredSteyer
    Shared
    Booking Boarding
    Not officially tested
    Version Mismatches vs. Bundle Sizes

    View full-size slide

  10. @ManfredSteyer
    #1
    Approaches:
    Traditional SPAs
    #2
    Approaches:
    "New Wave"

    View full-size slide

  11. @ManfredSteyer
    Manfred Steyer

    View full-size slide

  12. @ManfredSteyer

    View full-size slide

  13. @ManfredSteyer
    µFrontend
    SPA
    µFrontend
    SPA
    µFrontend
    SPA

    View full-size slide

  14. @ManfredSteyer

    View full-size slide

  15. @ManfredSteyer

    View full-size slide

  16. @ManfredSteyer
    µService µFrontend
    µFrontend
    µFrontend
    Shell

    View full-size slide

  17. @ManfredSteyer
    iframe
    Bootstrapping
    several SPAs
    Module
    Federation
    + meta frameworks using these approaches
    e. g. SAP
    Luigi Framework

    View full-size slide

  18. @ManfredSteyer


    View full-size slide

  19. @ManfredSteyer
    const script = document.createElement('script');
    script.src = 'other-spa/bundle.js';
    document.body.appendChild(script);
    const myElement = document.createElement('other-spa');
    myElement['visible'] = true;
    document.body.appendChild(myElement);

    View full-size slide

  20. @ManfredSteyer
    Option: Wrap them into Web Components
    Angular App
    (MFE)
    React App
    (MFE)

    View full-size slide

  21. @ManfredSteyer
    const Component = import('http://other-app/xyz')

    View full-size slide

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

    View full-size slide

  23. @ManfredSteyer
    Single
    Framework/
    Version
    Multiple
    Frameworks/
    Versions
    Like Lazy Loading Like bootstrapping several SPAs
    + Sharing where same version
    No workarounds Some workarounds

    View full-size slide

  24. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  26. @ManfredSteyer

    View full-size slide

  27. @ManfredSteyer

    View full-size slide

  28. @ManfredSteyer

    View full-size slide

  29. @ManfredSteyer
    HTML JS DATA
    FMP

    View full-size slide

  30. @ManfredSteyer
    HTML JS
    DATA
    TTI
    FMP

    View full-size slide

  31. @ManfredSteyer
    HTML JS
    DATA
    TTI
    "Uncanny Vally"
    FMP

    View full-size slide

  32. @ManfredSteyer

    View full-size slide

  33. @ManfredSteyer
    HTML DATA
    FMP
    JS JS JS JS JS JS JS JS
    TTI

    View full-size slide

  34. @ManfredSteyer
    HTML DATA
    FMP
    JS JS JS JS
    TTI

    View full-size slide

  35. @ManfredSteyer

    View full-size slide

  36. @ManfredSteyer
    SPAs + MF:
    Trade-offs
    Business Apps:
    Traditional
    approaches ok
    Conversions:
    New wave very
    tempting!
    Evalulate
    options against
    requirements!

    View full-size slide

  37. @ManfredSteyer

    View full-size slide

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

    View full-size slide