Frontend First

Latest Episodes:

React Aria Components Apr 20, 2023

Show notes

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:

JavaScript needs a model layer Apr 12, 2023

Show notes

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

Server Components and the React paradigm Mar 15, 2023

Show notes

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:

HTML, HTTP, and React Mar 08, 2023

Show notes

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

Caching strategies Mar 01, 2023

Show notes

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:

Saying goodbye to static generation Feb 22, 2023

Show notes

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

Building user search with React Server Components Feb 15, 2023

Show notes

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

Ship Small, Ship Fast Feb 08, 2023

Show notes

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:

Lying in TypeScript Jan 26, 2023

Show notes

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:

Animating a Stable Diffusion side project Jan 19, 2023

Show notes

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

Our TOPPODCAST Picks

Follow Us

Stay Connected

Related Podcasts

Links

Stay Connected

Our TOPPODCAST Picks

Follow Us

Stay Connected

Frontend First

Related Podcasts

1

2

3

4

5

6