Frontend First cover image

Frontend First

Latest episodes

undefined
Jun 10, 2020 • 1h 18min

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. Topics include:- 0:00 – Rails' influence on Redwood- 8:00 – How Redwood Services keep your backend code organized- 12:04 – The decisions driven by the desire to write React on the frontend- 22:57 – Deep dive into Redwood Services- 30:58 – Why Redwood uses GraphQL- 44:37 – Caches & invalidation- 55:52 – Why Cells are more than Hooks- 1:07:02 – How databases can make their way into the JAMStack Links:- [Redwood JS](https://redwoodjs.com/)- [Tom on Twitter](https://twitter.com/mojombo)
undefined
May 28, 2020 • 1h 3min

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 the benefits of dependency injection- 35:12 – Desire for an integrated JS environment- 50:41 – Excalidraw Links:- [Sam's video on ES modules](https://youtu.be/5F_k9q9HbAc)- [Guillermo Rauch on Static First using Serverless Frontends](https://www.serverlesschats.com/50)- [Excalidraw](https://excalidraw.com)
undefined
May 20, 2020 • 1h 17min

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 Twitter- 58:50 – "In defense of the modern web" by Rich Harris Links:- ["Second-guessing the modern web" by Tom MacWright](https://macwright.org/2020/05/10/spa-fatigue.html)- [Dan Abramov's thoughts on Twitter](https://twitter.com/dan_abramov/status/1259614150386425858)- ["In defense of the modern web" by Rich Harris](https://dev.to/richharris/in-defense-of-the-modern-web-2nia) 
undefined
May 14, 2020 • 1h 7min

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 with useEffect
undefined
May 7, 2020 • 1h 24min

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/)- [Begin.com learn](https://learn.begin.com/) 
undefined
May 1, 2020 • 1h 19min

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, and leveraging CDNs Links:- [Sam's Free Egghead Collection: Create an Optimistic UI in React with SWR](https://egghead.io/lessons/react-optimistically-update-swr-s-cache-with-client-side-data?pl=create-an-optimistic-ui-in-react-with-swr-1024)- [SWR on GitHub](https://github.com/zeit/swr)- [The Twelve Factor App](https://12factor.net/)
undefined
Apr 24, 2020 • 1h 4min

Introducing: Frontend First

Topics include:5:30 - Gatsby, six months later8:10 - Mirage REPL11:50 - Next Link15:10 - Render props vs. Hooks24:05 - Vercel27:47 - Twin.macro38:50 - Learning CSS grid through Tailwind48:59 - Node deps, devDeps, and peerDepsLinks:Mirage REPLNext Link API docsVercelTwin.macroTailwind CSS grid
undefined
Apr 20, 2020 • 15min

Coming soon: Frontend First

undefined
Apr 16, 2020 • 1h 13min

What's the fastest way to deliver an app?

Topics include:6:00 – Adding Cypress tests to the Mirage Inspector14:00 – Lazy page generation, incremental rebuilds and cache stampedes with Next.js24:51 – CDNs & surrogate keys38:00 – Will global databases obviate the need for CDNs?42:23 – Gatsby Cloud's ability to build surrogate keys from GraphQL queries48:48 – Gatsby Cloud's Preview Mode50: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 and SPAs?Links:Working on the Mirage Inspector Apr 7, 2020Working on the Mirage Inspector Apr 14, 2020FullStack Radio #137: Tim Neutkens - Continuing to Innovate with Next.js 9.3JS Party #122: What's new and what's Next.js with Guillermo Rauch from ZEITJS Party #117: Catching up with Gatsby with Dustin Schau
undefined
Apr 8, 2020 • 1h 7min

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 adoption?- 45:42 - GraphQL vs Rails 5 years in- 49:10 – SWR and a useResource hook Links:- [Tailwind CSS Tips, Tricks + Best Practices](https://www.youtube.com/watch?v=nqNIy8HkEQ8)- [JavaScript Deployments with Brian LeRoux](https://softwareengineeringdaily.com/2020/03/04/javascript-deployments-with-brian-leroux/)- [SWR, Zeit's data-fetching library for React](https://github.com/zeit/swr)

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode