Rails frontend: 10 commandments and 7 deadly sins in 2025
summary
Claims that Rails 7 front end now delivers 80–90% of React features using Stimulus and Hotwire and shows concrete choices: prefer Tailwind, use ESBuild when importing libraries, use importmaps for tiny JS. Layout pattern is navbar + sticky sidebar on desktop and footer navigation on mobile with reusable page components. Implements flash with a Stimulus controller that auto-dismisses in 5s, reimplements Bootstrap-style buttons in Tailwind, and advises keeping Turbo Drive enabled and using small Stimulus controllers.
AI-written summary · about
chapters (21)
- 0:00Introduction to Rails frontend
- 1:06Rails 6 vs Rails 7 frontend
- 3:56Choosing CSS and JS frameworks
- 5:22Layout design principles
- 8:56Responsive layout design
- 10:03Spacing with Tailwind CSS
- 10:46Page component structure
- 11:49Flash messages implementation
- 12:54Active link highlighting
- 13:35Reusable button patterns
- 15:44CSS abstraction approaches
- 16:47Stimulus controllers best practices
- 17:50Native HTML components
- 18:32Turbo Drive and reactivity
- 20:37Dark mode considerations
- 21:19Icon vs text navigation
- 22:01Custom error pages
- 22:22Metatags and Open Graph
- 23:06Scaffold generator tables
- 23:49View component libraries
- 24:11Closing and resources
related talks
35mFrontendless Rails frontend
32mHotwiring My React Brain
23mRails Frontend Evolution: It Was a Setup All Along
31mReact on Rails
21m6 degrees of JavaScript on Rails
36mFront-End Sadness to Happiness: The React on Rails Story
31mReact.js on Rails
30mThe Future of Rails as a Full-Stack Framework powered by Hotwire