Native Federation: The Future of Micro Frontends in Angular

Transcript

1. @ManfredSteyer ManfredSteyer Native Federation: The Future of Micro Frontends in Angular
2. @ManfredSteyer Booking App Check-in App Boarding App Luggage App
3. @ManfredSteyer
4. @ManfredSteyer
5. @ManfredSteyer
6. @ManfredSteyer const Component = await import('other-app/xyz')
7. @ManfredSteyer const Component = await import('other-app/xyz')
8. @ManfredSteyer
9. @ManfredSteyer
10. @ManfredSteyer Federation & esbuild Frankenstein w/ Web Components Island Architectures
11. @ManfredSteyer Manfred Steyer
12. @ManfredSteyer
13. @ManfredSteyer
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
24. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp');
25. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('mfe2-root'); document.body.appendChild(rootElm);
26. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent
27. @ManfredSteyer
28. @ManfredSteyer
29. @ManfredSteyer
30. @ManfredSteyer Title Content Call to Action Info More Info
31. @ManfredSteyer
32. @ManfredSteyer
33. @ManfredSteyer
34. @ManfredSteyer Host Remote Remote HTML HTML
35. @ManfredSteyer 1. Server: Load HTML Fragments from MF 2. Client: Load MF via Federation (Hydration)
36. @ManfredSteyer Easy No Version Conflicts Lot of Experience
37. @ManfredSteyer
38. @ManfredSteyer
39. @ManfredSteyer SPA + SSR Classic SPA Complexity Complexity Monolith MF Frankenstein Biz Apps B2C Team Autonomy →
40. @ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters
41. @ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading SSR with HTML Fragments
42. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io