Sam tells Ryan about his experience building an animated toggle with React Aria Components. He gives his first impressions of the new library and discusses some of functionality included from the lower-level React Aria hooks. Ryan also talks about his recent use of GitHub Copilot.Topics include:0:00 - Intro1:15 - Using GitHub Copilot to keep you working at higher levels of abstraction8:15 - react aria components toggle. pressed state. When to use browser defaults vs headless for form inputs.Links:React Aria ComponentsSam’s YouTube video on building an animated toggleBuild UI Recipe: iOS Animated Switch

Sam and Ryan talk about updating Build UI to support lifetime memberships. They chat about the site’s current architecture, the strengths and weaknesses of objects vs. functions, how the full stack JavaScript community could benefit from a proper model layer like ActiveRecord, the challenges of using GraphQL on the backend, Prisma, and more.Topics include:0:00 - Intro1:09 - Current architecture + single purchase6:30 - Rails model layer. OOP vs functional13:55 - What are classes good at, what are functions good at23:53 - Composition vs. inheritance31:44 - graphql. overfetching is not a problem on the backend. prisma.Links:Go Ahead, Make a Mess by Sandi Metz

Ryan and Sam use some recent Twitter conversation to guide a discussion about the design and purpose of React Server Components. They talk about how client trees and rendered on the server today, why a server-side rendered prepass is wasteful in light of RSC, how hydration of a client tree works, why RSC are never hydrated, how RSC is a purely additive technology, how server and client components can be interleaved, how RSC can be refreshed in-place without loss of any client state, how RSC fits into the React paradigm despite having a unique syntax and set of capabilities, and other topics.Topics include:0:00 - Intro4:39 - How server-side rendering and hydration work today14:51 - How RSC works, and why they’re never hydrated24:48 - What is the React paradigm, and how RSC fits into it27:54 - How RSC are revalidated33:52 - Why the goal is not to eliminate Client components38:53 - What it means for Server components and Client components to compose with each otherLinks:Dan Abramov’s RSC AMA threadIllustration of server and client trees

Sam and Ryan share their thoughts on the latest server-centric developments taking place among React frameworks like Remix and Next.js. They discuss the declarative nature of HTML and HTTP, the evolution of frontend development from imperative libraries like jQuery to declarative libraries like React, why developers started creating SPAs in the first place, the power and limitations of server-side links and forms, whether the frontend community has overcomplicated web development, the problem with progressive enhancement, React Server Components, how server-centric approaches to building rich web experiences like Phoenix LiveView compare to the approaches in the React ecosystem, and other topics.Topics include:0:00 - Intro3:02 - The strengths of HTML and HTTP11:28 - Is frontend development overcomplicated?21:18 - Progressive enhancement33:33 - The nervous system of a web app46:00 - React Server Components53:46 - Server-side approachesLinks:My first Remix app on Build UI

They discuss different caching APIs, transparent caching layers, cache keys and surrogate keys, SSG as a high-level caching solution, Next.js 13.2's cache API, Russian doll caching in Rails, fetch cache abstraction, retro on using Hygraph as Build UI's CMS, and caching challenges in a serverless setup.

Sam and Ryan chat about their recent work migrating Build UI from a statically generated site to a run-time server-rendered app using Next.js. They talk about their past experience working on server-rendered apps, the problems that static sites were created to solve, and the tradeoffs involved within the static-to-dynamic continuum.Topics include:0:00 - Intro2:05 - How we built EmberMap with SSR + caching buckets with Redis8:36 - How we launched Build UI as a static site with dynamic workarounds13:15 - The problem with static-only sites14:50 - First potential solution: client-side rendering of dynamic data18:01 - Second potential solution: multiple versions of each page25:25 - Third potential solution: run-time server rendering35:44 - Why we left static39:55 - Details and challenges of moving to getServerSidePropsLinks:Build UI

Ryan talks about a demo he built in Next.js 13 with React Server Components. He explains how RSC driven by the URL eliminated client-side states, how he used React 18 Transitions to enhance the UI, and how he was able to fine-tune the experience differently for the initial render vs. subsequent client-side navigations.Topics include:0:00 - Intro1:37 - Overview of Ryan’s user search page14:06 - React 18 Transitions and how RSC eliminates client states28:25 - How to change the UX for initial server navigations vs. in-app client navigations while still having one entry point for your data37:01 - Why Next.js 13 encourages you to learn about the Suspense and Transition primitives43:33 - What would a simple boilerplate for RSC look like?49:18 - Do the benefits of backends-as-a-service go away with RSC?Links:Ryan’s demo on Twitter

Ryan and Sam read a recent article by Derrick Reimer called “Ship Small, Ship Fast” and offer their thoughts on it. They discuss how implementation details can lead to reductions in scope, the relationship between shipping small and agile, and why quickly getting the first steps of a user flow into production is a good protocol for software teams to follow.Topics include:0:00 - Intro2:06 - Ship Small, Ship Fast read-a-long7:22 - ReactionsLinks:Ship Small, Ship Fast by Derrick ReimerDerrick Reimer on SPA architecture with Elm and GraphQL

Sam and Ryan talk about seams in TypeScript programs where lies can sneak in. They chat about how API calls, form inputs, and URLs all relate to this problem, the similarity between drifting types and service mocks in testing, zod, and how type-safe languages like Elm eliminate this problem entirely.Topics include:0:00 - Intro2:41 - Lying in TypescriptLinks:ZodElm language

Ryan tells Sam about a side project of his that involves running the text-to-image deep learning model Stable Diffusion on his laptop in response to web requests. Ryan asks Sam questions about animating this UI, including how to animate indeterminate progress, how to avoid unintentional layout animation, and how to automatically repeat a set of items while scrolling rather than stopping at the end.Topics include:0:00 - Intro0:24 – Overview of Ryan’s Stable Diffusion project -9:36 – Strategies for animating partially indeterminate progress -18:25 – Brainstorm of the API for the headless version of a partially indeterminate progress Hook -25:32 – Unintentional layout animation during window resize -28:29 – Infinite scrolling of a finite array of items -38:52 – Discussion of the need for more high-level Framer Motion examples -Links:Framer Motion docs