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

Native Federation: The Future of Micro Frontend...

Avatar for Manfred Steyer Manfred Steyer PRO
July 18, 2024
Programming
520
0

Native Federation: The Future of Micro Frontends in Angular

Avatar for Manfred Steyer

Manfred Steyer PRO

July 18, 2024

More Decks by Manfred Steyer

See All by Manfred Steyer
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
1
180
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Nostalgia Meets Technology: Super Mario with TypeScript
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
Avatar for Manfred Steyer manfredsteyer
PRO
0
230
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
Agentic UI
Avatar for Manfred Steyer manfredsteyer
PRO
0
230
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
Avatar for Manfred Steyer manfredsteyer
PRO
0
290
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
240
Agentic AI in the Frontend: Architectures with Open Standards @iJS London 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
170

Other Decks in Programming

See All in Programming
1年で人数1.5倍、PR数5.5倍増。 品質とアウトカムはどうなったか、 何が効いたか
Avatar for ike ike002jp
0
140
そのテスト、説明できますか？~LWテスト戦略FW~のご紹介
Avatar for Kei Nakahara nakahara
0
210
AI時代の仕事技芸論〜ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ（スクフェス仙台 2026バージョン）
Avatar for Yoshihito Kuranuki / 倉貫義人 kuranuki
0
640
鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力
Avatar for tonkotsuboy_com tonkotsuboy_com
4
1.1k
共通化で考えるべきは、実装より公開する型だった
Avatar for code-egg codeegg
0
240
Honoでのサプライチェーン侵害対策 〜 3つのライブラリに学ぶ
Avatar for Yusuke Wada yusukebe
7
1.9k
OSINT for SRE: 
学術論文とポストモーテムから探る
システム障害の共通パターン / SRE NEXT 2026
Avatar for Tomoyuki KOYAMA tomoyk
1
3.8k
分散システム、なんですぐ死んでしまうん？耐障害性を高めたいあなたのためのレジリエンスパターン入門
Avatar for Mitsuhiro Shibuya mshibuya
7
6.2k
AIエージェントで 変わるAndroid開発環境
Avatar for takahirom takahirom
2
660
トークンをケチるな、設計しろ：GitHub Copilotを賢く使うコンテキスト戦略
Avatar for Ochtum ochtum
0
320
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
1.2k
Apache Hive: そしてCloud Native Lakehouseへ
Avatar for okumin okumin
1
130

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.4k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
280
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.4k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.2k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
9.7k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.7k

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