$30 off During Our Annual Pro Sale. View Details »

Micro Frontends with Modern Angular

Micro Frontends with Modern Angular

Manfred Steyer
PRO

November 09, 2023
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. @ManfredSteyer
    Micro Frontends with Modern Angular
    ManfredSteyer

    View Slide

  2. @ManfredSteyer
    Angular is changing …

    View Slide

  3. @ManfredSteyer

    View Slide

  4. @ManfredSteyer

    View Slide

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

    View Slide

  6. @ManfredSteyer
    Manfred Steyer

    View Slide

  7. @ManfredSteyer

    View Slide

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

    View Slide

  9. @ManfredSteyer

    View Slide

  10. @ManfredSteyer

    View Slide

  11. @ManfredSteyer

    View Slide

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

    View Slide

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

    View Slide

  14. @ManfredSteyer

    View Slide

  15. @ManfredSteyer

    View Slide

  16. @ManfredSteyer

    View Slide

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

    View Slide

  18. @ManfredSteyer

    View Slide

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

    View Slide

  20. @ManfredSteyer

    View Slide

  21. @ManfredSteyer

    View Slide

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

    View Slide

  23. @ManfredSteyer

    npm install @angular/elements

    View Slide

  24. @ManfredSteyer

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

    View Slide

  25. @ManfredSteyer

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

    View Slide

  26. @ManfredSteyer

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

    View Slide

  27. @ManfredSteyer

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

    View Slide

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

    View Slide

  29. @ManfredSteyer

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. @ManfredSteyer

    View Slide

  34. @ManfredSteyer

    View Slide

  35. @ManfredSteyer

    View Slide

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

    View Slide

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

    }
    @placeholder {

    }
    […]
    }

    View Slide

  38. @ManfredSteyer

    View Slide

  39. @ManfredSteyer

    View Slide

  40. @ManfredSteyer

    View Slide

  41. @ManfredSteyer
    1. Server: Render index.html
    2. Client: Make app interactive (Hydration)

    View Slide

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

    View Slide

  43. @ManfredSteyer

    View Slide

  44. @ManfredSteyer

    View Slide

  45. @ManfredSteyer
    Host
    Remote
    Remote
    HTML
    HTML

    View Slide

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

    View Slide

  47. @ManfredSteyer
    Easy
    No Version
    Conflicts
    Lot of
    Experience

    View Slide

  48. @ManfredSteyer

    View Slide

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

    View Slide

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

    View Slide

  51. @ManfredSteyer

    View Slide

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

    View Slide

  53. @ManfredSteyer

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide