Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Native Federation: The Future of Micro Frontends in Angular
Search
Manfred Steyer
PRO
April 25, 2024
Programming
0
170
Native Federation: The Future of Micro Frontends in Angular
Manfred Steyer
PRO
April 25, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Successful with Signals: 3 Effective Rules @FrankenJS
manfredsteyer
PRO
0
110
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
90
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
76
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
110
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
95
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
260
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
450
Micro Frontends with Web Standards
manfredsteyer
PRO
1
330
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
230
Other Decks in Programming
See All in Programming
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
The World is a Network (and We Are Just Nodes)
whatyouhide
0
100
スタックトレース始めてみた
kuro_kurorrr
5
1.2k
Unlocking Potential of Property Based Testing with Ractor
ohbarye
2
540
Powerfully Typed TypeScript
euxn23
4
1.8k
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
160
Enjoy Creative Coding with Ruby (RubyKaigi2024)
chobishiba
0
1k
How to implement a RubyVM with PHP?
memory1994
PRO
2
1k
RubyGems on ruby.wasm
kateinoigakukun
0
160
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
250
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
280
Deep Dive into React Stream/Serialize
mugi_uno
4
880
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1357
200k
How to train your dragon (web standard)
notwaldorf
75
5.2k
A better future with KSS
kneath
231
16k
Statistics for Hackers
jakevdp
790
220k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Design by the Numbers
sachag
274
18k
Music & Morning Musume
bryan
41
5.6k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
What the flash - Photography Introduction
edds
64
11k
Transcript
@ManfredSteyer ManfredSteyer Native Federation: The Future of Micro Frontends in
Angular
@ManfredSteyer Booking App Check-in App Boarding App Luggage App
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer const Component = await import('other-app/xyz')
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Federation & esbuild Frankenstein w/ Web Components Island Architectures
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config,
sharing libs
@ManfredSteyer
@ManfredSteyer 1. ng add @angular-architects/native-federation […] 2. Adjust generated config
3. Start Shell and Micro Frontends
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Wrap them into Web Components Angular App (MFE) React
App (MFE)
@ManfredSteyer
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp');
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('mfe2-root'); document.body.appendChild(rootElm);
@ManfredSteyer await loadRemoteModule('other-app', './web-cmp'); const rootElm = document.createElement('web-cmp') document.body.appendChild(rootElm); WrapperComponent
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Title Content Call to Action Info More Info
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Host Remote Remote HTML HTML
@ManfredSteyer 1. Server: Load HTML Fragments from MF 2. Client:
Load MF via Federation (Hydration)
@ManfredSteyer Easy No Version Conflicts Lot of Experience
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer SPA + SSR Classic SPA Complexity Complexity Monolith MF
Frankenstein Biz Apps B2C Team Autonomy →
@ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters
@ManfredSteyer Module Federation: Mental Model rocks! Native Federation Deferred Loading
SSR with HTML Fragments
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io