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

Native Federation: The Future of Micro Frontend...

Manfred Steyer
PRO
April 25, 2024
Programming
0
550

Native Federation: The Future of Micro Frontends in Angular

Manfred Steyer
PRO

April 25, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
640
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
370
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
21
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
390
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
260
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
320
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
170
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
170
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
170

Other Decks in Programming

See All in Programming
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
290
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.2k
functionalなアプローチで動的要素を排除する
ryopeko
1
1.2k
SpringBoot3.4の構造化ログ #kanjava
irof
2
880
Alba: Why, How and What's So Interesting
okuramasafumi
0
240
Writing documentation can be fun with plugin system
okuramasafumi
0
110
ファインディの テックブログ爆誕までの軌跡
starfish719
2
980
Spring gRPC について / About Spring gRPC
mackey0225
0
200
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Amazon Bedrock Multi Agentsを試してきた
tm2
1
270
Azure AI Foundryのご紹介
qt_luigi
1
270

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
9
1.3k
A better future with KSS
kneath
238
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
Scaling GitHub
holman
459
140k
The Cult of Friendly URLs
andyhume
78
6.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
390
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Adopting Sorbet at Scale
ufuk
74
9.2k
Six Lessons from altMBA
skipperchong
27
3.6k
Typedesign – Prime Four
hannesfritz
40
2.5k

Transcript

  1. @ManfredSteyer ManfredSteyer Native Federation: The Future of Micro Frontends in

    Angular

  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