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

Premier Disciplin for Micro Frontends Multi Ver...

Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios

Avatar for Manfred Steyer

Manfred Steyer

May 07, 2025
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Premier Disciplin

    for Micro Frontends Multi Version/ Framework Scenarios ANGULARarchitects.io
  2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 2 Micro

    Frontends Booking App Check-in App Boarding App Luggage App
  3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 3 Module

    Federation Shell (Host) Micro Frontend (Remote) // Maps Urls in // webpack config remotes: { mfe1: "http://..." } import('mfe1/Cmp') // Expose files in // webpack config exposes: { './Cmp': './my.cmp.ts' }
  4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 Module

    und Native Federation TURBOPACK Native Federation Module Federation Module Federation
  5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Sharing

    Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
  6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19.0 19.1

    { f(); } Your Code Angular Compiler Compiled Code Private API
  7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 •

    Hiding Frameworks and Versions • Web Components and Federation • Alternatives • Costs Contents
  8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 About

    me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
  9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Wrap

    them into Web Components Abstract Differences Angular App (MFE) React App (MFE) Coarse-grained Web Component
  10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Web

    Components with Angular npm install @angular/elements
  11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Web

    Components with Angular // bootstrap.ts const app = await createApplication({ providers: [], });
  12. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Web

    Components with Angular // bootstrap.ts const app = await createApplication({ providers: [], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, });
  13. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 Web

    Components with Angular // bootstrap.ts const app = await createApplication({ providers: [], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, }); customElements.define('mfe2-root', webCmp);
  14. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 Web

    Components with Angular // bootstrap.ts const app = await createApplication({ providers: [], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, }); customElements.define('mfe2-root', webCmp); // Usage: <mfe2-root></mfe2-root>
  15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 Exposing

    Web Components // federation.config.js module.exports = withNativeFederation({ […] exposes: { './web-comp': './projects/mfe2/src/bootstrap.ts', }, […] });
  16. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 Federation

    await import('other-app/web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm);
  17. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Federation

    await import('other-app/web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent
  18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 •

    Zone.js & Fine-grained Integration Share instance via global namespace • Before Standalone Reuse Platform instance (global namespace) • Meta Routing Advanced Routing Configuration, Custom Events Challanges
  19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 •

    Zone.js & Fine-grained Integration Share instance via global namespace • Before Standalone Reuse Platform instance (global namespace) • Meta Routing Advanced Routing Configuration, Custom Events Challanges
  20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 Alternatives

    Modular Monolith Monorepo + Micro Frontends Governance: Single Version Hyperlinks iframes Only Web Components
  21. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 Micro

    Frontend Platform Team Stream-aligned team 1 Stream-aligned team 2 Stream-aligned team … XaaS Flow of change
  22. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 Free

    eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx
  23. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 Conclusion

    Abstraction: Web Components Loading/ Sharing: Native Federation Small Workarounds & Meta Routing
  24. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34 [Social

    Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io