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
Micro Frontends with Web Standards
Search
Manfred Steyer
PRO
February 15, 2024
Programming
1
390
Micro Frontends with Web Standards
Manfred Steyer
PRO
February 15, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
96
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
Where do we go from here? Strategies for Signals
manfredsteyer
PRO
0
170
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
95
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
270
Successful with Signals: 3 Effective Rules
manfredsteyer
PRO
0
100
Modern Angular Architectures With Nx and Lightweight Stores @ngBelgrade 2024
manfredsteyer
PRO
0
170
Other Decks in Programming
See All in Programming
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
CSC307 Lecture 07
javiergs
PRO
0
220
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
CSC307 Lecture 12
javiergs
PRO
0
220
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
Trial
cairolibrary720
1
130
How to use Macrobenchmark
veronikapj
0
160
Rust.Nagoya #1
codemountains
0
170
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
CSC307 Lecture 14
javiergs
PRO
0
220
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Statistics for Hackers
jakevdp
792
220k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Typedesign – Prime Four
hannesfritz
37
2.2k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
The Invisible Side of Design
smashingmag
294
50k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Become a Pro
speakerdeck
PRO
15
4.8k
Transcript
@ManfredSteyer ManfredSteyer Micro Frontends with Web Standards
@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 & Standalone & esbuild Frankenstein w/ Web Components
Deferred Loading
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Mindset: Module Federation EcmaScript Modules Import Maps Simple config,
sharing libs
@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 @defer on viewport { @main { <heavy-cmp /> }
@placeholder { <img src="ph.png"> } […] }
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Free eBook (6th Edition) ANGULARarchitects.io/book 20 Chapters 4 new
Signal Store 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