Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025

Common patterns and best practices for developing Frontend in Rails applications.

This talk does not focus on Hotwire.

Transcript

1. Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025
3. Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025
6. Rails frontend
7. Rails 6 Webpacker *.js.erb rails-ujs jQuery
8. Rails 6 = dark ages 👹 Webpacker *.js.erb rails-ujs jQuery
9. 😫 Rails backend + React frontend
10. Rails 6 Webpacker *.js.erb rails-ujs jQuery
11. Rails 6 🧑🎨🖼 Rails 7 renaissance Webpacker *.js.erb rails-ujs jQuery importmaps/esbuild *.turbo_stream.erb Turbo Drive StimulusJS
12. Rails 7=8 importmaps/esbuild *.turbo_stream.erb Turbo Drive StimulusJS
13. Rails 7=8 importmaps/esbuild *.turbo_stream.erb Turbo Drive StimulusJS ❤ Rails frontend
14. Rails 8 Frontend: 10 commandments & 7 deadly sins in 2025
16. • -c=tailwind, bootstrap, bulma, postcss, sass • -j=importmap, bun, webpack, esbuild, rollup • -a=propshaft, sprockets • -d=sqlite3, mysql, trilogy, postgresql • --main
17. LEGACY PROJECTS NEVER SEEN IN COMMERCIAL PROJECT 👑 👻 👴
18. IMPORTMAP ESBUILD *if you have few JS dependencies VS *if you have JS dependencies with their own CSS
19. • -c=none, tailwind, bootstrap, bulma, postcss, sass • -j=importmap, bun, webpack, esbuild, rollup • -a=propshaft, sprockets • -d=sqlite3, mysql, trilogy, postgresql • --main
24. Terms Privacy © 2024 by MyCompany Logo Login SignUp Customers
25. Terms Privacy © 2024 by MyCompany Logo Login SignUp Customers START WITH LAYOUT DESIGN
28. <aside> fixed <navbar> sticky <main> scroll-y
34. <aside> fixed <navbar> sticky <main> scroll-y
41. <navbar> <main> <footer>
42. twitter linkedin myApp myApp
43. 😬 Dropdown menus 🚩🚩🚩
44. You are building a Web App 💰💰💰💰 Not a Web Site 💰🥲
45. <navbar> <main> scroll-y = yield <footer> <aside> fixed <navbar> sticky <main> scroll-y = yield Desktop Mobile
46. Terms Privacy © 2024 by MyCompany Logo Login SignUp Customers START WITH LAYOUT DESIGN
47. Terms Privacy © 2024 by MyCompany Logo Login SignUp Customers START WITH LAYOUT DESIGN RESPONSIVE
53. 📸
54. ✅ LAYOUT DESIGN
55. TailwindCSS: responsive content 101
58. Page Component
59. Page Component
60. Page Component
61. Page Component title subtitle actions yield
62. Page Component - wide title subtitle actions yield
63. Page Component - centered title subtitle actions yield
64. Page Component
65. Flash messages
66. Flash messages
67. Flash messages
68. Flash messages
69. Flash messages
70. active_link_to
71. active_link_to
72. Don’t forget TESTS!!!
73. Buttons
74. Buttons
75. Buttons
76. Buttons
77. Buttons
78. Buttons
79. Buttons
80. Even if you use Tailwind, nobody forbids you to abstract CSS!!!!!!!!!!!!!!!
81. Even if you use Tailwind, nobody forbids you to abstract CSS!!!!!!!!!!!!!!!
82. CSS abstraction VS RailsHelper VS ViewComponent active_link_to PageComponent FlashComponent .btn btn-primary btn-sm .nav-link .form-input
83. CSS abstraction VS RailsHelper VS ViewComponent active_link_to PageComponent FlashComponent .btn btn-primary btn-sm .nav-link .form-input
85. TABS
86. FORM PREVIEW
87. VIEW PASSWORD
88. CLIPBOARD
89. https://www.betterstimulus.com/ https://www.stimulus-components.com/
90. Use native HTML elements!
91. Use native HTML elements! <details> = dropdown
92. Use native HTML elements! <progress>
95. Do not disable, unless redirect to external service (oAuth)
96. Do not disable, unless redirect to external service (oAuth) First complete feature with normal redirects. Next, add reactivity.
97. Turbo 8 Prefetch (Instaclick)
98. Disable Turbo 8 Prefetch (Instaclick)
101. Icons > Text
102. Icons > Text
103. Style error pages 💅
104. Style error pages 💅
105. USE META TAGS
106. Custom scaffold templates
107. Component libraries
108. LETS RECAP 1. Layout design = start here! 2. Page component - consistent <%= yield %> 3. Flash styling 4. Active link to 5. Button styling 6. CSS abstraction / helpers / view components 7. Hotwire, Stimulus 8. 404 pages, Dark Mode, Meta tags, native HTML tags 9. Component libraries
109. Learn to build cool stuff on SupeRails.com
110. Tailwind on Rails
111. Build mobile apps with Rails (Strada, Turbo Native)
113. Let’s work together! 🤝 • Rails frontend • Hotwire • Turbo Native (mobile apps with Rails) • Billing / SaaS • Multitenancy • Tests from zero to hero