$30 off During Our Annual Pro Sale. View Details »

Micro Frontends: Yesterday, Today, Tomorrow

Micro Frontends: Yesterday, Today, Tomorrow

Manfred Steyer
PRO

September 29, 2022
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

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