Hotwire and Turbo in Ruby on Rails 7 - Gurzu Nepal

Rails 7 introduces Hotwire and Turbo as the default front-end framework for Ruby on Rails applications. The powerful combination of Stimulus.js and Turbo aims to accelerate application performance and streamline the development of Single Page Applications. With Hotwire and Turbo, developers can achieve lightning-fast page loads, minimal client-side JavaScript, and a smoother, more intuitive user experience.

Transcript

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