The Grand Unifying Architecture
These are notes from Ryan Carniato’s stream, Exploring the Grand Unifying Architecture of Frontend, which runs 5 hours and 45 minutes. His written version is The Grand Unifying Architecture of Frontend.
He places signals, server components, live views, and local-first systems on a single architectural map, then previews how Solid 2 aims to cover all of it. The bundle-size and roadmap claims below are his.
AI, Mindsets, and Framework Primitives
He opens with AI’s impact on software engineering. His view is that AI has not replaced senior developers but made their judgment more valuable. With a sound architecture, AI can build a prototype in minutes. It still falls flat on subtle framework boundaries and on physics: it does not solve network latency or memory limits.
Good developer experience, then, is less about typing fewer characters and more about having the right primitives: signals, async state, and clear reactivity. He covers those primitives in A Hands-on Introduction to Fine-Grained Reactivity.
Convergence and Single-Flight Mutations
Framework categories are collapsing. Astro, Next.js, Nuxt, and SolidStart are all adopting out-of-order streaming and server actions. With the feature lists converging, the real differences are architectural: where navigation runs, when rendering happens, and whether the server or the client owns UI state.
Single-flight mutations replace the usual pair of requests, a mutation POST followed by a refetch. One HTTP response returns the result of the action together with the refreshed HTML partials or signal payload. That keeps client and server state from drifting apart and removes the double waterfall. He covers streaming and request waterfalls in Server Rendering in JavaScript: Optimizing Performance.
The Four-Quadrant Map of Frontend
The centerpiece is a 2D matrix with 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).
| Server UI state | Client UI state | |
|---|---|---|
| Persistent connection (WebSockets/SSE) | Top-left: LiveView, DataStar, Phoenix | Top-right: local-first, sync engines, Replicache |
| Per-request (stateless HTTP) | Bottom-left: classic MPA, HTMX, server components | Bottom-right: SPA, CSR client frameworks |
On this map, HTMX, React Server Components, and local-first sync engines are coordinates rather than rival philosophies. His claim is that fine-grained signals let an app move between quadrants without rewriting its core logic.
Server Components as Fetchable Templates
React serializes virtual DOM trees over the wire as JSON. Solid treats server components as fetchable HTML templates instead, which avoids double serialization: rather than sending raw JSON alongside the HTML for hydration, the server streams template strings with DOM marker coordinates. He argues this is much lighter on the network.
Paired with Server-Sent Events, the same templates become live server components: DOM morphs streamed over a persistent connection, with optimistic updates on the client.
Solid 2 handles those updates with optimistic reconciliation. The client renders the assumed result immediately. The server stays the source of truth, and later SSE updates reconcile the client without visible flicker.
Bundle Size Trade-Offs and Solid 2 Roadmap
He is upfront about the cost. By his estimate, unifying all four quadrants in one runtime pushes the baseline bundle from Solid’s 7KB to roughly 40-60KB minified and gzipped. The extra weight pays for edge-case correctness: async signal isolation, transaction rollbacks, memory management, and runtime diagnostics. He also previews a DevTools performance track that traces reactive signals in Chrome timeline profiles.
He has written about size separately in Server Rendering in JavaScript: Optimizing for Size.
Languages, Tooling, and Open Source
The last stretch covers syntax versus semantics, including TanStack TSRX, and how future languages should be designed. He discusses José Valim’s essay on designing languages for AI agents, which puts 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.
Takeaway
The unifying idea is not a single rendering strategy but a shared reactive foundation under all four quadrants. Solid 2 aims to move across them while keeping optimistic UI and server authority, and its larger runtime is the price of making those moves safe.