Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AdequateJS: Where should I run my Code?

B049f961d55097ef9104ff4b275a517b?s=47 Lucas Dohmen
December 09, 2020
15

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.

B049f961d55097ef9104ff4b275a517b?s=128

Lucas Dohmen

December 09, 2020
Tweet

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