Introducing ReActionView: A new ActionView-compatible ERB Engine @ EuRuKo 2025, Viana do Castelo, Portugal

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.

Now, I’ll continue with 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.

https://app.euruko.org/sessions/introducing-reactionview-a-new-actionview-compatible-erb-engine

Transcript

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