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.
-
Chapter 0In 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!
-
Chapter 1In this first chapter, we will start our application by creating our quote model and its associated controller following the Ruby on Rails conventions.
-
Chapter 2In this chapter, we will write some CSS using the BEM methodology to create a nice design system for our application.
-
Chapter 3In 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.
-
Chapter 4In 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.
-
Chapter 5In this chapter, we will learn how to broadcast Turbo Stream templates with Action Cable to make real-time updates on a web page.
-
Chapter 6In this chapter, we will learn how to use Turbo Streams securely and avoid sending broadcastings to the wrong users.
-
Chapter 7In this chapter, we will learn how to add flash messages with Turbo and how to make a nice animation with Stimulus.
-
Chapter 8In 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.
-
Chapter 9In 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!
-
Chapter 10In 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!
-
Chapter 11In 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.