1. Hotwire and Turbo
In Ruby on Rails 7
Prajit Bhandari

2. Introduction to Hotwire
● HTML over the Wire (idea of sending HTML instead of data)
● Default front-end framework for Ruby on Rails application
● Combination of Stimulus , Turbo , and Turbo Drive
● Introduced in Ruby on Rails 6 as optional feature
● Included by default in Ruby on Rails 7
● Goal: SPA(Single Page Application) and application speed up

4. Installing Turbo in Rails application
● GemFile
gem 'turbo-rails'
gem 'stimulus-rails'
● execute bundle install in terminal
● Application.js
import "@hotwired/turbo-rails"
import "./controllers"

5. Benefits of using Hotwire
● Reduce server requests: Use Turbo Streams to update parts of a page without a full
server request.
● Eliminate page reloads: Use Turbo Drive to load linked pages in the background and
swap out only the content that needs to be changed.
● Improve perceived performance: Use Stimulus.js to progressively enhance the user
interface, making it feel faster and more responsive.
● Optimize network usage: Use Turbo Streams to send only the data that needs to be
updated on the page, reducing the amount of data transferred between server and
client.
● Reduce development time: Use Hotwire's cohesive set of tools to avoid learning
and integrating multiple third-party libraries.
● Security: CSRF and XSS attack prevention by default.

6. Turbo in Hotwire
● JS library built on top of Hotwire and enables real-time updates
● Comprises of Turbo Frame and Turbo Stream
● SPA without having to write much custom JS
● Focuses on providing high-performance
● Low-overhead way to build web apps

7. Turbo Frame in Turbo
● Independent pieces of a web page that can be appended, prepended, replaced, or
removed without a complete page refresh.
● All clicks on links and form submissions are now AJAX requests by default
● Syntax: <%= turbo_frame_tag ‘frame_name’ , target: ‘target_type’ , src: ‘url’ do %>
#code blocks
<% end %>
● Turbo Frame name are usually specified with dom_id(@instance)
● Html elements wrapped under a turbo-frame-tag references the same tag name in the
redirected url.
● Turbo Frame holds “src”a data-property which contains the url of an endpoint to fetch
content from the respective url

9. Turbo Frame Type
● Eager loaded Frame:
- Works like the basic frame, but the content is loaded from a remote src first.
- <% turbo_frame_tag src="/messages" %>
- # Content will be replaced when /messages has been loaded.
- <% end %>
● Lazy loaded Frame:
- Like an eager-loaded frame, but the content is not loaded from src until the frame is
visible.
- <% turbo_frame_tag src="/messages" loading = lazy %>
- #Content will be replaced when the frame becomes visible and /messages has
been loaded.
- <% end %>

10. Turbo Frame Target
● _self: The linked document will open in the same frame or window as the current
document.
● _parent: The linked document will open in the parent frame of the current frame
or window. If there is no parent, it behaves like _self.
● _blank: The linked document will open in a new, unnamed window or tab.
● _top: The linked document will open in the top-level frame or window. If there
are nested frames, all frames will be replaced with the linked document.

12. Nested Turbo Frame
● Need to render a turbo frame inside another turbo frame.
● Allows for more faster loading times.
● Multiple parts of a page can be updated independently, rather than having to
reload the entire page.
● <%= turbo_frame_tag nested_dom_id(instance1, instance2) % do >
● <%# content %>
● <% end %>

14. Turbo Stream in Turbo
● Forms in Rails 7 are now submitted with the TURBO_STREAM format
● View file is implemented as <file/endpoint name>.turbo_stream.erb
● Turbo Stream format is mechanism for updating parts of a webpage
without requiring a full page reload.
● This allows for faster and more responsive user experiences, as only the
necessary components of the page are updated.

15. Turbo Drive
● With turbo drive, data-turbo=’true’ is enabled on a turbo frame
● Extension of Turbo that allows for real-time updates to web pages without the need for a
full page refresh.
● Intercepts form submissions and link clicks, and sending the data via a streaming
connection to the server, which then updates the page without the need for a full page
refresh
● Adding data-turbo=’false’ data attribute on the HTML element disables turbo

16. A Basic Flow of Hotwire and Turbo

17. Stimulus
● JS framework for adding behavior to your HTML.
● lightweight and efficient, with a small code footprint and minimal
performance overhead.
● A user-initiated event that triggers a state change in the application
● Allows you to add JavaScript to your HTML by using "controllers" that
can respond to events on the page

18. How does Stimulus JS work?
● Intercepts events: button clicks, form submissions, and link clicks
● Can be handled by the Hotwire JavaScript library, which listens for events on the
page and sends an HTTP request to the server.
● The server then responds with the updated HTML and JavaScript necessary to
update the state of the application, which is then rendered in the browser.
● Uses a declarative approach:
<button data-controller="controller_name"
data-#{controller-name}–#{attribute}-value=”value”
data-action="click->controller_name#method_name">Greet</button>

19. Boiler Plate of Stimulus js
import { Controller } from "stimulus"
export default class extends Controller {
static values = { name: String}
initialize() {
console.log("Controller initialized once for default values")
}
connect() {
console.log("Controller connected")
}
method_name() {
const name = this.nameValue || "World"
console.log(`Hello, ${name}!`)
}
}

20. Index.js
● import { application } from './application'
● import DemoController from './demo_controller.js'
● application.register('demo', DemoController)
● Note: This controller files should be placed inside javascript/controller dir

21. BEM Methodology
● Block Element Modifier
● A CSS architecture preferred in Hotwire and Turbo
● Provides modularity with no overlapping issues with the element
● BEM is a natural fit with Stimulus to add behavior to HTML elements.
● Example:

22. References
● https://www.hotrails.dev/
● https://stimulus.hotwired.dev/reference/controllers