2 0 2 1 / 0 6 / 3 0
I N N O Q T E C H N O L O G Y L U N C H
Web
Anwendungen
Eine Frage des
Stils
LUCAS DOHMEN
@moonbeamlabs
Slide 2
Slide 2 text
Latency
Browser DC
Your own, AWS,
GC, Azure, Digital
Ocean, Linode…
Slide 3
Slide 3 text
State
Business
Logic
Routing
Rendering
Logic
Slide 4
Slide 4 text
LUCAS DOHMEN
Senior Consultant
at INNOQ Deutschland GmbH
Web Architecture & Development
Slide 5
Slide 5 text
SSR
State
Business
Logic
Rendering
Logic
Routing
Slide 6
Slide 6 text
State
Business
Logic
Rendering
Logic
Routing
Slide 7
Slide 7 text
State
Business
Logic
Routing
Rendering
Logic
Slide 8
Slide 8 text
State
Business
Logic
Routing
Rendering
Logic
JSON
API
JSON
Client
?
State
Business
Logic
Slide 9
Slide 9 text
SPA
Rendering
Logic
State
Business
Logic
JSON
API
State
Business
Logic
JSON
Client
Routing
Slide 10
Slide 10 text
Why Routing?
Bookmarks?
Deep links?
Reload?
Solution:
Store some app state in the URI
10
Slide 11
Slide 11 text
MPA
Rendering
Logic
State
Business
Logic
JSON
API
State
Business
Logic
Routing
JSON
Client
Slide 12
Slide 12 text
Prerendering
12
Slide 13
Slide 13 text
Rendering
Logic
State
Business
Logic
Rendering
Logic
Routing
JSON
API
State
Business
Logic
Routing
JSON
Client
Slide 14
Slide 14 text
Prerendering
14
Slide 15
Slide 15 text
Hydration
How to simulate readiness?
What about Events (Clicks etc)?
How to match server-side HTML to
client-side DOM?
15
Slide 16
Slide 16 text
MPA with Prerendering
Rendering
Logic
State
Business
Logic
Rendering
Logic
Routing
JSON
API
State
Business
Logic
Routing Hydration
JSON
Client
Slide 17
Slide 17 text
Comparison
I don’t need deep links, fast startup or SEO ⇒ SPA
I need deep links, but startup and SEO are not my concern ⇒ MPA
I need deep links, fast startup and SEO ⇒ MPA with Prerendering
or SSR
Slide 18
Slide 18 text
SSR with Rich Components
Rendering
Logic
State
Business
Logic
Rendering
Logic
Routing
as components
with component state
using progressive enhancement
Slide 19
Slide 19 text
Latency
Browser DC
CDN
Cloudflare,
Vercel, Netlify…
Latency Latency
Slide 20
Slide 20 text
MPA with Edge Prerendering
JSON
Client
JSON
API
Routing
Rendering
Logic
State
Business
Logic
Routing
Rendering
Logic
Hydration
State
Business
Logic
Business
Logic
and/or
State and/or
JSON
Client
Rendering
Logic
Routing
Slide 21
Slide 21 text
ESR
JSON
Client
JSON
API
Routing
Rendering
Logic
State
Business
Logic
Business
Logic
and/or
State and/or
Slide 22
Slide 22 text
Executing Code
No Trust Trust Trust
No Control Low Control High Control
Low Observability Low Observability High Observability
No Latency to User Low Latency to User High Latency to User
Slide 23
Slide 23 text
It’s your choice
Only View Logic?
App
with Routing?
Only Caching (and ESI)?
App
only Rendering?
State?
Only Database?
App
with Rendering?
Slide 24
Slide 24 text
…and this choice should be made based on your requirements,
not current trends
Slide 25
Slide 25 text
More Web Architecture?
socreatory.com/trainings/web
October, 6. – 8.
Remote