Frontend First

Tom Occhino, Chief Product Officer at Vercel and former Engineering Director at Facebook, joins Sam to talk about the pivotal moments in React's history. He talks about how React popularized the ideas of declarative rendering and unidirectional data flow, how GraphQL furthered React's goal of co-locating all the concerns of a particular piece of UI, the problems that GraphQL led to at Facebook and how Relay solved them, and how Suspense, Server Components, and PPR are the generalized spiritual successors to the stack used at Facebook.

Timestamps:

• 0:00 - Intro
• 2:53 - Declarative rendering as React's legacy
• 8:12 - How GraphQL enabled complex components to be fully self-contained
• 20:12 - How React's goal has always been to co-locate all the concerns of a particular piece of UI
• 22:58 - The problem with co-locating GraphQL with components, and how Relay solved it
• 26:28 - How RSC is the generalized spiritual successor to BigPipe and GraphQL
• 34:46 - What PPR is, and how it and Suspense fit into this story
• 55:55 - The general paradigm shift of getting static code to the device as soon as possible

Links:

• Tom Occhino with Ben Dunphy
• React: The Documentary
• React Roundtable with Andrew Clark and Sebastian Markbåge
• Tom Occhino on Twitter

Sam and Ryan talk about render props in React. They discuss where they came from, how Hooks superseded them for sharing stateful logic, how data attributes compare to them for customizing styling, and how for certain complex components like forms they're still a great solution for accessing slices of internal state.

Timestamps:

• 0:00 - Intro
• 3:40 - Where did render props come from?
• 6:01 - How hooks replaced many use cases for render props
• 8:14 - Using render props for custom styling
• 10:32 - Data attributes vs. render props for custom styling
• 16:43 - Using render props to peek into an uncontrolled component's internal state
• 21:05 - Forms example and using render props for a smaller public API
• 24:10 - React docs mention of render props
• 25:48 - Where render props shine

Links:

• Headless UI Menu
• Radix Forms
• React Aria Forms
• React docs - Render props
• Our upcoming course on React Component Patterns
• Email Sam
• Email Ryan

Sam and Ryan discuss controlled and uncontrolled components in React. They talk about how uncontrolled components can be thought of as components that manage their own internal state, why you should model your complex React components after the simpler APIs of native HTML elements like inputs, why you shouldn't try to make components that are both controlled and uncontrolled, and why making a new component boundary is sometimes all you need to make your custom components behave more predictably.

Timestamps:

• 0:00 - Intro
• 1:41 - What are controlled and uncontrolled components?
• 6:11 - How to change a component from uncontrolled to controlled
• 8:48 - How do you decide when to use a controlled or uncontrolled component?
• 12:00 - Sortable table example and a single source of truth
• 15:27 - Is it always either controlled or uncontrolled?
• 21:09 - Color picker example and not exposing internal state
• 28:46 - Sortable list example with Framer Motion
• 39:45 - Component boundaries and wearing two hats: the library author vs. library consumer
• 41:43 - How do you know if you are using the wrong approach?

Links:

• New course: Advanced React Component Patterns
• React docs: Controlled and uncontrolled components
• React docs: Storing state from previous renders
• Email Sam
• Email Ryan
• Frontend First on Twitter

Sam and Ryan talk about the pattern of building unstyled components with React. They discuss why unstyled components were created, how they improve upon composition patterns from UI libraries like Bootstrap, how they can be used to share behavior and logic without prescribing any styling opinions, and how they fit into a larger collection of React patterns that can be used to build more powerful components that avoid premature abstractions.

Timestamps:

• 0:00 - Intro
• 1:36 - What are unstyled components?
• 2:24 - How do unstyled components improve upon earlier patterns?
• 6:44 - Why would you want to use an unstyled component?
• 9:58 - How can you compose an unstyled component with a styled component?
• 16:41 - How to decide which pattern is best suited for the code you want to share
• 19:36 - Using patterns that preserve React's locality of behavior
• 24:49 - How do you know if an abstraction is good?
• 32:54 - Build UI's upcoming course on Advanced React Component Patterns

Links:

• Build UI's newest course: Advanced React Component Patterns
• Sam's YouTube video on Recursive Components
• Email Sam
• Email Ryan

Sam and Ryan talk about what sorts of capabilities a tool should have to be considered a web framework. They discuss how frameworks tackle the complexity of getting different systems to communicate with each other, how good frameworks embrace the strengths and patterns of the language they're written in, and why frameworks and services are not in opposition to each other.

Timestamps:

• 0:00 - Intro
• 3:58 - Adapter pattern and cohesive boundaries
• 9:43 - Rails is Omakase
• 13:47 - Configurable, but still cohesive
• 17:04 - Frontend frameworks try to “work with everything”
• 21:42 - Does composition mean a React framework will look different than Rails?
• 29:29 - Why taste still matters
• 34:20 - A framework is a shell of adapters and a brain that coordinates them
• 35:16 - When using services, complexity still exists in the in-between
• 37:59 - A fullstack dev is someone who acknowledges and understands how all the parts come together
• 44:06 - Tweets about the hard problems that Laravel tackles, and the deep design it took to get there
• 49:15 - Frameworks should embrace the strengths and patterns of their language and ecosystem
• 50:35 - Why RSCs and Server Actions mean the “Rails for JS” may end up looking nothing like Rails
• 52:11 - Why users of a “fullstack framework” shouldn’t even care about where the code is running
• 55:31 - Why libraries or services that are easy to install and set up are not a replacement for frameworks

Links:

• Sam's BigSkyDevCon talk
• Rails is omakase
• Povilas' Laravel tweet
• Mary's Laravel tweet
• Build UI's upcoming React Component Patterns course
• Email Sam
• Email Ryan

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