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

AdequateJS: Where should I run my Code?

Lucas Dohmen
December 09, 2020
39

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

    View full-size slide

  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

    View full-size slide

  3. Latency
    Browser DC
    Your own, AWS,
    GC, Azure, Digital
    Ocean, Linode…

    View full-size slide

  4. State
    Business
    Logic
    Routing
    Rendering
    Logic

    View full-size slide

  5. LUCAS DOHMEN
    Senior Consultant
    at INNOQ Deutschland GmbH
    Web Architecture & Development

    View full-size slide

  6. SSR
    State
    Business
    Logic
    Rendering
    Logic
    Routing

    View full-size slide

  7. State
    Business
    Logic
    Rendering
    Logic
    Routing

    View full-size slide

  8. State
    Business
    Logic
    Routing
    Rendering
    Logic

    View full-size slide

  9. State
    Business
    Logic
    Routing
    Rendering
    Logic
    JSON
    API
    JSON
    Client
    ?
    State
    Business
    Logic

    View full-size slide

  10. SPA
    Rendering
    Logic
    State
    Business
    Logic
    JSON
    API
    State
    Business
    Logic
    JSON
    Client
    Routing

    View full-size slide

  11. Why Routing?
    Bookmarks?
    Deep links?
    Reload?
    Solution:
    Store some app state in the URI
    11

    View full-size slide

  12. MPA
    Rendering
    Logic
    State
    Business
    Logic
    JSON
    API
    State
    Business
    Logic
    Routing
    JSON
    Client

    View full-size slide

  13. Prerendering
    13

    View full-size slide

  14. Rendering
    Logic
    State
    Business
    Logic
    Rendering
    Logic
    Routing
    JSON
    API
    State
    Business
    Logic
    Routing
    JSON
    Client

    View full-size slide

  15. Prerendering
    15

    View full-size slide

  16. Hydration
    How to simulate readiness?
    What about Events (Clicks etc)?
    How to match server-side HTML to
    client-side DOM?
    16

    View full-size slide

  17. MPA with Prerendering
    Rendering
    Logic
    State
    Business
    Logic
    Rendering
    Logic
    Routing
    JSON
    API
    State
    Business
    Logic
    Routing Hydration
    JSON
    Client

    View full-size slide

  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

    View full-size slide

  19. SSR with Rich Components
    Rendering
    Logic
    State
    Business
    Logic
    Rendering
    Logic
    Routing
    as components
    with component state
    using progressive enhancement

    View full-size slide

  20. Latency
    Browser DC
    CDN
    Cloudflare,
    Vercel, Netlify…
    Latency Latency

    View full-size slide

  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

    View full-size slide

  22. ESR
    JSON
    Client
    JSON
    API
    Routing
    Rendering
    Logic
    State
    Business
    Logic
    Business
    Logic
    and/or
    State and/or

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  25. This influences…
    Your granularity of deployment
    The independence of deployments
    The integration patterns between them

    View full-size slide

  26. It’s your choice
    Only View Logic
    App
    with Routing?
    Only Caching (and ESI)
    App
    only Rendering?
    State?
    Only Database
    App
    with Rendering?

    View full-size slide

  27. More Web Architecture?
    innoq.com/web-schulung
    June, 16. – 18.
    Remote

    View full-size slide