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
0
460

Native Federation: The Future of Micro Frontends in Angular

Avatar for Manfred Steyer

Manfred Steyer PRO

July 18, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
Rethinking Angular: The Future with Signals and the New Resource API @iJS Munich 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
16
Reactivity, Reimagined: Angular Signals at Every Layer
Avatar for Manfred Steyer manfredsteyer
PRO
0
44
Angular Architecture Workshop @AngularDays in Berlin 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
28
Migration to Signals, Resource API, and NgRx Signal Store
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Reactive Thinking with Signals and the Resource API
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
All About Angular's New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
210
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
Your Architecture as a Crime Scene Forensic Analysis @BASTA! 2025 in Mainz, Germany
Avatar for Manfred Steyer manfredsteyer
PRO
0
78

Other Decks in Programming

See All in Programming
技術的負債の正体を知って向き合う
Avatar for irof irof
0
240
登壇は dynamic! な営みである / speech is dynamic
Avatar for Daichi KUDO da1chi
0
360
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
180
スマホから Youtube Shortsを見られないようにする
Avatar for lemolatoon lemolatoon
27
34k
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
Avatar for 小島舞子 / Maiko Kojima maikokojima
0
630
Webサーバーサイド言語としてのRustについて
Avatar for kaza kouyuume
1
4.9k
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
2
500
組込みだけじゃない！TinyGo で始める無料クラウド開発入門
Avatar for Kotaro Otaka otakakot
2
370
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
470
Software Architecture
Avatar for Henning Schwentner hschwentner
6
2.3k
iOSでSVG画像を扱う
Avatar for Kishikawa Katsumi kishikawakatsumi
0
170
Devvox Belgium - Agentic AI Patterns
Avatar for Kevin Dubois kdubois
1
150

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
22k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k

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