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 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 Web Components with Angular npm install @angular/elements
15. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 15 Web Components with Angular // bootstrap.ts const app = await createApplication({ providers: [], });
16. • 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, });
17. • 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);
18. • 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>
19. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 19 Exposing Web Components // federation.config.js module.exports = withNativeFederation({ […] exposes: { './web-comp': './projects/mfe2/src/bootstrap.ts', }, […] });
20. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 20 Loading Web Components via Federation
21. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 Federation await import('other-app/web-cmp');
22. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 22 Federation await import('other-app/web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm);
23. • 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
24. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 24 Result: Best of Both Worlds
25. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 25 DEMO
26. • 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
27. • 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
28. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Alternatives
29. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 29 Alternatives Modular Monolith Monorepo + Micro Frontends Governance: Single Version Hyperlinks iframes Only Web Components
30. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten Costs of Micro Frontends
31. • 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
32. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 32 Free eBook (6th Edition) ANGULARarchitects.io/book Module Federation & Nx
33. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 33 Conclusion Abstraction: Web Components Loading/ Sharing: Native Federation Small Workarounds & Meta Routing
34. • 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