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

Native Federation: The Future of Micro Frontend...

Manfred Steyer
PRO
April 25, 2024
Programming
0
600

Native Federation: The Future of Micro Frontends in Angular

Manfred Steyer
PRO

April 25, 2024
Tweet

More Decks by Manfred Steyer

See All by Manfred Steyer
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
90
Strategic Design (DDD) for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
170
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
110
Signal-Based Data Fetching With the New httpResource
manfredsteyer
PRO
0
190
Modern Angular: Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
200
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
250
The Price of Micro Frontends … and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
530
Your Architecture as a Crime Scene: Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
190
Modern Angular with Signals and Signal Store New Rules for Your Architecture @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
250

Other Decks in Programming

See All in Programming
AWS で実現する 安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
880
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
4
1.2k
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
180
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
7
3.2k
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
tico88612
0
130
ComposeでのPicture in Picture
takathemax
0
120
エンジニア向けCursor勉強会 @ SmartHR
yukisnow1823
2
8.2k
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
makicamel
4
470
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
170
メモリウォールを超えて：キャッシュメモリ技術の進歩
kawayu
0
1.9k
Qiita Bash
mercury_dev0517
2
210
Making TCPSocket.new "Happy"!
coe401_
1
2k

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Scaling GitHub
holman
459
140k
Automating Front-end Workflow
addyosmani
1370
200k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
540
Making Projects Easy
brettharned
116
6.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Music & Morning Musume
bryan
47
6.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Testing 201, or: Great Expectations
jmmastey
42
7.5k

Transcript

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

    Angular

  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 await loadRemoteModule('other-app', './web-cmp');

  25. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('mfe2-root'); document.body.appendChild(rootElm);

  26. @ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent

  27. @ManfredSteyer

  28. @ManfredSteyer

  29. @ManfredSteyer

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

  31. @ManfredSteyer

  32. @ManfredSteyer

  33. @ManfredSteyer

  34. @ManfredSteyer Host Remote Remote HTML HTML

  35. @ManfredSteyer 1. Server: Load HTML Fragments from MF 2. Client:

    Load MF via Federation (Hydration)

  36. @ManfredSteyer Easy No Version Conflicts Lot of Experience

  37. @ManfredSteyer

  38. @ManfredSteyer

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

    Frankenstein Biz Apps B2C Team Autonomy →

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

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

    SSR with HTML Fragments

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

    http://angulararchitects.io