Frontend First

Latest Episodes:

Tom Preston-Werner on Architecture Decisions in Redwood JS Jun 10, 2020

Show notes

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)

Why the browser is the most complex runtime environment May 28, 2020

Show notes

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)

Read and Discuss: "Second-guessing the modern web" May 20, 2020

Show notes

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)

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

Show notes

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

When APIs get misused, who's to blame? May 07, 2020

Show notes

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/)

WTF is the JAMstack? May 01, 2020

Show notes

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/)

Introducing: Frontend First Apr 24, 2020

Show notes

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:

Coming soon: Frontend First Apr 20, 2020

Show notes

What's the fastest way to deliver an app? Apr 16, 2020

Show notes

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 and SPAs?

Links:

What's been the primary driver of JavaScript adoption? Apr 08, 2020

Show notes

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)