Empowering Developers with HTML-Aware ERB Tooling @ RubyKaigi 2025, Matsuyama, Ehime

Slide 1

Slide 1 text

Empowering Developers with HTML-Aware ERB Tooling Marco Roth April 16, RubyKaigi 2025

Slide 2

Slide 2 text

Marco Roth 👋 t @marcoroth_ M @[email protected] g marcoroth.dev g @marcoroth Full-Stack Developer & Open Source Contributor b @marcoroth.dev

Slide 3

Slide 3 text

I ❤ Open Source

Slide 4

Slide 4 text

CableReady Core Team Maintainer

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

HTML+ERB Tooling

Slide 7

Slide 7 text

But first...

Slide 8

Slide 8 text

🕰 A Brief History of Ruby Developer Tooling

Slide 9

Slide 9 text

Ruby didn't have smart editor tooling for most of it's existence

Slide 10

Slide 10 text

Most editors just had basic Ruby support

Slide 11

Slide 11 text

RubyMine 2008

Slide 12

Slide 12 text

Source: https://code.visualstudio.com/api/language-extensions/language-server-extension-guide

Slide 13

Slide 13 text

For almost a decade this has been the situation

Slide 14

Slide 14 text

Language Server Protocol 2016

Slide 15

Slide 15 text

Source: https://code.visualstudio.com/api/language-extensions/language-server-extension-guide

Slide 16

Slide 16 text

2017

Slide 17

Slide 17 text

💡 The Rise of LSPs

Slide 18

Slide 18 text

2022 Ruby LSP

Slide 19

Slide 19 text

The JavaScript tooling and DX is awesome

Slide 20

Slide 20 text

2023 Stimulus LSP

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

2024 Turbo LSP

Slide 23

Slide 23 text

💡 LSPs are the Future of Dev Tooling

Slide 24

Slide 24 text

🌿 Something is missing

Slide 25

Slide 25 text

HTML-only

Slide 26

Slide 26 text

Greet

Slide 27

Slide 27 text

Greet

Slide 28

Slide 28 text

No ERB support

Slide 29

Slide 29 text

For Rails apps it's quite common to use ActionView ERB helpers

Slide 30

Slide 30 text

<%= 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

Slide 31

Slide 31 text

Errors Diagnostics Best Practices Recommendations

Slide 32

Slide 32 text

We have to understand ERB

Slide 33

Slide 33 text

The fact is that we never really had HTML+ERB specific tooling in the Ruby world

Slide 34

Slide 34 text

🧠 Why HTML+ERB tooling matters more than ever?

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

https://railsdeveloper.com/survey/2024/

Slide 37

Slide 37 text

https://railsdeveloper.com/survey/2024/

Slide 38

Slide 38 text

https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/

Slide 39

Slide 39 text

https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/

Slide 40

Slide 40 text

https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/

Slide 41

Slide 41 text

Advanced HTML tooling is only getting more important

Slide 42

Slide 42 text

🎯 My goal was to add ERB support

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

RubyConf 2023 Hack Day

Slide 46

Slide 46 text

ERB support in Ruby LSP

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

We quickly realized that we need something more powerful to make things work beyond the basics

Slide 49

Slide 49 text

ERB is versatile

Slide 50

Slide 50 text

Slide 51

Slide 51 text

HTML+ERB

Slide 52

Slide 52 text

🛠 Why not use Nokogiri + Prism?

Slide 53

Slide 53 text

<%= @user.firstname %> <%= @user.lastname %>

Slide 54

Slide 54 text

Ruby HTML

<%= @user.firstname %> <%= @user.lastname %>

Slide 55

Slide 55 text

Ruby HTML

<%= @user.firstname %> <%= @user.lastname %>

Slide 56

Slide 56 text

Ruby HTML @user.firstname @user.lastname

Slide 57

Slide 57 text

Ruby HTML @user.firstname @user.lastname

t require "prism" Prism.parse("...") require "nokogiri" Nokogiri::HTML5.fragment("...")

Slide 58

Slide 58 text

Ruby HTML @user.firstname @user.lastname

Slide 59

Slide 59 text

We lost the HTML-context in the process

Slide 60

Slide 60 text

We would need to piece the two parse results together

Slide 61

Slide 61 text

Which doesn't allow for much control with edge cases

Slide 62

Slide 62 text

<%= "Hello World" %>

Slide 63

Slide 63 text

So I knew I had to build my own parser.

Slide 64

Slide 64 text

🌱 The idea of a new HTML- aware ERB parser

Slide 65

Slide 65 text

🧪 Early Experiments and Language Choice

Slide 66

Slide 66 text

💪 Learning C and Getting to Work

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

🌿 Introducing: Herb

Slide 70

Slide 70 text

🔍 What is Herb?

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

HTML-aware ERB Parser Hand-written HTML-aware ERB parser

Slide 74

Slide 74 text

HTML-aware ERB Parser Written in C99 and no additional dependency (besides Prism)

