Rails 7 has brought exciting changes and features, including the addition of Hotwire and Turbo. These frameworks promise to revolutionize the way we build web applications by streamlining the development process, reducing page load times, and improving user experience. In this blog, I will go through Hotwire and Turbo in Rails 7, and take a closer look at how they can be used to build fast, responsive web applications.
Introduction to Hotwire
Hotwire stands for HTML over the Wire. So literally, Hotwire refers to the idea of sending HTML instead of data.
Hotwire is the default front-end framework for Ruby on Rails applications. It is a combination of Stimulus, Turbo, and Turbo Drive. It was introduced in Ruby on Rails 6 as an optional feature. By Ruby on Rails 7, it was included as a default option.
The goal of hotwire is to speed up SPA (single page application) and other applications.
Installing Turbo in Rails Application
Add turbo-rails and stimulus-rails gem to Gemfile
gem 'turbo-rails'
gem 'stimulus-rails'
Execute bundle install in the terminal and Add the following line to Application.js
import "@hotwired/turbo-rails"
import "./controllers"
Why use Hotwire?
Using hotwire has the following benefits:
- Reduce server requests by using Turbo Streams to update parts of a page without a full server request.
- Use Turbo Drive to load linked pages in the background and swap out only the content that needs to be changed.
- Use stimulus.js to progressively enhance the user interface, making it feel faster and more responsive.
- 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 your development time by using Hotwire’s cohesive set of tools to avoid learning and integrating multiple third-party libraries.
- It offers CSRF and XSS attack prevention by default, which will give you more security.
Turbo in Hotwire
Turbo is a JS library built on top of Hotwire and enables real time updates. Comprises Turbo Frame and Turbo Stream. SPA without having to write much custom JS. It focuses on providing high-performance. It is a low-overhead way to build web applications.
Turbo Frame in Turbo
Turbo frames are 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.
- 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.
Turbo Stream in Turbo
Forms in Rails 7 are now submitted with the TURBO_STREAM format. Turbo Stream format is a 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.
View file is implemented as <file/endpoint name>.turbo_stream.erb
Turbo Drive
Turbo drive is an extension of Turbo that allows for real-time updates to web pages without the need for a full page refresh. It 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.
With turbo drive, data-turbo=’true’ is enabled on a turbo frame. Adding data-turbo=’false’ data attribute on the HTML element disables turbo.
Stimulus JS
Stimulus is a JS framework for adding behavior to your HTML. It is lightweight and efficient, with a small code footprint, and minimal performance overhead. It 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:
<button data-controller="controller_name" data-#{controller-name}–#{attribute}-value=”value” data-action="click->controller_name#method_name">Greet</button>
The addition of Turbo and Hotwire has opened a opportunity for developers to make their software even more efficient.
Happy Coding!!!
Related Articles
- 5 Best Practices for Ruby/Rails Beginners in 2023
- Command Design Pattern in Ruby
- Encrypted Secrets In Ruby on Rails
Final Words
Gurzu is a full-cycle Ruby on Rails development company. Since 2014, we have built software running on the Ruby on Rails framework for startups and enterprises from all around the world using Agile methodology. Our team of experienced Ruby developers can help to develop your next product.
Have a tech idea you want to turn into reality? Book a free consulting call.
