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 i...
May 06, 2022•45 min•Ep. 141
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 Pris...
Mar 25, 2022•1 hr 5 min•Ep. 140
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 ...
Mar 17, 2022•1 hr 17 min•Ep. 139
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: Fixing Twitter's loading screen using Synchronized Anima...
Mar 08, 2022•1 hr 7 min•Ep. 138
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 AP...
Feb 25, 2022•1 hr 13 min•Ep. 137
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 f...
Feb 17, 2022•1 hr 1 min•Ep. 136
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: Valtio Removing State and Effects with Suspens...
Feb 04, 2022•47 min•Ep. 135
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: Sam’s video for this week Remix The Cursed Computer Iceberg Meme Coding Mac...
Jan 29, 2022•1 hr 4 min•Ep. 134
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: Sa...
Jan 19, 2022•54 min•Ep. 133
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 hav...
Jan 11, 2022•46 min•Ep. 132
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 Interfa...
Dec 21, 2021•1 hr 2 min•Ep. 131
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 s...
Oct 26, 2021•1 hr 2 min•Ep. 130
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 Anim...
Sep 21, 2021•48 min•Ep. 129
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 – Or...
Aug 18, 2021•1 hr 7 min•Ep. 128
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 v...
Aug 04, 2021•1 hr 4 min•Ep. 127
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...
Jul 19, 2021•1 hr 3 min•Ep. 126
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 g...
Jul 13, 2021•50 min•Ep. 125
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 let...
Jul 06, 2021•59 min•Ep. 124
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...
Jun 21, 2021•48 min•Ep. 123
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...
Jun 14, 2021•46 min•Ep. 122
Sam and Ryan talk about their experience building the headlessui.dev website with the folks from Tailwind Labs. They chat about the team’s deadline-driven development process, some new Figma workflow tips when implementing a design that was built with Tailwind CSS in mind, and some tech takeaways from building a docs site with Next.js. They also chat about some testing conversation that was happening on Twitter this week. Topics include: 1:46 – The power of shipping with a deadline 12:22 – What ...
Jun 07, 2021•1 hr 5 min•Ep. 121
Sam and Ryan talk about how visual design typically drives frontend app development, and whether or not this implies that frontend development should drive backend development in a similar way. They also discuss a tricky UI issue involving keeping a React app consistent with both the URL and server-side auth state. Topics include: 2:02 - How the URL makes it hard to keep your app consistent with changes to server-side state 34:20 - Pros and cons of uncontrolled forms 37:51 - Whether frontend dev...
May 28, 2021•1 hr•Ep. 120
Sam and Ryan discuss building a library with TSDX, as well as some hiccups they ran into with node’s module resolution algorithm. They also talk about how even though Tailwind and Bootstrap are both considered CSS frameworks, they’re actually used to solve very different problems. Topics include: 0:00 Intro 2:55 Building a library with TSDX 11:56 Writing docs with MDX 21:15 Node resolutions with npm link 37:50 Tweet of the week: Redux 43:54 Tweet of the week: Feature flags 46:35 Tailwind vs Boot...
Mar 18, 2021•1 hr 6 min•Ep. 119
Sam and Ryan discuss how loading states, data fetching, and skeleton screens can change the architecture of an SSG application. They also talk about Apollo’s cache and various query re-fetching strategies. Topics include: 0:00 - Intro 2:35 - Image cropper dampening 4:00 - Learning library abstractions 10:00 - Loading states with SSG 28:00 - Server side cache 38:30 - Tweet of the week 46:00 - Apollo’s cache 58:50 - Stale while revalidate Links: Sam’s Image cropper dampening video Next.js Fan out ...
Feb 23, 2021•1 hr 6 min•Ep. 118
Ryan shares his first impressions using Supabase and talks about a new app he’s building to manage users in Hasura. Sam talks about how to responsibly go outside of React’s rendering cycle when using imperative APIs. Topics include: 0:00 - Intro 3:40 - Supabase first thoughts 13:50 - Building an auth layer for Hasura 30:40 - Apollo server 37:50 - Framer Motion’s MotionValue and imperative APIs Links: Sam’s snow photos Image Cropper Ep. 4 Supabase Netlify’s GoTrue User management Hasura Google Cl...
Feb 05, 2021•1 hr 2 min•Ep. 117
Ryan shares his experience setting up authentication in a new project with Sam. They also discuss some of the tradeoffs that client apps face when consuming raw JSON vs. passing data through a model layer like an ORM. Topics include: 0:00 - Intro 1:00 - Visual programming in the video game Factorio 9:00 - Setting up auth in a new project 22:40 - Checking out Supabase 30:00 - Consuming APIs Links: Factorio Firebase Supabase Hasura...
Jan 22, 2021•48 min•Ep. 116
Sam tells Ryan about what he’s been learning using the React Use Gesture and Framer Motion libraries to build an Image Cropper for his YouTube series. They also chat about their first impressions of React’s new Server Components, as well as the Tailwind 2.0 launch. Topics include: 1:40 - First impressions of React server components 12:10 - Tailwind 2 launch 16:15 - React gesture with framer motion Links: React UseGesture Framer Motion Tailwind Pan and Pinch to Zoom with React Use Gesture – Image...
Jan 14, 2021•37 min•Ep. 115
Ryan tells Sam about an image uploading solution he built for one of his Next.js apps. They discuss how Next.js's integrated frontend and backend allow for much more convenient packages, and they brainstorm other packages that would fit well within Next's architecture. Ryan also shares how parser combinators helped him write robust text-parsing code for his poker app. Topics include: 0:54 – Server and client image uploading in Next.js 21:19 – Other packages that cross the client/server divide fo...
Nov 18, 2020•54 min•Ep. 114
Sam and Ryan talk about whether GraphQL affects the architecture of an app, and what sort of UI code a well-implemented GraphQL server can replace. They also talk about Sam's experience working on a new side project using Next, Hasura, GraphQL and SWR. Topics include: 2:34 – Finally feeling good about our tech stack. How easy GraphQL makes it to get or update aggregate data. 13:42 – Giving frontend developers a query language 19:46 - Does GraphQL encourage your JavaScript frontend to become more...
Nov 11, 2020•1 hr 5 min•Ep. 113
Sam and Ryan talk about how frontend and backend frameworks are converging towards similar UI patterns and developer experiences, even though they're coming at it from different starting points. They also talk about the new Next.js 10 release and whether React should document more opinions held by the core team. Topics include: 3:22 – New features in Next.js 10 20:40 – How frontend and backend frameworks are converging 28:47 – Opinions in React that fall outside of its API 35:33 – Next.js' new I...
Nov 04, 2020•58 min•Ep. 112