Slide 75

Slide 75 text

HTML-aware ERB Parser Built on Prism for the Ruby parsing

Slide 76

Slide 76 text

HTML-aware ERB Parser Follows Prism's Design Goals

Slide 77

Slide 77 text

HTML-aware ERB Parser portable error tolerant maintainable

Slide 78

Slide 78 text

HTML-aware ERB Parser Custom HTML lexer and parser

Slide 79

Slide 79 text

HTML-aware ERB Parser Designed for tooling, not browsers

Slide 80

Slide 80 text

HTML-aware ERB Parser Exposes a clean syntax tree of interleaved HTML and ERB

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

gem "herb"

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

@herb-tools/node @herb-tools/browser

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

🧩 How Herb Works

Slide 87

Slide 87 text

Empty Document

Slide 88

Slide 88 text

@ DocumentNode (location: (1:0)-(1:0)) ├── errors: [] └── children: []

Slide 89

Slide 89 text

Text Content

Slide 90

Slide 90 text

Text @ DocumentNode (location: (1:0)-(1:4)) ├── errors: [] └── children: (1 item) └── @ HTMLTextNode (location: (1:0)-(1:4)) ├── errors: [] └── content: "Text"

Slide 91

Slide 91 text

Partial HTML Elements

Slide 92

Slide 92 text

Title @ HTMLElementNode ├── errors: (1 item) │ └── @ MissingClosingTagError │ ├── message: " │ │ Opening tag `

` at (1:1) │ │ doesn't have a matching │ │ closing tag `

`. │ │ " │ └── 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 ^^^^^

Slide 93

Slide 93 text

Title @ HTMLElementNode │── errors: (1 item) │ └── @ MissingClosingTagError │ ├── message: " │ │ Opening tag `

` at (1:1) │ │ doesn't have a matching │ │ closing tag `

