Micro Frontends with Modern Angular

Transcript

1. @ManfredSteyer Micro Frontends with Modern Angular ManfredSteyer
2. @ManfredSteyer Angular is changing …
3. @ManfredSteyer
4. @ManfredSteyer
5. @ManfredSteyer Federation & Standalone & esbuild Frankenstein w/ Angular Elements Deferred Loading SSR & Hydration w/ @angular/ssr
6. @ManfredSteyer Manfred Steyer
7. @ManfredSteyer
8. @ManfredSteyer Booking App Check-in App Boarding App Luggage App
9. @ManfredSteyer
10. @ManfredSteyer
11. @ManfredSteyer
12. @ManfredSteyer const Component = await import('other-app/xyz')
13. @ManfredSteyer const Component = await import('other-app/xyz')
14. @ManfredSteyer
15. @ManfredSteyer
16. @ManfredSteyer
17. @ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config, sharing libs
18. @ManfredSteyer
19. @ManfredSteyer 1. ng add @angular-architects/native-federation […] 2. Adjust generated config 3. Start Shell and Micro Frontends
20. @ManfredSteyer
21. @ManfredSteyer
22. @ManfredSteyer Wrap them into Web Components Angular App (MFE) React App (MFE)
23. @ManfredSteyer → npm install @angular/elements
24. @ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers: [], });
25. @ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers: [], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, });
26. @ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers: [], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, }); customElements.define('mfe2-root', webCmp);
27. @ManfredSteyer → // bootstrap.ts const app = await createApplication({ providers: [], }); const webCmp = createCustomElement(AppComponent, { injector: app.injector, }); customElements.define('mfe2-root', webCmp); // Usage: <mfe2-root></mfe2-root>
28. @ManfredSteyer // federation.config.js module.exports = withNativeFederation({ […] exposes: { './web-comp': './projects/mfe2/src/bootstrap.ts', }, […] });
29. @ManfredSteyer
30. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp');
31. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('mfe2-root'); document.body.appendChild(rootElm);
32. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent
33. @ManfredSteyer
34. @ManfredSteyer
35. @ManfredSteyer
36. @ManfredSteyer Title Content Call to Action Info More Info
37. @ManfredSteyer @defer on viewport { @main { <heavy-cmp /> } @placeholder { <img src="ph.png"> } […] }
38. @ManfredSteyer
39. @ManfredSteyer
40. @ManfredSteyer
41. @ManfredSteyer 1. Server: Render index.html 2. Client: Make app interactive (Hydration)
42. @ManfredSteyer ng add @angular/ssr - or - ng new --ssr
43. @ManfredSteyer
44. @ManfredSteyer
45. @ManfredSteyer Host Remote Remote HTML HTML
46. @ManfredSteyer 1. Server: Load HTML Fragments from MF 2. Client: Load MF via Federation (Hydration)
47. @ManfredSteyer Easy No Version Conflicts Lot of Experience
48. @ManfredSteyer
49. @ManfredSteyer ng add @angular/ssr ng add @angular-architects/native-federation …
50. @ManfredSteyer ng g @angular-architects/native-federation:remove … ng add @angular/ssr ng add @angular-architects/native-federation …
51. @ManfredSteyer
52. @ManfredSteyer SPA + SSR Classic SPA Complexity Complexity Monolith MF Frankenstein Biz Apps B2C Team Autonomy →
53. @ManfredSteyer
54. @ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
55. @ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading SSR with HTML Fragments
56. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io