The rebuilding turbo-rails tutorial is out!
View new course →

The Turbo Rails Tutorial

Learn how to create modern, single-page, reactive web applications with Ruby on Rails 7 without writing any custom JavaScript code.

Start the tutorial →
The buttons of our design system
The line item form we are going to build
A code snippet from the tutorial
The Hotrails logo
The quote form we are going to build
The sketch of the quotes index page
Why learn Turbo?

Hotwire is the default frontend framework for Rails

With the release of Rails 7 in December 2021, Hotwire, which is the combination of Stimulus and Turbo, became the default frontend framework for Ruby on Rails applications.

While Stimulus has been around for quite some time now, Turbo is a brand new library for many developers in the Rails ecosystem.

Turbo comes with incredible capabilities. As mentioned on the README for the turbo-rails repository: Turbo gives you the speed of a single-page web application without having to write any JavaScript.

Yes, you read that correctly. You can see for yourself. In this tutorial, we will rebuild this single-page quote editor with only one line of JavaScript! If you want to learn to do it with Turbo, then you can start reading the tutorial.

What is Turbo?

We will learn about...

Turbo Drive

Turbo Drive speeds up our Ruby on Rails applications by making all link clicks and form submissions AJAX requests by default.

Turbo Frames

Turbo Frames slices our web pages into pieces that can be loaded or updated independently to help us create dynamic user interfaces without writing any JavaScript.

Turbo Streams

Turbo Streams enable us to interact with independent pieces of the page via a response to a request or through ActionCable, making it easy to implement real-time features.

...but also about

  • How to setup a Ruby on Rails 7 application
  • How to create a nice design system
  • How to make system tests with Capybara
  • How to make unit tests with Minitest
  • And much more!
Who is behind Hotrails?
Alexandre Ruban

Hi! I'm Alexandre 👋

I've been working with Turbo since its release in December 2020. I even contributed to turbo-rails along the way to add the features I needed.

The quote editor we will build in this tutorial is heavily inspired by an invoice editor I had to make with React. At the time, it was the only page that had to be very dynamic on the whole website.

Having to set up React felt like a huge amount of work. We had to add React to the project, manage the state of the page with Redux, add JSON endpoints, build our forms with Formik, think about how to display errors.

When Turbo was released, I tried to rebuild with Turbo the invoice editor I had just built with React, and it blew my mind. I could achieve the same result with just Rails and simple form and without writing any custom JavaScript!

I decided to write this tutorial for you to benefit from what I learned at the time. If you like it, feel free to share it with your coworkers, or send me an email to say hi! I'll be very happy to hear from you!

What people are saying