Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Micro Frontends with Modern Angular and Island ...

Manfred Steyer
PRO
April 10, 2024
Programming
0
260

Micro Frontends with Modern Angular and Island Architectures @ijs London 2024

Manfred Steyer
PRO

April 10, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
The Price of Micro Frontends … and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
62
Your Architecture as a Crime Scene: Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
100
Modern Angular with Signals and Signal Store New Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
88
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
840
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
480
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
26
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
450
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
280
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
390

Other Decks in Programming

See All in Programming
技術を改善し続ける
gumioji
0
180
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
SwiftUI Viewの責務分離
elmetal
PRO
2
280
PRレビューのお供にDanger
stoticdev
1
240
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
130
GoとPHPのインターフェイスの違い
shimabox
2
220
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.8k
AWS Step Functions は CDK で書こう！
konokenj
5
890
Duke on CRaC with Jakarta EE
ivargrimstad
0
160
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.9k
1年目の私に伝えたい！テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
650
はじめての Go * WASM * OCR
sgash708
1
120

Featured

See All Featured
Speed Design
sergeychernyshev
28
820
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Unsuck your backbone
ammeep
669
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
For a Future-Friendly Web
brad_frost
176
9.6k
Documentation Writing (for coders)
carmenintech
68
4.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k

Transcript

  1. @ManfredSteyer ManfredSteyer Micro Frontends with Modern Angular and Island Architectures

  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