Hotwire: Turbo Frames
Jul 19, 22 by Juan Lebrijo about Turbo, Hotwire, rails, blog

Tubo Frames decompose your page in parts using tag <turbo-frame>, which can be replaced by copies received by the server, just locating and replacing them thanks to identifiers. For example we can manage a message in your list of messages annotating with this tag "_message.html.erb":

<%= turbo_frame_tag @message do %>
......
  <%= link_to @messages, data: { turbo_frame: "_top" } %>
......
<% end %>

In this ERB code frame would be replaced inside the tags, but the link to all messages will be replaced in full body of HTML page. Here is the translation to HTML code:

<turbo-frame id="message_1">
......
  <a href="/messages" data-turbo-frame="_top" />
......
</turbo-frame>

In controller we send only "_message.html.erb" rendered

def show
  @message = Message.find(params[:id])
  render @message
end

Eager-loaded frame: Replaced when "/messages" are loaded. Adding "src: @messages" to your ERB file.

Lazy-loaded frame: Content will be replaced when frame is visible. Add [loading: "lazy"]to ERB tag

Frame targets: manage where to be replaced

  • [target: "_top"]: All links/forms within replace full window.
  • [target: "main"]: All links/forms within replace "main" frame.
  • [data: {turbo_frame: "_seld"}]: In a "_top" frame resets the link to self replacement.

Advance/replace on browser history: By default takes replace strategy, but you can create copies: <turbo-frame data-turbo-action="advance">

Anti-forgery support (CSFF):

  • Auto managed by Rails, adds a <meta> in header with "csrf-token" name attribute.
  • Then all submissions send "X-CSRF-TOKEN" in HTTP header. Except when: data-turbo="false"; which disables turbo in this element.

Several Frame attributes and JavaScript properties:

  • src (Frame.src in JS): path to control the navigation URL.
  • loading (Frame.loading): navigation eager or lazy.
  • disabled (Frame.disabled): Frame disabled for navigating.
  • autoscroll (Frame.autoscroll): Scroll after loading. Values are: end|start|center|nearest.

Check reference, they are very useful on development.

Turbo Drive
Jul 16, 22 by Juan Lebrijo about Turbo, Hotwire, rails, blog

Is the most important part of Turbo, despite it seems the simplest, I think it's because frames and streams seems more spectacular. It basically avoids full-reloading of HTML page, just replacing the <body>, giving a clean sense of navigation. Intercepting usual HTTP requests and use fetch for server calls. It also manages full browser history with advance/replace/restore actions.

We can decompose its main features in 15 points:

  1. Page navigation basics:
    • Visit (def.): Entire navigation lifecycle is: change browser history -> fetch request -> restoring a copy from cache -> rendering response -> updating scroll position.
    • Types of visits are: Application (as an action of advance/replace) and restoration (as an action of restore cache page)
    • You can also delete all cache with: Turbo.clearCache()
  2. Application Visits
    • Turbo.visit(location) tries to render a preview, if exists, of the actual view. Then replaces it and add to history with history.pushState.
    • If you want to replace the state of the browser-history, you can manage it by a tag <a href="/edit" data-turbo-action="replace"/>. Or by JavaScript: Turbo.visit("/edit",{action: "replace"}).
  3. Restoration visits: These are fired when you click on back/forward buttons in your browser or mouse.
  4. Canceling visits before they start: You can do it by listening the event "turbo:before-visit". Preventing default behavior with event.preventDefault(). And finally you can check location in event.detail.url.
  5. Pausing rendering: You can do it by listening the event "turbo:before-render". Preventing default behavior with event.preventDefault(). Do things you want to do. And resume rendering with event.detail.resume() function.
  6. Pausing requests: The same as before point but listening "turbo:before-fetch-request".
  7. Links with different methods: Method fired by a link by default is GET. You can replace it: <a href="/article/64" turbo-data-method="delete">Delete article</a>.
  8. Disable Turbo on specific links or forms: It can be disabled for links <a href="/articles" data-turbo="false">Disabled Turbo</a>. Or directly importing Turbo in JavaScript: Turbo.session.drive=false.
  9. Displaying progress: Drive installs a CSS Turbo progress bar by default:
    • Appears when action takes longer than 500ms (you can change this time with Turbo.setProgressBarDelay()).
    • To manipulate CSS appearance with class: .turbo-progress-bar.
    • Also puts to true "aria-busy" attribute, and false when all action is done.
  10. Reloading when assets change: When an asset changes in <head> full page is reloaded. For that purpose you have to put [data-turbo-track="reload"] and version ID in all header assets.
  11. Force full reload for certain pages: Include in <head> the tag: <meta name="turbo-visit-control" content="reload">
  12. Setting root location: You can have a concrete path for your app like "/app" and all others are completely different apps. Include in <head> this: <meta name="turbo-root" content="/app"/>. And Turbo will be disabled in other roots.
  13. Form submissions:
    • Form lifecycle can be manipulated through events (see Reference/Events)
    • Turbo also sends a "disable" attribute to submitter (submit button)
    • Events like: "turbo:submit-start", "turbo:before-fetch-request",...
  14. Redirecting after form submission: Turbo waits for 3xx redirect responses to fetch content. Except on 4xx (wrong inputs) or 5xx errors.
  15. Streaming after form submission:"Content-Type: text/vnd.turbo-stream.html" with content of several <turbo-stream> elements, so you can replace all of the in one action.
Introduction to Hotwire/Turbo
Jul 15, 22 by Juan Lebrijo about Turbo, Hotwire, rails, blog

Turbo is the evolution of turbolinks Rails library, done to make your web app navigation faster. Giving the performance of a single-page application (like Reac) but with much less complexity and much cheaper development costs in money and time.

We can decompose Turbo in several parts:

  • Turbo Drive: avoids full-reloading of HTML page, just replacing the <body>, giving a clean sense of navigation. It intercepts usual HTTP requests and use fetch for server calls. It also manages full browser history with advance/replace/restore actions.
  • Tubo Frames: It decompose your page in parts using <turbo-frame> tag, which can be replaced by copies received by the server, just locating and replacing them thanks to identifiers.
  • Turbo Streams: Also decompose your page in <turbo-stream> parts with will be fetched to Websocket channels, so they will be replaced on change with no user action needed. Thanks to the broadcasting of Websockets, through ActiveCable channels connected to your clients' browsers.
  • Turbo Native: Brings these capabilities to the Android/IOS development world, just developing your native mobile application from your web server, avoiding long and onerous upgrade processes in marketplaces. Note that you will use native APIs, you are reusing the view and HTML fragments parts.
  • Turbo Rails: Is the gem which simplifies views programming in Rails backends, including helpers like turbo_frame_tag or turbo_stream_from.

Enjoy the invent!