Herb to ReActionView: A New Foundation for the View Layer @ San Francisco Ruby Conference 2025

This keynote is an overview of how Herb came to be, what Herb can do for you today, and what the future with ReActionView might look like and how Herb could enable it.

Transcript

1. Marco Roth Herb to ReActionView: A New Foundation for the View Layer November 19, 2025 - San Francisco Ruby Conference 2025
2. Irina Nazarova !
3. Marco Roth "  @marcoroth_  @marcoroth@ruby.social 🌐 marcoroth.dev  @marcoroth Full-Stack Developer & Open Source Contributor  @marcoroth.dev
4. I ❤ Open Source
6. Ruby is elegant. Ruby is expressive. Ruby is a joy.
7. I want to keep Ruby as attractive as possible
8. I want to keep Ruby as productive as possible
11. CableReady Core Team Maintainer
12. Developer Tooling
13. 2023 Stimulus LSP
14. 2024 Turbo LSP
15. Herb Ecosystem
16. ReActionView
18. The JavaScript tooling and DX is awesome
21. Teaching at Bootcamps Mentoring Early-Career Engineers Helping Businesses with Hotwire
22. Lack of Feedback and Tooling
23. Source of Frustration
24. It's not just about the tooling
25. But also about the choices and decisions
26. Rails is Omakase
27. Which limits the decisions you have to make
28. The Rails defaults are awesome
29. These defaults make Rails so productive
30. The industry doesn't stand still
31. The expectations of modern web applications shifted drastically over the last years
32. The web platform also improved a lot over the last decade
33. <dialog> Web Components Progressive Web Apps (PWA) Custom Elements <script type="importmap"> inert modulepreload Declarative Shadow DOM
34. subgrid Container Queries :has() @function @property CSS Nesting @layer
35. Speculation Rules API Invoker Commands API View Transition API Popover API HTML Sanitizer API moveBefore()
36. Encapsulation View Boundaries Reusability/Organisation Performance Tooling Testing Frontend Logic/Complexity
39. I've been wondering how we could approach this problem
40. With the goal to keep it as backwards compatible as possible
41. Make it feel as familiar to what Action View has been doing for over two decades
42. So we can write powerful and ambitious applications using Full-Stack Ruby
43. Today
44. Marco Roth Herb to ReActionView: A New Foundation for the View Layer November 19, 2025 - San Francisco Ruby Conference 2025
45. How Herb came to be? How can Herb help? What's next?
46. How Herb came to be?
47. June 2021
48. app/javascript/controllers/user_profile_controller.js 📄
49. import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { console.log("User Profile connected") } }
50. import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { console.log("User Profile connected") } }
51. <div data-controller="user_profile"> </div>
53. import { Controller } from "@hotwired/stimulus" export default class extends Controller { connect() { console.log("User Profile connected") } }
54. <div data-controller="user_profile"> </div>
55. <div data-controller="user-profile"> </div>
56. These mistakes happen so easily
58. Available Now Stimulus LSP
61. HTML-only
62. No ERB support
63. <div data-controller="hello"> <input data-hello-target="name" type="text"> <button data-action="click->hello#greet"> Greet </button> <span data-hello-target="output"></span> </div>
64. <%= tag.div data: { controller: "hello" } do %> <%= content_tag :input, data: { hello_target: "name"} %> <%= button_tag data: { action: "click->hello#greet" } do %> Greet <% end %> <%= tag.span data: { hello_target: "output" } %> <% end %>
65. Missing support for HTML+ERB and Rails- specific helpers
66. Turbo LSP
67. ERB Support in Ruby LSP
68. RubyConf 2023
71. A few failed attempts
72. I wanted to tackle the bigger picture
73. HTML+ERB Parser
74. HTML-aware ERB parser
75. HTML-aware ERB Parser Structural Awareness of HTML+ERB templates
76. February 2025
77. Empowering Developers with HTML-Aware ERB Tooling Marco Roth April 16, RubyKaigi 2025
78. Herb Parser releases in April 2025
79. HTML-aware ERB Parser https://www.youtube.com/watch?v=EIoGfMGsiZI
82. Herb Linter Herb Formatter Herb Language Server
85. This is already a rich ecosystem
86. How Herb came to be? How can Herb help? What's next?
87. No Setup Low Config
88. It should just work, even if you haven't setup or installed anything.
89. Where to start?
90. Herb Language Server
95. vim.lsp.enable('herb_ls')
101. Herb Linter
103. No style guide on how to write to good views
104. A way to help guide people towards best practices
105. Avoid Common Mistakes Enforce Consistent Style Improve Accessibility (a11y)
113. 50 Linter Rules
114. Ideas for 60+ new rules
115. Herb Formatter
116. HTML+ERB Auto-Formatter
117. <div><h1><%=@title%></h1><%if user_signed_in?%> <p>Welcome,<%= current_user.name%>!</p><%else%> <p>Please<%= link_to"sign in",login_path%>.</ p><%end%></div>
118. <div><h1><%=@title%></h1><%if user_signed_in?%> <p>Welcome,<%= current_user.name%>!</p><%else%> <p>Please<%= link_to"sign in",login_path%>.</ p><%end%></div> S cmd
119. <div><h1><%=@title%></h1><%if user_signed_in?%> <p>Welcome,<%= current_user.name%>!</p><%else%> <p>Please<%= link_to"sign in",login_path%>.</ p><%end%></div> npx @herb-tools/formatter
120. <div> <h1><%= @title %></h1> <% if user_signed_in? %> <p>Welcome, <%= current_user.name %>!</p> <% else %> <p>Please <%= link_to "sign in", login_path %></p> <% end %> </div>
123. npx @herb-tools/linter npx @herb-tools/formatter
124. - name: Herb Linter run: npx @herb-tools/linter - name: Herb Formatter run: npx @herb-tools/formatter --check .github/workflows/lint.yml
128. Herb Linter --fix
131. Herb Language Server Fix-on-Save
133. .herb.yml
134. One config File Linter Linter Rules Formatter
135. Custom Herb Linter Rules
136. <%# herb:disable %>
139. https://herb-tools.dev/blog/whats-new-in-herb-v0-8
140. So far this has all been about tooling.
141. Working on these tools made me realize something
142. If you have all this introspection and knowledge about HTML+ERB templates
143. You can also render and evaluate HTML+ERB templates
145. ::Engine Herb
146. HTML-aware ERB Rendering Engine
147. Erubi::Engine API-compatible
148. It's using the Herb Parser to parse the templates
149. Can ensure valid HTML Templates and Syntax
152. The Herb Parser already exactly knows where the error is
155. Since we control the rendering now
156. We can inject additional HTML attributes in development
157. <html data-herb-debug-file-name="application.html.erb" > ... </html>
158. [data-herb-debug-file-name] { outline: blue dotted 2px; outline-offset: 2px; } // ...
161. <html data-herb-debug-outline-type="view" data-herb-debug-file-name="application.html.erb" > ... </html>
164. <html data-herb-debug-outline-type="view" data-herb-debug-file-name="application.html.erb" data-herb-debug-file-relative-path="..." > ... </html>
167. <html data-herb-debug-outline-type="view" data-herb-debug-file-name="application.html.erb" data-herb-debug-file-relative-path="..." data-herb-debug-file-full-path="..." > ... </html>
174. Show ERB content on hover
177. Jump-to-source
179. This gives us valuable feedback
181. The same parser that's now compiling/rendering your views is also running in your editor
182. Makes the tooling a lot more accurate and instant
183. String Templating Engine HTML Templating Engine ↓
184. Our engine is now aware of its HTML surroundings and can enhance it
186. Now we have tooling and rendering figured out
187. What is next?
188. ActionView
189. Reimagined ActionView
190. Reimagined Reengineered ActionView
191. Reengineered Reimagined ActionView Reactive
193. An initiative to explore what’s possible in the Rails view layer in 2025 and beyond
194. A vision with 6 adoption levels
195. Level 1 - Better Errors Messages Level 2 - HTML-aware Engine Level 3 - Action View Optimizations Level 4 - Reactive ERB Views Level 5 - Client-side Templates Level 6 - External Components
196. ReActionView integrates Herb::Engine into Rails applications
197. bundle add reactionview rails generate reactionview:install
198. # config/initializers/reactionview.rb ReActionView.configure do |config| # Intercept .html.erb templates # config.intercept_erb = true # Enable debug mode in development config.debug_mode = Rails.env.development? end
199. # config/initializers/reactionview.rb ReActionView.configure do |config| # Intercept .html.erb templates config.intercept_erb = true # Enable debug mode in development config.debug_mode = Rails.env.development? end
206. Level 1 - Better Errors Messages Level 2 - HTML-aware Engine Level 3 - Action View Optimizations Level 4 - Reactive ERB Views Level 5 - Client-side Templates Level 6 - External Components
207. Level 3 - Action View Optimizations
208. Inlining Partial render calls Inlining Action View Tag Helpers Minifying insignificant whitespace
209. Level 4 - Reactive ERB Views
210. StimulusReflex Phoenix LiveView
211. Level 5 - Client-side Templates
212. Limited Set of ERB
213. "ERB Client Components"
214. Web Components React Components ...
215. Level 6 - External Components
216. When you need more and don't want to abandon HTML+ERB alltogether
217. Only on certain pages
218. pin "@rails/actioncable", to: "actioncable.esm.js" pin "@rails/activestorage", to: "activestorage.esm.js" pin "@rails/actiontext", to: "actiontext.esm.js" pin "trix" pin_all_from "controllers" importmap-rails
219. Register external components import [:Alert, :AlertTitle], from: "shadcn" import_all_from "app/javascript/components" config/initializers/reactionview.rb
220. <h1><%= @post.title %></h1> <Alert variant="default"> <AlertTitle>Heads up!</AlertTitle> </Alert> app/views/posts/show.html.herb
221. The engine knows that these components are client-side and knows how to mount/hydrate them
223. https://www.youtube.com/watch?v=lTL2-ERM_yY
224. If you are building ambitious apps and believe this is important
225. I'm looking for companies that want to support the project as strategic partners
226. To help shape how this future might look like.
227. Please get in touch
228. Conclusion
229. The Ruby Prism Parser had a big effect on Ruby internals and the tooling landscape
230. Herb already has a similar effect for HTML Templating and Tooling
231. Herb started as a Parser
232. and is now an ecosystem of valuable tools
233. Which unlocks a whole set of new tools to be built
234. I believe that this already shows what could be possible
235. We can push more boundaries
236. The community has built incredible tooling for Ruby itself.
237. Now it's time to bring that same care to the view layer.
238. With Herb and ReActionView I believe we have a path to level up the view layer
239. Herb::Engine
241. At the beginning of 2025 I had now idea what this year would bring
242. Writing a new HTML+ERB parser and building an ecosystem was not on my bingo card
244. On demand learning is really powerful
245. Projects like these are great to learn new languages and skills
246. I haven't written any C code before this project
247. I haven't dealt with Ruby C Extensions before
248. I was a great excuse to learn more about WebAssembly
250. But I think it really goes to show what a bit of dedication can yield
251. How it can influence the trajectory of a templating language
252. and the whole developer experience around it
254. I hope this talk has given an overview of Herb and its potential
255. Please try the tools, report issues, and give feedback.
258. github.com/sponsors/marcoroth 
261. herb-tools.dev
262. I believe there is a bright future for the Ruby Frontend Story
264. Build your new applications in Ruby
265. Build your new open source in Ruby
266. With a bit of dedication and time you can build awesome things.
267. Be the change you want to see in the world
268. Thank you $  @marcoroth_  @marcoroth@ruby.social 🌐 marcoroth.dev  @marcoroth  @marcoroth.dev  /in/marco-roth