Frontend First

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 - Intro
• 1:15 - Using GitHub Copilot to keep you working at higher levels of abstraction
• 8:15 - react aria components toggle. pressed state. When to use browser defaults vs headless for form inputs.

Links:

• React Aria Components
• Sam’s YouTube video on building an animated toggle
• Build 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 - Intro
• 1:09 - Current architecture + single purchase
• 6:30 - Rails model layer. OOP vs functional
• 13:55 - What are classes good at, what are functions good at
• 23:53 - Composition vs. inheritance
• 31: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 - Intro
• 4:39 - How server-side rendering and hydration work today
• 14:51 - How RSC works, and why they’re never hydrated
• 24:48 - What is the React paradigm, and how RSC fits into it
• 27:54 - How RSC are revalidated
• 33:52 - Why the goal is not to eliminate Client components
• 38:53 - What it means for Server components and Client components to compose with each other

Links:

• Dan Abramov’s RSC AMA thread
• Illustration 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 - Intro
• 3:02 - The strengths of HTML and HTTP
• 11:28 - Is frontend development overcomplicated?
• 21:18 - Progressive enhancement
• 33:33 - The nervous system of a web app
• 46:00 - React Server Components
• 53:46 - Server-side approaches

Links:

• My first Remix app on Build UI

Sam and Ryan have an open-ended conversation about different caching APIs and what kinds of benefits they might afford app developers. They discuss transparent caching layers, cache keys and surrogate keys in systems like Fastly, how SSG is effectively a high-level caching solution, Next.js 13.2’s cache API, Russian doll caching in Rails, whether a fetch cache is too high-level of an abstraction, and other topics.

They also have a retro on choosing to use Hygraph as Build UI’s CMS, discussing some surprises they encountered including the fact that Hygraph favors high availability over consistency (stale reads, which can cause issues with serverless) and rate limits (which causes issues with SSG).

Topics include:

• 0:00 - Intro
• 1:18 - Retro on Hygraph
• 16:27 - Caching conversation

Links:

• Build UI
• Hygraph

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 - Intro
• 2:05 - How we built EmberMap with SSR + caching buckets with Redis
• 8:36 - How we launched Build UI as a static site with dynamic workarounds
• 13:15 - The problem with static-only sites
• 14:50 - First potential solution: client-side rendering of dynamic data
• 18:01 - Second potential solution: multiple versions of each page
• 25:25 - Third potential solution: run-time server rendering
• 35:44 - Why we left static
• 39:55 - Details and challenges of moving to getServerSideProps

Links:

• 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 - Intro
• 1:37 - Overview of Ryan’s user search page
• 14:06 - React 18 Transitions and how RSC eliminates client states
• 28:25 - How to change the UX for initial server navigations vs. in-app client navigations while still having one entry point for your data
• 37:01 - Why Next.js 13 encourages you to learn about the Suspense and Transition primitives
• 43: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 - Intro
• 2:06 - Ship Small, Ship Fast read-a-long
• 7:22 - Reactions

Links:

• Ship Small, Ship Fast by Derrick Reimer
• Derrick 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 - Intro
• 2:41 - Lying in Typescript

Links:

• Zod
• Elm 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 - Intro
• 0: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