`. │ │ " │ └── 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 ^^^^^

Slide 94

Slide 94 text

irb(main):001> Nokogiri::HTML5.fragment(html).to_html

Title => "

Title

Slide 95

Slide 95 text

irb(main):001> Nokogiri::HTML5.fragment(html).to_html => "

Title

Slide 96

Slide 96 text

Complete HTML Elements

Slide 97

Slide 97 text

Title

@ 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: "" │ └── is_void: false

Slide 98

Slide 98 text

Title

@ 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: "" │ └── is_void: false

Slide 99

Slide 99 text

Nested HTML Elements

Slide 100

Slide 100 text

Title

@ 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"

Slide 101

Slide 101 text

Title

@ 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"

Slide 102

Slide 102 text

ERB Content

Slide 103

Slide 103 text

<%= @variable %> @ DocumentNode ├── errors: [] └── children: (1 item) └── @ ERBContentNode ├── errors: [] ├── tag_opening: "<%=" ├── content: " @variable " ├── tag_closing: "%>" ├── parsed: true └── valid: true

Slide 104

Slide 104 text

ERB Control Flow Strcutures

Slide 105

Slide 105 text

<% 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"

Slide 106

Slide 106 text

Parsing with Prism + Analysis

Slide 107

Slide 107 text

<% 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)

Slide 108

Slide 108 text

<% 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: "%>"

Slide 109

Slide 109 text

HTML Elements nested inside ERB Tags

Slide 110

Slide 110 text

<% if valid? %>

Title

<% 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: "" │ ├── subsequent: ∅ └── end_node: └── @ ERBEndNode ├── tag_opening: "<%" ├── content: " end " └── tag_closing: "%>"

Slide 111

Slide 111 text

<% if valid? %>

Title

Slide 112

Slide 112 text

<% if valid? %>

Title

Slide 113

Slide 113 text

<% if valid? %>

Title

Slide 114

Slide 114 text

<% if valid? %>

Title

Slide 115

Slide 115 text

<% if valid? %>

Title

Slide 116

Slide 116 text

This opens a lot of doors for understanding, analyzing, working with HTML+ERB documents.

Slide 117

Slide 117 text

HTML Attributes HTML Doctypes HTML Comments ...

Slide 118

Slide 118 text

if/elsif/else case/when/else begin/rescue/ensure do/end while for until unless

Slide 119

Slide 119 text

First Release Herb Parser Public Release

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

Now the fun can begin to build use tools on top of it.

Slide 122

Slide 122 text

I invite you to give it a shot to see what you can build with it.

Slide 123

Slide 123 text

Try it Interactive browser-based parser playground

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

herb-tools.dev/playground

Slide 126

Slide 126 text

🔮 Looking Ahead

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

Coming Soon HTML+ERB Auto-Formatter

Slide 130

Slide 130 text

<%=@title%>

<%if user_signed_in?%>

Welcome,<%= current_user.name%>!

<%else%>

Please<%= link_to"sign in",login_path%>.<%end%>

Slide 131

Slide 131 text

<%=@title%>

<%if user_signed_in?%>

Welcome,<%= current_user.name%>!

<%else%>

Please<%= link_to"sign in",login_path%>.<%end%>

S cmd

Slide 132

Slide 132 text

<%=@title%>

<%if user_signed_in?%>

Welcome,<%= current_user.name%>!

<%else%>

Please<%= link_to"sign in",login_path%>.<%end%>

bundle exec herb format [file]

Slide 133

Slide 133 text

<%= @title %>

<% if user_signed_in? %>

Welcome, <%= current_user.name %>!

<% else %>

Please <%= link_to "sign in", login_path %>

<% end %>

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

Coming Soon Herb Linter

Slide 137

Slide 137 text

Check for valid HTML5 Missing alt attributes on No unsafe interpolation Only one element with the same ID invalid syntax ...

Slide 138

Slide 138 text

Vision ERB Rendering Engine

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

No content

Slide 141

Slide 141 text

<%= item %>

@items = [1, 2, 3]

State View Template Rendered View Log Initial view rendered

Slide 142

Slide 142 text

<%= item %>

@items = [1, 2, 3, 4]

State View Template Rendered View Log Initial view rendered @items state changed

Slide 143

Slide 143 text

<%= item %>

@items = [1, 2, 3, 4]

State View Template Rendered View Log Initial view rendered @items state changed re-rendering view

Slide 144

Slide 144 text

<%= item %>

@items = [1, 2, 3, 4]

State View Template Rendered View Log Initial view rendered @items state changed re-rendering view tracing dependencies

Slide 145

Slide 145 text

<%= item %>

@items = [1, 2, 3, 4]

State View Template Rendered View Log Initial view rendered @items state changed re-rendering view tracing dependencies render delta for item `4`

Slide 146

Slide 146 text

<%= item %>

@items = [1, 2, 3, 4]

State View Template Rendered View Log Initial view rendered @items state changed re-rendering view tracing dependencies render delta for item `4`

Slide 147

Slide 147 text

<%= item %>

@items = [1, 2, 3, 4]

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

Slide 148

Slide 148 text

<%= item %>

@items = [1, 2, 3, 4]

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

Slide 149

Slide 149 text

Vision HTML Templating Syntax Tree

Slide 150

Slide 150 text

Improve Developer Tooling for HTML in the view layer

Slide 151

Slide 151 text

This includes other templating languages

Slide 152

Slide 152 text

tHTML+ERB

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: └── @ HTMLCloseTagNode ├── tag_opening: "" HTML+ERB

Slide 153

Slide 153 text

<%= 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: "" HTML+ERB + ActionView

Slide 154

Slide 154 text

%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: └── @ HTMLCloseTagNode ├── tag_opening: "" Haml

Slide 155

Slide 155 text

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: └── @ HTMLCloseTagNode ├── tag_opening: "" Slim

Slide 156

Slide 156 text

As long as we can transform the template syntax into the same syntax tree

Slide 157

Slide 157 text

We can combine our efforts to build tooling on top of this shared syntax tree

Slide 158

Slide 158 text

Vision What's next

Slide 159

Slide 159 text

Herb Formatter Herb Linter

Slide 160

Slide 160 text

No content

Slide 161

Slide 161 text

Including LSP Diagnostics and Code Actions for Refactoring

Slide 162

Slide 162 text

Support for parsing ActionView helpers

Slide 163

Slide 163 text

type="text" <% end %> /> <% @posts.each do |post| %>

<%= post.title %>

<% 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 %>

Slide 164

Slide 164 text

Multi-file view files diagnostic and analysis

Slide 165

Slide 165 text

<%= render partial: "input" %>

Slide 166

Slide 166 text

html_press gem phlexing gem deface gem better_html gem erb_lint gem Probably even more

Slide 167

Slide 167 text

Conclusion

Slide 168

Slide 168 text

Prism had a big effect on Ruby internals and the tooling landscape

Slide 169

Slide 169 text

Herb could have a similar effect for HTML Template Tooling

Slide 170

Slide 170 text

The community has built incredible tooling for Ruby itself.

Slide 171

Slide 171 text

Now it's time to bring that same care to the view layer.

Slide 172

Slide 172 text

With Herb, I believe we have a path to level up the view layer tooling

Slide 173

Slide 173 text

No content

Slide 174

Slide 174 text

I want to keep Ruby as attractive and easy to get started as possible

Slide 175

Slide 175 text

No content

Slide 176

Slide 176 text

No content

Slide 177

Slide 177 text

ruby/prism rake-compiler/rake-compiler rake-compiler/rake-compiler-dock flavorjones/ruby-c-extensions-explained Thanks to all contributors 🙏

Slide 178

Slide 178 text

herb-tools.dev

Slide 179

Slide 179 text

Come find my after the talk, I'd love to hear your ideas, questions and opinions.

Slide 180

Slide 180 text

Thank you 🙏 t @marcoroth_ M @[email protected] g marcoroth.dev g @marcoroth b @marcoroth.dev l /in/marco-roth