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