2 0 2 0 / 1 2 / 0 9
I N N O Q T E C H N O L O G Y D A Y
AdequateJS
How much
JavaScript does
my application
need?
LUCAS DOHMEN
@moonbeamlabs
Slide 2
Slide 2 text
2 0 2 0 / 1 2 / 0 9
I N N O Q T E C H N O L O G Y D A Y
AdequateJS
Where should I
run my code?
LUCAS DOHMEN
@moonbeamlabs
Slide 3
Slide 3 text
Latency
Browser DC
Your own, AWS,
GC, Azure, Digital
Ocean, Linode…
Slide 4
Slide 4 text
State
Business
Logic
Routing
Rendering
Logic
Slide 5
Slide 5 text
LUCAS DOHMEN
Senior Consultant
at INNOQ Deutschland GmbH
Web Architecture & Development
Slide 6
Slide 6 text
SSR
State
Business
Logic
Rendering
Logic
Routing
Slide 7
Slide 7 text
State
Business
Logic
Rendering
Logic
Routing
Slide 8
Slide 8 text
State
Business
Logic
Routing
Rendering
Logic
Slide 9
Slide 9 text
State
Business
Logic
Routing
Rendering
Logic
JSON
API
JSON
Client
?
State
Business
Logic
Slide 10
Slide 10 text
SPA
Rendering
Logic
State
Business
Logic
JSON
API
State
Business
Logic
JSON
Client
Routing
Slide 11
Slide 11 text
Why Routing?
Bookmarks?
Deep links?
Reload?
Solution:
Store some app state in the URI
11
Slide 12
Slide 12 text
MPA
Rendering
Logic
State
Business
Logic
JSON
API
State
Business
Logic
Routing
JSON
Client
Slide 13
Slide 13 text
Prerendering
13
Slide 14
Slide 14 text
Rendering
Logic
State
Business
Logic
Rendering
Logic
Routing
JSON
API
State
Business
Logic
Routing
JSON
Client
Slide 15
Slide 15 text
Prerendering
15
Slide 16
Slide 16 text
Hydration
How to simulate readiness?
What about Events (Clicks etc)?
How to match server-side HTML to
client-side DOM?
16
Slide 17
Slide 17 text
MPA with Prerendering
Rendering
Logic
State
Business
Logic
Rendering
Logic
Routing
JSON
API
State
Business
Logic
Routing Hydration
JSON
Client
Slide 18
Slide 18 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 19
Slide 19 text
SSR with Rich Components
Rendering
Logic
State
Business
Logic
Rendering
Logic
Routing
as components
with component state
using progressive enhancement
Slide 20
Slide 20 text
Latency
Browser DC
CDN
Cloudflare,
Vercel, Netlify…
Latency Latency
Slide 21
Slide 21 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 22
Slide 22 text
ESR
JSON
Client
JSON
API
Routing
Rendering
Logic
State
Business
Logic
Business
Logic
and/or
State and/or
Slide 23
Slide 23 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 24
Slide 24 text
Units of Deployment
You can split your code into multiple
Browser Apps (Angular Apps etc.)
Components in the same App
“Serverless Functions”
Microservices
Self Contained Systems
…
Slide 25
Slide 25 text
This influences…
Your granularity of deployment
The independence of deployments
The integration patterns between them
Slide 26
Slide 26 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 27
Slide 27 text
More Web Architecture?
innoq.com/web-schulung
June, 16. – 18.
Remote