Frontend First

View Top 200 Chart

Back to Rankings Page

Software How-To
**Frontend First**

A podcast about modern UI development on the web. Hosted by Sam Selikoff and Ryan Toronto.

Latest Episodes:

Blog Post Club: React Labs – What We’ve Been Working On Mar 01, 2024

Show notes

Sam and Ryan read and discuss the latest update from React Labs.

Topics include:

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

Links:

Instant URL search params in Next.js Feb 21, 2024

Show notes

Sam and Ryan discuss the intuition behind React Transitions, and why React’s new useOptimistic hook is a good fit for building a URL-driven filter panel that stays fully responsive to client interactions.

Topics include:

0:00 - Intro
1:12 - The problem: In a world of Server Components, URL updates are blocked by a server-side roundtrip
10:44 - Attempted solution: Use the browser’s Native History API (history.pushState)
15:03 - Realization: The source of truth flips from server to client during the transition – which is exactly what useOptimistic was designed for
17:54 - Unwinding our mental model of client-first React apps by thinking about how HTML-only checkout forms work
21:44 - The intuition behind React Transitions, and how they put our UI into a state of preparation
30:39 - How Transitions improve upon default browser behavior by keeping our current UI 100% responsive, and how useOptimistic solves the checkbox filter panel
37:46 - Ryan’s take: It’s a bonus when tools make you feel smart, but it’s more important for them to not make you feel dumb

React Deep Dive: useOptimistic Feb 14, 2024

Show notes

Ryan and Sam discuss the purpose and usage of the useOptimistic() hook, a new experimental API from React.

Topics include:

0:00 - Intro
2:18 - Problem: RSCs require a server roundtrip before the UI can be updated
10:13 - Solution: useOptimistic() lets you merge ephemeral client-side state with server-side data so you can update the UI during a Server Action or Transition
14:03 - How useOptimistic() avoids the notion of identity by discarding the ephemeral state after the app settles
21:17 - How useOptimistic() lets you safely “fork” state that eventually syncs with the server
27:32 - Handling error states
29:26 - Differences between useOptimistic() and Remix fetchers
34:57 - How useOptimistic() lets you avoid managing a long-lived client-side cache

Links:

React Deep Dive: cache Feb 07, 2024

Show notes

Ryan and Sam discuss the purpose and usage of the cache() function, a new experimental API from React.

Topics include:

0:00 - Intro
2:29 - Caching in Next.js vs. React cache()
8:11 - Why React invalidates the cache for each server request
14:43 - How cache() enables colocation of data-fetching code
16:14 - Using cache() to share CPU-heavy or I/O-bound tasks between components
19:31 - Why cache() obviates the need for context in Server Components
23:19 - The danger of module scope on the server
27:54 - Why cache() is implemented with AsyncLocalStorage
41:04 - Why cache() is part of React
48:27 - Why Server Components don’t support cache()
53:04 - How cache() eliminates waterfalls

Links:

Ryan’s YouTube video on React Cache

Advanced Radix UI | Blog Post Club: React Server Feb 01, 2024

Show notes

Sam and Ryan talk about Advanced Radix UI, Build UI’s newest course. They also read and discuss a blog post that describes the RSC architecture in terms of two processes: React Server and React Client.

Topics include:

0:00 - Intro
0:49 - Ceilingless libraries + Advanced Radix UI
21:02 - Read and discuss: “RSC is React Server + Component”

Links:

The SQL Injection Slide Nov 06, 2023

Show notes

Ian Landsman & Aaron Francis join Sam to discuss React Server Actions & Server Components, why it's important to have one set of opinions, and yes, the infamous SQL Injection Slide at NextConf.

This is a crossover episode with the excellent podcast Mostly Technical.

Topics include:

0:00 - The Most Memed Man on the Internet
09:06 - High Floor vs. High Ceiling
19:20 - What the Hell Is Next?
23:22 - The Third Phase of React
29:09 - Your App Is Not Unique
35:23 - Server Actions & Server Components
51:33 - CallYourMom.Com
01:00:56 - Fat Models, Skinny Controllers
01:14:16 - One Set of Opinions

Links:

The Remix Architecture Oct 14, 2023

Show notes

Sam and Ryan talk about the key parts of Remix’s architecture in the context of the Work Journal app from Build UI’s latest course. They discuss how Remix’s conventions around Links, Forms, Actions, and Loaders allow developers to eliminate boilerplate and take advantage of the best HTTP has to offer, while still providing a seamless way to enhance their UIs using the full power of client-side React.

Topics include:

0:00 - Intro
0:31 - The Work Journal app
2:20 - Making dynamic pages with Loaders
8:00 - How Remix relies on HTTP for routing
12:30 - Making backend changes using Forms and Actions
19:41 - How Remix’s comprehension of Loaders and Actions eliminates boilerplate
25:20 - How Remix layers the full power of React on top of web fundamentals

Links:

Implementing RSC, Part 2: Server Actions Oct 04, 2023

Show notes

Ryan continues to share the details behind his custom RSC implementation. He talks with Sam about how Server Actions allow the client to reference server-side code (in the same way client components allow the server to reference client-side code), how Server Actions are bundled and invoked, and the security concerns associated with blurring the lines between the server and the client.

Topics include:

0:00 - Intro
0:52 - Ryan’s course on React Server Components
3:06 - Motivating Server Actions, how to bundle them, and how to invoke them
27:38 - Sending arguments via hidden inputs or closures, and security concerns

Links:

Ryan’s React Server Components course

Implementing RSC, Part 1: Rendering Sep 29, 2023

Show notes

Ryan shares how building his own RSC implementation from scratch helped him better understand React’s new paradigm. He and Sam talk about how a client React app can fetch an RSC Payload from a server endpoint to update the UI, how an RSC server renders and bundles Client code that’s part of a Server Component tree, and how a client-side Router can be used to fetch new RSC trees based on the URL.

Topics include:

0:00 - Intro
2:48 - Making a server endpoint that a client React app can use to re-render the UI
15:42 - How the bundling step shims Client Components during a server render with a reference that the client app can later use to execute browser code
35:16 - How the React Component API unifies server and client functionality in a single composable interface
38:54 - How a client-side router can render different server trees based on the URL
49:09 - Reference projects used

Links:

Should a navigation and a refresh show the same page? Sep 20, 2023

Show notes

Ryan and Sam talk about how to invalidate Next.js’ client-side cache when a different session makes changes to backend data, and ultimately discuss whether clicking a link to a URL vs. hitting refresh on that same URL should render the same page if no backend data has changed.

Topics include: