Abracadabra: The vanishing network

Dodds recalls working on a Backbone app at Domo, where adding a checkbox took two weeks because the difficult part was loading and updating its data. That experience led him to ask how the network could disappear from developers’ day-to-day product code.

He builds a counter as a multi-page app using a POST form and Post/Redirect/Get, letting the browser handle much of the interaction. He then adds JavaScript for pending UI and focus handling, but must manage fetch requests, form data, errors, and HTML-versus-JSON responses while preserving the form’s basic behavior.

A single-page app removes duplicated server and client rendering, but shifts more work into client-side state and network management. Dodds shows fetch initialization and updates with loading and error states, and notes that users on slow connections wait for JavaScript before the app can show its pending UI.

With a progressively enhanced single-page app, a framework such as Remix can load data on the server and handle form actions while still providing client-side pending UI. Dodds says this reduces network code in the component, though route-centered data loading makes reusable components harder to integrate across pages.

Dodds demonstrates React Server Components with a server action that updates the database, while the client receives a reference to the action rather than its server code. The app retains form behavior without JavaScript, and adding a client component for pending UI keeps that interaction alongside the form that needs it.