Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam

This talk is the conclusion of a journey I’ve been sharing throughout 2025. At RubyKaigi, I introduced Herb: a new HTML-aware ERB parser and tooling ecosystem. At RailsConf, I released developer tools built on Herb, including a formatter, linter, and language server, alongside a vision for modernizing and improving the Rails view layer.

At Rails World, I’ll debut ReActionView: a new ERB engine built on Herb, fully compatible with .html.erb but with HTML validation, better error feedback, reactive updates, and built-in tooling.
This will be the first public release, exclusive to Rails World, tying together everything from the past talks and even bringing exclusive updates to tools I first showed at Rails World 2023.

https://rubyonrails.org/world/2025/day-2/marco-roth

Transcript

2. Amanda Perino Xavier Noria
3. Marco Roth !  @marcoroth_  @marcoroth@ruby.social 🌐 marcoroth.dev  @marcoroth Full-Stack Developer & Open Source Contributor  @marcoroth.dev
4. I ❤ Open Source
5. CableReady Core Team Maintainer
7. I want to keep Ruby/Rails as attractive and easy to get started as possible
9. Teaching Bootcamps Mentoring Early-Career Engineers Helping Businesses with Hotwire
10. Lack of Feedback of Tooling
11. # Miles Woodroffe # Yaroslav Shmarov
12. Available Today
15. HTML-only
16. No ERB support
17. For Rails apps it's quite common to use ActionView ERB helpers
18. <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>
19. <%= 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 %>
20. <%= tag.div( data: { controller: "filter", filter_open_class: "border-white", filter_close_class: "border-gray-300" } ) %> Missing full support for HTML+ERB and Rails-specific helpers
21. No tooling support
24. I had a few use-cases for a smart ERB parser that could handle use-cases like this
25. I wanted to tackle the bigger picture
27. Empowering Developers with HTML-Aware ERB Tooling Marco Roth April 16, RubyKaigi 2025
34. HTML-aware ERB Parser https://www.youtube.com/watch?v=EIoGfMGsiZI
35. HTML-aware ERB Parser HTML-aware ERB parser Written in C99 Built on Prism Designed for tooling Support for Action View Helpers
36. HTML-aware ERB Parser An interleaved Syntax Tree of HTML and Embedded Ruby
37. HTML-aware ERB Parser Structural Awareness of HTML+ERB files
38. <% if valid? %> <h1>Title</h1> <% end %>
39. <% if valid? %> <h1>Title</h1> <% end %> <% if valid? %> <h1>Title</h1> <% end %>
40. <% if valid? %> <h1>Title</h1> <% end %>
41. <% 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: "%>"
42. <% 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: "%>"
43. <% 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: "%>"
44. <% 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: "%>"
45. <% 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: "%>"
46. <% 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: "%>"
49. HTML(+ERB) Templating
50. Vision on the future of the view layer in Rails
51. it doesn't come without it's issues
52. Encapsulation View Boundaries Reusability Performance Tooling Testing Frontend Logic/Complexity
53. Developer Tooling
54. Preview Herb Formatter
55. HTML+ERB Auto-Formatter
56. <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>
57. <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
58. <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 [file]
59. <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>
62. Herb Linter
66. 18 new linter rules
67. 9 rules Accessibility (A11y)
68. Total of 32 linter rules
69. Available Today
74. Coming Soon Stimulus LSP Update
76. Planned
80. <%= tag.div class: "px-4 py-2 text-white bg-sky-700" %> <div class="px-4 py-2 text-white bg-sky-700"></div>
81. Tailwind Class Rewriter Coming soon
82. Vision ERB Rendering Engine
83. String Template Engine
84. HTML Templating Engine
85. An engine that cannot produce invalid HTML
86. .erb Embedded Ruby (ERB)
87. <h1>Hello, <%= name %>!
88. template = ActionView::Template.new( "<h1>Hello, <%= name %>!", "test.html.erb", ActionView::Template::Handlers::ERB, locals: [:name] ) <h1>Hello, <%= name %>!
89. 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 %>!
90. "@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 )
91. .herb HTML+ERB (Herb)
92. <h1>Hello, <%= name %>!
93. template = ActionView::Template.new( "<h1>Hello, <%= name %>!", "test.html.herb", ActionView::Template::Handlers::Herb, locals: [:name] ) compiled = template.handler.call( template, template.source )
94. compiled = template.handler.call( template, template.source )
95. 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
97. September 5, 2025 - Rails World 2025, Amsterdam Marco Roth Introducing ReActionView: A new ActionView-Compatible ERB Engine
98. The Rails View Layer
99. Action View
100. July 2004 - Rails 0.5.0 https://rubytalk.org/t/ann-rails-0-5-0-the-end-of-vaporware/12744
101. 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.
102. ERB
103. Embedded Ruby
104. "So basically the templates are plain text files that can hold anything (HTML, XML, LaTeX, emails) sprinkled with Ruby embeddings to add dynamic behavior."
105. Today Action View Ships with Erubi by default
106. ERB is here to stay.
107. Action View is here to stay.
108. We want to level up Action View while keeping it Railsy.
109. ActionView
110. Reimagined ActionView
111. Reimagined Reengineered ActionView
112. Reengineered Reimagined ActionView Reactive
114. An initiative to explore what’s possible in the Rails view layer in 2025 and beyond
115. Backwards-Compatible Improve DX Embrace Web Standards Integrate Frontend Frameworks Explore what's possible
116. <dialog> Web Components Progressive Web Apps (PWA) Custom Elements <script type="importmap"> inert modulepreload Declarative Shadow DOM
117. subgrid Container Queries :has() @function @property CSS Nesting @layer
118. Speculation Rules API Invoker Commands API View Transition API Popover API
119. SSR Rails App + HTML-over-the-wire Hotwire/HTMX/Unpoly Rails API + Single Page App React/Vue/Svelte/etc. CSR server-side rendering client-side rendering
120. High Fidelity UI Existing Components/Libraries A lot of React Developers Split Backend/Frontend Teams
121. Hotwire is great, simple, and gets the job done in most of cases
122. Transitioning from Hotwire to a Frontend Framework is not gradual, when you need it
123. There is no onramp
124. This is why some teams opt to use SPAs from the beginning
125. Which is giving away most of what makes Rails so great and productive
126. Let's try to close the gap, so less and less teams actually need actually to abandon Action View
127. I want to see what's possible and how far we can go
128. Release Herb v0.7.0
129. Herb
130. ::Engine Herb
131. HTML-aware ERB Rendering Engine
132. Erubi::Engine API-compatible
133. Let's compare them
134. Erubi::Engine
135. <h1>Hello, <%= name %>!</h1>
136. <h1>Hello, <%= name %>!</h1> Regex ↓
137. <h1>Hello, <%= name %>!</h1> "<h1>Hello, " name "!</h1>" Regex ↓
138. <h1>Hello, <%= name %>!</h1> add_text("<h1>Hello, ") add_expression("name") add_text("!</h1>") Regex ↓
139. _buf = ::String.new _buf << '<h1>Hello, ' _buf << ::Erubi.h(name) _buf << '!</h1>' _buf.to_s (simplified+formatted)
140. Herb::Engine
141. <h1>Hello, <%= name %>!</h1>
142. Herb.parse("source")
143. @ DocumentNode └── children: (1 item) └── @ HTMLElementNode ├── open_tag: │ └── @ HTMLOpenTagNode │ ├── tag_opening: "<" │ ├── tag_name: "h1" │ └── tag_closing: ">" │ ├── tag_name: "h1" ├── body: (3 items) │ ├── @ HTMLTextNode │ │ └── content: "Hello, " │ │ │ ├── @ ERBContentNode │ │ ├── tag_opening: "<%=" │ │ ├── content: " name " │ │ └── tag_closing: "%>" │ │ │ └── @ HTMLTextNode │ └── content: "!" │ └── close_tag: └── @ HTMLCloseTagNode ├── tag_opening: "</" ├── tag_name: "h1" └── tag_closing: ">"
144. @ DocumentNode └── children: (1 item) └── @ HTMLElementNode ├── open_tag: │ └── @ HTMLOpenTagNode (<h1>) │ ├── body: (3 items) │ ├── @ HTMLTextNode ("Hello, ") │ ├── @ ERBContentNode (<%= name %>) │ └── @ HTMLTextNode ("!") │ └── close_tag: └── @ HTMLCloseTagNode (</h1>)
145. class Compiler < Herb::Visitor def visit_document_node(node) def visit_html_element_node(node) def visit_html_open_tag_node(node) def visit_html_close_tag_node(node) def visit_html_text_node(node) def visit_erb_content_node(node) end
146. def visit_html_element_node(node) visit(node.open_tag) visit_all(node.body) visit(node.close_tag) end @ HTMLElementNode ├── open_tag: │ └── @ HTMLOpenTagNode │ ├── body: (3 items) │ ├── @ HTMLTextNode │ ├── @ ERBContentNode │ └── @ HTMLTextNode │ └── close_tag: └── @ HTMLCloseTagNode
147. def visit_html_open_tag_node(node) add_text(node.tag_opening) add_text(node.tag_name) add_text(node.tag_closing) end @ HTMLOpenTagNode ├── tag_opening: "<" ├── tag_name: "h1" └── tag_closing: ">"
148. def visit_html_text_node(node) add_text(node.content) end @ HTMLTextNode └── content: "Hello, "
149. @ ERBContentNode ├── tag_opening: "<%=" ├── content: " name " └── tag_closing: "%>" def visit_erb_content_node(node) if node.tag_opening == "<%=" add_expression(node.content) else add_code(node.content) end end
150. add_text("<") add_text("h1") add_text(">") add_text("Hello, ") add_expression("name") add_text("!") add_text("</") add_text("h1") add_text(">")
151. add_text("<") add_text("h1") add_text(">") add_text("Hello, ") add_expression("name") add_text("!") add_text("</") add_text("h1") add_text(">") add_text("<h1>Hello, ") add_expression("name") add_text("!</h1>") Erubi::Engine Herb::Engine
152. def add_text(text) @tokens << [:text, text] end def add_expression(code) @tokens << [:expr, code] end def add_code(code) @tokens << [:code, code] end
153. @tokens = [ ["<", :text], ["h1", :text], [">", :text], ["Hello, ", :text], ["name", :expr], ["!", :text], ["</", :text], ["h1", :text], [">", :text], ]
154. @tokens = [ ["<", :text], ["h1", :text], [">", :text], ["Hello, ", :text], ["name", :expr], ["!", :text], ["</", :text], ["h1", :text], [">", :text], ]
155. @tokens = [ ["<h1>Hello, ", :text], ["name", :expr], ["!</h1>", :text], ]
156. @tokens = [ ["<h1>Hello, ", :text], ["name", :expr], ["!</h1>", :text], ]
157. add_text("<h1>Hello, ") add_expression("name") add_text("!</h1>") Erubi::Engine Herb::Engine add_text("<h1>Hello, ") add_expression("name") add_text("!</h1>")
158. _buf = ::String.new _buf << '<h1>Hello, ' _buf << ::Erubi.h(name) _buf << '!</h1>' _buf.to_s (simplified+formatted) _buf = ::String.new _buf << '<h1>Hello, ' _buf << ::Herb.h(name) _buf << '!</h1>' _buf.to_s Erubi::Engine Herb::Engine
159. if we now handle all nodes the Herb Syntax Tree has
160. We end up with the (almost) same compiled template output
161. Let's change Rails to use Herb::Engine instead of Erubi::Engine
162. # actionview/lib/action_view/template/handlers/erb/erubi.rb require "erubi" module ActionView class Template module Handlers class ERB class Erubi < ::Erubi::Engine def initialize(input, properties = {}) # ... super end end end end end end
163. # actionview/lib/action_view/template/handlers/erb/herb.rb require "herb" module ActionView class Template module Handlers class ERB class Herb < ::Herb::Engine def initialize(input, properties = {}) # ... super end end end end end end
164. # actionview/lib/action_view/template/handlers/erb.rb module ActionView class Template module Handlers class ERB autoload :Erubi, "action_view/template/handlers/erb/erubi" class_attribute :erb_implementation, default: Erubi end end end end
165. # actionview/lib/action_view/template/handlers/erb.rb module ActionView class Template module Handlers class ERB autoload :Erubi, "action_view/template/handlers/erb/erubi" autoload :Herb, "action_view/template/handlers/erb/herb" class_attribute :erb_implementation, default: Erubi end end end end
166. # actionview/lib/action_view/template/handlers/erb.rb module ActionView class Template module Handlers class ERB autoload :Erubi, "action_view/template/handlers/erb/erubi" autoload :Herb, "action_view/template/handlers/erb/herb" class_attribute :erb_implementation, default: Erubi end end end end
167. # actionview/lib/action_view/template/handlers/erb.rb module ActionView class Template module Handlers class ERB autoload :Erubi, "action_view/template/handlers/erb/erubi" autoload :Herb, "action_view/template/handlers/erb/herb" class_attribute :erb_implementation, default: Herb end end end end
168. bin/dev
170. %
171. Gives us all the guarantees the Herb Parser gives us
172. Ensures valid HTML Templates and Syntax
173. String Template Engine
174. HTML Templating Engine
175. But it also gives us valuable feedback
177. The same parser that's now compiling/rendering your views is also running in your editor
178. Makes the tooling a lot more accurate and instant
179. Since our engine now has full introspection and understanding of HTML+ERB...
180. ... we can do a lot of cool things!
181. Let's improve error messages
183. The Herb Parser already exactly knows where the error is
184. So it can pinpoint it exactly
187. But since we deal with HTML+ERB we can also have some smart validations built-in
190. config.annotate_rendered_view_with_filenames
192. You can't really style HTML comment
193. But, our Compiler already knows how to render HTML elements and attributes
194. So, what if we...
195. ... inject additional HTML attributes in development?
196. <html data-herb-debug-file-name="application.html.erb" > ... </html>
197. [data-herb-debug-file-name] { outline: #3B82F6 dotted 2px; outline-offset: 2px; } // ...
200. Views Partials Components
201. <html data-herb-debug-outline-type="view" data-herb-debug-file-name="application.html.erb" > ... </html>
204. <html data-herb-debug-outline-type="view" data-herb-debug-file-name="application.html.erb" data-herb-debug-file-relative-path="..." > ... </html>
206. <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>
208. CSS outline + HTML attributes don't interrupt the natural flow
209. Provides immensely helpful visual debugging
210. Fast jump-to-source clicking on the view outline label
211. Can we also do this for ERB Output tags?
212. Yes.
215. Show ERB content on hover
220. Jump-to-source
223. Vision What is next
224. 6 Adoption Levels
225. 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
226. bundle add reactionview rails generate reactionview:install
227. # 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
228. # 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
229. bin/dev
231. This is just the beginning
232. Please give it a shot, even if it's just locally in your development environment
233. Please report any weird behavior your might encounter
234. Level 1 - Better Errors Level 2 - HTML-aware Engine Level 3 - Action View Optimizations Level 4 - Reactive ERB Views Level 5 - Client-side Templates Level 6 - External Components
235. Level 3 - Action View Optimizations
236. Inlining Partial render calls Inlining Action View Tag Helpers Minifying insignificant whitespace
237. Probably more
238. Level 4 - Reactive ERB Views
239. Phoenix LiveView HEEx-like
240. @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>
241. Level 5 - Client-side Templates
242. Limited Set of ERB
243. RSC - React Server Components
244. "ERB Client Components"
245. Web Components React Components ...
246. Optimistic UI updates
247. Improved offline functionality (+ service workers)
248. Level 6 - External Components
249. When you need more and don't want to abandon HTML+ERB alltogether
250. Only on certain pages
251. 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
252. Register external components import [:Alert, :AlertTitle], from: "shadcn" import_all_from "app/javascript/components" config/initializers/reactionview.rb
253. <h1><%= @post.title %></h1> <Alert variant="default"> <AlertTitle>Heads up!</AlertTitle> </Alert> app/views/posts/show.html.herb
254. The engine knows that these components are client-side and knows how to mount/ hydrate them
255. Tightly integrated Built-in Tooling No setup Works out of the box
256. Ideas More ideas to explore
257. One off Stimulus Controllers
259. https://alpinejs.dev/start-here
260. "Inline Stimulus"
262. View File Scoped CSS
264. <style scoped> .example { color: red; } </style> <template> <div class="example"> Hello World </div> </template>
265. <style scoped> .example { color: red; } </style> <template> <div class="example"> Hello World </div> </template>
266. <style scoped> color: red; } </style> <template> Hello World </div> </template> <div class="example"> .example {
267. <style> color: red; } </style> <template> Hello World </div> </template> <div class="example" data-v-f3f3eg9> .example[data-v-f3f3eg9]
268. Selective Rendering
269. Turbo Frames
270. <div class="card"> <h2><%= @product.name %></h2> <turbo-frame id="reviews"> <h3>Customer Reviews</h3> <%= render @reviews %> <%= link_to "Load More Reviews", reviews_path %> </turbo-frame> <!-- ... --> </div>
271. <div class="card"> <h2><%= @product.name %></h2> <turbo-frame id="reviews"> <h3>Customer Reviews</h3> <%= render @reviews %> <%= link_to "Load More Reviews", reviews_path %> </turbo-frame> <!-- ... --> </div>
272. <%= render "card", selector: "#reviews" %>
273. <div class="card"> <h2><%= @product.name %></h2> <turbo-frame id="reviews"> <h3>Customer Reviews</h3> <%= render @reviews %> <%= link_to "Load More Reviews", reviews_path %> </turbo-frame> <!-- ... --> </div>
274. The idea is to bring more of these modern frontend features to Rails
275. So that there is less of a need to abandon the Rails way
276. Action View has been really stable
277. Most features/changes were additive
278. Makes it easy to rely and build on
279. Rails shouldn't discourage the use of (modern) JavaScript
280. Rails should embrace it
281. embrace modern web standards
282. Provide good defaults and build-in options/migration paths when you need more
283. So that the view layer scales the same way everything else does in the framework
284. This is a vision.
285. If we, as a framework and community, want to stay relevant we need to explore what's possible.
286. New innovations require exploration.
287. Even if none of this is viable in production it's still worth exploring.
288. Conclusion
289. Prism had a big effect on Ruby internals and the tooling landscape
290. Herb already has a similar effect for HTML Templating and Tooling
291. Herb started as a Parser
292. and is now an ecosystem of valuable tools
293. ReActionView started as a vision to address some of the shortcomings in the Rails View Layer
294. Today it might be just an alternative ERB Rendering engine
295. But I believe that this already shows what could be possible
296. We can push more boundaries
297. and bring the whole Rails Framework forward
298. so that it can hold up with the current JavaScript stacks
299. and that teams don't have to abandon the beauty of Action View
300. The community has built incredible tooling for Ruby itself.
301. Now it's time to bring that same care to the view layer.
302. With Herb and ReActionView I believe we have a path to level up the view layer
304. Herb::Engine
306. Rails has a unique position as a full stack framework
307. I want to keep Rails as attractive and competitive as possible
311. herb-tools.dev
313. reactionview.dev
314. Please try the tools, report issues, and give feedback .
317. github.com/sponsors/marcoroth 
318. I believe there is a bright future for the Rails Frontend Story
319. Thank you &  @marcoroth_  @marcoroth@ruby.social 🌐 marcoroth.dev  @marcoroth  @marcoroth.dev  /in/marco-roth