151: DHH – Building HEY with Hotwire
Episode
74 min
Read time
2 min
Topics
Design & UX, Software Development, Science & Discovery
AI-Generated Summary
Key Takeaways
- ✓Turbo Frames for component isolation: Wrap page segments in frames to update independently without full page reloads. Each frame maintains its own caching schedule—inbox content churns constantly while label menus cache for months, reducing server load and preventing form state loss during concurrent operations.
- ✓Progressive enhancement ladder: Start with Turbo Drive for zero-config AJAX navigation, add Turbo Frames for partial updates, use Turbo Streams for multi-element mutations via WebSocket or form responses, then Stimulus for JavaScript sprinkles. Pay complexity costs only when needed, not upfront for simple CRUD screens.
- ✓Server-side template reuse: Single HTML partials render initial pages, lazy-loaded frames, form responses, and WebSocket updates. HEY ships 40KB compressed JavaScript with zero client-side templates by keeping domain logic, permissions, and database queries server-side where SQL executes in 50-70 milliseconds versus HTTP round-trips.
- ✓HTTP/2 multiplexing enables frames: Multiple frame requests over one connection with minimal ping penalty makes lazy-loading viable. Separate frames with distinct cache lifecycles outperform monolithic pages—five segments with independent expiration beats single-key cache invalidation when any segment changes.
- ✓Training concessions with designers: Developers propose UI adjustments that simplify implementation—moving buttons to enable frame replacement versus custom TurboStream responses. Designers approve when trade-offs are minor, reject when design integrity matters, creating collaborative optimization without sacrificing either development velocity or user experience quality.
What It Covers
DHH explains Hotwire, a framework for building modern web applications using server-side rendering with HTML over the wire, eliminating the need to duplicate templates in JavaScript while maintaining rich interactivity through Turbo Drive, Turbo Frames, and Turbo Streams.
Key Questions Answered
- •Turbo Frames for component isolation: Wrap page segments in frames to update independently without full page reloads. Each frame maintains its own caching schedule—inbox content churns constantly while label menus cache for months, reducing server load and preventing form state loss during concurrent operations.
- •Progressive enhancement ladder: Start with Turbo Drive for zero-config AJAX navigation, add Turbo Frames for partial updates, use Turbo Streams for multi-element mutations via WebSocket or form responses, then Stimulus for JavaScript sprinkles. Pay complexity costs only when needed, not upfront for simple CRUD screens.
- •Server-side template reuse: Single HTML partials render initial pages, lazy-loaded frames, form responses, and WebSocket updates. HEY ships 40KB compressed JavaScript with zero client-side templates by keeping domain logic, permissions, and database queries server-side where SQL executes in 50-70 milliseconds versus HTTP round-trips.
- •HTTP/2 multiplexing enables frames: Multiple frame requests over one connection with minimal ping penalty makes lazy-loading viable. Separate frames with distinct cache lifecycles outperform monolithic pages—five segments with independent expiration beats single-key cache invalidation when any segment changes.
- •Training concessions with designers: Developers propose UI adjustments that simplify implementation—moving buttons to enable frame replacement versus custom TurboStream responses. Designers approve when trade-offs are minor, reject when design integrity matters, creating collaborative optimization without sacrificing either development velocity or user experience quality.
Notable Moment
DHH reveals Basecamp originally had a controller with 22 actions before REST constraints forced decomposition into six focused controllers. He argues similar constraints in TurboStreams—limiting DOM mutations to append, replace, update, delete—prevent bloated responses and encourage cleaner architecture versus unlimited JavaScript eval capabilities.
Episode Transcript
In this episode of Fullstack Radio, I talk to DHH about building hay with Hotwire. This is Fullstack Radio episode one fifty one. I guess the reason that we're chatting today is because, you guys just put out Hotwire, which is like a set of tools for building sort of modern, web applications, sort of the Basecamp way, which is, of course, always contrarian in in some way, shape, or form. And I know I had messaged you, way back in the spring asking for the exclusive, podcast interview on this tech, and it finally dropped, I think, like, maybe the the week of Christmas or the week before Christmas. So I'm super excited to get a chance to chat about it now. I am super excited to finally have it out there. We I originally intended that we premiere all this at RailsConf in the spring, and then, I mean, all help broke loose this year. Yeah. Pandemic. So the conference didn't happen, and then we've released, hey, our new email service and then a million other things. And then it wasn't really until coming out from under all of that to some extent that, we were looking at like, oh, shit. We should, get this stuff ready. Yeah. And a lot of it really was just hearing from people not happy with how they were developing their apps and constantly asking, hey. You showed the stack you used for Hey, which was just boring tech, really, plus a few things that weren't released. So what's the unreleased stuff? And, I think that was really just the the motivating factors of getting this finding out there that I'd hate for someone to embark on a new interesting app and either break their neck trying because they just couldn't get it to work. I mean, there's so many ideas and so many teams and initiatives that are really fragile in the beginning where you don't need that much pushback from either your domain or your technology before you realize, I don't know. We'll do it some other time. I'll I'll push it up later. And if Hotwire is anything, it's hopefully a way to have less of that, have more of an experience of actually, I could do it. I could do it by myself. I can get something out there in very much the spirit of of how we originally created Basecamp back in 2003, where I, as the sole technical person, built the whole thing. And I was thinking, there were not a lot of environments where that was feasible within the amount of time, with the team we had, and so forth. And I've just to some ways, I've gotten frozen in that moment to the extent of wanting to believe that it is possible to build base camp again if we had to with the team we had. But that requires a constant fight with the complexification of all this stuff that we call web development …
Get the full transcript (14,035 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 71-minute episode.
Get Full Stack Radio summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Full Stack Radio
153: DHH – Omarchy and Designing Your Own OS on Arch Linux
Aug 21 · 76 min
Lenny's Podcast
A child psychologist’s guide to working with difficult adults | Dr. Becky Kennedy
Feb 1
More from Full Stack Radio
152: Ben Orenstein - How to Stand Out When Applying for a Job at a Small Company
Jan 28 · 47 min
The Peter Attia Drive
#377 ‒ Special episode: Understanding true happiness and the tools to cultivate a meaningful life—insights from past interviews with Arthur Brooks
Dec 22
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links. As an Amazon Associate, SignalCast earns from qualifying purchases.
Tools
“Start with Turbo Drive for zero-config AJAX navigation, add Turbo Frames for partial updates, use Turbo Streams for multi-element mutations via WebSocket or form responses, then Stimulus for JavaScript sprinkles.”
“DHH explains Hotwire, a framework for building modern web applications using server-side rendering with HTML over the wire, eliminating the need to duplicate templates in JavaScript while maintaining rich interactivity through Turbo Drive, Turbo Frames, and Turbo Streams.”
“Start with Turbo Drive for zero-config AJAX navigation, add Turbo Frames for partial updates, use Turbo Streams for multi-element mutations via WebSocket or form responses, then Stimulus for JavaScript sprinkles.”
“Start with Turbo Drive for zero-config AJAX navigation, add Turbo Frames for partial updates, use Turbo Streams for multi-element mutations via WebSocket or form responses, then Stimulus for JavaScript sprinkles.”
“Wrap page segments in frames to update independently without full page reloads. Each frame maintains its own caching schedule—inbox content churns constantly while label menus cache for months, reducing server load and preventing form state loss during concurrent operations.”
More from Full Stack Radio
We summarize every new episode. Want them in your inbox?
153: DHH – Omarchy and Designing Your Own OS on Arch Linux
152: Ben Orenstein - How to Stand Out When Applying for a Job at a Small Company
150: Secret Screencasting Tips & Behind the Scenes of Tailwind CSS 2.0
149: Choosing a Payment Processor, Radical Icons & W3C Hype
148: Accessible Focus Styles, Tailwind Labs on YouTube, and Secret Projects
Similar Episodes
Related episodes from other podcasts
Lenny's Podcast
Feb 1
A child psychologist’s guide to working with difficult adults | Dr. Becky Kennedy
The Peter Attia Drive
Dec 22
#377 ‒ Special episode: Understanding true happiness and the tools to cultivate a meaningful life—insights from past interviews with Arthur Brooks
Software Engineering Daily
Sep 23
Rethinking GraphQL Frontends with Robert Balicki
Software Engineering Daily
Aug 5
Electron and Desktop App Engineering with Shelley Vohr
Shop Talk Show
Mar 24
657: David Darnes on Web Components and Design Systems
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Full Stack Radio.
Every Monday, we deliver AI summaries of the latest episodes from Full Stack Radio and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime