AdequateJS: Where should I run my Code?

A modern Web application will, of course, be implemented in JavaScript, creates the DOM nodes on the client-side, and only communicates with the server to get some data in the JSON format. That seems to be common wisdom nowadays. But is server-side HTML just a feature of your client-side framework, and is progressive enhancement a relict of the past?

In this talk, I want to present the different styles of modern Web applications and discuss the advantages and disadvantages.

Transcript

1. 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
2. 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
3. Latency Browser DC Your own, AWS, GC, Azure, Digital Ocean, Linode…
4. State Business Logic Routing Rendering Logic
5. LUCAS DOHMEN Senior Consultant at INNOQ Deutschland GmbH Web Architecture & Development
6. SSR State Business Logic Rendering Logic Routing
7. State Business Logic Rendering Logic Routing
8. State Business Logic Routing Rendering Logic
9. State Business Logic Routing Rendering Logic JSON API JSON Client ? State Business Logic
10. SPA Rendering Logic State Business Logic JSON API State Business Logic JSON Client Routing
11. Why Routing? Bookmarks? Deep links? Reload? Solution: Store some app state in the URI 11
12. MPA Rendering Logic State Business Logic JSON API State Business Logic Routing JSON Client
13. Prerendering 13
14. Rendering Logic State Business Logic Rendering Logic Routing JSON API State Business Logic Routing JSON Client
15. Prerendering 15
16. Hydration How to simulate readiness? What about Events (Clicks etc)? How to match server-side HTML to client-side DOM? 16
17. MPA with Prerendering Rendering Logic State Business Logic Rendering Logic Routing JSON API State Business Logic Routing Hydration JSON Client
18. 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
19. SSR with Rich Components Rendering Logic State Business Logic Rendering Logic Routing as components with component state using progressive enhancement
20. Latency Browser DC CDN Cloudflare, Vercel, Netlify… Latency Latency
21. 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
22. ESR JSON Client JSON API Routing Rendering Logic State Business Logic Business Logic and/or State and/or
23. 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
24. 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 …
25. This influences… Your granularity of deployment The independence of deployments The integration patterns between them
26. It’s your choice Only View Logic App with Routing? Only Caching (and ESI) App only Rendering? State? Only Database App with Rendering?
27. More Web Architecture? innoq.com/web-schulung June, 16. – 18. Remote