Empowering Developers with HTML-Aware ERB Tooling @ Ruby on Rails Switzerland Meetup, June 2025, Zurich

ERB tooling has lagged behind modern web development needs, especially with the rise of Hotwire and HTML-over-the-wire. Discover a new HTML-aware ERB parser that unlocks advanced developer tools like formatters, linters, and LSP integrations, transforming how we build and ship HTML in our Ruby applications.

Transcript

1. Marco Roth Empowering Developers with HTML-Aware ERB Tooling June 18, 2025 - RailsHöck June 2025
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
6. HTML+ERB Tooling
7. But first...
8. 🕰 A Brief History of Ruby Developer Tooling
9. Ruby didn't have smart editor tooling for most of it's existence
10. Most editors just had basic Ruby support
11. RubyMine 2008
12. Source: https://code.visualstudio.com/api/language-extensions/language-server-extension-guide
13. For almost a decade this has been the situation
14. Language Server Protocol 2016
15. Source: https://code.visualstudio.com/api/language-extensions/language-server-extension-guide
17. 💡 The Rise of LSPs
18. 2022 Ruby LSP
19. The JavaScript tooling and DX is awesome
20. 2023 Stimulus LSP
22. 2024 Turbo LSP
23. 💡 LSPs are the Future of Dev Tooling
24. 🌿 Something is missing
25. HTML-only
26. <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>
27. <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>
28. No ERB support
29. For Rails apps it's quite common to use ActionView ERB helpers
30. <%= 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
31. Errors Diagnostics Best Practices Recommendations
32. We have to understand ERB
33. The fact is that we never really had HTML+ERB specific tooling in the Ruby world
34. 🧠 Why HTML+ERB tooling matters more than ever?
36. https://railsdeveloper.com/survey/2024/
37. https://railsdeveloper.com/survey/2024/
38. https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/
39. https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/
40. https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/
41. Advanced HTML tooling is only getting more important
42. 🎯 My goal was to add ERB support
45. RubyConf 2023 Hack Day
46. ERB support in Ruby LSP
48. We quickly realized that we need something more powerful to make things work beyond the basics
49. ERB is versatile
50. a
51. HTML+ERB
52. 🛠 Why not use Nokogiri + Prism?
53. <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div> <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div>
54. Ruby HTML <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div> <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div>
55. Ruby HTML <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div> <div> <span><%= @user.firstname %></span> <b><%= @user.lastname %></b> </div>
56. Ruby HTML @user.firstname @user.lastname <div> <span> </span> <b> </b> </div>
57. Ruby HTML @user.firstname @user.lastname <div> <span> </span> <b> </b> </div> t require "prism" Prism.parse("...") require "nokogiri" Nokogiri::HTML5.fragment("...")
58. Ruby HTML @user.firstname @user.lastname <div> <span> </span> <b> </b> </div> t
59. We lost the HTML-context in the process
60. We would need to piece the two parse results together
61. Which doesn't allow for much control with edge cases
62. <%= "Hello World" %> <div <%= attributes %>></div> <div id="<%= dom_id(post) %>"></div>
63. So I knew I had to build my own parser.
64. 🌱 The idea of a new HTML- aware ERB parser
65. 🧪 Early Experiments and Language Choice
66. 💪 Learning C and Getting to Work
71. 🌿 Introducing: Herb
72. 🔍 What is Herb?
77. HTML-aware ERB Parser Hand-written HTML-aware ERB parser
78. HTML-aware ERB Parser Written in C99 and no additional dependency (besides Prism)
79. HTML-aware ERB Parser Built on Prism for the Ruby parsing
80. HTML-aware ERB Parser Follows Prism's Design Goals
81. HTML-aware ERB Parser portable error tolerant maintainable
82. HTML-aware ERB Parser Custom HTML lexer and parser
83. HTML-aware ERB Parser Designed for tooling, not browsers
84. HTML-aware ERB Parser Exposes a clean syntax tree of interleaved HTML and ERB
86. gem "herb"
88. @herb-tools/node @herb-tools/browser
90. 🧩 How Herb Works
91. Empty Document
92. @ DocumentNode (location: (1:0)-(1:0)) ├── errors: [] └── children: []
93. Text Content
94. Text @ DocumentNode (location: (1:0)-(1:4)) ├── errors: [] └── children: (1 item) └── @ HTMLTextNode (location: (1:0)-(1:4)) ├── errors: [] └── content: "Text"
95. Partial HTML Elements
96. <h1 > Title @ HTMLElementNode ├── errors: (1 item) │ └── @ MissingClosingTagError │ ├── message: " │ │ Opening tag `<h1>` at (1:1) │ │ doesn't have a matching │ │ closing tag `</h1>`. │ │ " │ └── opening_tag: "h1" │ ├── open_tag: │ └── @ HTMLOpenTagNode │ ├── tag_opening: "<" │ ├── tag_name: "h1" │ ├── tag_closing: ">" │ ├── children: [] │ └── is_void: false │ ├── tag_name: "h1" ├── body: (1 item) │ └── @ HTMLTextNode │ └── content: "Title" │ ├── close_tag: ∅ └── is_void: false ^^^^^
97. <h1 > Title @ HTMLElementNode │── errors: (1 item) │ └── @ MissingClosingTagError │ ├── message: " │ │ Opening tag `<h1>` at (1:1) │ │ doesn't have a matching │ │ closing tag `</h1>`. │ │ " │ └── opening_tag: "h1" │ ├── open_tag: │ └── @ HTMLOpenTagNode │ ├── tag_opening: "<" │ ├── tag_name: "h1" │ ├── tag_closing: ">" │ ├── children: [] │ └── is_void: false │ │── tag_name: "h1" │── body: (1 item) │ └── @ HTMLTextNode │ └── content: "Title" │ └── close_tag: ∅ └── is_void: false ^^^^^
98. <h1 > Title
99. irb(main):001> Nokogiri::HTML5.fragment(html).to_html <h1 > Title
100. irb(main):001> Nokogiri::HTML5.fragment(html).to_html <h1 > Title => "<h1>Title</h1>"
101. irb(main):001> Nokogiri::HTML5.fragment(html).to_html => "<h1>Title</h1>" <h1 > Title
102. Complete HTML Elements
103. <h1 > Title</h1> @ HTMLElementNode ├── errors: [] ├── open_tag: │ └── @ HTMLOpenTagNode │ ├── errors: [] │ ├── tag_opening: "<" │ ├── tag_name: "h1" │ ├── tag_closing: ">" │ ├── children: [] │ └── is_void: false │ ├── tag_name: "h1" ├── body: (1 item) │ └── @ HTMLTextNode │ ├── errors: [] │ └── content: "Title" │ ├── close_tag: │ └── @ HTMLCloseTagNode │ ├── errors: [] │ ├── tag_opening: "</" │ ├── tag_name: "h1" │ └── tag_closing: ">" │ └── is_void: false
104. <h1 > Title</h1> @ HTMLElementNode │── errors: [] ├── open_tag: │ └── @ HTMLOpenTagNode │ ├── errors: [] │ ├── tag_opening: "<" │ ├── tag_name: "h1" │ ├── tag_closing: ">" │ ├── children: [] │ └── is_void: false │ ├── tag_name: "h1" ├── body: (1 item) │ └── @ HTMLTextNode │ │── errors: [] │ └── content: "Title" │ └── close_tag: │ └── @ HTMLCloseTagNode │ ├── errors: [] │ ├── tag_opening: "</" │ ├── tag_name: "h1" │ └── tag_closing: ">" │ └── is_void: false
105. Nested HTML Elements
106. <h1><i>Title</i></h1> @ HTMLElementNode ├── open_tag: │ └── @ HTMLOpenTagNode │ └── tag_name: "h1" │ ├── tag_name: "h1" ├── body: │ └── @ HTMLElementNode │ ├── open_tag: │ │ └── @ HTMLOpenTagNode │ │ └── tag_name: "i" │ │ │ ├── tag_name: "i" │ ├── body: │ │ └── @ HTMLTextNode │ │ └── content: "Title" │ │ │ └── close_tag: │ └── @ HTMLCloseTagNode │ └── tag_name: "i" │ └── close_tag: └── @ HTMLCloseTagNode └── tag_name: "h1"
107. <h1><i>Title</i></h1> @ HTMLElementNode │── open_tag: │ └── @ HTMLOpenTagNode │ └── tag_name: "h1" │ ├── tag_name: "h1" └── body: │ └── @ HTMLElementNode │ │── open_tag: │ │ └── @ HTMLOpenTagNode │ │ └── tag_name: "i" │ │ │ ├── tag_name: "i" │ └── body: │ │ └── @ HTMLTextNode │ │ └── content: "Title" │ │ │ └── close_tag: │ └── @ HTMLCloseTagNode │ └── tag_name: "i" │ └── close_tag: └── @ HTMLCloseTagNode └── tag_name: "h1"
108. ERB Content
109. <%= @variable %> @ DocumentNode ├── errors: [] └── children: (1 item) └── @ ERBContentNode ├── errors: [] ├── tag_opening: "<%=" ├── content: " @variable " ├── tag_closing: "%>" ├── parsed: true └── valid: true
110. ERB Control Flow Strcutures
111. <% if valid? %> <% end %> children: (3 items) ├── @ ERBContentNode │ ├── errors: [] │ ├── tag_opening: "<%" │ ├── content: " if valid? " │ ├── tag_closing: "%>" │ ├── parsed: false │ └── valid: false │ │ └── @ ERBContentNode ├── errors: [] ├── tag_opening: "<%" ├── content: " end " ├── tag_closing: "%>" ├── parsed: false └── valid: false ├── @ HTMLTextNode │ ├── errors: [] │ └── content: "\n\n"
112. Parsing with Prism + Analysis
113. <% if valid? %> <% end %> ├── @ ERBContentNode │ ├── errors: [] │ ├── tag_opening: "<%" │ ├── content: " if valid? " │ ├── tag_closing: "%>" │ ├── parsed: false │ └── valid: false │ │ └── @ ERBContentNode ├── errors: [] ├── tag_opening: "<%" ├── content: " end " ├── tag_closing: "%>" ├── parsed: false └── valid: false ├── @ HTMLTextNode │ ├── errors: [] │ └── content: "\n\n" children: (3 items)
114. <% if valid? %> <% end %> children: (1 item) └── @ ERBIfNode ├── errors: [] ├── tag_opening: "<%" ├── content: " if valid? " ├── tag_closing: "%>" ├── statements: (1 item) │ └── @ HTMLTextNode │ ├── errors: [] │ └── content: "\n\n" │ ├── subsequent: ∅ └── end_node: └── @ ERBEndNode ├── errors: [] ├── tag_opening: "<%" ├── content: " end " └── tag_closing: "%>"
115. HTML Elements nested inside ERB Tags
116. <% 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: "%>"
117. <% 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: "%>"
118. <% 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: "%>"
119. <% 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: "%>"
120. <% 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: "%>"
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. This opens a lot of doors for understanding, analyzing, working with HTML+ERB documents.
123. HTML Attributes HTML Doctypes HTML Comments ...
124. if/elsif/else case/when/else begin/rescue/ensure do/end while for until unless yield
125. First Release Herb Parser Public Release
127. Now the fun can begin to build use tools on top of it.
128. I invite you to give it a shot to see what you can build with it.
129. Try it Interactive browser-based parser playground
132. herb-tools.dev/playground
133. 🔮 Looking Ahead
136. Coming Soon HTML+ERB Auto-Formatter
137. <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>
138. <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
139. <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]
140. <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>
145. Coming Soon Herb Linter
146. Check for valid HTML5 Missing alt attributes on <img> No unsafe interpolation Only one element with the same ID invalid syntax ...
147. Vision ERB Rendering Engine
151. <ul> <% @items do |item| %> <li><%= item %></li> <% end %> </ul> @items = [1, 2, 3] <ul> <li>1</li> <li>2</li> <li>3</li> </ul> State View Template Rendered View Log Initial view rendered
152. <ul> <% @items 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
153. <ul> <% @items 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
154. <ul> <% @items 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
155. <ul> <% @items 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`
156. <ul> <% @items 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>
157. <ul> <% @items 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>
158. <ul> <% @items 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` apply delta to view <li>4</li>
159. <ul> <% @items do |item| %> <li><%= item %></li> <% end %> </ul> @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
160. Vision HTML Templating Syntax Tree
161. Improve Developer Tooling for HTML in the view layer
162. This includes other templating languages
163. tHTML+ERB <p id="name"> Hello <%= name %> </p> @ HTMLElementNode ├── tag_name: "p" ├── attributes: (1 item) │ └── @ HTMLAttributeNode │ ├── name: │ │ └── @ HTMLAttributeNameNode │ │ └── name: "id" │ │ │ ├── equals: "=" │ └── value: │ └── @ HTMLAttributeValueNode │ └── children: │ └── @ LiteralNode │ └── content: "name" ├── body: (3 items) │ └── @ DynamicContentNode │ ├── tag_opening: "<%=" │ ├── content: " name " │ └── tag_closing: "%>" │ └── close_tag: └── @ HTMLCloseTagNode ├── tag_opening: "</" ├── tag_name: "p" └── tag_closing: ">" HTML+ERB
164. <%= tag.p(id: "name") do %> Hello <%= name %> <% end %> @ HTMLElementNode ├── tag_name: "p" ├── attributes: (1 item) │ └── @ HTMLAttributeNode │ ├── name: │ │ └── @ HTMLAttributeNameNode │ │ └── name: "id" │ │ │ ├── equals: "=" │ └── value: │ └── @ HTMLAttributeValueNode │ └── children: │ └── @ LiteralNode │ └── content: "name" ├── body: (3 items) │ └── @ DynamicContentNode │ ├── tag_opening: "<%=" │ ├── content: " name " │ └── tag_closing: "%>" │ └── close_tag: └── @ HTMLCloseTagNode ├── tag_opening: "</" ├── tag_name: "p" └── tag_closing: ">" HTML+ERB + ActionView
165. %p#element Hello = name @ HTMLElementNode ├── tag_name: "p" ├── attributes: (1 item) │ └── @ HTMLAttributeNode │ ├── name: │ │ └── @ HTMLAttributeNameNode │ │ └── name: "id" │ │ │ ├── equals: "=" │ └── value: │ └── @ HTMLAttributeValueNode │ └── children: │ └── @ LiteralNode │ └── content: "name" ├── body: (3 items) │ └── @ DynamicContentNode │ ├── tag_opening: "=" │ ├── content: " name " │ └── tag_closing: ∅ │ └── close_tag: ∅ Haml
166. p id="element" | Hello #{name} @ HTMLElementNode ├── tag_name: "p" ├── attributes: (1 item) │ └── @ HTMLAttributeNode │ ├── name: │ │ └── @ HTMLAttributeNameNode │ │ └── name: "id" │ │ │ ├── equals: "=" │ └── value: │ └── @ HTMLAttributeValueNode │ └── children: │ └── @ LiteralNode │ └── content: "name" ├── body: (3 items) │ └── @ DynamicContentNode │ ├── tag_opening: "| " │ ├── content: " name " │ └── tag_closing: ∅ │ └── close_tag: ∅ Slim
167. As long as we can transform the template syntax into the same syntax tree
168. We can combine our efforts to build tooling on top of this shared syntax tree
169. Vision What's next
170. VS Code Extension
178. Herb Formatter Herb Linter
180. Including LSP Diagnostics and Code Actions for Refactoring
181. Support for parsing ActionView helpers
182. <article id="<%= dom_id(article) %>"></article> <input <% if true %> type="text" <% end %> /> <% @posts.each do |post| %> <h1><%= post.title %></h1> <% end %> <%= content_tag(:p, "Hello world!") %> <%= tag.div tag.p("Hello world!") %> <%= tag.p do %> Hello world! <% end %> <%= tag.div( data: { controller: "hello", action: "click->hello#greet" } ) %> <%= link_to "Home", root_path %>
183. Multi-file view files diagnostic and analysis
184. <!-- index.html.erb --> <div data-controller="hello"> <%= render partial: "input" %> </div> <!-- _partial.html.erb --> <input data-hello-target="name" type="text">
185. html_press gem phlexing gem deface gem better_html gem erb_lint gem Probably even more
186. Conclusion
187. Prism had a big effect on Ruby internals and the tooling landscape
188. Herb could have a similar effect for HTML Template Tooling
189. The community has built incredible tooling for Ruby itself.
190. Now it's time to bring that same care to the view layer.
191. With Herb, I believe we have a path to level up the view layer tooling
193. I want to keep Ruby as attractive and easy to get started as possible
199. ruby/prism rake-compiler/rake-compiler rake-compiler/rake-compiler-dock flavorjones/ruby-c-extensions-explained Thanks to all contributors 🙏
200. herb-tools.dev
201. cd your_project/ gem install herb herb analyze .
202. Come find my after the talk, I'd love to hear your ideas, questions and opinions.
203. One more thing
206. rubyevents.org/events/railshock
211. Android version coming soon Thanks @leonvogt
212. Thank you 🙏 t @marcoroth_ M @marcoroth@ruby.social g marcoroth.dev g @marcoroth b @marcoroth.dev l /in/marco-roth