O que o Turbo Drive substitui

O recarregamento que este app não faz mais

Um app Rails comum, renderizado no servidor, joga a página inteira fora a cada clique. O navegador manda uma requisição, o servidor devolve um documento HTML completo, e o navegador descarta o DOM e monta um novo. As folhas de estilo são lidas de novo, scripts rodados de novo, posição de rolagem perdida. Este app não faz isso num link ou formulário comum, e ninguém programou a alternativa à mão.

Clique em link comum:
  clique ──▶ requisição de página completa ──▶ HTML novo completo ──▶ navegador descarta a DOM antiga e constrói uma nova

Clique com Turbo Drive:
  clique ──▶ requisição fetch ──▶ HTML novo ──▶ Turbo mescla o <head>, substitui o <body>

Já rodando, a partir do Gemfile deste app

Gemfile, linhas 13-14:

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

config/importmap.rb, linha 6:

pin "@hotwired/turbo-rails", to: "turbo.min.js"

Essa é a configuração inteira. Nenhum controller precisa aderir, e nenhuma view chama um helper para ligar isso. Com turbo-rails no Gemfile e fixado no import map, o Turbo Drive se prende a todo <a> e <form> comum de toda página que este app renderiza. Isso inclui as páginas de catálogo e de painel por onde você vem clicando.

Parecido com SPA, mas não um SPA

O comentário do Gemfile diz "SPA-like" de propósito. Nada aqui é um app JavaScript renderizando views no navegador. Toda página continua sendo renderizada pelo Rails, em Ruby, como HTML comum. O Turbo Drive muda só a forma como esse HTML chega: ele é buscado e trocado no lugar, em vez de causar uma navegação completa do navegador. O modelo de renderização no servidor que este currículo ensinou até aqui continua igual.

O que este curso cobre

A aula 2 mostra como o Turbo Drive intercepta um clique e mescla a resposta. As aulas 3 e 4 tratam dos lugares em que este app desliga ou ajusta o Turbo Drive. São eles o prefetch, o botão de OAuth do GitHub, assets rastreados, diálogos de confirmação e retorno visual durante o envio. A aula 5 explica o que é um Turbo Frame, por meio de uma atualização casada por id no painel de admin deste app. A aula 6 trata de um frame por trás do diálogo de discussão que só carrega quando o diálogo abre, e por quê. A aula 7 junta tudo.