HTML over WebSockets: building real-time SPAs while dodging the JavaScript stack
The dominant single-page-app model splits work across two codebases: a JavaScript framework rendering the view and an API shipping JSON, coordinated through brittle contracts. HTML over WebSockets discards that split. The server renders finished HTML and streams it over a persistent, bidirectional channel; the browser’s only job is to drop each fragment into place and relay events. All rendering logic stays in the back-end, in one language, with no API in between. Popularized by Chris McCord’s 2019 Phoenix LiveView demo — a working real-time Twitter clone built in 15 minutes without React, Angular, or Vue — the pattern now has clones across most language ecosystems, including Django LiveView.
The payoff is architectural simplicity plus real-time behavior. One rendering engine, no separate API, server-held per-client state, and a direct line to the database. Because the channel stays open, the server can push updates and broadcast to every connected client, making chat, dashboards, and multiplayer views nearly free. Skipping repeated TCP handshakes and HTTP headers cuts per-action latency — the author notes the win comes from avoiding round trips and sending assembled markup, not from WebSockets being inherently faster than HTTP/2 or HTTP/3. Server-side escaping also renders injected
The tradeoffs are real. Holding a socket and per-client state in memory raises server cost, and horizontal scaling demands shared state (Redis as a channel layer in Django’s case), though the author reports handling 600 concurrent readers on Raspberry Pi–class hardware. High physical latency erodes the instant feel, and there is no offline mode — a dropped connection stops the app, forcing deliberate reconnection design. The learning curve, from running a WebSocket server to mastering the LiveView pattern, is steeper than pasting in a script tag. The piece frames WebSockets as one of three hypermedia transports, alongside request-by-request HTTP (htmx) and one-way SSE (Datastar), each suited to different needs.
Read the full article
Continue reading at Hacker News →This is an AI-generated summary. Read the original for the full story.