Micro Frontends: Yesterday, Today, Tomorrow

Transcript

1. @ManfredSteyer Micro Frontends: Yesterday, Today, Tomorrow
2. @ManfredSteyer
3. @ManfredSteyer
4. @ManfredSteyer
5. @ManfredSteyer Booking App Check-in App Boarding App Luggage App
6. @ManfredSteyer #1 When? #2 How? #3 Future
7. @ManfredSteyer Manfred Steyer
8. @ManfredSteyer
9. @ManfredSteyer Booking App Check-in App Boarding App Luggage App
10. @ManfredSteyer
11. @ManfredSteyer Shared Booking Boarding Strict Borders
12. @ManfredSteyer Shared Booking Boarding Strict Borders
13. @ManfredSteyer
14. @ManfredSteyer
15. @ManfredSteyer
16. @ManfredSteyer
17. @ManfredSteyer
18. @ManfredSteyer Shared Booking Boarding SPA: Download to the Client Version Mismatches?
19. @ManfredSteyer Deadalus Health Care (formerly AGFA Health Care)
20. @ManfredSteyer DATEV eG (~8000 Employees, 200 Products)
21. @ManfredSteyer Huge European Bank Domain A Domain B Domain C Domain D Domain E Domain F eBanking
22. @ManfredSteyer
23. @ManfredSteyer Server- side Client- side
24. @ManfredSteyer iframes: Legacy & Isolation Hyper Links: Easy – No Meta Framework needed Web Components: Load into SPA, Hide Frameworks
25. @ManfredSteyer Web Component-Wrapper abstracts differences away Other Wrapper are fine too, e. g. Meta Frameworks Angular App (MFE) React App (MFE)
26. @ManfredSteyer const Component = await import('other-app/xyz')
27. @ManfredSteyer Shell (Host) Microfrontend (Remote) shared: [ "@angular/core", "…" ] shared: [ "@angular/core", "…" ]
28. @ManfredSteyer Optimized Bundles Self-restriction No workarounds Max. amount of flexibility Monorepo or Governance Bigger Bundles Workarounds ahead!
29. @ManfredSteyer Module Federation iframes Hyperlinks Web Components Module Federation + Web Components
30. @ManfredSteyer https://red-ocean-0fe4c4610.azurestaticapps.net
31. @ManfredSteyer
32. @ManfredSteyer
33. @ManfredSteyer
34. @ManfredSteyer
35. @ManfredSteyer
36. @ManfredSteyer
37. @ManfredSteyer
38. @ManfredSteyer <script type="module"> import { format, parseISO } from 'date-fns'; const date = parseISO('2022-08-15'); const weekday = format(date, 'EEE'); console.log(`It's a ${weekday}.`); </script>
39. @ManfredSteyer <script type="module"> import { format, parseISO } from 'date-fns'; const date = parseISO('2022-08-15'); const weekday = format(date, 'EEE'); console.log(`It's a ${weekday}.`); </script>
40. @ManfredSteyer <script type="importmap"> { "imports": { "date-fns": "./libs/date-fns.js" } } </script>
41. @ManfredSteyer
42. @ManfredSteyer
43. @ManfredSteyer
44. @ManfredSteyer
45. @ManfredSteyer HTML JS DATA FMP
46. @ManfredSteyer HTML JS DATA TTI FMP
47. @ManfredSteyer HTML DATA FMP JS JS JS JS JS JS JS JS TTI
48. @ManfredSteyer HTML DATA FMP JS JS JS JS TTI
49. @ManfredSteyer
50. @ManfredSteyer
51. @ManfredSteyer It's about Scaling Teams! Runtime Integration is hard Module Federation is tempting New Wave: Hyperlinks Integration
52. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io