Micro Frontends with Web Standards

Transcript

1. @ManfredSteyer ManfredSteyer Micro Frontends with Web Standards
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 & Standalone & esbuild Frankenstein w/ Web Components Deferred Loading
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 1. ng add @angular-architects/native-federation […] 2. Adjust generated config 3. Start Shell and Micro Frontends
19. @ManfredSteyer
20. @ManfredSteyer
21. @ManfredSteyer Wrap them into Web Components Angular App (MFE) React App (MFE)
22. @ManfredSteyer
23. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp');
24. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('mfe2-root'); document.body.appendChild(rootElm);
25. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent
26. @ManfredSteyer
27. @ManfredSteyer
28. @ManfredSteyer
29. @ManfredSteyer Title Content Call to Action Info More Info
30. @ManfredSteyer @defer on viewport { @main { <heavy-cmp /> } @placeholder { <img src="ph.png"> } […] }
31. @ManfredSteyer
32. @ManfredSteyer
33. @ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters 4 new Signal Store Chapters
34. @ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading SSR with HTML Fragments
35. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io