Digging into Turbo with Ruby on Rails 7

When Rails 7 made its first appearance in December of 2021 a new default component was introduced called Turbo. If you have any history with Rails you might remember the Turbolinks library which is the predecessor of Turbo.

Turbo is the answer to this problem.

Turbo brings new tooling to Rails apps that make them more reactive and stateful. You can still have a server-side application that responds in real-time to requests and reduce the need for a large amount of JavaScript (the main appeal for many Rails/Ruby developers).

This happens by working with specific types of requests and dynamically rendering content on a page.

With Turbo, we get the historical benefits of Turbolinks with the additional benefits of new features like Turboframes and Turbostreams. This guide is meant to give you a first look at using Turbo inside your app and how you can leverage it without needing to rely too heavily on JavaScript.

#### Turbo definitions

At its core, Turbo sends HTML code over the request cycle instead of something like JSON. It's easy to confuse the different offerings of Turbo so I hope to debunk those in this guide. Let's start with some definitions.

Turbo Drive - accelerates links and form submissions by negating the need for full page reloads.
Turbo Frames - decompose pages into independent contexts, which scope navigation and can be lazily loaded.
Turbo Streams - deliver page changes over WebSocket, SSE, or in response to form submissions using just HTML and a set of CRUD-like actions.
Turbo Native - lets your majestic monolith form the center of your native iOS and Android apps, with seamless transitions between web and native sections. For this guide, I'll be focusing on the first three in this list.

=========

♥️ Sponsor me on GitHub

☕️ Keep me awake. Buy me a coffee

📰 One-Click Subscribe:

💻 Previously published at:

💎Ruby on Rails Course: HELLO RAILS

💻 Check out the blog:

🦄 Check out my personal site:

🚀 Links:

📘Check out my book on UX Design:
"LUXD: Learn User Experience Design"

📙 Check out my FREE book on Tumblr Theming:
"Pro Tumblr Theming"

[roachcode]

thanks a bunch for this vid. i'm coming from React and Turbo is the only thing holding me back going all-in on Rails. it still feels uncomfortable and unintuitive but this was the best video i could find on YouTube teaching it. i'm hoping if i stick to it i will reap the productivity gains of working on 1 app instead of a separate backend+frontend and rid of JS fatigue forever. i hope Turbo 8 will feel even better.

[charlottedankworth]

This video provides a great breakdown of Turbo for Ruby on Rails 7! It's interesting to see how this technology is speeding up the development process and enhancing user experience. Thanks for sharing!

[bennadel]

This is good stuff, thank you for sharing. I think the biggest mental shift for me is starting to think less about "generic APIs" that can be used by any view, and more about controller-specific APIs that return very view-specific stream actions.

[michaelpope]

What shortcut or extension are you using to auto create those div tags by just filling out the class name? Around the 11:28 mark.

[haroldpepete]

Nice video, could you do a video about action cable in rails?

[ibadahmad]

Which terminal are you using? It Looks great :)

[SoProudToBe]

How did you generate the UI ready styled using only scaffold !! .. I don't remember rails is still doing that ..

[DevBishwasBh]

The "Create Todo" isn't working fine, it doesn't clear the input box after todo being created.

[JoshHuckabee]

Turbo is not using true HTML frames. Turbo frames behave somewhat like a frame without all of the headache that comes along with using real frames.

[dev]

Any backend ruby playlist? Or video?
Its very hard to get full list backend course on ruby :'(

[eumesmo]

just do an if that the update was for complet you do a broadcast prepend instead of an append