Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic

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 Runtime Integration
4. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 4 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' }
5. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 Module und Native Federation TURBOPACK Native Federation Module Federation Module Federation
6. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 Sharing Libs Shell (Host) Micro Frontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
7. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 7 Booking App Check-in App Boarding App Luggage App 19 18
8. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Booking App Check-in App Boarding App Luggage App 19.0 19.1
9. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19.0 19.1 { f(); } Your Code Angular Compiler Compiled Code Private API
10. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten How to Implement Multi-Version/ - Framework Solutions?
11. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 11 • Hiding Frameworks and Versions • Web Components and Federation • Alternatives • Costs Contents
12. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 About me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
13. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Hiding Frameworks and Versions
14. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 Wrap them into Web Components Abstract Differences Angular App (MFE) React App (MFE) Coarse-grained Web Component
15. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Micro Frontend as Web Component class MyCustomElement extends HTMLElement { connectedCallback() { // Bootstrap your SPA here ... } }
16. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 16 Micro Frontend as Web Component class MyCustomElement extends HTMLElement { connectedCallback() { // Bootstrap your SPA here ... } } customElements.define("web-cmp", MyCustomElement);
17. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 Micro Frontend as Web Component class MyCustomElement extends HTMLElement { connectedCallback() { // Bootstrap your SPA here ... } } customElements.define("web-cmp", MyCustomElement); // <web-cmp></web-cmp>
18. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 18 Web Components with Angular npm install @angular/elements
19. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Loading Web Components via Federation
20. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 Federation await import('other-app/web-cmp');
21. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 26 Federation await import('other-app/web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm);
22. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 27 Federation await import('other-app/web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent
23. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 28 Result: Best of Both Worlds
24. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 DEMO
25. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Alternatives
26. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 Alternatives Modular Monolith Monorepo + Micro Frontends Governance: Single Version SCS, Hyperlinks iframes Only Web Components
27. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34 Modular Monolith + Module Boundaries
28. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten @softarc/eslint-plugin-sheriff Works with the Angular CLI and with Nx 35 Modularization Boundaries on a folder basis
29. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Costs of Micro Frontends
30. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 37 Micro Frontend Platform Team Stream-aligned team 1 Stream-aligned team 2 Stream-aligned team … XaaS Flow of change
31. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 38 eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx 20 Chapters
32. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 39 Conclusion Abstraction: Web Components Loading/ Sharing: Native Federation Know Alternatives and Trade-Offs
33. •Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 40 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples