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

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

Manfred Steyer
PRO
April 10, 2024
Programming
0
87

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
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
62
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
37
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
83
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
420
Micro Frontends with Web Standards
manfredsteyer
PRO
1
300
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
220
Leveraging the new NGRX Signal Store
manfredsteyer
PRO
0
170
Modern State Management in Angular: The 3+n Flavors of the NGRX Signal Store
manfredsteyer
PRO
0
110

Other Decks in Programming

See All in Programming
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
370
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
1.1k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
Ruby GitHub Packages
bkuhlmann
0
630
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
290
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
460
敵対的ポイフル
futabato
0
100
CDKコントリビュートの最初の壁を越えよう！ -簡単issueの見つけ方-
badmintoncryer
2
140
禅の心を手に入れよ
eltociear
1
220
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.1k
Ruby Pattern Matching
bkuhlmann
0
930

Featured

See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
How to train your dragon (web standard)
notwaldorf
74
5.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
10
1.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
GraphQLの誤解/rethinking-graphql
sonatard
54
9.3k
KATA
mclloyd
16
12k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
The Invisible Customer
myddelton
114
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Making Projects Easy
brettharned
109
5.5k
In The Pink: A Labor of Love
frogandcode
138
21k

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