Frontend First

A podcast about modern UI development on the web.

Hosted by @samselikoff and @ryantotweets.

[Sam Selikoff @samselikoff]

Ep. 200 of @frontendfirstfm is live!

We had a fun time riffing on useActionState: how thinking of the returned action like `enqueue()` helps clarify the behavior, and why you probably shouldn't just pass server actions in as the first arg.

Enjoy!

https://t.co/PJ4zojrTAf

[Sam Selikoff @samselikoff]

Ep. 199 of @frontendfirstfm is out!

We talk about using Cloudflare Tunnel for local development, the new React Compiler beta release, and why reading or writing refs during render violates the rules of React.

https://t.co/dMyGLg2Dtb

[Sam Selikoff @samselikoff]

Ep. 197 of @frontendfirstfm is out!

We talk about building useAnimatedText, why you should avoid using state changes to approximate events in React, and the flexibility of Catalyst.

Hope you enjoy!

[Sam Selikoff @samselikoff]

Ep. 197 of @frontendfirstfm is out!

We weigh in on the Next.js self-hosting debate, and discuss how frameworks and infra evolve together over time, from Heroku/Rails to Vercel/Next.js.

Hope you enjoy!

(0:00) - Intro

(3:03) - Heroku and the Twelve-Factor App

(7:39) - GitHub Pages and static sites

(13:57) - Serverless and JAMstack

(17:30) - Vercel and CDNs, self-hosting, and Next.js

(19:00) - How framework APIs can nudge an app towards a particular hosting solution

(23:09) - What constraints does Next.js impose on your app (e.g. middleware doesn't run node), and what benefits do those constraints give you?

(36:13) - How Next.js APIs are motivated by wanting to tease apart static and dynamic code, in an attempt to support the needs of any web app with a single stack

(40:33) - What is the relationship between frameworks and infra?

(47:37) - How can frameworks that add infra-specific APIs best communicate the costs of those APIs and the benefits they provide?

[Sam Selikoff @samselikoff]

Ep. 196 of @frontendfirstfm is live!!

Tom Occhino – The one and only, the Godfather of React – came on the show to talk all about where React is headed.

I loved this conversation!! Hope you all enjoy ^_^

(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

[Sam Selikoff @samselikoff]

Ep. 195 of @frontendfirstfm is out!

This week we talk about render props – how in spite of Hooks and data attributes being a better fit for most of their use cases, why render props are still superior for exposing slices of internal state for complex components.

Enjoy!

(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

[Sam Selikoff @samselikoff]

Ep. 194 of @frontendfirstfm is live!

We did a deep dive on controlled and uncontrolled components – how they're really all about having a single source of truth for each piece of UI state, and how understanding them can help you build more powerful components.

Enjoy!

(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're using the wrong approach?

[Sam Selikoff @samselikoff]

Ep. 193 of @frontendfirstfm is up!

We talk all about unstyled components in React – where they came from, what problems they solve, how to compose them with styled components, and how they can make your app code easier to maintain.

Enjoy!

(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

[Sam Selikoff @samselikoff]

Ep. 192 of @frontendfirstfm is live!

We share our take on what a framework is – how it tackles the "software glue" part of building apps, why good frameworks embrace the strengths and patterns of their language, and why frameworks and services are not in opposition.

Enjoy!

(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

[Sam Selikoff @samselikoff]

🎙️ Ep. 190 of @frontendfirstfm is up!

Join us for a read-along and discussion of Queueing, a wonderful interactive article from @samwhoo!

It was Ryan's first time through and I had a blast seeing his reactions to Sam's super creative visualizations.

Hope you enjoy!

(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

[Sam Selikoff @samselikoff]

🎙️ Ep. 189 of @frontendfirstfm is live!

Most of React's discourse this year has been about RSCs, so we decided to give SPAs some love.

Learn all about React 19's new features that specifically benefit SPA devs, including Transitions, Client Actions, and useOptimistic.

Enjoy!

(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

[Sam Selikoff @samselikoff]

🎙️ Ep. 188 of @frontendfirstfm is up!

We discussed my recent talk "High floor, high ceiling" – what's best about backend frameworks, what's best about frontend frameworks, and what the two communities can learn from each other.

Enjoy!

(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?

[Sam Selikoff @samselikoff]

🎙️ Ep. 187 of @frontendfirstfm is live!

"Technical Cost vs. Product Benefit"

We used @ryanflorence's latest talk to kick off a discussion about the technical cost of a feature, the user benefits that feature provides, and how we often conflate the two.

One of my recent faves!

(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

[Sam Selikoff @samselikoff]

🎙️ Back on the mics with Ep. 186 of @frontendfirstfm!

Ryan talks all about his experiments using the new View Transitions API in React, how he built a photo gallery with cross-route animations, and how he used a Promise to link a View Transition to a React Transition.

Enjoy!

(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

[Frontend First @frontendfirstfm]

@backendbanterfm @wagslane we're so back

[Sam Selikoff @samselikoff]

🎙️ Here's Ep. 185 of @frontendfirstfm!

Had fun chatting about building an in-browser authoring tool with CodeMirror + refactoring a Tailwind side project to Radix Themes.

Hope you enjoy – and if you'll be at @ReactMiamiConf come say hi!

(0:00) Intro

(4:01) Building an authoring tool with CodeMirror

(18:47) Refactoring Tailwind to Radix Themes

[Sam Selikoff @samselikoff]

🎙️ Ep. 184 of @frontendfirstfm is up!

"Throw is about control flow – not error handling"

We share our take on how JS devs should think about `throw`, and why we think the term "error handling" is unhelpful. We also talk a bit about static + dynamic sites.

Enjoy!

(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

[Sam Selikoff @samselikoff]

🎙️ Ep. 183 of @frontendfirstfm is live!

"The Philosophy of Next.js"

We talked about the motivations behind several of the design decisions in Next.js, including caching, why layouts don't have access to the URL, and why the router doesn't expose navigation events.

Enjoy!

(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 Selikoff @samselikoff]

🎙️ Ep. 182 of @frontendfirstfm is up!

"Beyond Data Fetching with RSCs"

We talk about refactoring an MDX blog post to a React Server Component, and the surprising realization that RSCs can replace tons of build-time tools from MDX to Webpack loaders.

(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

[Sam Selikoff @samselikoff]

Ep. 181 of @frontendfirstfm is live!

"Blog Post Club: React Labs – What We’ve Been Working On"

(0:00) Intro

(5:26) Opening

(6:18) React Compiler

(27:27) Actions

(51:44) Asset loading

(1:13:06) Next Major Version of React

(1:15:42) Activity