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 - Intro1:14 - Sam’s Tailwind Course on Egghead3:44 - Upgrading to Tailwind 36:57 - React Conf + SuspenseLinks:Craft Scalable, Custom-Made Interfaces with Tailwind CSSTailwind CSS v3.0React 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.Topics include:0:00 - Intro4:30 - Dealing with partially known dynamic router segments in Next.js25:23 - Struggling with nested layouts in Next.js31:00 - Why you should consider passing non-reactive snapshots of data into your form components52:07 - How to use a seed when generating dynamic test data for predictable valuesLinks: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 ComputersHeadless UI’s Transition componentFramer 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 – Intro4:04 – Keeping imports order-independent when modules have side effects25:02 – Using Mirage with Hasura32:00 – Cypress helpers for mocking auth and data46:37 – UI patterns for modal actions56:26 – Organizing shared query codeLinks:[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 - Intro0: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 testing28:18 – How are people testing their service code today?48:02 – Mocking vs. end-to-end testingLinks: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 – Intro3:21 – Using Zustand to refactor a useAuth hook34:08 – Module scope vs. context for shared state58:52 – 7 GUI tasksLinks:ZustandSebastian’s tweet on default context valuesSam’s Auth Provider using Zustand, SWR and Suspense7 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 – Intro1:51 – Avoiding Context for global state in React22:22 – Safeguarding _app in Next.js & dynamic segments in the routerLinks:Sebastian’s tweet on not using context for global stateZustand

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 – Intro1:08 – Sharing state across pages in Next.js9:03 – Confronting JS object identity up-front in React, and buiding consistent trees of different versions of your UI in parallel25:55 – How Suspense lets you represent async UI with sync code42:00 – Interruptibility and push vs. pull49:20 – The problem of invalidation, and the Suspense cacheLinks:Suspense’s contractNew Suspense SSR Architecture in React 18Built-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 - Intro3:50 - URLs and nested routing13:48 - Suspense, skeletons, and data fetchingLinks:Design Details podcastReact SuspenseNext.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-fetching31:05 – Tweets of the week: PreoptimzationLinks: Sam on TwitterRyan on TwitterSam’s tweet about routing in Next.jsGuillermo Rauch’s tweet on scalable APIsGary Bernhardt’s tweet on premature optimization