Turbo: Key Components of Hotwire Rails

The 3 pillars of hotwire that form the foundation of Turbo

Turbo Drive

This is the new version of TurboLinks. The main idea here is to speed up navigation as updates happen in a targeted fashion. Entire page loads are avoided. It has short comings such as not being recognized by the browser. Also it has the problem of getting tangled up with other JS libs.

Turbo Frames

Here the magic of hotwire begins to show up. The mechanics of the system begin with an html tag <turbo-frame>. Done by wrapping the block you are interested in like this:

<%= turbo_frame_tag(dom_id(user)) do %>

HTML GOES HERE....

<%end%>

With this tag is place the we are turning over control over the request and response management to Turbo. Rails does the heavy lifting of sending a targeted response back that is now updating a targeted area of the dom in the view.

Turbo Streams

This technology builds on top of the two that came before it and allows us to update various other parts of the page without a full redraw. Communication with a rails controller is made simple and ergonomic as a new format called turbo_stream is supported in the respond_to format block.

With this tag & template combination we can update several parts of a page without using custom javascript in the workflow. Similar to Turbo Frames above Rails does the heavy lifting the book-keeping needed to identify an action and update the appropriate place on a page.