The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA

## Abstract

Rails revolutionized web development and continues to evolve, but its view layer has remained largely unchanged while frontend needs have evolved dramatically. Rails has maintained its relevance by adopting technologies like Turbolinks and now Turbo/Hotwire while preserving its core principles.

But today's developers face challenges the current view layer wasn't designed to solve: complex UI interactions, reactivity, robust tooling for large codebases, intergration with modern UI kits, and modern tooling expectations.

This talk explores how a new HTML-aware ERB parser (Herb) could enable a truly reactive Rails view layer, bringing LiveView-style reactivity while preserving the "HTML-over-the-wire" philosophy. It will integrate with existing LSPs, unlock powerful tooling, and enable reactive server-rendered templates that could be reused client-side.

I'll demonstrate what's possible through proof-of-concepts and early prototypes, showing how we can collectively advance Rails views for modern development.

## Details

This session shares the vision of "ReActionView - Reactive ActionView" - a modern approach for ActionView built on Herb, designed to meet today's frontend demands while maintaining Rails' principles.

### Content

* **Today's Challenges**: Why Rails views need better tooling in the HTML-over-the-wire era
* **The Foundation**: How Herb opens new possibilities by understanding both HTML and ERB simultaneously
* **Developer Experience**: Seamless integration with Ruby, Rails, Stimulus, and Turbo LSPs
* **Modern Tooling**: Formatter, linter, and intelligent code completion for the view layer
* **Reactive Templates**: Server-side templates with LiveView-inspired reactivity without abandoning .html.erb
* **Universal Templates**: How server templates could potentially work client-side through transpilation

### Highlights

* **Technical Breakthroughs**: How advanced parsing enables next-generation view tooling
* **Prototype Demos**: Early demonstrations of the enhanced developer experience
* **Architecture Options**: Approaches for reactivity while maintaining Rails' server-centric philosophy
* **Community Roadmap**: Steps needed to bring these ideas to a production-ready HTML rendering engine

Transcript

