Frontend First

How to bridge the gap from module scope to React rendering

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

Is Suspense “backwards compatible”, and thoughts on Remix & web standards

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

Transitions and Data Fetching with Suspense in React 18

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

Transitive Dependencies and Suspending After Initial Render

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

Suspense and the React 18 Keynote

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

Pages are new entry points

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

The benefits of smarter form components

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

Module side effects and import order

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

Mocking services

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

Shared reactive data without context or effects

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

The Costs of SSR in Next.js

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

Sync code, async UI

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

Using Suspense

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

Talkin’ Bout Suspense

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

Building headlessui.dev (fixed)

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

Should frontend development drive backend design?

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

Is Tailwind really an alternative to Bootstrap?

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

Does server-side generation make loading states more complex?

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

Best Practices for Imperative APIs in React

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

Auth: The Momentum Killer

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

Gestures and Animations with React Use Gesture and Framer Motion

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

Bundling client-server communication with packages for Next.js

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

Is GraphQL an implementation detail?

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

The convergence of frontend and backend frameworks

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

Key props vs. effects

Sam and Ryan talk about how both the key prop and useEffect can be used to solve similar problems, and discuss which approach is better. They also talk about the difference between handling data using models with methods vs. using POJOs with pure functions. Topics include: 0:34 – Model with methods vs POJOs with functions 16:44 – Comparing explicit, verbose code in React vs. other frameworks 29:34 – Dumb vs. smart components, and using keys vs. effects 47:47 – If a high-level API misse...

How to test apps built on third-party services

Sam and Ryan talk more about their recent experience using Hasura and Amplify, and more generally how best to test apps that are built on third-party services. They also talk about Mirage JS GraphQL. Topics include: 7:39 – Testing a Hasura-backed app with Mirage 16:03 – Modeling and querying data with Amplify and Dynamo 31:09 – Auth, Amplify and Hasura, and testing services

Singleton components

Sam and Ryan talk about a tricky integration between some asynchronous third-party JavaScript code and React's render cycles. They also talk about how powerful the getStaticProps hook from Next.js is, and share some thoughts on whether Firebase's features justify the fact that by using it you lose out on the GraphQL community's standard libraries and tooling. Topics include: 0:50 – How to robustly integrate 3rd-party async code into React's render cycles 38:08 – How Next.js lets you easil...

Next.js vs. Gatsby, revisited

Sam talks about his recent experience working with Next.js on his personal site. He and Ryan also compare Gatsby and Next, and discuss how much Next's updates over the past year have curbed Gatsby's advantages. They also talk about the best way to make frontend developers more autonomous.   Topics include: - 8:30 - Working on moving samselikoff.com to Next.js - 39:04 – The best way to make frontend teams more autonomous

Adventures with Amplify

Sam and Ryan talk about Ryan's recent experience using Amplify on a side project. They chat about the tradeoffs between using services and writing your own backend code, and how backend services let you do more at the cost of not understanding as much about how the system works. Topics include: 9:10 – Why Gatsby's content mesh is so good 23:00 – How much of your backend is your product 35:00 – Auth in Amplify 44:00 – Using Mirage with an Amplify app 56:00 – Firebase/Amplify/Hasura comp...

Does code splitting negate the benefits of building an SPA?

Sam and Ryan talk about how route-based code splitting makes SPAs more like traditional server-rendered apps, potentially negating many of their benefits. They also talk about how the intrinsic width of text affects flexbox-based layouts.   Topics include: - 4:20 – Flexbox and intrinsic width - 27:40 – Does route splitting negate the benefits of an SPA?   Links: - Daniel Schiffer on YouTube - Sam's YouTube video on building a Twitter clone - Rich Harris on Full Stack Radio

Stop Energy

Sam and Ryan talk about a post from 2002 discussing Stop Energy, which the author defines as a certain kind of feedback that is thoughtless and can halt forward motion on a project. They also talk about Ryan's adventures with Amplify, and brainstorm how to automate Sam's work journal. Topics include: 6:05 – Stop Energy 27:55 – Amplify 44:27 – Automating a Work Journal Links: What is Stop Energy Amplify Substack Sam's work journal

Tech debt vs. platform risk

