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

Beyond the Single-Page App: React and the Servers that Serve it

Beyond the Single-Page App: React and the Servers that Serve it

A typical React app counts on multiple backend processes to serve it, render it, and keep things in sync. But between SPAs, CDNs, SSR, and OSI, it's not always easy to decide how the pieces fit together. While surveying the many interactions between React and its servers, we'll build up a practical model for deciding when, where, and how to use them.

RJ Zaworski

June 20, 2019
Tweet

More Decks by RJ Zaworski

Other Decks in Programming

Transcript

  1. Web apps, a brief history It started with the server

    ★ Static documents + hyperlinks ★ State maintained by server ★ Commands? HTML <form> and HTTP POST 1993 1995 1999 2005 2013
  2. Web apps, a brief history Clients get smarter ★ Dynamic

    Document Object Model ★ JavaScript: mutate the DOM at runtime ★ Cookies: shared client/server state 1993 1995 1999 2005 2013
  3. Web apps, a brief history Asynchronous JavaScript and XML (AJAX)

    ★ XMLHttpRequest: fetch data or page fragments ★ State maintained by client and server 1993 1995 1999 2005 2013
  4. Web apps, a brief history Client-side applications ★ JavaScript frameworks

    ($) ★ Abstract browser APIs ★ Client-only UI state ◦ memory ◦ document ◦ localStorage 1993 1995 1999 2005 2013
  5. Web apps, a brief history React ★ Rethink the DOM

    ★ Focus on the UI ◦ BYO state container... ◦ ...app structure ◦ ...external libs/APIs 1993 1995 1999 2005 2013
  6. Expectations Everyone wants something from our web app ★ Users:

    functional, responsive ★ Dev teams: easy to build, maintain ★ Software agents: neighborly
  7. Development goals 1. Meet { User, Dev, Software } Expectations

    2. Spend as much time as possible shipping products!
  8. Let’s launch a web app ★ Fetch HTML ★ Fetch

    page assets ★ Render HTML ★ Parse and run JS ◦ Update DOM ◦ Handle Input ◦ Repeat
  9. Why React? How about a DOM that’s... ★ Declarative ★

    Immutable (stateless) ★ Componentized (encapsulated) ★ Consistent
  10. Why React? Simplify client-side application development ★ Fewer server round-trips

    ★ Limited, scheduled DOM updates This feels fast!™
  11. Great news for the UI, but... ★ Bring your own

    State Container ★ ...and Business logic Output Renderer Component Tree Application Logic State + Context React React React React
  12. Why Servers? Because they’re useful. ★ Store app assets ★

    Validate, persist, recall app state ★ Consolidate logic ★ Mediate between Software Agents
  13. But there’s a catch. ★ New technology to learn ★

    More moving parts ★ State in multiple places More { tech, complexity, synchronization } = less time building great user interfaces!
  14. Remember that web app? ★ Fetch HTML ★ Fetch page

    assets ★ Render HTML ★ Parse and run JS ◦ Update DOM ◦ Handle Input ◦ Repeat SPA
  15. React SPAs ★ Responsive (client-rendered UI) ★ React’s “natural” environment

    ★ Not without complications ◦ Imperative browser APIs ◦ Mutable DOM ◦ State
  16. React SPAs - Prevailing Wisdom Users :^| Responsive once app

    bundle is loaded Dev teams :^) One tech stack only! Software agents :'( Must render JS application
  17. Server opportunity: performance ★ Fetch HTML ★ Fetch page assets

    ★ Render HTML ★ Parse and run JS ◦ Update DOM ◦ Handle Input ◦ Repeat // Minify / compress data // Minify / compress / cache // Ditto app assets SPA // Split bundle
  18. SPA servers: build or buy? ★ Static hosts ◦ Netlify

    ◦ Surge ★ Backends-as-a-Service ◦ AWS Amplify ◦ Firebase
  19. Remember that web app? ★ Fetch HTML ★ Fetch page

    assets ★ Render HTML ★ Parse and run JS ◦ Update DOM ◦ Handle Input ◦ Repeat // SSR via react-dom/server SSR
  20. Server-side rendering Two goals: 1. Optimize critical rendering path a.

    Show the user something, stat b. Avoid script-blocking 2. Improve access for software agents
  21. Static Generation ★ React ⇒ HTML at compile time ★

    Compare with HTML templating ◦ Documents composed of components ◦ Your renderer may vary ★ Build or buy? ◦ Static site generator: GatsbyJS
  22. React SSR - Prevailing Wisdom Users :^| Fast load, slow

    updates Dev teams :^| One (iffy) tech stack only Software agents :^) HTML is easy to parse!
  23. Server opportunity: compatibility ★ Fetch HTML ★ Fetch page assets

    ★ Render HTML ★ Parse and run JS ◦ Update DOM ◦ Handle Input ◦ Repeat SSR * Web crawlers * Screen readers * Browsers * ???
  24. SSR: questions to ask ★ Does abstraction make sense? ★

    Where does state live? <!doctype html> <html> <head> <!-- How do we set <meta /> tags? How do we set the page <title />? …? --> </head> <body> <div id="js-react-app"> <!-- Render React app here! → </div> </body> </html>
  25. SSR libs: build or buy? ★ Static generation ◦ GatsbyJS

    ★ On-demand ◦ Next.js ◦ Razzle
  26. That web app, hybrid edition ★ Fetch HTML ★ Fetch

    page assets ★ Render HTML ★ Parse and run JS ◦ Update DOM ◦ Handle Input ◦ Repeat // SSR via react-dom/server // SPA via react-dom SPA SSR
  27. Client-server hybrids Different flavors of “hybrid” ★ Progressively rendering ★

    Isomorphic applications ★ ...and everything in between
  28. The Good Something for everyone! ★ All the benefits of

    Server-side Rendering ★ All the benefits of an SPA ★ And we can reuse components!
  29. The Bad Development overhead ★ Devs working in two platforms

    ★ Added build/deploy/runtime complexity ★ Library support—YMMV
  30. Hybrid React - Prevailing Wisdom Users :^) Fast load, fast

    updates Dev teams :'( More tech to wrangle Software agents :^| HTML is easy to parse (if it’s up to date)!
  31. Hybrid React - Server Opportunities ★ Fetch HTML ★ Fetch

    page assets ★ Render HTML ★ Parse and run JS ◦ Update DOM ◦ Handle Input ◦ Repeat SPA SSR “...Yes!”
  32. The Bottom Line ★ Meet { User, Dev, Software }

    Expectations ◦ Old problems, new tools ◦ React is one piece of the puzzle ◦ Servers still matter! ★ Save time for new development ◦ Lazy wins? ◦ Keep it simple! 1993 1995 1999 2005 2013