Frontend First

Latest Episodes:

Strict Mode Behaviors in React 18 May 06, 2022

Show notes

Sam and Ryan talk about the motivation behind the changes to Strict Mode in React 18, and in particular why React simulates an immediate unmount and remount by re-running component effects. They also talk about the tradeoff between database consistency and speed.

Topics include:

0:00 - Intro
1:12 - The tradeoff between data that’s fast but stale, vs. data that’s slow but consistent
11:55 - Strict mode in React 18, the proposed Offscreen API, and the implications for internal vs. external state in Concurrent React

Links:

Reacting to Remix! Mar 25, 2022

Show notes

Sam and Ryan share their experiences building with Remix for the very first time. Sam built a simple exercise tracking app using the Indie starter stack, and Ryan built a blog using server rendering in both Remix and Next.js, and talks about the differences between the two frameworks. They both discuss what the larger React community can learn from the ideas that Remix has to offer.

Topics include:

0:00 - Intro
2:33 - Sam’s Remix app
6:34 - The Indie stack
19:36 - Creating the data model in Prisma, a form, and an index route
25:48 - Ryan building the same Blog app in Remix and Next.js
32:33 - Using onSubmit vs. posting an HTML Form
39:15 - Remix’s fetcher API
46:46 - Borrowing declarative abstractions
56:18 - What did we give up when we left the PHP model of building websites? Did we throw the baby out with the bathwater?

Links:

Client apps, server apps, and the real reason DX matters Mar 17, 2022

Show notes

Sam and Ryan chat about Remix and the differences between data fetching and mutations on the client vs. the server. They also talk about whether a framework’s APIs or the actual apps it enables developers to build are more important when choosing which tool to use.

Topics include:

0:00 - Intro
2:17 - What matters more to developers when choosing a framework: their experience using the APIs, or what they can build with it?
18:38 - Remix and data fetching on the client vs. the server
36:36 - Does running code on the edge really matter for day-to-day developers?

Links:

Auth-based route guards in Next.js and debugging in production Mar 08, 2022

Show notes

Sam and Ryan chat about adding authentication-based route guards to Next.js, tradeoffs between one-shot data loading vs. reactive pages in React apps, and instrumenting errors with Sentry.

Topics include:

0:00 - Intro
8:07 - Auth-based route guards and synchronized spinners in Next.js
26:34 - Tradeoffs of loading once on render vs. fully reactive pages
42:30 - Ryan’s video on Deploy notifications
47:45 - Errors + stale auth + Sentry

Links:

What’s the link between Server Components and Suspense for Data Fetching? Feb 25, 2022

Show notes

Sam and Ryan talk about why Suspense for Data Fetching isn’t ready yet, and how both it and the Server Components feature of React 18 rely on the ability to evict a cache that’s internal to React. They also talk about Transitions.

Topics include:

0:00 - Intro
5:19 - Using startTransition with a router
9:36 - How React 18 yields
21:37 - Why both Suspense for Data Fetching and Server Components need a way to invalidate React’s cache
37:24 - How Server Components can remove the need for explicit API calls without sacrificing any of React’s composability
1:01:00 - Real-world problems concurrent features address
1:03:20 - Moving state from React to the URL

Links:

Internal apps vs. public websites Feb 17, 2022

Show notes

Sam and Ryan chat about the differences between building internal apps vs. public websites, and why public sites get talked about more on forums like Twitter. They also talk more about their experiments with Suspense and Transitions in React 18.

Topics include:

0:00 - Intro
2:35 - How to trigger Suspense by accessing an unresolved promise
11:04 - Tension between flexibility of Transitions and Suspense vs. best practices around data fetching
21:00 - Semantics of React APIs when using Concurrent features
24:12 - How internal tools differ from public websites
43:24 - Sam’s next vid: Reducing loading spinners on route transitions in Next.js
45:28 - Ryan’s next vid: Demo of startTransition

Links:

Concurrent UI Patterns (Experimental)

How to bridge the gap from module scope to React rendering Feb 04, 2022

Show notes

Sam and Ryan talk about using Promises and state libraries like Valtio to cross the bridge from changing module scope to React component state. Ryan also talks about writing an end-to-end Cypress test that verifies image uploads to S3.

Topics include:

0:00 - Intro
1:50 - Using Promises and state libraries to bridge the gap from module scope to React rendering
23:05 - How to test image file uploads given the security constraints of the browser

Links:

Is Suspense “backwards compatible”, and thoughts on Remix & web standards Jan 29, 2022

Show notes

Sam and Ryan chat about how Suspense lets you remove defensive and confusing useEffect code from your React components. They also share some initial thoughts about how Remix is positioning itself in the frontend dev space.

Topics include:

0:00 - Intro
4:53 - How compatible are non-Suspense APIs with Suspense, and how can we bridge these two worlds?
33:35 - Impressions about Remix’s positioning around web standards

Links:

Transitions and Data Fetching with Suspense in React 18 Jan 19, 2022

Show notes

Sam and Ryan continue their discussions around React 18 and the in-progress work on data fetching with Suspense. They talk about the useTransition hook and how it helps eliminate inconsistent states from your application. They also talk about

Topics include:

0:00 - Intro
4:13 - What does Suspense for Data Fetching mean?
15:00 - How Transitions allow us do work outside of render
39:43 - Dealing with Timezone-dependent tests
46:45 - Modal routing in Next.js
48:15 - Snapshotting form data

Links:

Transitive Dependencies and Suspending After Initial Render Jan 11, 2022

Show notes

Happy New Year! Sam and Ryan are back from the holidays, talking about transitive dependencies in node and the browser in the context of Ryan’s next-s3-upload library. They also discuss a SuspenseAfterInitialRender component, speed vs. testability in services and monoliths, and a thought-provoking tweet from Dan Abramov on tests vs. source code.

Topics include:

0:00 - Would you want tests or source code
11:20 - Suspense, SuspenseAfterInitialRender, unstable_avoidThisFallback
19:05 - Value of having a reproducible test suite for a dynamic app
22:12 - Speed vs. testability of services vs. monolith
26:24 - How to import different versions of dependencies in libraries. Module resolution in node vs. browser.

Links:

Our TOPPODCAST Picks

Follow Us

Stay Connected

Related Podcasts

Links

Stay Connected