Frontend First

Ryan talks about the pros and cons of exposing Build UI’s environment-independent CMS from Hasura via schema stitching. He also talks about writing a Postgres function to add a derived field to a database model. Sam shares a debugging story about fixing his personal website due to a breaking change in a minor version of npm. Topics include: 0:00 - Intro 1:50 - Debugging Sam’s personal website due...

Sam and Ryan chat about how to avoid a flicker of content on initial render due to mismatched server/client rendering. They also chat about the pros and cons of React Hooks, and using StackBlitz containers to debug OSS issues. Topics include: 0:00 – Intro 1:46 – Ryan Florence’s tweets about Hooks, useEffect and refs 18:12 – How to avoid SSR/CSR rendering mismatches when your initial render depends...

Sam and Ryan chat about issues they’ve run into in the past when building media sites that store content alongside other dynamic data like user accounts, and how they’re using a CMS to alleviate these problems in Build UI. They also talk about the approach they’ll be using for access control to the CMS. Topics include: 0:00 – Intro 0:27 – Unintentional security attack vectors 11:20 – Environment-s...

Sam and Ryan chat about building their new site using services, and how they’re thinking about testing it. They talk about how testability is one of the biggest costs of using third-party hosted services, why they continue to like services in spite of this downside, and the fact that you always end up testing your app whether you eventually automate it or not. Topics include: 0:00 - Intro 0:59 - H...

Ryan shares his experience getting end-to-end type safety from a Hasura backend into a React application. He tells Sam about the different ways GraphQL codegen can be used to generate types, and how he ultimately landed on a solution that combines the TypedDocumentNode type and the zod library. Topics include: 0:00 - Intro 2:51 - Using GraphQL Language Server to get autocomplete + linting 13:05 -...

Ryan tells Sam about some experiments he’s been running using Server Components in Vercel’s new edge runtime. He talks about how components that suspend in the node runtime cause the static build of your Next.js app to wait until they unsuspend, while components that suspend in the edge runtime stream back fallback responses as data is being fetched. Ryan also tells Sam about a blocking JS trick h...

Sam and Ryan chat about issues with default HTML buttons on the web across different devices and browsers. They talk about the Extensible Web Manifesto, how the React Aria library helps standardize button behavior across platforms, and the difference between state-based and event-based animations. Topics include: 0:00 - Intro 2:09 – The problem with default buttons on the web - 17:26 – How we got...

Sam and Ryan talk about whether you should use merge commits or you should rebase commits in your PRs when working on large, fast-moving codebases. They also talk about implementing build-time client-side search with Stork, and why layering in animation code shouldn’t materially affect your existing React code. Topics include: 0:00 - Intro 1:48 – How to use D3 with React elements - 9:14 – Why you...

Sam and Ryan read and discuss the first two sections of the new Next.js Layouts RFC, Nested Layouts and Server Components. They also reflect on their experience using nested layouts in other frameworks. Topics include: 0:00 – Intro - 10:21 – Layouts and creating UI (Apple Music example) - 33:40 – React Server Components - Links: Layouts RFC Framer Motion Course update

Sam and Ryan talk about the new useEvent RFC, and how useEvent lets you extract event logic from your side effects. They also read and discuss Dan Abramov’s recent Twitter thread on how useEvent addresses the problems people are encountering with React 18’s Strict Mode behavior around running effects twice on mount. Topics include: 0:00 - Intro 0:34 - How useEvent relates to the changes to Strict...

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...

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...

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 wha...

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...

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...

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 Susp...

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...

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 aro...

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 wit...

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 sourc...

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:...

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:2...

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 AnimatePresen...

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 Hasur...

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 locall...