Frontend First

Latest Episodes:

Suspense and the React 18 Keynote Dec 21, 2021

Show notes

Sam and Ryan talk about how the React 18 Keynote told the story of Suspense. They discuss how Suspense resolves the tension between encapsulated data-fetching components on the one hand, and coordinated loading UI on the other. They also talk about Sam’s Tailwind course on Egghead and Ryan’s experience upgrading to Tailwind 3.

Topics include:

0:00 - Intro
1:14 - Sam’s Tailwind Course on Egghead
3:44 - Upgrading to Tailwind 3
6:57 - React Conf + Suspense

Links:
Craft Scalable, Custom-Made Interfaces with Tailwind CSS
Tailwind CSS v3.0
React 18 Keynote

Pages are new entry points Oct 26, 2021

Show notes

Sam and Ryan talk about some tricky page configurations they ran into while working on a Next.js project, and how to deal with multiple dynamic router segments when some are known at build time and others at run time. They also talk about how non-reactive data can simplify your form components.

Topics include:

0:00 - Intro
4:30 - Dealing with partially known dynamic router segments in Next.js
25:23 - Struggling with nested layouts in Next.js
31:00 - Why you should consider passing non-reactive snapshots of data into your form components
52:07 - How to use a seed when generating dynamic test data for predictable values

Links:

Using useState to create nonreactive snapshots of a form component’s props

The benefits of smarter form components Sep 21, 2021

Show notes

Sam and Ryan talk about the tradeoffs between smart and dumb form components, and toss around ideas for passing draft state into forms. They also talk about reimplementing Tailwind UI’s Modal animations using Framer Motion.

Topics include:
- 0:00 - Intro
- 5:33 - Smart vs. dumb forms, and lazy initial props
- 32:03 - Replacing Headless UI’s Transition component with Framer Motion’s AnimatePresence

Links:
The Universe is Hostile to Computers
Headless UI’s Transition component
Framer Motion’s AnimatePresence component

Module side effects and import order Aug 18, 2021

Show notes

Sam and Ryan talk about how module side effects can expose order-dependent code, and why its worth ensuring your modules work regardless of import order. They also talk about different UI patterns for forms in modals, and some tips for working with Mirage in Cypress.

Topics include:

0:00 – Intro
4:04 – Keeping imports order-independent when modules have side effects
25:02 – Using Mirage with Hasura
32:00 – Cypress helpers for mocking auth and data
46:37 – UI patterns for modal actions
56:26 – Organizing shared query code

Links:

[GitHub Codespaces](https://github.blog/2021-08-11-githubs-engineering-team-moved-codespaces/)

Mocking services Aug 04, 2021

Show notes

Sam and Ryan chat about the pros and cons of using third-party services, focusing on how they affect your application’s testing strategy.

Topics include:

0:00 - Intro

0:43 – If services don’t provide testing utils, you have to write library code just to test your app. What was the mocking story like for popular Rails services?

11:59 – Adding seams to service integrations so they can be used locally, offline and in testing

28:18 – How are people testing their service code today?

48:02 – Mocking vs. end-to-end testing

Links:

Stefan Penner’s tweet about how critical it is for services to making testing easy

Shared reactive data without context or effects Jul 19, 2021

Show notes

Sam and Ryan talk about whether stores in module scope are a better alternative to Context for sharing global state in React apps.

Topics include:

0:00 – Intro
3:21 – Using Zustand to refactor a useAuth hook
34:08 – Module scope vs. context for shared state
58:52 – 7 GUI tasks

Links:

The Costs of SSR in Next.js Jul 13, 2021

Show notes

Sam and Ryan talk about how Next.js places an upfront cost on app teams for the sake of scalability and server-side rendering, and how to avoid this cost when building apps with user-specific data where SSR is not a priority. They also talk about avoiding Context for global state in React apps.

Topics include:

0:00 – Intro
1:51 – Avoiding Context for global state in React
22:22 – Safeguarding _app in Next.js & dynamic segments in the router

Links:

Sync code, async UI Jul 06, 2021

Show notes

Sam and Ryan continue to put some more pieces of the Suspense puzzle together as they talk about how throwing promises enables devs to write synchronous code while still building asynchronous (non-blocking) UI. They also talk about sharing state across pages in Next.js.

Topics include:

0:00 – Intro
1:08 – Sharing state across pages in Next.js
9:03 – Confronting JS object identity up-front in React, and buiding consistent trees of different versions of your UI in parallel
25:55 – How Suspense lets you represent async UI with sync code
42:00 – Interruptibility and push vs. pull
49:20 – The problem of invalidation, and the Suspense cache

Links:

Using Suspense Jun 21, 2021

Show notes

Sam tells Ryan about his experience adding Suspense to his Fitness app and how it improved the app’s UX. They also discuss some problems with skeleton screens and the pros and cons of nested routing.

Topics include:

0:00 - Intro
3:50 - URLs and nested routing
13:48 - Suspense, skeletons, and data fetching

Links:

Talkin’ Bout Suspense Jun 14, 2021

Show notes

Prompted by the new React 18 alpha release, Sam and Ryan chat about Suspense and what data-fetching issues they’re excited about it solving. They also talk about some Twitter conversation around premature optimization.

Topics include:

2:05 – Suspense and data-fetching
31:05 – Tweets of the week: Preoptimzation

Links:

Our TOPPODCAST Picks

Follow Us

Stay Connected

Topics include:

Links:

Related Podcasts

Links

Stay Connected