Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Native Federation: The Future of Micro Frontend...

Manfred Steyer
PRO
July 18, 2024
Programming
0
380

Native Federation: The Future of Micro Frontends in Angular

Manfred Steyer
PRO

July 18, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
33
Your Architecture as a Crime Scene: Improvements with Forensic Analysis
manfredsteyer
PRO
0
12
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
220
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
170
Your Architecture as a Crime Scene: Improvements with Forensic Analysis @ijs Munich 2024
manfredsteyer
PRO
0
120
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
Micro Frontends Unmasked: Opportunities, Challenges, Alternatives @w-jax 2024 München
manfredsteyer
PRO
0
110
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
130
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
72

Other Decks in Programming

See All in Programming
ソフトウェアの振る舞いに着目し 複雑な要件の開発に立ち向かう
rickyban
0
670
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
110
React への依存を最小にするフロントエンド設計
takonda
21
8.7k
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
3
490
Leveling Up Developer Tooling for the Modern Rails & Hotwire Era @ Ruby Türkiye, November 2024
marcoroth
0
160
新規学習のハードルを下げる方法とは？/ How to Make Learning Something New Easier?
nobuoooo
1
130
DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024
kokiyoshida
0
430
TypeScript でバックもやるって実際どう？ 実運用で困ったこと3選
yuichiro_serita
17
7.5k
Java 23の概要とJava Web Frameworkの現状 / Java 23 and Java web framework
kishida
2
380
[FlutterKaigi2024] Effective Form 〜Flutterによる複雑なフォーム開発の実践〜
chocoyama
1
3.9k
layerx_20241129.pdf
kyoheig3
2
250
Serverless苦闘史
mosh_inc
0
140

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Building an army of robots
kneath
302
43k
The Cost Of JavaScript in 2023
addyosmani
45
6.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
480
Raft: Consensus for Rubyists
vanstee
136
6.7k
Building Adaptive Systems
keathley
38
2.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Embracing the Ebb and Flow
colly
84
4.5k
Designing for Performance
lara
604
68k

Transcript

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

    Angular WeAreDevelopers World Congress

  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

  25. @ManfredSteyer

  26. @ManfredSteyer Title Content Call to Action Info More Info

  27. @ManfredSteyer

  28. @ManfredSteyer

  29. @ManfredSteyer SPA + SSR Classic SPA Complexity Complexity Monolith MF

    Frankenstein Biz Apps B2C Team Autonomy →

  30. @ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters

  31. @ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading

    SSR with HTML Fragments

  32. @ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting

    http://angulararchitects.io