Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Herb to ReActionView: A New Foundation for the ...

Avatar for Marco Roth Marco Roth
November 19, 2025

Herb to ReActionView: A New Foundation for the View Layer @ San Francisco Ruby Conference 2025

This keynote is an overview of how Herb came to be, what Herb can do for you today, and what the future with ReActionView might look like and how Herb could enable it.

Avatar for Marco Roth

Marco Roth

November 19, 2025
Tweet

More Decks by Marco Roth

Other Decks in Programming

Transcript

  1. Marco Roth Herb to ReActionView: A New Foundation for the

    View Layer November 19, 2025 - San Francisco Ruby Conference 2025
  2. Marco Roth "  @marcoroth_  @[email protected] 🌐 marcoroth.dev 

    @marcoroth Full-Stack Developer & Open Source Contributor  @marcoroth.dev
  3. <dialog> Web Components Progressive Web Apps (PWA) Custom Elements <script

    type="importmap"> inert modulepreload Declarative Shadow DOM
  4. Make it feel as familiar to what Action View has

    been doing for over two decades
  5. Marco Roth Herb to ReActionView: A New Foundation for the

    View Layer November 19, 2025 - San Francisco Ruby Conference 2025
  6. import { Controller } from "@hotwired/stimulus" export default class extends

    Controller { connect() { console.log("User Profile connected") } }
  7. import { Controller } from "@hotwired/stimulus" export default class extends

    Controller { connect() { console.log("User Profile connected") } }
  8. import { Controller } from "@hotwired/stimulus" export default class extends

    Controller { connect() { console.log("User Profile connected") } }
  9. <%= 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 %>
  10. <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>
  11. - name: Herb Linter run: npx @herb-tools/linter - name: Herb

    Formatter run: npx @herb-tools/formatter --check .github/workflows/lint.yml
  12. 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
  13. # 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
  14. # 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
  15. 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
  16. The Ruby Prism Parser had a big effect on Ruby

    internals and the tooling landscape
  17. But I think it really goes to show what a

    bit of dedication can yield
  18. Thank you $  @marcoroth_  @[email protected] 🌐 marcoroth.dev 

    @marcoroth  @marcoroth.dev  /in/marco-roth