Sam and Ryan talk about adding an authenticated backend to miragejs.com using Hasura, Heroku and Netlify. They also talk about the differences in risk between using paid third-party services vs. depending on open-source libraries.   Topics include: - 3:47 – Adding a backend to miragejs.com - 13:03 – Environment variables in frontend apps - 20:48 – Adding privileges to the anonymous role - 28:00 – Should Hasura let you configure permissions for unauthenticated requests? - 31:36 – Setti...

Safety and idempotence

Sam and Ryan talk – again – about the best way to write side effects in React applications. Ryan shares his approach based on his recent work in several React apps, and talks about the pitfalls of using useEffect's dependency array as a mechanism for control flow. Sam also talks about his recent video on React Router and why it's important to use the entire route hierarchy when determining whether a link is active.   Topics include: - 0:00 – Processes, workflow and deadlines - 12:00 – Ho...

Drew Powers on How Pika's Making the Web Faster

Drew Powers, one of two full-time engineers working at Pika, joins Sam to talk about Pika's mission to make the web faster. Drew talks about how Pika is focused on building tools that meet developers where they're at, his work on Snowpack, and the company's vision for Pika CDN. Topics include: 0:00 – What do you do at Pika? 4:54 – What is Pika's mission and where is it coming from? 10:45 – What does speed mean from Pika's perspective? 13:50 – What are some ideas for Pika's sustainabilit...

Tom Preston-Werner on Architecture Decisions in Redwood JS

Tom Preston-Werner joins Sam and Ryan to talk about some of the architecture decisions behind Redwood JS, a recently released full-stack JS framework he's been working on for more than a year. Tom talks about how Redwood's Services provide a first-class layer of abstraction on top of your backend data models for your application's business logic, why Redwood went all-in on GraphQL, and how the framework is poised to take advantage of future improvements coming to serverless infrastructure. ...

Why the browser is the most complex runtime environment

Sam and Ryan talk about the unique aspects of ES modules that have driven the recent explosion of innovation in the frontend build tooling space, giving rise to tools like Snowpack and Vite. They also chat about their desire for a more integrated frontend ecosystem that would make adding things like auth to frontend apps easier, as well the impressive web-based drawing tool Excalidraw.   Topics include: - 1:16 – ES modules - 14:09 – Why do we bundle? - 20:47 – Modules are stateful singl...

Read and Discuss: "Second-guessing the modern web"

Sam and Ryan read and discuss Tom MacWright's recent article "Second-guessing the modern web," as well as Rich Harris's response "In defense of the modern web." The articles respectively argue against and for the JavaScript-centric approach to building websites that has taken root over the past ten years and debate issues of performance, architectural complexity, and user experience.   Topics include: - 6:30 – "Second-guessing the modern web" by Tom MacWright - 52:27 – Dan Abramov's thou...

Everyone's sidestepping useEffect. Is everyone wrong, or is it React?

Sam and Ryan grapple with the way useEffect nudges you to build UIs. They discuss whether JavaScript object identity is a good proxy to use for business logic equivalence, whether useEffect leads to more correct code, and then they chat about some of the ways React developers sidestep useEffect when the declarative programming model that Hooks impose upon them is not a good fit with their app's business logic.   Topics include: - 11:39 – JavaScript identity vs. business logic identity whe...

When APIs get misused, who's to blame?

Sam and Ryan chat about how and why framework APIs get used and abused. Ryan also shares his experience working with AWS Amplify on a side project.   Topics include: - 3:17 – How useEffect can be confusing in high-level app code - 21:05 – Immediate mode GUIs - 32:40 – Who's responsible when developers misuse framework APIs? - 46:40 – AWS Amplify - 1:14:25 – Our ideal stack   Links: - [Immediate mode GUIs - Go Time #128](https://changelog.com/gotime/128) - [AWS Amplify](https://aws...

WTF is the JAMstack?

Sam and Ryan try to unpack the meaning of JAMstack. They discuss the constraints of the architecture, why it's confusing to think of it as an application stack, the implications it has for app cachability, and whether the Twelve Factor App that Heroku introduced in the Rails-dominated era of web development might be a better way to think about this new paradigm.   Topics include: - 0:00 – Building Optimistic UIs - 13:45 – Immutable assets vs. mutable HTML - 36:05 – JAMstack, Twelve Fact...

Introducing: Frontend First

