Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan

After introducing Herb, the HTML-aware ERB parser at RubyKaigi in April, I’m now releasing ReActionView - a drop-in ActionView replacement bringing LiveView-style reactivity to Rails while maintaining HTML-over-the-wire philosophy.

This talk completes a trilogy by delivering the practical payoff: the ActionView-compatible ReActionView engine, built on Herb, the new Prism-powered HTML-aware ERB parser.

ReActionView maintains ActionView compatibility while bringing HTML-awareness and reactivity to HTML+ERB views.

https://kaigionrails.org/2025/talks/marcoroth

Transcript

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