Frontend First

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

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.

• 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

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

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

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/)

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

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:

• Zustand
• Sebastian’s tweet on default context values
• Sam’s Auth Provider using Zustand, SWR and Suspense
• 7 GUIs

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:

• Sebastian’s tweet on not using context for global state
• Zustand

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:

• Suspense’s contract
• New Suspense SSR Architecture in React 18
• Built-in Suspense Cache

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:

• Design Details podcast

• React Suspense

• Next.js

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:

• Sam on Twitter
• Ryan on Twitter
• Sam’s tweet about routing in Next.js
• Guillermo Rauch’s tweet on scalable APIs
• Gary Bernhardt’s tweet on premature optimization