2. Marco Roth 👋 t @marcoroth_ M @marcoroth@ruby.social g marcoroth.dev g @marcoroth Full-Stack Developer & Open Source Contributor b @marcoroth.dev
3. I ❤ Open Source
4. CableReady Core Team Maintainer
5. The Rails View Layer
6. Action View
7. July 2004 - Rails 0.5.0 https://rubytalk.org/t/ann-rails-0-5-0-the-end-of-vaporware/12744
8. Rails is a open source web-application framework for Ruby. It ships with an answer for every letter in MVC: Action Pack for the Controller and View, Active Record for the Model.
9. ERB
10. Embedded Ruby
11. "So basically the templates are plain text files that can hold anything (HTML, XML, LaTeX, emails) sprinkled with Ruby embeddings to add dynamic behavior."
12. 2005 - Rails 1.0 Layouts + Partials
13. 2007 - Rails 2.0 *.html.erb show.html.erb instead of show.rhtml
14. 2010 - Rails 3.0 Automatic HTML escaping no more <%= h ... %>
15. 2010 - Rails 3.0 ActionView::Template unified interface for different handlers (ERB, Builder, etc.)
16. 2014 - Rails 4.1 Action View Variants actionview is extracted as it's own gem
17. 2017 - Rails 5.1 form_with
18. 2020 - Rails 6.1 ActionView::Component
20. https://www.youtube.com/watch?v=y5Z5a6QdA-M
21. 2020 - Rails 6.1 render_in(context)
22. 2021 - Rails 7.0 Hotwire by default
23. 2023 - Rails 7.1 Partial Strict Locals
24. <%# locals: (message:) -%> <%= message %>
25. Action View has been really stable
26. Most features/changes were additive
27. Makes it easy to rely and build on
30. Rails always has been about server-side rendered HTML
31. Action View isn't going anywhere
32. ERB isn't going anywhere
33. It's as pure as it gets, no distractions.
34. <h1 > All Posts</h1> <ul> <% @posts.each do |post| %> <li> <%= link_to post.title, post_path(post) %> </li> <% end %> </ul>
35. Advanced HTML tooling is only getting more important
37. https://railsdeveloper.com/survey/2024/
38. https://railsdeveloper.com/survey/2024/
39. We are seeing more frameworks going back to simplicity
40. https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/
41. https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/
42. https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/
43. Server-side rendered HTML
44. HTML Templating
45. But it's not without it's issues
46. Encapsulation View Boundaries Reusability Performance Tooling Testing Frontend Logic/Complexity
48. Developer Tooling
50. https://x.com/jarredsumner/status/1635900145001971712
53. https://x.com/tenderlove/status/1575270860709302272
54. The JavaScript tooling and DX is awesome
57. Vite shows how a very well integrated tooling workflow looks like
59. It's a very coherent and awesome experience, all the way through
60. People expect good tooling nowadays
61. I believe that every new programming language needs to have that in mind.
63. It's something we can take inspiration and learn from.
64. I don't give a lot of credit to the JavaScript ecosystems
65. But I think that they nailed the view layer, components, DX, and the tooling aspects.
66. The whole Rails and greater Ruby ecosystem always worked seamlessly together too
67. A lot of gems are compatible, plug & play, and just work.
68. I think Rails is in a very good spot to adopt a coherent and seamless view layer.
69. or pretty much any other editor
70. f *.js *.ts *.jsx *.tsx f f f
71. Instant Feedback Diagnostics Language Tools
72. Great out of the box experience
73. It just works.
74. How does that compare to Ruby?
75. In the last decade the experience for *.rb files were mixed
76. 2022 Ruby LSP
78. 1-click installation
79. ... and you get a great experience.
80. What about *.html.erb files?
81. It's still a different story
82. Hotwire + View Tooling
83. 2023 Stimulus LSP
84. 2024 Turbo LSP
87. No ERB support
88. HTML-only
89. For Rails apps it's quite common to use ActionView ERB helpers
90. <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>
91. <%= 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 %>
92. No tooling support
93. ActionView hasn't seen a lot of (developer) tooling
94. Me working on these tools gave me insights
95. I wanted to tackle the bigger picture
104. HTML-aware ERB Parser https://www.youtube.com/watch?v=EIoGfMGsiZI
105. HTML-aware ERB Parser HTML-aware ERB parser Written in C99 Built on Prism Designed for tooling Support for Action View Helpers
106. HTML-aware ERB Parser An interleaved Syntax Tree of HTML and Embedded Ruby
107. HTML-aware ERB Parser Structural Awareness of HTML+ERB files
108. Why not use Nokogiri + Prism?
109. <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div> <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div>
110. Ruby HTML <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div> <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div>
111. Ruby HTML <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div> <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div>
112. Ruby HTML @user.firstname @user.lastname <div> <span> </span> <b> </b> </div>
113. Ruby HTML @user.firstname @user.lastname <div> <span> </span> <b> </b> </div> t require "prism" Prism.parse("...") require "nokogiri" Nokogiri::HTML5.fragment("...")
114. Ruby HTML @user.firstname @user.lastname <div> <span> </span> <b> </b> </div> t
115. We lost the HTML-context in the process
116. We would need to piece the two parse results together
117. Which doesn't allow for much control with edge cases
118. <% if valid? %> <h1 > Title</h1> <% end %>
119. <% if valid? %> <h1 > Title</h1> <% end %> <% if valid? %> <h1 > Title</h1> <% end %>
120. <% if valid? %> <h1 > Title</h1> <% end %>
121. <% if valid? %> <h1 > Title</h1> <% end %> @ ERBIfNode ├── tag_opening: "<%" ├── content: " if valid? " ├── tag_closing: "%>" ├── statements: │ └── @ HTMLElementNode │ ├── open_tag: │ │ └── @ HTMLOpenTagNode │ │ ├── tag_opening: "<" │ │ ├── tag_name: "h1" │ │ ├── tag_closing: ">" │ │ ├── children: [] │ │ └── is_void: false │ │ │ ├── tag_name: "h1" │ ├── body: │ │ └── @ HTMLTextNode │ │ └── content: "Title" │ │ │ └── close_tag: │ └── @ HTMLCloseTagNode │ ├── tag_opening: "</" │ ├── tag_name: "h1" │ └── tag_closing: ">" │ ├── subsequent: ∅ └── end_node: └── @ ERBEndNode ├── tag_opening: "<%" ├── content: " end " └── tag_closing: "%>"
122. <% if valid? %> <h1 > Title</h1> <% end %> @ ERBIfNode ├── tag_opening: "<%" ├── content: " if valid? " ├── tag_closing: "%>" ├── statements: │ └── @ HTMLElementNode │ ├── open_tag: │ │ └── @ HTMLOpenTagNode │ │ ├── tag_opening: "<" │ │ ├── tag_name: "h1" │ │ ├── tag_closing: ">" │ │ ├── children: [] │ │ └── is_void: false │ │ │ ├── tag_name: "h1" │ ├── body: │ │ └── @ HTMLTextNode │ │ └── content: "Title" │ │ │ └── close_tag: │ └── @ HTMLCloseTagNode │ ├── tag_opening: "</" │ ├── tag_name: "h1" │ └── tag_closing: ">" │ ├── subsequent: ∅ └── end_node: └── @ ERBEndNode ├── tag_opening: "<%" ├── content: " end " └── tag_closing: "%>"
123. <% if valid? %> <h1 > Title</h1> <% end %> @ ERBIfNode ├── tag_opening: "<%" ├── content: " if valid? " ├── tag_closing: "%>" ├── statements: │ └── @ HTMLElementNode │ ├── open_tag: │ │ └── @ HTMLOpenTagNode │ │ ├── tag_opening: "<" │ │ ├── tag_name: "h1" │ │ ├── tag_closing: ">" │ │ ├── children: [] │ │ └── is_void: false │ │ │ ├── tag_name: "h1" │ ├── body: │ │ └── @ HTMLTextNode │ │ └── content: "Title" │ │ │ └── close_tag: │ └── @ HTMLCloseTagNode │ ├── tag_opening: "</" │ ├── tag_name: "h1" │ └── tag_closing: ">" │ ├── subsequent: ∅ └── end_node: └── @ ERBEndNode ├── tag_opening: "<%" ├── content: " end " └── tag_closing: "%>"
124. <% if valid? %> <h1 > Title</h1> <% end %> @ ERBIfNode ├── tag_opening: "<%" ├── content: " if valid? " ├── tag_closing: "%>" ├── statements: │ └── @ HTMLElementNode │ ├── open_tag: │ │ └── @ HTMLOpenTagNode │ │ ├── tag_opening: "<" │ │ ├── tag_name: "h1" │ │ ├── tag_closing: ">" │ │ ├── children: [] │ │ └── is_void: false │ │ │ ├── tag_name: "h1" │ ├── body: │ │ └── @ HTMLTextNode │ │ └── content: "Title" │ │ │ └── close_tag: │ └── @ HTMLCloseTagNode │ ├── tag_opening: "</" │ ├── tag_name: "h1" │ └── tag_closing: ">" │ ├── subsequent: ∅ └── end_node: └── @ ERBEndNode ├── tag_opening: "<%" ├── content: " end " └── tag_closing: "%>"
125. <% if valid? %> <h1 > Title</h1> <% end %> @ ERBIfNode ├── tag_opening: "<%" ├── content: " if valid? " ├── tag_closing: "%>" ├── statements: │ └── @ HTMLElementNode │ ├── open_tag: │ │ └── @ HTMLOpenTagNode │ │ ├── tag_opening: "<" │ │ ├── tag_name: "h1" │ │ ├── tag_closing: ">" │ │ ├── children: [] │ │ └── is_void: false │ │ │ ├── tag_name: "h1" │ ├── body: │ │ └── @ HTMLTextNode │ │ └── content: "Title" │ │ │ └── close_tag: │ └── @ HTMLCloseTagNode │ ├── tag_opening: "</" │ ├── tag_name: "h1" │ └── tag_closing: ">" │ ├── subsequent: ∅ └── end_node: └── @ ERBEndNode ├── tag_opening: "<%" ├── content: " end " └── tag_closing: "%>"
126. <% if valid? %> <h1 > Title</h1> <% end %> @ ERBIfNode ├── tag_opening: "<%" ├── content: " if valid? " ├── tag_closing: "%>" ├── statements: │ └── @ HTMLElementNode │ ├── open_tag: │ │ └── @ HTMLOpenTagNode │ │ ├── tag_opening: "<" │ │ ├── tag_name: "h1" │ │ ├── tag_closing: ">" │ │ ├── children: [] │ │ └── is_void: false │ │ │ ├── tag_name: "h1" │ ├── body: │ │ └── @ HTMLTextNode │ │ └── content: "Title" │ │ │ └── close_tag: │ └── @ HTMLCloseTagNode │ ├── tag_opening: "</" │ ├── tag_name: "h1" │ └── tag_closing: ">" │ ├── subsequent: ∅ └── end_node: └── @ ERBEndNode ├── tag_opening: "<%" ├── content: " end " └── tag_closing: "%>"
127. Ruby HTML @user.firstname @user.lastname <div> <span> </span> <b> </b> </div>
128. This opens a lot of doors for understanding, analyzing, working with HTML+ERB documents.
129. Preview Herb Formatter
130. HTML+ERB Auto-Formatter
131. <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>
132. <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
133. <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> bundle exec herb format [file]
134. <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>
135. So that you could integrate it into your editor or CI workflow
138. Herb Linter
140. No style guide on how to write to good views
141. A way to help guide people towards best practices and to avoid commons mistakes
144. Accessibility rules (a11y)
146. A lot of them are semantic but we also have stylistic rules
152. Please open an issue if you have an idea for a new rule.
157. Herb Highlighter
159. Herb Rewriter Preview
160. Refactoring Tag Names <span> → <div> Refactoring Attribute Names data-example-target → data-hello-target Refactoring Attribute Values bg-blue-500 → bg-red-500
162. <%= tag.div class: "px-4 py-2 text-white bg-sky-700" %> <div class="px-4 py-2 text-white bg-sky-700"></div>
163. This gives us confidence to reliably refactor views
164. Herb Printer
165. <input required />
167. <input required />
168. Useful for auto-correcting lint issues
169. Herb Language Server
184. Unused Views/Partials detection
185. Jump to Definition for render calls
186. Herb Language Service
188. https://github.com/marcoroth/stimulus-lsp/pull/601
191. Release Herb v0.4.0
192. Herb Linter Herb Formatter (Preview) Improved VS Code Extension Improved Language Server Bug Fixes
194. Vision ERB Rendering Engine
195. IMPORTANT
196. This is a vision.
197. New advancements require exploration.
198. Even if none of this is viable in production it's still worth exploring.
199. So here we go.
200. Vision ERB Rendering Engine
201. String Template Engine
202. HTML Templating Engine
203. An engine that cannot produce invalid HTML
207. .ex Elixir .rb Ruby
208. .eex Embedded Elixir(EEx) .erb Embedded Ruby(ERB) .ex Elixir .rb Ruby
209. .heex HTML + EEx (HEEx) .eex Embedded Elixir(EEx) .erb Embedded Ruby(ERB) .ex Elixir .rb Ruby
210. .heex HTML + EEx (HEEx) .eex Embedded Elixir(EEx) .erb Embedded Ruby(ERB) .ex Elixir .rb Ruby ?
211. .heex HTML + EEx (HEEx) .eex Embedded Elixir(EEx) .erb Embedded Ruby(ERB) .herb HTML + ERB (Herb) .ex Elixir .rb Ruby
212. .erb Embedded Ruby(ERB)
213. <h1 > Hello, <%= name %>!
214. template = ActionView::Template.new( "<h1 > Hello, <%= name %>!", "test.html.erb", ActionView::Template::Handlers::ERB, locals: [:name] ) <h1 > Hello, <%= name %>!
215. template = ActionView::Template.new( "<h1 > Hello, <%= name %>!", "test.html.erb", ActionView::Template::Handlers::ERB, locals: [:name] ) compiled = template.handler.call( template, template.source ) <h1 > Hello, <%= name %>!
216. "@output_buffer.safe_append='<h1 > Hello, '.freeze; @output_buffer.append=( name ); @output_buffer.safe_append='!'.freeze; \n@output_buffer" compiled = template.handler.call( template, template.source )
217. .herb HTML + ERB (Herb)
218. <h1 > Hello, <%= name %>!
219. template = ActionView::Template.new( "<h1 > Hello, <%= name %>!", "test.html.herb", ActionView::Template::Handlers::Herb, locals: [:name] ) compiled = template.handler.call( template, template.source )
220. compiled = template.handler.call( template, template.source )
221. compiled = template.handler.call( template, template.source ) 💥 Tag `<h1>` opened at (1 : 1) was never closed before the end of document. UnclosedElementError in users/index.html.herb
222. Vision Reactive Templates
223. Phoenix LiveView HEEx-like
224. <ul> <% @items.each do |item| %> <li><%= item %></li> <% end %> </ul> View Template
225. @items = [1, 2, 3] <ul> <li>1</li> <li>2</li> <li>3</li> </ul> State View Template Rendered View Log Initial view rendered <ul> <% @items.each do |item| %> <li><%= item %></li> <% end %> </ul>
226. @items = [1, 2, 3, 4] <ul> <li>1</li> <li>2</li> <li>3</li> </ul> State View Template Rendered View Log Initial view rendered @items state changed <ul> <% @items.each do |item| %> <li><%= item %></li> <% end %> </ul>
227. @items = [1, 2, 3, 4] <ul> <li>1</li> <li>2</li> <li>3</li> </ul> State View Template Rendered View Log Initial view rendered @items state changed re-rendering view tracing dependencies <ul> <% @items.each do |item| %> <li><%= item %></li> <% end %> </ul>
228. <ul> <% @items.each do |item| %> <li><%= item %></li> <% end %> </ul> @items = [1, 2, 3, 4] <ul> <li>1</li> <li>2</li> <li>3</li> </ul> State View Template Rendered View Log Initial view rendered @items state changed re-rendering view tracing dependencies render delta for item `4` <li>4</li>
229. <ul> <% @items.each do |item| %> <li><%= item %></li> <% end %> </ul> @items = [1, 2, 3, 4] <ul> <li>1</li> <li>2</li> <li>3</li> </ul> State View Template Rendered View Log Initial view rendered @items state changed re-rendering view tracing dependencies render delta for item `4` <li>4</li>
230. @items = [1, 2, 3, 4] <ul> <li>1</li> <li>2</li> <li>3</li> </ul> State View Template Rendered View Log Initial view rendered @items state changed re-rendering view tracing dependencies render delta for item `4` apply delta to view <li>4</li> <ul> <% @items.each do |item| %> <li><%= item %></li> <% end %> </ul>
231. @items = [1, 2, 3, 4] <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> State View Template Rendered View Log Initial view rendered @items state changed re-rendering view tracing dependencies render delta for item `4` apply delta to view <ul> <% @items.each do |item| %> <li><%= item %></li> <% end %> </ul>
232. ERB is here to stay.
233. Action View is here to stay.
234. We want to level up Action View while keeping it Railsy.
237. What HEEx is for Phoenix LiveView Herb could be for Rails ReactionView
238. Level 1 - Better Feedback
242. Level 2 - HTML-aware Engine
243. String Template Engine
244. HTML Templating Engine
245. Backwards compatibility
246. compiled = template.handler.call( template, template.source ) 💥 Tag `<h1>` opened at (1 : 1) was never closed before the end of document. UnclosedElementError in users/index.html.herb
247. Check for invalid syntax Check for valid HTML5 A11y Checks- Missing alt attributes on <img> XSS Checks - No unsafe interpolation Only one element with the same ID
249. Level 3 - Action View Optimizations
250. Compiling Templates
253. Inlining Partial Render Calls
254. Probably more
255. Level 4 - Reactive ERB Views
256. @items = [1, 2, 3, 4] <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> State View Template Rendered View Log Initial view rendered @items state changed re-rendering view tracing dependencies render delta for item `4` apply delta to view <ul> <% @items.each do |item| %> <li><%= item %></li> <% end %> </ul>
257. index.html
258. index.html
259. index.html
260. index.html .herb
261. Opt-in to new, stricter engine
262. Progressive Enhancements
263. Gradual Adoption
264. Not "All or nothing"
265. Only use it where it needed
266. index.html .erb .herb index.html ↓
267. Technically also allows for new syntax to be introduced
269. <NameComponent first-name="Rails" last-name="Conf" /> class NameComponent < ApplicationComponent def initialize(first_name:, last_name:) @first_name = first_name @last_name = last_name end end
270. Level 5 - Client-side Templates
272. Limited Set of ERB
273. RSC - React Server Components
274. "ERB Client Components"
275. Web Components React Components ...
276. Optimistic UI updates
277. Improved Offline Functionality (+ service workers)
278. Client-side rendering for non- critical and trivial interactions
279. Level 6 - External Components
280. When you need more and don't want to abandon HTML+ERB alltogether
281. Only on certain pages
283. 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
284. Register external components import [:Alert, :AlertTitle], from: "shadcn" import_all_from "app/javascript/components" config/initializers/reactionview.rb
285. <h1><%= @post.title %></h1> <Alert variant="default"> <AlertTitle>Heads up!</AlertTitle> </Alert> app/views/posts/show.html.herb
286. The engine knows that these components are client-side and knows how to mount/ hydrate them
288. Tightly integrated Built-in Tooling No setup Works out of the box
289. I want to see what's possible
290. Vision What's next
291. Formatter Linter/Formatter Configuration ReactionView
293. Conclusion
294. Prism had a big effect on Ruby internals and the tooling landscape
295. Herb could have a similar effect for HTML Templating and Tooling
296. The community has built incredible tooling for Ruby itself.
297. Now it's time to bring that same care to the view layer.
298. With Herb, I believe we have a path to level up the view layer
300. I want to keep Ruby as attractive and as possible
304. herb-tools.dev
306. cd your_project/ gem install herb herb analyze .
308. Thank you 🙏 t @marcoroth_ M @marcoroth@ruby.social g marcoroth.dev g @marcoroth b @marcoroth.dev l /in/marco-roth