Frontend First

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)

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)

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)

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

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

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

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

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:

• Working on the Mirage Inspector Apr 7, 2020
• Working on the Mirage Inspector Apr 14, 2020
• FullStack Radio #137: Tim Neutkens - Continuing to Innovate with Next.js 9.3
• JS Party #122: What's new and what's Next.js with Guillermo Rauch from ZEIT
• JS Party #117: Catching up with Gatsby with Dustin Schau

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)