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

Advanced Micro Frontends: Multi Version/ Framew...

Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin

Avatar for Manfred Steyer

Manfred Steyer

July 08, 2025
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Advanced 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 Creating

    a Web Component Wrapper class MyWebComponent extends HTMLElement { connectedCallback() { // Bootstrap your SPA here } […] } customElements.define('my-webcmp', MyWebComponent); Or: Tools such as @angular/elements
  11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 Exposing

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

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

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

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

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

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

    Abstraction: Web Components Loading/ Sharing: Native Federation Platform Team: Workarounds, Guidelines
  18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 38 [Social

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