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
560

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
The Price of Micro Frontends … and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
42
Your Architecture as a Crime Scene: Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
86
Modern Angular with Signals and Signal Store New Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
5
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
840
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
470
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
24
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
440
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
380

Other Decks in Programming

See All in Programming
sappoRo.R #12 初心者セッション
kosugitti
0
280
Domain-Driven Design (Tutorial)
hschwentner
13
22k
.NET Frameworkでも汎用ホストが使いたい！
tomokusaba
0
200
Lambdaの監視、できてますか？Datadogを用いてLambdaを見守ろう
nealle
0
360
はじめての Go * WASM *OCR
sgash708
1
110
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
120
良いコードレビューとは
danimal141
7
2.9k
楽しく向き合う例外対応
okutsu
0
710
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
もう僕は OpenAPI を書きたくない
sgash708
6
1.9k
お前もAI鬼にならないか？👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー！👺
taishiyade
7
4.2k

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Facilitating Awesome Meetings
lara
53
6.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Agile that works and the tools we love
rasmusluckow
328
21k
Building Your Own Lightsaber
phodgson
104
6.2k
Documentation Writing (for coders)
carmenintech
68
4.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k

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