Slide 1

Slide 1 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 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