Slide 1
Slide 1 text
@ManfredSteyer
Micro Frontends with Modern Angular
ManfredSteyer
Slide 2
Slide 2 text
@ManfredSteyer
Angular is changing …
Slide 3
Slide 3 text
@ManfredSteyer
Slide 4
Slide 4 text
@ManfredSteyer
Slide 5
Slide 5 text
@ManfredSteyer
Federation &
Standalone &
esbuild
Frankenstein
w/ Angular
Elements
Deferred
Loading
SSR &
Hydration w/
@angular/ssr
Slide 6
Slide 6 text
@ManfredSteyer
Manfred Steyer
Slide 7
Slide 7 text
@ManfredSteyer
Slide 8
Slide 8 text
@ManfredSteyer
Booking App Check-in App
Boarding App
Luggage App
Slide 9
Slide 9 text
@ManfredSteyer
Slide 10
Slide 10 text
@ManfredSteyer
Slide 11
Slide 11 text
@ManfredSteyer
Slide 12
Slide 12 text
@ManfredSteyer
const Component = await import('other-app/xyz')
Slide 13
Slide 13 text
@ManfredSteyer
const Component = await import('other-app/xyz')
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
→
npm install @angular/elements
Slide 23
Slide 23 text
@ManfredSteyer
→
// bootstrap.ts
const app = await createApplication({
providers: [],
});
Slide 24
Slide 24 text
@ManfredSteyer
→
// bootstrap.ts
const app = await createApplication({
providers: [],
});
const webCmp = createCustomElement(AppComponent, {
injector: app.injector,
});
Slide 25
Slide 25 text
@ManfredSteyer
→
// bootstrap.ts
const app = await createApplication({
providers: [],
});
const webCmp = createCustomElement(AppComponent, {
injector: app.injector,
});
customElements.define('mfe2-root', webCmp);
Slide 26
Slide 26 text
@ManfredSteyer
→
// bootstrap.ts
const app = await createApplication({
providers: [],
});
const webCmp = createCustomElement(AppComponent, {
injector: app.injector,
});
customElements.define('mfe2-root', webCmp);
// Usage:
Slide 27
Slide 27 text
@ManfredSteyer
// federation.config.js
module.exports = withNativeFederation({
[…]
exposes: {
'./web-comp': './projects/mfe2/src/bootstrap.ts',
},
[…]
});
Slide 28
Slide 28 text
@ManfredSteyer
Slide 29
Slide 29 text
@ManfredSteyer
await loadRemoteModule('other-app', './web-cmp');
Slide 30
Slide 30 text
@ManfredSteyer
await loadRemoteModule('other-app', './web-cmp');
const rootElm = document.createElement('mfe2-root');
document.body.appendChild(rootElm);
Slide 31
Slide 31 text
@ManfredSteyer
await loadRemoteModule('other-app', './web-cmp');
const rootElm = document.createElement('web-cmp')
document.body.appendChild(rootElm);
WrapperComponent
Slide 32
Slide 32 text
@ManfredSteyer
Slide 33
Slide 33 text
@ManfredSteyer
Slide 34
Slide 34 text
@ManfredSteyer
Slide 35
Slide 35 text
@ManfredSteyer
Title
Content
Call to Action
Info
More Info
Slide 36
Slide 36 text
@ManfredSteyer
@defer on viewport {
@main {
}
@placeholder {
}
[…]
}
}
[…]
}
Slide 37
Slide 37 text
@ManfredSteyer
Slide 38
Slide 38 text
@ManfredSteyer
Slide 39
Slide 39 text
@ManfredSteyer
Slide 40
Slide 40 text
@ManfredSteyer
1. Server: Render index.html → FMP, SEO
2. Client: Make app interactive (Hydration)
Slide 41
Slide 41 text
@ManfredSteyer
ng add @angular/ssr
- or -
ng new --ssr
Slide 42
Slide 42 text
@ManfredSteyer
Slide 43
Slide 43 text
@ManfredSteyer
Slide 44
Slide 44 text
@ManfredSteyer
Host
Remote
Remote
HTML
HTML
Slide 45
Slide 45 text
@ManfredSteyer
1. Server: Load HTML Fragments from MF
2. Client: Load MF via Federation (Hydration)
Slide 46
Slide 46 text
@ManfredSteyer
Easy
No Version
Conflicts
Lot of
Experience
Slide 47
Slide 47 text
@ManfredSteyer
Slide 48
Slide 48 text
@ManfredSteyer
ng add @angular/ssr
ng add @angular-architects/native-federation …
Slide 49
Slide 49 text
@ManfredSteyer
ng g @angular-architects/native-federation:remove …
ng add @angular/ssr
ng add @angular-architects/native-federation …
Slide 50
Slide 50 text
@ManfredSteyer
Slide 51
Slide 51 text
@ManfredSteyer
SPA + SSR
Classic SPA
Complexity
Complexity
Monolith MF Frankenstein
Biz Apps
B2C
Team Autonomy →
Slide 52
Slide 52 text
@ManfredSteyer
Slide 53
Slide 53 text
@ManfredSteyer
Free eBook (5th Edition)
ANGULARarchitects.io/book
Module Federation & Nx
Slide 54
Slide 54 text
@ManfredSteyer
Module
Federation:
Mental Model
rocks!
Native
Federation
Deferred
Loading
SSR with
HTML
Fragments
Slide 55
Slide 55 text
@ManfredSteyer
d
Slides & Examples Remote Company Workshops
and Consulting
http://angulararchitects.io