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
Powerfully Typed TypeScript
euxn23
4
1.8k
Dev ContainersとTestcontainers
bells17
3
100
一文字エイリアスのすすめ
fujimura
0
200
FoodGram
iseruuuuu
0
230
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
unvalley
3
650
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
140
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
570
Docker_OSS_ホスティング入門
satokoki645
0
140
Open standards for building event-driven applications in the cloud
meteatamel
0
230
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
133
6.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
22
1.6k
Navigating Team Friction
lara
179
13k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Into the Great Unknown - MozCon
thekraken
15
1.1k
Debugging Ruby Performance
tmm1
70
11k
Making the Leap to Tech Lead
cromwellryan
125
8.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
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