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

Micro Frontends with Modern Angular

Micro Frontends with Modern Angular

Manfred Steyer

October 25, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer
    Micro Frontends with Modern Angular
    ManfredSteyer

    View full-size slide

  2. @ManfredSteyer
    Angular is changing …

    View full-size slide

  3. @ManfredSteyer

    View full-size slide

  4. @ManfredSteyer

    View full-size slide

  5. @ManfredSteyer
    Federation &
    Standalone &
    esbuild
    Frankenstein
    w/ Angular
    Elements
    Deferred
    Loading
    SSR &
    Hydration w/
    @angular/ssr

    View full-size slide

  6. @ManfredSteyer
    Manfred Steyer

    View full-size slide

  7. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  9. @ManfredSteyer

    View full-size slide

  10. @ManfredSteyer

    View full-size slide

  11. @ManfredSteyer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. @ManfredSteyer

    View full-size slide

  15. @ManfredSteyer

    View full-size slide

  16. @ManfredSteyer

    View full-size slide

  17. @ManfredSteyer
    Mindset:
    Module
    Federation
    EcmaScript
    Modules
    Import Maps
    Simple config, sharing libs

    View full-size slide

  18. @ManfredSteyer
    1. ng add @angular-architects/native-federation […]
    2. Adjust generated config
    3. Start Shell and Micro Frontends

    View full-size slide

  19. @ManfredSteyer

    View full-size slide

  20. @ManfredSteyer

    View full-size slide

  21. @ManfredSteyer
    Wrap them into Web Components
    Angular App
    (MFE)
    React App
    (MFE)

    View full-size slide

  22. @ManfredSteyer

    npm install @angular/elements

    View full-size slide

  23. @ManfredSteyer

    // bootstrap.ts
    const app = await createApplication({
    providers: [],
    });

    View full-size slide

  24. @ManfredSteyer

    // bootstrap.ts
    const app = await createApplication({
    providers: [],
    });
    const webCmp = createCustomElement(AppComponent, {
    injector: app.injector,
    });

    View full-size slide

  25. @ManfredSteyer

    // bootstrap.ts
    const app = await createApplication({
    providers: [],
    });
    const webCmp = createCustomElement(AppComponent, {
    injector: app.injector,
    });
    customElements.define('mfe2-root', webCmp);

    View full-size slide

  26. @ManfredSteyer

    // bootstrap.ts
    const app = await createApplication({
    providers: [],
    });
    const webCmp = createCustomElement(AppComponent, {
    injector: app.injector,
    });
    customElements.define('mfe2-root', webCmp);
    // Usage:

    View full-size slide

  27. @ManfredSteyer
    // federation.config.js
    module.exports = withNativeFederation({
    […]
    exposes: {
    './web-comp': './projects/mfe2/src/bootstrap.ts',
    },
    […]
    });

    View full-size slide

  28. @ManfredSteyer

    View full-size slide

  29. @ManfredSteyer
    await loadRemoteModule('other-app', './web-cmp');

    View full-size slide

  30. @ManfredSteyer
    await loadRemoteModule('other-app', './web-cmp');
    const rootElm = document.createElement('mfe2-root');
    document.body.appendChild(rootElm);

    View full-size slide

  31. @ManfredSteyer
    await loadRemoteModule('other-app', './web-cmp');
    const rootElm = document.createElement('web-cmp')
    document.body.appendChild(rootElm);
    WrapperComponent

    View full-size slide

  32. @ManfredSteyer

    View full-size slide

  33. @ManfredSteyer

    View full-size slide

  34. @ManfredSteyer

    View full-size slide

  35. @ManfredSteyer
    Title
    Content
    Call to Action
    Info
    More Info

    View full-size slide

  36. @ManfredSteyer
    @defer on viewport {
    @main {

    }
    @placeholder {

    }
    […]
    }

    View full-size slide

  37. @ManfredSteyer

    View full-size slide

  38. @ManfredSteyer

    View full-size slide

  39. @ManfredSteyer

    View full-size slide

  40. @ManfredSteyer
    1. Server: Render index.html → FMP, SEO
    2. Client: Make app interactive (Hydration)

    View full-size slide

  41. @ManfredSteyer
    ng add @angular/ssr
    - or -
    ng new --ssr

    View full-size slide

  42. @ManfredSteyer

    View full-size slide

  43. @ManfredSteyer

    View full-size slide

  44. @ManfredSteyer
    Host
    Remote
    Remote
    HTML
    HTML

    View full-size slide

  45. @ManfredSteyer
    1. Server: Load HTML Fragments from MF
    2. Client: Load MF via Federation (Hydration)

    View full-size slide

  46. @ManfredSteyer
    Easy
    No Version
    Conflicts
    Lot of
    Experience

    View full-size slide

  47. @ManfredSteyer

    View full-size slide

  48. @ManfredSteyer
    ng add @angular/ssr
    ng add @angular-architects/native-federation …

    View full-size slide

  49. @ManfredSteyer
    ng g @angular-architects/native-federation:remove …
    ng add @angular/ssr
    ng add @angular-architects/native-federation …

    View full-size slide

  50. @ManfredSteyer

    View full-size slide

  51. @ManfredSteyer
    SPA + SSR
    Classic SPA
    Complexity
    Complexity
    Monolith MF Frankenstein
    Biz Apps
    B2C
    Team Autonomy →

    View full-size slide

  52. @ManfredSteyer

    View full-size slide

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

    View full-size slide

  54. @ManfredSteyer
    Module
    Federation:
    Mental Model
    rocks!
    Native
    Federation
    Deferred
    Loading
    SSR with
    HTML
    Fragments

    View full-size slide

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

    View full-size slide