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

Native Federation: The Future of Micro Frontend...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Manfred Steyer Manfred Steyer PRO
July 18, 2024
Programming
490
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
Agentic UI with Angular @ngAir April 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
21
Migration to Signals, Signal Forms, Resource API, and NgRx Signal Store @Angular Days 03/2026 Munich
Avatar for Manfred Steyer manfredsteyer
PRO
0
250
AI Assistants for Your Angular Solutions @Angular Graz, March 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
AI Assistants for Your Angular Solutions @ngVienna March 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
86
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
Nostalgia Meets Technology: Super Mario with TypeScript
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
Full Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
99
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios @OOP 2026, Munic
Avatar for Manfred Steyer manfredsteyer
PRO
0
260
Beyond the Basics: Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
170

Other Decks in Programming

See All in Programming
存在論的プログラミング： 時間と存在を記述する
Avatar for Akihito Koriyama koriym
5
850
AWS re：Invent 2025の少し振り返り ＋ DevOps AgentとBacklogを連携させてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
150
ふりがな Deep Dive try! Swift Tokyo 2026
Avatar for watura watura
0
180
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
Avatar for Sota Makino sotamaki0421
3
460
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
Avatar for shogogg shogogg
2
890
Nuxt Server Components
Avatar for wattanx wattanx
0
260
CursorとClaudeCodeとCodexとOpenCodeを実際に比較してみた
Avatar for Terisuke terisuke
1
340
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
620
安いハードウェアでVulkan
Avatar for Fadis fadis
1
940
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
Avatar for Marek Matulka super_marek
0
150
PCOVから学ぶコードカバレッジ #phpcon_odawara
Avatar for hideki kinjyo o0h
PRO
0
250
「接続」—パフォーマンスチューニングの最後の一手 〜点と点を結ぶ、その一瞬のために〜
Avatar for 武田 憲太郎 kentaroutakeda
5
2.5k

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
260
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
220
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
130
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
260

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