Topics include: 5:30 - Gatsby, six months later 8:10 - Mirage REPL 11:50 - Next Link 15:10 - Render props vs. Hooks 24:05 - Vercel 27:47 - Twin.macro 38:50 - Learning CSS grid through Tailwind 48:59 - Node deps, devDeps, and peerDeps Links: Mirage REPL Next Link API docs Vercel Twin.macro Tailwind CSS grid

Coming soon: Frontend First

What's the fastest way to deliver an app?

Topics include: 6:00 – Adding Cypress tests to the Mirage Inspector 14:00 – Lazy page generation, incremental rebuilds and cache stampedes with Next.js 24:51 – CDNs & surrogate keys 38:00 – Will global databases obviate the need for CDNs? 42:23 – Gatsby Cloud's ability to build surrogate keys from GraphQL queries 48:48 – Gatsby Cloud's Preview Mode 50:30 – Will hosting-only platforms like Netlify and Heroku become too generic? 53:43 – Is there a tension between Next/Gatsby's per-page...

What's been the primary driver of JavaScript adoption?

Sam and Ryan discuss what has driven JavaScript adoption on the web over the past 5-10 years, and what implications those drivers have had for the tools and frameworks we work with today. They also talk about why it's still so hard to build good SPA experiences on the web.   Topics include: - 5:10 – Finding real-world pain points - 8:44 – Mirage Inspector's serverless backend - 15:30 – Not being happy with our stack - 18:38 – Why on SPAs on the web tend to be so awful? - 30:37 – What ...

Does route-based code splitting make UX worse?

Sam and Ryan talk about the tradeoffs between shipping a single bundle of code vs. the route-based code splitting approach used by many tools like Gatsby and Next. They also talk about their recent experiences building with React, and whether web developers should compete with native experiences or embrace what the web has to offer.   Topics include: - 2:38 – In React, there are no components - 13:45 – The feeling of momentum in React - 23:33 – SPA bundles vs. per-page code splitting -...

We can't stop talking about edge deploys

Topics include: 0:44 - Tailwind UI 4:27 - Framework-agnostic tools 11:44 - Logux 33:31 - Next, code on the edge, static websites, and caching Links: Software Engineering Daily Tailwind UI Logux Next.js 9.3

Yehuda Katz on Thinking Long Term about Experimentation vs. Fragmentation in OSS

Yehuda Katz joins Sam to talk about the strategies Ember's developed to keep the majority of the community on recent versions of the framework for more than 8 years. He talks about lessons learned from the 1.13 upgrade, how the core team thinks about API experimentation vs. community fragmentation, and the approach Octane is taking to enable frontend developers that know HTML and CSS to ship interactive sites with Ember.   Topics include: - 5:15 – What experiences led Ember to prioritize ...

Mike Perham on Sustaining Open Source with Sidekiq and Faktory

Topics include: - 0:00 - What is Faktory? - 2:28 – Why might I need a background job? - 13:26 – Why did you make Sidekiq? - 16:15 – What lead to Faktory? - 24:02 – Why'd you use Go to implement Faktory's server? - 25:36 – Who is Faktory for? - 31:58 – What's the most interesting thing you've learned about architecting background job systems? - 36:24 – How do you see job queuing work in a serverless world? - 41:23 – What are some of your thoughts on open source sustainability? - 46:...

What's the best SPA architecture for edge deploys?

Topics include: - 6:00 - Exploring Next.js's architecture - 22:33 - Is runtime SSR an antipattern? - 44:04 - Are there any downsides to this architecture? - 1:11:25 - React's single shot SSR vs. Ember's asynchronous FastBoot rendering   Links: - [CAP theorem](https://en.wikipedia.org/wiki/CAP_theorem) - [Tweet from Guillermo: "Most use cases of SSR are better served by SSG"](https://twitter.com/rauchg/status/1226353359759634432)

Declarative Code and DevOps

Topics include: - 3:33 – Is usePrevious a bad hook? - 14:13 – Does declarative code make sense for app logic that's about state transitions, like animations? - 40:04 – Dependabot shifts some of the app maintenance burden from the app developer to the ops team. How might CI providers help solve these new devops issues? - 51:43 – GitHub actions   Links: - [React Spring](https://www.react-spring.io) - [Framer Motion](https://www.framer.com/motion/) - [Dependabot](https://dependabot.com...