Frontend First

Sam joins Lane Wagner in a crossover episode with the Backend Banter podcast. They talk about abstractions in frontend and backend frameworks, what JavaScript is doing differently from other languages and frameworks, why the frontend should drive the backend even if you're building in a server-side framework, and what's so special about React Server Components.

Timestamps:

• 0:00 - Intro
• 2:12 - When abstractions leak
• 6:37 - Recap of Sam's BigSky talk
• 10:51 - What is JavaScript doing differently?
• 19:10 - Why frontend frameworks should have more backend features
• 24:04 - Strong opinions on a library level
• 30:29 - Shipping more standardized interfaces
• 37:06 - The frontend should be driving everything in the backend
• 39:12 - Your types should flow from the database to the frontend, but not your product decisions
• 46:53 - React Server Components

Link:

• Backend Banter

Sam and Ryan read and discuss a fantastic interactive blog post about queueing in HTTP written by Sam Rose.

Timestamps:

• 0:00 - Intro
• 6:57 - Queueing: An interactive study of queueing strategies
• 9:05 - Why do we need queues?
• 13:16 - FIFO and timing out
• 17:55 - LIFO
• 20:58 - Priority queues
• 25:21 - Active queue management
• 29:08 - Comparing queues
• 36:32 - Conclusion

Links:

• Queueing: An interactive study of queueing strategies
• Up and Down the Ladder of Abstraction

Sam and Ryan discuss the new features in React 19 that will specifically benefit developers building single-page applications. They talk about how Suspense and Transitions let developers "teach" React about when their apps are in a loading or a pending state, how Client Actions improve upon using events in React 18 to handle data mutations, and how Actions enable React Components to automatically render and discard optimistic updates without any knowledge of the application's data layer. They also discuss several new Hooks like useOptimistic, useFormStatus, useActionState, and useOptimistic.

Timestamps:

• 0:00 - Intro
• 2:19 - How SPAs are built in React 18
• 5:29 - How Suspense made loading a first-class concept in React
• 7:48 - The problem with data writes in React 18
• 10:37 - What are Client Actions?
• 12:05 - What does it look like to use Actions?
• 14:13 - What are the benefits of Actions?
• 18:46 - How does React 19 change the Optimistic UI story?
• 29:40 - Working with Transitions outside of Actions
• 36:06 - The useActionState Hook
• 37:51 - Using Transitions to keep the old UI rendered and responsive
• 41:25 - How Transitions enable better composition patterns in third-party libraries
• 43:55 - Building a SortableList that flips between being controlled and uncontrolled

Links:

• React Unpacked: A Roadmap to React 19

Sam tells Ryan about a recent talk he gave at BigSkyDevCon. They chat about how backend frameworks are raising the ceiling of what UIs they’re capable of delivering, how frontend frameworks are raising the floor of what backend features they come bundled with, and what each community can learn from the other.

Timestamps:

• 0:00 - Intro
• 4:23 - Recap of Ryan Florence’s talk
• 6:49 - Overview of "High floor, high ceiling"
• 10:02 - Cohesion is the biggest strength of backend frameworks
• 17:10 - Why doesn’t Rails for JavaScript exist?
• 23:48 - Locality of behavior is the biggest strength of frontend frameworks
• 33:14 - The use of lexical scope in React
• 50:27 - Which community is raising both the floor and ceiling the most?

Links:

• "High floor, high ceiling" talk

Sam and Ryan talk about the difference between the costs of building a feature and the benefits that feature brings to our end users. They discuss how libraries and frameworks can lower the technical cost of building a given feature, how Ryan Florence framed this calculation in his talk at Big Sky Dev Con, and how sometimes developers’ opinions and tastes about tech can smuggle their way from the cost side of the equation into the benefit side.

Topics include:

• 0:00 - Intro
• 6:53 - How Ryan Florence framed the problem in his talk “Mind the Gap”
• 14:38 - How frontend frameworks and backend frameworks both have their own ways of crossing the network gap
• 19:11 - How Network-Sensitive Interactions force technologies to grapple with both server and client environments
• 23:02 - How React is trying to lower the cost of moving interactions between the server and client with Server Components and Server Actions
• 26:53 - Why “Use the right tool for the job” doesn’t capture the dynamic requirements of living software
• 31:53 - How discussions about the product benefits of a feature and the technical costs of that feature are often conflated with each other
• 34:08 - A thought experiment from economics that highlights how uncertainty plays a role in the estimation of product benefits
• 56:54 - How to think about tech choice independently of the estimation of product benefits

