The Grand Unifying Architecture
These are notes from Ryan Carniato’s stream, Exploring the Grand Unifying Architecture of Frontend. His written version is The Grand Unifying Architecture of Frontend.
The breakdown times the stream at 5h 45m. He walks through how signals, server components, live views, and local-first architecture sit on one spectrum. The 7KB to 40-60KB bundle claim and the Solid 2 claims below are his, from that stream.
AI, Mindsets, and Framework Primitives
00:00:00-00:35:25
He starts with AI’s impact on software engineering. AI has not eliminated senior developers, he argues. It validates them. If the architecture is sound, AI helps build prototypes in minutes. It falls flat on subtle framework boundaries and on physics such as latency. AI does not solve network latency or memory limits.
Developer experience, in his account, is not only typing fewer characters. It is having correct primitives: signals, async state, and clear reactivity. He wrote the primitives up earlier in A Hands-on Introduction to Fine-Grained Reactivity.
Convergence & Single-Flight Mutations
00:35:25-01:24:36
Framework categories are collapsing. Astro, Next.js, Nuxt, and SolidStart are all adopting out-of-order streaming and server actions. What separates them is not a feature list. It is three things: navigation location, rendering timing, and state ownership.
Single-flight mutations replace a mutation POST followed by a separate data refetch. One HTTP response returns the processed action together with the newly invalidated HTML partials or signal payload. That prevents client-server state drift and removes the double waterfall. His earlier notes on streaming and request waterfalls are in Server Rendering in JavaScript: Optimizing Performance.
The Four-Quadrant Map of Frontend
02:01:24-02:37:26
The centerpiece is a 2D matrix. Every web paradigm sits on two axes: who owns UI state (server or client), and how long the connection lasts (one stateless HTTP request, or a persistent WebSocket or SSE stream).
| Per-request (stateless HTTP) | Persistent connection (WebSockets/SSE) | |
|---|---|---|
| Server UI state | Bottom-left: classic MPA, HTMX, server components | Top-left: LiveView, DataStar, Phoenix |
| Client UI state | Bottom-right: SPA, CSR client frameworks | Top-right: local-first, sync engines, Replicache |
HTMX, React Server Components, and local-first sync engines are coordinates on that map. With fine-grained signals, he says you can move between quadrants without rewriting the core app logic.
Server Components as Fetchable Templates
02:37:26-03:27:01
React serializes virtual DOM trees over the wire as JSON. Solid, as he describes it, treats server components as fetchable HTML templates and avoids double serialization. You do not send raw JSON and the HTML for hydration. You stream template strings with DOM marker coordinates, which he calls much lighter on the network.
Paired with server-sent events, that becomes what he calls live server components: streaming DOM morphs over a persistent pipe, with optimistic updates on the client.
Optimistic server reconciliation, in his Solid 2 framing: the client renders optimistic assumptions immediately, the server stays the source of truth, and incoming SSE updates reconcile without UI flicker.
Bundle Size Trade-Offs & Solid 2 Roadmap
03:14:43-04:10:54
He is upfront about the trade-off. Unifying all four quadrants in one runtime, he says, pushes the baseline bundle from Solid’s 7KB to roughly 40-60KB minified and gzipped. The extra weight is edge-case correctness: async signal isolation, transaction rollbacks, memory management, and runtime diagnostics. He also previewed a DevTools performance track that traces reactive signals in Chrome timeline profiles.
Size is a theme he has written about separately in Server Rendering in JavaScript: Optimizing for Size.
Languages, Tooling, and Open Source
04:19:48-05:41:32
The last stretch covers syntax versus semantics, including TanStack TSRX, and how future languages should be designed. He looks at José Valim’s essay on designing languages for AI agents: local context and explicit queries, ahead of syntactic sugar for humans.
He closes on open-source sustainability, non-JavaScript backends such as Rust and Go implementing signal protocols, and Solid 2 nearing release-candidate status.
The close of the breakdown is his: all four quadrants share one reactive signal foundation. Solid 2, as he tells it, spends those extra kilobytes on transaction guarantees. The server remains the authority, and the client still gets optimistic UI.