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

Turbo Rails Tutorial

Learn how to leverage the power of the turbo-rails library now included by default in Rails 7 to write reactive single-page applications without having to write a single line of custom JavaScript.

  1. Chapter 0
    In this chapter, we will explain what we are going to learn, have a look at the finished product and kickstart our brand new Rails 7 application!
  2. Chapter 1
    In this first chapter, we will start our application by creating our quote model and its associated controller following the Ruby on Rails conventions.
  3. Chapter 2
    In this chapter, we will write some CSS using the BEM methodology to create a nice design system for our application.
  4. Chapter 3
    In this chapter, we will explain what Turbo Drive is and how it speeds up our Ruby on Rails applications by converting all link clicks and form submissions into AJAX requests.
  5. Chapter 4
    In this chapter, we will learn how to slice our page into independent parts thanks to Turbo Frames and the Turbo Stream format. After reading this chapter, all the CRUD actions on quotes will happen on the quotes index page.
  6. Chapter 5
    In this chapter, we will learn how to broadcast Turbo Stream templates with Action Cable to make real-time updates on a web page.
  7. Chapter 6
    In this chapter, we will learn how to use Turbo Streams securely and avoid sending broadcastings to the wrong users.
  8. Chapter 7
    In this chapter, we will learn how to add flash messages with Turbo and how to make a nice animation with Stimulus.
  9. Chapter 8
    In this chapter, we will learn two ways to handle empty states with Turbo. The first one uses Turbo Frames and Turbo Streams, and the second uses the only-child CSS pseudo-class.
  10. Chapter 9
    In this chapter, we will build the CRUD controller for the dates in our quotes. It is the perfect opportunity to practice what we have learned since the beginning of the tutorial!
  11. Chapter 10
    In this chapter, we will build our last CRUD controller for line items. As line items are nested in line item dates, we will have some interesting challenges to solve with Turbo Frames!
  12. Chapter 11
    In this chapter, we will add a sticky bar containing the total of the quote. This total will be updated every time we create, update, or delete a line item.

Sponsored by:

Better Stack lets you see inside any stack, debug any issue, and resolve any incident. Become a sponsor