Frontend First

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 misses enough use cases, should it even exist?

Links:

• Sebastian's tweet about using the key prop
• Sam and Ryan's video hacking on the REPL

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

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 easily prioritize consistency or availability
• 57:45 – Reflecting on Firebase

Links:

• 168 AWS Services in 2 minutes

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

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 comparison

Links:

• Ryan's Amplify tweet

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

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

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 – Setting up a webhook using Netlify cloud function

- 37:19 – Risk profile of paid services vs. OSS libraries

Links:

- Hasura

- URQL

- Netlify Functions

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 – How should you think of useEffect's dependency array

- 38:00 – Routing in React Router v6

Links:

- Sam's YouTube video on React Router v6

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 sustainability model?

• 17:20 – What's going on in Snowpack?

• 21:43 – What does it look like to use or migrate to Snowpack today?

• 24:50 – How does Snowpack actually work?

• 36:44 – How do you deal with dependencies that can't be deduplicated?

• 48:14 – Snowpack's React App template

• 49:49 – Can you migrate off of Snowpack if you need to fall back to something like Webpack?

• 53:09 – How do ES modules affect dependency resolution?

• 1:05:50 – What's in your roadmap?

Links:

• Drew on Twitter

• Snowpack

• Arborist Deep Dive

• ESNEXT Conf

• Pika pack