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.