Slide 1
Slide 1 text
@ManfredSteyer
ManfredSteyer
Micro Frontends with Web Standards
Slide 2
Slide 2 text
@ManfredSteyer
Booking App Check-in App
Boarding App
Luggage App
Slide 3
Slide 3 text
@ManfredSteyer
Slide 4
Slide 4 text
@ManfredSteyer
Slide 5
Slide 5 text
@ManfredSteyer
Slide 6
Slide 6 text
@ManfredSteyer
const Component = await import('other-app/xyz')
Slide 7
Slide 7 text
@ManfredSteyer
const Component = await import('other-app/xyz')
Slide 8
Slide 8 text
@ManfredSteyer
Slide 9
Slide 9 text
@ManfredSteyer
Slide 10
Slide 10 text
@ManfredSteyer
Federation &
Standalone &
esbuild
Frankenstein
w/ Web
Components
Deferred
Loading
Slide 11
Slide 11 text
@ManfredSteyer
Manfred Steyer
Slide 12
Slide 12 text
@ManfredSteyer
Slide 13
Slide 13 text
@ManfredSteyer
Slide 14
Slide 14 text
@ManfredSteyer
Slide 15
Slide 15 text
@ManfredSteyer
Slide 16
Slide 16 text
@ManfredSteyer
Slide 17
Slide 17 text
@ManfredSteyer
Mindset:
Module
Federation
EcmaScript
Modules
Import Maps
Simple config, sharing libs
Slide 18
Slide 18 text
@ManfredSteyer
1. ng add @angular-architects/native-federation […]
2. Adjust generated config
3. Start Shell and Micro Frontends
Slide 19
Slide 19 text
@ManfredSteyer
Slide 20
Slide 20 text
@ManfredSteyer
Slide 21
Slide 21 text
@ManfredSteyer
Wrap them into Web Components
Angular App
(MFE)
React App
(MFE)
Slide 22
Slide 22 text
@ManfredSteyer
Slide 23
Slide 23 text
@ManfredSteyer
await loadRemoteModule('other-app', './web-cmp');
Slide 24
Slide 24 text
@ManfredSteyer
await loadRemoteModule('other-app', './web-cmp');
const rootElm = document.createElement('mfe2-root');
document.body.appendChild(rootElm);
Slide 25
Slide 25 text
@ManfredSteyer
await loadRemoteModule('other-app', './web-cmp');
const rootElm = document.createElement('web-cmp')
document.body.appendChild(rootElm);
WrapperComponent
Slide 26
Slide 26 text
@ManfredSteyer
Slide 27
Slide 27 text
@ManfredSteyer
Slide 28
Slide 28 text
@ManfredSteyer
Slide 29
Slide 29 text
@ManfredSteyer
Title
Content
Call to Action
Info
More Info
Slide 30
Slide 30 text
@ManfredSteyer
@defer on viewport {
@main {
}
@placeholder {
}
[…]
}
}
[…]
}
Slide 31
Slide 31 text
@ManfredSteyer
Slide 32
Slide 32 text
@ManfredSteyer
Slide 33
Slide 33 text
@ManfredSteyer
Free eBook (6th Edition)
ANGULARarchitects.io/book
20 Chapters
4 new Signal Store Chapters
Slide 34
Slide 34 text
@ManfredSteyer
Module
Federation:
Mental Model
rocks!
Native
Federation
Deferred
Loading
SSR with
HTML
Fragments
Slide 35
Slide 35 text
@ManfredSteyer
d
Slides & Examples Remote Company Workshops
and Consulting
http://angulararchitects.io