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

AdequateJS: Where should I run my Code?

Lucas Dohmen
December 09, 2020
45

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.

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. Hydration How to simulate readiness? What about Events (Clicks etc)?

    How to match server-side HTML to client-side DOM? 16
  4. MPA with Prerendering Rendering Logic State Business Logic Rendering Logic

    Routing JSON API State Business Logic Routing Hydration JSON Client
  5. 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
  6. SSR with Rich Components Rendering Logic State Business Logic Rendering

    Logic Routing as components with component state using progressive enhancement
  7. 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
  8. ESR JSON Client JSON API Routing Rendering Logic State Business

    Logic Business Logic and/or State and/or
  9. 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
  10. 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 …
  11. It’s your choice Only View Logic App with Routing? Only

    Caching (and ESI) App only Rendering? State? Only Database App with Rendering?