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
540

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
340
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
230
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
17
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
320
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
210
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
220
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
140
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
140
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
150

Other Decks in Programming

See All in Programming
Monixと常駐プログラムの勘どころ / Scalaわいわい勉強会 #4
stoneream
0
320
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう？知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
100
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
200
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
330
LLM Supervised Fine-tuningの理論と実践
datanalyticslabo
8
1.8k
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
260
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
180
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
130
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
5.8k
バグを見つけた？それAppleに直してもらおう！
uetyo
0
210
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
220

Featured

See All Featured
Become a Pro
speakerdeck
PRO
26
5.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
2
160
A designer walks into a library…
pauljervisheath
205
24k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Thoughts on Productivity
jonyablonski
68
4.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Designing for humans not robots
tammielis
250
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
340
Mobile First: as difficult as doing things right
swwweet
222
9k
Bash Introduction
62gerente
609
210k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k

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