Frontend First

Latest Episodes:

Key props vs. effects Oct 28, 2020

Show notes

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:

How to test apps built on third-party services Oct 15, 2020

Show notes

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 Sep 17, 2020

Show notes

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

Next.js vs. Gatsby, revisited Aug 26, 2020

Show notes

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 Aug 12, 2020

Show notes

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

Does code splitting negate the benefits of building an SPA? Jul 29, 2020

Show notes

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 Jul 16, 2020

Show notes

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:

Tech debt vs. platform risk Jul 02, 2020

Show notes

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

Safety and idempotence Jun 24, 2020

Show notes

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 on How Pika's Making the Web Faster Jun 19, 2020

Show notes

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:

Our TOPPODCAST Picks

Follow Us

Stay Connected

Related Podcasts

Links

Stay Connected