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

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 6 Booking App Check-in App Boarding App Luggage App 19 18
7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 Booking App Check-in App Boarding App Luggage App 19.0 19.1
8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19.0 19.1 { f(); } Your Code Angular Compiler Compiled Code Private API
9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten How to Implement Multi-Version/ - Framework Solutions?
10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 10 • Hiding Frameworks and Versions • Web Components and Federation • Alternatives • Costs Contents
11. • 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
12. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Hiding Frameworks and Versions
13. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Wrap them into Web Components Abstract Differences Angular App (MFE) React App (MFE) Coarse-grained Web Component
14. • 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
15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 Exposing Web Components // federation.config.js module.exports = withNativeFederation({ […] exposes: { './web-comp': './projects/mfe2/src/bootstrap.ts', }, […] });
16. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 Loading Web Components via Federation
17. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 Federation await import('other-app/web-cmp');
18. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 Federation await import('other-app/web-cmp'); const rootElm = document.createElement('my-webcmp') document.body.appendChild(rootElm);
19. • 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
20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Result: Best of Both Worlds
21. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 DEMO https://red-ocean-0fe4c4610.azurestaticapps.net
22. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 More Details Workarounds for Zone.js and the Router Link
23. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Alternatives
24. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 Alternatives Modular Monolith Monorepo + Micro Frontends Governance: Single Version Hyperlinks iframes Only Web Components
25. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 Linting for Moduliths
26. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten http://nx.dev http://sheriff.softarc.io 33 Tools for Moduliths Smart Repos - Fast Builds
27. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Costs of Micro Frontends
28. • 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
29. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 36 Free eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx
30. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37 Conclusion Abstraction: Web Components Loading/ Sharing: Native Federation Platform Team: Workarounds, Guidelines
31. • 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