Frontend First - podcast cover

Frontend First

Sam Selikoff, Ryan Torontofrontendfirst.fm
A podcast about modern UI development on the web. Hosted by Sam Selikoff and Ryan Toronto.
Last refreshed:
Follow this podcast in the Metacast mobile app to refresh it and see new episodes.
Download Metacast podcast app
Podcasts are better in Metacast mobile app
Don't just listen to podcasts. Learn from them with transcripts, summaries, and chapters for every episode. Skim, search, and bookmark insights. Learn more

Episodes

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 misses enough u...

Oct 28, 20201 hr 9 minEp. 111

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

Oct 15, 20201 hrEp. 110

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

Sep 17, 20201 hr 6 minEp. 109

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

Aug 26, 202049 minEp. 108

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

Aug 12, 20201 hr 7 minEp. 107

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

Jul 29, 202051 minEp. 106

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

Jul 16, 202055 minEp. 105

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 – Setting up a webho...

Jul 02, 20201 hr 8 minEp. 104

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 – How should y...

Jun 24, 20201 hr 6 minEp. 103

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

Jun 19, 20201 hr 10 minEp. 102

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

Jun 10, 20201 hr 18 minEp. 101

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 singletons, and ...

May 28, 20201 hr 3 minEp. 100

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 thoughts on Tw...

May 20, 20201 hr 17 minEp. 99

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

May 14, 20201 hr 7 minEp. 98

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.amazon.com/amplify...

May 07, 20201 hr 24 minEp. 97

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 Factor Apps, an...

May 01, 20201 hr 19 minEp. 96

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

Apr 24, 20201 hr 4 minEp. 95

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

Apr 16, 20201 hr 13 minEp. 93

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 has driven JS...

Apr 08, 20201 hr 7 minEp. 92

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 - 45:33 - Con...

Apr 01, 20201 hr 29 minEp. 91

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

Mar 25, 20201 hr 26 minEp. 90

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

Mar 20, 20201 hr 41 minEp. 89

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:48 – What make...

Mar 11, 20201 hr 10 minEp. 88

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)

Feb 19, 20202 hr 15 minEp. 87

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) - [GitHub Act...

Feb 12, 20201 hr 7 minEp. 86

Launching Mirage JS!

Topics include: - 2:46 – Launching Mirage JS! - 10:17 – Feeling empowered bringing Mirage to the wider JS ecosystem, and what's next for Mirage - 19:40 – A Mirage tutorial + video series - 19:30 – GraphQL support in Mirage - 30:13 – TypeScript support in Mirage - 37:25 – Node support in Mirage Links: - [Mirage's new homepage](https://miragejs.com)

Jan 29, 202044 minEp. 85

When UI isn't a function of state

Topics include: - 4:45 - Building out Mirage's new homepage. SVG positioning. - 15:42 - CSS Grid for layouts - 19:36 - Update on launching Mirage JS. Adding types to Mirage. - 24:09 - Learning about idempotence through React Spring. What to do when UI isn't a function of state. - 52:40 - Sharp tools vs. high-level APIs Links: - [React Spring](https://www.react-spring.io) - [Small, Sharp Tools](https://brandur.org/small-sharp-tools)

Jan 22, 20201 hr 5 minEp. 84

How should we style the stuff in between components?

Topics include: 3:17 - Refactoring to Tailwind defaults 11:17 - What exactly are Container components? 17:35 - Marginless components 23:40 - Grids 25:50 - What you can learn by using Tailwind defaults 41:00 - Using Mirage tests to re-create development scenarios 50:45 - Frontend First Links: Tailwind CSS ReactiveConf 2019 - Mark Dalgleish: Rethinking Design Practices Frontend First Development...

Jan 08, 20201 hrEp. 83

Which concepts should a framework teach?

Topics include: - 0:40 – Which concepts should a framework be responsible for teaching? - 7:20 – What does it actually take for someone to start using a framework? And Vue's multiparadigm approach. - 16:32 – What if Ember Data wasn't part of Ember? - 29:50 – Functional digression - 37:00 – Back to Ember Data! - 43:34 – When paradigms conflict with each other - 49:46 – Back to Ember Data, again! Links: - [Vue composition API](https://vue-composition-api-rfc.netlify.com) - [MobX](https://mobx.js.o...

Dec 20, 20191 hr 10 minEp. 82
For the best experience, listen in Metacast app for iOS or Android