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
370
Generative UI & AI-Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
170
Nostalgia Meets Technology: Super Mario with TypeScript
Avatar for Manfred Steyer manfredsteyer
PRO
0
250
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
Avatar for Manfred Steyer manfredsteyer
PRO
0
270
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
Avatar for Manfred Steyer manfredsteyer
PRO
0
190
Agentic UI
Avatar for Manfred Steyer manfredsteyer
PRO
0
280
Signal Forms: Beyond the Basics @ngBaguette 2026 in Paris
Avatar for Manfred Steyer manfredsteyer
PRO
0
320
Agentic UI beyond Chats Architecture Patterns & Open Standards @ngMunich 05/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
270
Agentic AI in the Frontend: Architectures with Open Standards @iJS London 2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
200

Other Decks in Programming

See All in Programming
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
0
230
Built Our Own Background Agent at LayerX
Avatar for LayerX layerx
PRO
10
5.7k
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計｜Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
Avatar for Tomohisa Takaoka tomohisa
1
1k
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
19k
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
Avatar for freee freee
PRO
0
420
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
Avatar for 武田 憲太郎 kentaroutakeda
3
720
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
110
Flow は今どうなっているか
Avatar for mizdra mizdra
PRO
0
610
ソフトウェア設計に溶けるインフラ ― AWS CDK のインフラ認識論
Avatar for Kenji Kono konokenj
3
800
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
240
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
470
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
200

Featured

See All Featured
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
920
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.3k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
390
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
410
How to make the Groovebox
Avatar for あそなす asonas
2
2.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
990
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.8k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
490
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
550

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