Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios

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 30 • 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 with Angular
26. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 31 • 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 with Angular
27. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Alternatives
28. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 Alternatives Modular Monolith Monorepo + Micro Frontends Governance: Single Version Hyperlinks iframes Only Web Components
29. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 34 Modular Monolith + Module Boundaries
30. • 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
31. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Costs of Micro Frontends
32. • 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
33. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 38 Free eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx
34. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 39 Conclusion Abstraction: Web Components Loading/ Sharing: Native Federation Small Workarounds & Meta Routing
35. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 40 [Social Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io