Numerics
404 error 180-181
A
absolute paths 206
absolute URLs 73, 206, 208, 210
activityFn 137
ad hoc server 26, 30, 122
add random product button 261
add-to-wishlist button 252-253
addEventListener 92
Agile Fluency Model 242
Ajax, composition via 42-51, 159
benefits of 48
declarative loading with h-include 47-48
drawbacks of 49
when to use 50
Akamai 73
Alignment option 196
alt attribute 73
Amazon Web Services (AWS) 245
AMD module 75
Android 19
Angular 14, 85, 135, 140, 153, 167, 197-198
Angular Elements 93
Angular Material 229
@angular/router 119
AngularJS (v1) 131
anonymous function 46
app shell
APIs 133-134
defining 121
client-side routing 123-124
page rendering 124-127
ownership of 141
two-level routing 128-134
cleanup 131
implementing 129
URL changes 131-133
app.get method 79
appHistory.listen 124, 127
appHistory.push() function 124
application shell. See app shell
appShell.setTitle() method 140
Ara Framework 153
architecture
choosing 165-169
fast first-page load/progressive enhancement 167
instant user feedback 167-168
multiple micro frontends on one page 168-169
soft navigation 168
strong isolation 166-167
comparing complexity 161-162
composition techniques 158-159
Ajax 159
client-side integration 159
iframe 159
server-side integration 158
architecture (continued)
heterogeneous architectures 162
high-level architectures 159-161
linked pages 160
linked SPAs 160-161
linked universal SPAs 161
server routing 160
unified SPAs 161
unified universal SPA 161
routing and page transitions 157-158
sites vs. apps 162-165
Documents-to-Applications Continuum 163-164
server- vs. client-side rendering 164-165
architecture-inherent issues 236
architecture-level artifacts 196
asset loading
asset referencing strategies 174-186
cache-busting and independent deployments 175-176
inlining 183
Podium 184-185
referencing via include 178-180
referencing via redirect 176-178
synchronizing markup and asset versions 180-183
Zalando Tailor 183-184
bundle granularity 186-188
all-in-one bundle 187
HTTP/2 186
page and fragment bundles 187-188
team bundles 187
on-demand loading 188-189
lazy loading CSS 189
proxy micro frontends 188-189
asynchronous loading 49, 112
attachShadow 93
attributeChangedCallback 92, 102
authentication 114
autonomous deployments 200
autonomy 16-17
cost of 196-197
full 241-242
self-contained fragments and pages 16
shared nothing architecture 17
technical overhead 17
AWS (Amazon Web Services) 245
B
Babel 14, 208
backend for frontends (BFF) 240
bare specifier 206, 208
behavior-centric 163
BFF (backend for frontends) 240
Block URL feature 195
blueprints 25
boot time, unified SPAs 142
bootstrap function 137
bounded contexts 238
Broadcast Channel API 111-112
brownfield projects 255
bundle granularity 186-188
all-in-one bundle 187
HTTP/2 186
page and fragment bundles 187-188
team bundles 187
C
cache busting 174-176
cache invalidation strategy 175, 187
Cache-Control 176, 178
cacheability 173, 195
Calibre 193
canary deployments 181
CDN (content delivery network) 175, 182, 185
central design system team 246
central infrastructure team 246
central model 219
Central-to-Federated Continuum 221
change event 105
channel.postMessage 111
checkout-buy attributes 87, 108, 110
checkout-buy element 88-89, 103, 148
checkout-cart component 130
checkout-minicart 110
checkout-pages component 129-130
checkout-pay component 130
checkout-success component 124, 129-130
checkout:item_added event 104, 106, 108-109, 261
client-side composition
combining with server-side 147-153
contract between teams 152
SSI and Web Components 148-152
style isolation using Shadow DOM 93-96
creating shadow root 93-94
scoping styles 94-96
when to use 96
when to use 97-98
wrapping micro frontends using Web Components 86-93, 96-98
benefits of 96-97
Custom Elements 88-91
drawbacks of 97
parametrization via attributes 91-92
process for 87-92
Web Components as container format 88
wrapping framework in Web Components 92-93
client-side integration 158
client-side rendering 97, 164-165, 262
client-side routing
APIs 133-134
client-side routing 123-124
defining app shell 121
keeping URL and content in sync 124
mapping URLs to components 124
page rendering 124-127
app shell with two-level routing 128-134
cleanup 131
implementing top-level router 129
URL changes 131-133
single-spa meta-framework 134-140
framework adapters 137-138
JavaScript modules as component format 137
navigating between micro frontends 138
nesting micro frontends 139-140
running application 139
app shell ownership 141
boot time 142
communication 141-142
error boundaries 141
memory management 141
shared HTML document and meta data 140
single point of failure 141
closed mode 94
cloud hosting 244
code splitting 142, 188, 195, 199
CodePen.io site 164
common design system 12
CommonJS 174
communication
authentication 114
data replication 115-116
frontend-backend communication 115
global context 113-114
managing state 114
unified SPAs 141-142
user interface communication 100-112
fragment to fragment 107-111
fragment to parent 104-107
parent to fragment 101-104
publishing/subscribing with Broadcast Channel API 111-112
when to use 112
compatible composition technique 165
composition 11, 158-159
client-side 159
style isolation using Shadow DOM 93-96
when to use 97-98
wrapping micro frontends using Web Components 86-93, 96-98
server-side 158
benefits of 82-83
choosing a solution 81-82
drawbacks of 83
markup assembly performance 69-72
unreliable fragments 64-69
via Edge Side Includes 73
via Nginx and Server-Side Includes 60-64
via Podium 75-81
via Zalando Tailor 73-75
when to use 83-84
universal rendering and
combining server- and client-side composition 147-153
when to use 153-155
via Ajax 42-51, 159
benefits of 48
declarative loading with h-include 47-48
drawbacks of 49
namespacing styles and scripts 45-47
process for 43-44
when to use 50
via iframe 33-36, 159
benefits of 35
drawbacks of 35-36
process for 34-35
composition technique 36
connectedCallback 92, 102, 125-127, 130, 137, 151
constructor method 92, 127, 137, 151
content delivery network (CDN) 175, 182, 185
content-centric 163
context information 113
contracts
combining with server- with client-side composition 152
page transitions via links 28-29
universal rendering 152
cookies 47
CoP (community of practice) 243-244
creativity 241
critical path 64
cross-functional teams 6-7, 244
cross-team communication 100
CSS (cascading style sheets)
lazy loading 189
pattern library 227-228
CSS Modules 46, 189
CSS-in-JS solutions 46, 96, 182, 189
Custom Elements 49, 88, 91, 98, 125-126, 130, 137, 148, 174, 188-189, 260
defining 89-90
using 90-91
Custom Events 47, 49, 108, 112, 159
emitting 105
listening for 106-107
customElements.define 89
CustomEvent constructor 105
CustomEvents API 105
Cycle.js 135
D
data replication 115-116
DAZN 19, 21
decision making, local 15-16
declarative loading 47-48
decoupling 180
deferred loading 71
design system
autonomous teams vs. 216-222
benefits of 215-216
buy-in from teams 218-219
acceptance 218-219
communication 219
early stages 218
central vs. federated process 219-220
central model 219
federated model 220
development phases 221-222
off-the-shelf vs. developing your own 216
pattern library 226-234
central and local 233-234
central vs. local 231-233
change 230-231
component format 227-230
costs of sharing components 231
as process 217
purpose and role of 215
runtime integration 222-224
sustained budget and responsibility 217-218
disconnectedCallback() 92, 126-127, 131, 137
DllPlugin 209
document flow 48
Documents-to-Applications Continuum 163-164
domain-driven design (DDD) 238
Duet Design System 228
dynamic route configuration 56-57
E
element.dispatchEvent 110
Elm language 15
error boundaries 141
error handling, flexible 48
ESI (Edge Side Includes), server-side composition via 73
fallbacks 73
time to first byte 73
timeouts 73
ETag header 178
events
asynchronous loading vs. 112
Custom Events
emitting 105
listening for 106-107
dispatching directly on window 110-111
F
fail_timeout option 68
fallbacks, server-side composition
via Edge Side Includes 73
via Nginx and Server-Side Includes 67-69
via Podium 79-81
via Zalando Tailor 74
federated model 219-220
findComponentName 129
Fluent UI Design System 215
fragments 9-10, 158
bundle granularity 187-188
in isolation 260-262
development page 260-261
independence through mocks 261-262
simulating interactions 261
integrating using SSI 63
mocking 259-262
self-contained 16
unreliable 64-69
fallback content 68-69
flaky fragments 65-66
integrating Near You fragment 66-67
timeouts and fallbacks 67-68
user interface communication
fragment to fragment 107-111
fragment to parent 104-107
parent to fragment 101-104
framework adapters, single-spa meta-framework 137-138
framework-agnostic components 228-229
framework-specific components 228
frontend first migration approach 255-256
benefits and challenges of 256
process for 256
frontend integration 10-11
communication 11
composition 11
routing and page transitions 10-11
frontend-backend communication 115
full-stack teams 241
G
github-elements 88
global context 113-114
greenfield and big bang migration approach 256-258
benefits and challenges of 257-258
process for 257
H
h-include library 47-48
heterogeneity 18
heterogeneous architectures 162
high-level architectures 159-161, 165
linked pages 160
linked SPAs 160-161
linked universal SPAs 161
server routing 160
unified SPAs 161
unified universal SPA 161
history library 123
Homepage.svelte component 138
HTTP/2, bundle granularity 186
I
iframe
composition via 33-36, 159
benefits of 35
drawbacks of 35-36
process for 34-35
when to use 36
IIFE (immediately invoked function expression) 46
import-maps 210-211, 262
import() function 136, 174
include directive 61, 71
inlining 183
isolation
fragments in 260-262
development page 260-261
independence through mocks 261-262
simulating interactions 261
isolating JavaScript 46-47
isolating styles 45-46
isolating styles using Shadow DOM 93-96
creating shadow root 93-94
scoping styles 94-96
missing from Ajax 49
slowdowns 194-195
strong 166-167
item_added event 107
J
JavaScript
isolating 46-47
single-spa meta-framework 137
L
layout library 75-76
lazy loading 189
legacy systems 14-15
lifecycle methods 97, 229
Light DOM 96
link tag 44-45, 174, 178-179, 183-184
linked pages 160
linked single-page applications (SPAs) 119, 160-161
linked universal single-page applications (SPAs) 161
links
page transitions via 27-33
benefits of 32
links (continued)
contract between teams 28-29
data ownership 28
dealing with changing URLs 32
drawbacks of 32-33
process for 29-32
product page markup 30-31
starting applications 31-32
styles 31
when to use 33
listen feature 123
lit-html 198
live-reload 261
loading
asset
asset referencing strategies 174-186
bundle granularity 186-188
on-demand loading 188-189
asynchronous 49, 112
declarative 47-48
deferred 71
lazy 189
on-demand 188-189
parallel 69
loadingFn 136
local development 258-262
fragments in isolation 260-262
development page 260-261
independence through mocks 261-262
simulating interactions 261
mocking fragments 259-260
not running other team's code 258
pulling other teams' micro frontends from staging or production 262
lock-step deployment 200
loose coupling 23, 32, 34
M
manifest.json file 76, 78-79, 81, 184, 201, 204-205
markup
assembly performance 69-72
deferred loading 71
nested fragments 70-71
parallel loading 69
time to first byte and streaming 71-72
fragment 43-44
product page 30-31
synchronizing markup and asset versions 180-183
Material Design 216, 229
Material UI (React) 229
max_fails option 68
maxwait attribute 73
memory management, unified SPAs 141
mfserve library 176
micro frontends 4-12
downsides of 17-19
consistency 18
heterogeneity 18
more frontend code 19
redundancy 17-18
frontend 7-10
fragments 9-10
page ownership 8-9
frontend integration 10-11
communication 11
composition 11
routing and page transitions 10-11
nesting 139-140
problems solved by 12-17
adapting to new technology 14-16
autonomy 16-17
avoiding frontend monolith 13-14
optimization for feature development 12-13
productivity vs. overhead 20
organizational complexity 20
setup 20
proxy 188-189
shared topics 11-12
design systems 12
sharing knowledge 12
web performance 12
software systems and teams 4-7
cross-functional teams 6-7
team missions 6
when not to use 20-21
when to use 19-21
medium-to-large projects 19
on the web 19-20
who uses 21
@microfrontends/serve package 27
migration 252-258
frontend first approach 255-256
benefits and challenges of 256
process for 256
greenfield and big bang approach 256-258
benefits and challenges of 257-258
process for 257
proof of concept 252-253
real world example 252-253
role model 253
slice-by-slice approach 254-255
benefits and challenges of 254-255
process for 254
module specifier 206
MongoDB database 24
monolith
avoiding frontend monolith 13-14
native monolith 19-20
monorepos 258
mount function 137-138
multiple framework components 229-230
MutationObserver 49
N
namespacing 45-47
resources 55
scripts 46-47
styles 45-46
navigate click handler 138
Near You fragment 66-68
nested fragments 70-71
nesting micro frontends 139-140
Nginx
installing locally 53
server-side composition via 60-64
better load times 63-64
process for 61-63
server-side routing via 51-58
infrastructure ownership 57-58
namespacing resources 55
process for 53-55
route configuration methods 56-57
when to use 58
No constraints option 196
no-cache setting 176
node_modules 208
node-tailor package 74
Node.js library 26, 74-75, 78
NPM package 201, 203
O
OAuth standard 114
on-demand loading 135, 174, 188-189, 195, 199, 205
lazy loading CSS 189
proxy micro frontends 188-189
one-year cache header 175
open mode 94
opening hours concept 219
optimization
for feature development 12-13
for use cases 195-196
overhead
performance 35
productivity vs. 20
organizational complexity 20
setup 20
technical overhead 17
ownership
of app shell 141
of data 28
of infrastructure 57-58
by one product team 245-246
ownership concept 47, 242
P
page rendering
app shell with flat routing 124-127
linking between micro frontends 126-127
page transitions 10-11
via links 27-33, 158
benefits of 32
contract between teams 28-29
data ownership 28
dealing with changing URLs 32
drawbacks of 32-33
process for 29-32
product page markup 30-31
starting applications 31-32
styles 31
pages
bundle granularity 187-188
composition 11
examining existing page structures to identify team boundaries 239-240
linked 160
ownership of 8-9
self-contained 16
parallel loading 69
parametrization, via attributes 91-92
pattern library 215, 226-234
central and local 233-234
central vs. local 231-233
component complexity 232
domain specific 233
reuse value 232
trust in teams 233
change 230-231
being open for change 230
keep it simple 230-231
component format 227-230
common templating language 229-230
framework-agnostic components 228-229
framework-specific components 228
pattern library (continued)
multiple framework components 229
pure CSS 227-228
costs of sharing components 231
Pavlovian reflex 196
performance
architecting for 191-196
attributing slowdowns 193-195
benefits of micro frontends 195-196
different teams, different metrics 191-192
multi-team performance budgets 192-193
vendor libraries 196-211
cost of autonomy 196-197
one global version 199-200
pick small 197-199
sharing business code 211
versioned vendor bundles 200-211
platinum option 102
Podium
asset loading 184-185
server-side composition via 75-81
architecture 76-77
fallbacks and timeouts 79-81
Implementation 77-79
Podlet manifest 75-76
@podium/* libraries 81
@podium/layout 76
@podium/podlet 76
Podlet manifest 75-76
podlets 75-76, 78, 81, 184
productivity, overhead vs. 20
organizational complexity 20
setup 20
progressive enhancement 48, 83, 145, 152, 167
Prototype.js file 14
proxy micro frontends 188-189
proxy_read_timeout property 67
push feature 123
R
react 206-208, 210
react-dom 206-207
react-router 123, 139
ReactDOM.hydrate 150
ReactDOMServer.renderToString 150
recos 78-79, 81
redundancy 17-18, 31, 183, 187, 191, 226
referencing
via include (server) 178-180
via redirect (client) 176-178
registration file 177
request forwarding 62
require.js module loader 184
RequireJS 174
REST API 20
reusable interface components 214
robustness, of links 32
rolling deployments 181
creating versioned bundle 207-208
routes object 124, 129
routing 10-11
client-side
APIs 133-134
app shell 158
app shell with two-level routing 128-134
single-spa meta-framework 134-140
server-side, via Nginx 51-58
infrastructure ownership 57-58
namespacing resources 55
process for 53-55
route configuration methods 56-57
when to use 58
runtime integration 222-224
S
SaaS (Software as a Service) 245
scoped attribute 45
Scoped CSS 45
scoping styles 94-96
script tag 46, 75, 174, 178, 183, 199, 204, 259
scripts
isolating JavaScript 46-47
no lifecycle for 49
search engines
composition via Ajax 48
iframes and 35-36
security features 35
Semantic UI 216
SEO (search engine optimization) 35-36
server rendered pages 37
server requests, composition via Ajax 49
server routing 160
server-side composition 11, 253
benefits of 82-83
choosing a solution 81-82
combining with client-side 147-153
contract between teams 152
SSI and Web Components 148-152
drawbacks of 83
markup assembly performance 69-72
deferred loading 71
nested fragments 70-71
parallel loading 69
time to first byte and streaming 71-72
universal rendering with pure 153
unreliable fragments 64-69
fallback content 68-69
flaky fragments 65-66
integrating Near You fragment 66-67
timeouts and fallbacks 67-68
via Edge Side Includes 73
fallbacks 73
time to first byte 73
timeouts 73
via Nginx and Server-Side Includes 60-64
better load times 63-64
process for 61-63
via Podium 75-81
architecture 76-77
fallbacks and timeouts 79-81
Implementation 77-79
Podlet manifest 75-76
via Zalando Tailor 73-75
asset handling 75
fallbacks and timeouts 74
time to first byte and streaming 75
when to use 83-84
Server-Side Includes. See SSI
server-side integration 97, 158, 183
server-side rendering (SSR) 145-146, 262
server-side rendering, client-side vs. 164-165
server-side routing, via Nginx 51-58
infrastructure ownership 57-58
namespacing resources 55
process for 53-55
route configuration methods 56-57
when to use 58
session storage 47
Shadow DOM 88, 96, 149, 255
style isolation using 93-96
creating shadow root 93-94
scoping styles 94-96
when to use 96
shadowRoot property 93-95
shared frontend blueprint 247
shared integration technique 253
shared nothing architecture 17
shared topics 11-12
design systems 12
sharing knowledge 12
web performance 12
shared-vendor folder 202-203, 206
simulating interactions 261
single point of failure 223
single-page applications. See SPAs
single-spa meta-framework 11, 120, 134-140
framework adapters 137-138
JavaScript modules as component format 137
navigating between micro frontends 138
nesting micro frontends 139-140
running application 139
single-spa-inspector 262
single-spa-leaked-globals plugin 141
single-spa-svelte 138
single-spa.js library 136
singleSpa.registerApplication function 136
singleSpaSvelte function 138
sitespeed.io 193
Skate.js 149
skeleton screens 167
slice-by-slice migration approach 254-255
benefits and challenges of 254-255
process for 254
slowdowns 193-195
isolation 194-195
observability 194
soft navigation 168
Some constraints option 196
spa meta-framework 174
SPAs (single-page applications)
linked 160-161
linked universal 161
single-spa meta-framework 134-140
framework adapters 137-138
JavaScript modules as component format 137
navigating between micro frontends 138
nesting micro frontends 139-140
running application 139
unified 140-143, 161
app shell ownership 141
boot time 142
communication 141-142
error boundaries 141
memory management 141
shared HTML document and meta data 140
single point of failure 141
universal unified 154-155, 161
specialist teams 6
specialized component team 246
SSI (Server-Side Includes)
server-side composition via 60-64
better load times 63-64
process for 61-63
universal rendering 148-152
SSR (server-side rendering) 145-146, 262
state management 114
sticky sessions 182
Strangler Fig Pattern 254
streaming templates
via Nginx and Server-Side Includes 71-72
via Zalando Tailor 75
stub parameter 68-69
style guide 215
styles
isolating 45-46, 93-96
links 31
namespacing 45-46
synchronization 178, 182
SystemJS 210
T
Tailor 72-75, 79, 81, 83, 158, 186
teams
architecting for performance
different teams, different metrics 191-192
multi-team performance budgets 192-193
bundle granularity 187
central vs. local pattern libraries 233
contract between teams 28-29
cross-cutting concerns 245-247
central infrastructure 245-246
global agreements and conventions 246-247
specialized component team 246
cross-functional 6-7
cultural change 242-243
depth of 240-242
frontend only 240-241
full autonomy 241-242
full-stack team 241
design system vs. 216-222
identifying boundaries 238-240
domain-driven design 238
existing page structures 239-240
user-centered design 239
missions 6
multiple frontends per team 20
not running other team's code 258
pulling other teams' micro frontends from staging or production 262
sharing knowledge 243-245
community of practice 243-244
learning and enabling 244-245
presenting your work 245
software systems and 4-7
technology diversity 247-249
frontend blueprint 247-248
not fearing the copy 248-249
toolbox and defaults 247
value of similarity 249
technology diversity 247-249
frontend blueprint 247-248
making optional 248
project-specific aspects 248
not fearing the copy 248-249
toolbox and defaults 247
value of similarity 249
templating language 229-230
test-suite 263
testing 262-263
tiered design systems 233
time to first byte (TTFB) 69
time to first byte, server-side composition
via Edge Side Includes 73
via Nginx and Server-Side Includes 71-72
via Zalando Tailor 75
timeouts, server-side composition
via Edge Side Includes 73
via Nginx and Server-Side Includes 67-68
via Podium 79-81
via Zalando Tailor 74
Tractor Store website 24-27
example code 25-27
directory structure 26
installing dependencies 26
Node.js 26
starting examples 26-27
freedom of choosing technology 24-25
independent deploys 25
TTFB (time to first byte) 69
U
UI communication 100
UIengine 234
unavoidable globals 47
unidirectional dataflow 104
unified single-page apps (SPAs) 140-143, 161
app shell ownership 141
boot time 142
communication 141-142
error boundaries 141
memory management 141
shared HTML document and meta data 140
single point of failure 141
universal application shell 154
universal rendering
combining server- and client-side composition 147-153
contract between teams 152
SSI and Web Components 148-152
when to use 153-155
increased complexity 154
universal rendering with pure server-side composition 153
universal unified SPAs 154-155
universal unified single-page apps (SPAs) 154-155, 161
unlisten() function 131
unmount function 137-138
URLs
changes 131-133
inside team navigation 132
inter-team navigation 133
contract between teams 28-29
dealing with changing 32
keeping in sync wth content 124
mapping to components 124
route configuration 56
usage pattern 168
user feedback, instant 167-168
user interface communication 100-112
fragment to fragment 107-111
dispatching events directly on window 110-111
fragment to parent 104-107
emitting Custom Events 105
listening for Custom Events 106-107
parent to fragment 101-104
platinum option 102
updating on attribute change 102-104
publishing/subscribing with Broadcast Channel API 111-112
when to use 112
bad boundaries 112
events vs. asynchronous loading 112
simple payloads 112
user interface, design system for
as process 217
autonomous teams vs. 216-222
benefits of 215-216
buy-in from teams 218-219
central vs. federated process 219-220
development phases 221-222
off-the-shelf vs. developing your own 216
pattern library 226-234
purpose and role of 215
sustained budget and responsibility 217-218
user-centered design 239
user-focused culture 242
user-interface integration techniques 252
V
vendor libraries 196-211
cost of autonomy 196-197
one global version 199-200
pick small 197-199
sharing business code 211
versioned vendor bundles 200-211
import-maps 210-211
Webpack DllPlugin 201-205
versioned bundles 201, 206
avoiding shipping unused code 224
drawbacks of 226
independent upgrades 224
self-contained 225
vue-router 119, 123, 139
Vue.js 14, 85, 93, 135, 153, 200
@vue/web-component-wrapper package 93
Vuetify 228
W
Web Components 86-93, 96-98, 159
as container format 88
benefits of 96-97
Custom Elements 88
defining 89-90
using 90-91
drawbacks of 97
parametrization via attributes 91-92
universal rendering 148-152
wrapping framework 92-93
wrapping micro frontends 87-92
Webpack DllPlugin 201-205
using versioned bundle 203-205
window object 46, 110, 199
window.customElements.define function 89
window.dispatchEvent 110
window.history.pushState 138
window.postMessage API 159
window.React 199
window.ReactDOM 199
wrapping micro frontends, using Web Components 86-93, 96-98
benefits of 96-97
defining Custom Elements 89-90
drawbacks of 97
parametrization via attributes 91-92
process for 87-92
using Custom Elements 90-91
Web Components and Custom Elements 88
Web Components as container format 88
wrapping framework in Web Components 92-93
Z
Zalando Tailor
asset loading 183-184
server-side composition via 73-75
asset handling 75
fallbacks and timeouts 74
time to first byte and streaming 75
zombie style guide 218
