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
490
Micro Frontends with Web Standards
Manfred Steyer
PRO
February 15, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
9
Premier Disciplin for Micro Frontends Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
17
Your Architecture as a Crime SceneForensic Analysis
manfredsteyer
PRO
0
24
Live Coding: Migrating an Application to Signals
manfredsteyer
PRO
0
39
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
140
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
190
Module Boundaries and Architecture with Forensic Analysis @NxSummit Amsterdam 2025
manfredsteyer
PRO
0
120
Signal-Based Data FetchingWith the New httpResource
manfredsteyer
PRO
0
210
Modern Angular:Renovation for Your Applications @angularDays 2025 Munich
manfredsteyer
PRO
0
210
Other Decks in Programming
See All in Programming
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
hayaokimura
4
300
Bedrock × Confluenceで簡単(?)社内RAG
iharuoru
1
110
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
200
M5UnitUnified 最新動向 2025/05
gob
0
130
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
240
「理解」を重視したAI活用開発
fast_doctor
0
280
The Implementations of Advanced LR Parser Algorithm
junk0612
2
1.3k
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
ymbigo
8
3.5k
カウシェで Four Keys の改善を試みた理由
ike002jp
1
120
監視 やばい
syossan27
12
10k
Designing Your Organization's Test Pyramid ( #scrumniigata )
teyamagu
PRO
4
520
Cursor/Devin全社導入の理想と現実
saitoryc
28
21k
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.3k
RailsConf 2023
tenderlove
30
1.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Why Our Code Smells
bkeepers
PRO
336
57k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Embracing the Ebb and Flow
colly
85
4.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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