Hotwire and Turbo In Ruby on Rails 7 Prajit Bhandari

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

No content

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"

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.

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

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

No content

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

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.

No content

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

No content

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.

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

A Basic Flow of Hotwire and Turbo

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

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: Greet

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}!`) } }

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

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:

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