Introduction to Hotwire and Turbo

In the last chapter, we set up Webpacker and TypeScript. In this chapter, we’re going to start creating front-end applications with Rails by doing something that may initially seem odd. That is, we’re going to add front-end features without writing JavaScript. In fact, we are not going to write much JavaScript at all. Instead, we’re going to use Hotwire and Turbo to build client-side interactivity into our page.

The Hotwire way

Hotwire is the generic name for the client-side toolkit written by the Basecamp team to power the Hey email application. The goal of Hotwire is to support an application in which most of its dynamic nature happens by making typical HTTP requests to the server, receiving HTML for a part of the page, and inserting that HTML in the correct place in the DOM for a page update.

The name “Hotwire” is derived from the phrase “HTML over the wire.”

The idea is that, by moving all the logic to the server, we can replace much of the complicated and specific client-side code with a small set of generic client-side actions that handle the retrieval and management of HTML from the server. We still have to write the server-side logic, but we are preventing some duplicate logic on the client and the server by making the server the source of truth. Turbo allows us to reuse view code that we have already ...