Links:

• "Mind the Gap" by Ryan Florence
• Zero-JavaScript View Transitions in Astro

Ryan tells Sam about his experiments with using the new View Transitions API in a React photo gallery app. He talks about how he likes the flexibility of the API, how to think about integrating it into any client-rendered app regardless of the framework, and how he used a Promise with an Effect to tie a View Transition to a React Transition.

Topics include:

• 0:00 - Intro
• 1:11 - What it’s like to integrate View Transitions with React
• 7:30 - How View Transitions work
• 16:09 - Building a gallery that animates photos across page navigations
• 19:38 - How to use startViewTransition for enter/update/exit animations
• 26:52 - Using a Promise to link a View Transition to a React Transition
• 43:02 - Do View Transitions replace framework-specific animation libraries?
• 45:17 - Using DevTools to preview and tweak transitions

Links:

• easings.net
• Ionic Framework's animation curves
• Shu’s next-view-transitions library

Sam tells Ryan about his experience setting up an in-browser code editor with CodeMirror that he plans on using for blog posts and code recipes, as well as what he thought about using Radix Themes for the first time in earnest on a side project of his currently styled with Tailwind.

Topics include:

• 0:00 - Intro
• 4:01 - Building an authoring tool with CodeMirror
• 18:47 - Refactoring Tailwind to Radix Themes

Links:

• CodeMirror
• Sam’s YouTube video on Radix Themes
• Radix Themes docs

Sam and Ryan talk about why it’s better to think of throw as a general-purpose JavaScript language feature rather than something that should only be used for error handling. They discuss the ambiguity around the phrase “error handling”, situations that call for dealing with errors locally vs. globally, and how throw can be useful for non-error control flow. They also discuss the problems with trying to shoehorn dynamic features into a static site.

Topics include:

• 0:00 - Intro
• 4:07 - Error handling vs. throw-try/catch
• 23:34 - Errors vs. Exceptions
• 31:52 - How Next.js uses throw for non-error control flow
• 40:44 - Adding a dynamic feature to a static site

Links:

• Global progress in Next.js
• What color is your function
• Algebraic Effects for the Rest of Us

Sam and Ryan discuss the core values of the Next.js framework, and how those values motivate several of the framework’s design decisions. They talk about caching, why layouts don’t have access to the URL, and why the router doesn’t expose navigation events, as well as how developers should think about extending Next’s functionality with their own application code.

Topics include:

• 0:00 - Intro
• 2:58 - Why don’t layouts re-render in Next.js?
• 7:10 - Push-based vs. pull-based rendering
• 8:56 - Thinking about re-renders in a pure React app
• 11:07 - Why Server Actions need to call the revalidate* APIs
• 12:26 - Why doesn’t Next.js pass the request to every page and layout?
• 31:40 - Immediate-mode rendering vs. “Do the least amount of work possible”
• 51:54 - Is opting-in to more re-renders framework fighting?
• 53:44 - Helping users by communicating the philosophy
• 56:25 - Why doesn’t Next.js expose global router events?
• 1:00:17 - Why it’s important to understand Next’s design decisions when choosing it for your next project

Sam talks to Ryan about refactoring an MDX blog post to a React Server Component. They discuss how RSC’s ability to render server-side content with “client-side holes” turns out to replace MDX for many uses cases. They also talk about other tools that are (surprisingly) a conceptual subset of the RSC architecture, such as custom Webpack loaders.

Topics include:

• 0:00 - Intro
• 5:05 - The Next.js happy path for MDX: Local files
• 11:15 - Exploring remote MDX content with mdx-remote
• 14:46 - Separating the serializable parts of MDX from the runtime imports
• 17:13 - Realizing that RSC covers the same problem space, and ditching MDX
• 26:50 - Exploring other APIs and plugin ecosystems that RSC could replace: Webpack loaders, next/image, and Liquid templates
• 32:11 - React’s vision for RSCs
• 35:18 - How RSCs could replace build-time plugin APIs
• 44:51 - Replacing MDX with Markdoc, Shiki, and custom node code during render

Links:

• Markdoc
• Shiki