Hotwire: Turbo Drive & Frames
Este curso trata do Turbo Drive e dos Turbo Frames num app Rails que os liga com a gem turbo-rails e um pin no import map. Explica como o Turbo Drive intercepta um clique, busca a página e mescla o head e o body, inclusive com morph. Mostra onde o app desliga o prefetch e o Turbo Drive, e como funcionam folhas de estilo rastreadas, diálogos de confirmação e texto durante o envio. Depois trata de frames casados por id e de um frame de discussão que só carrega quando o diálogo abre.
O que você vai aprender
- ✓Como o Turbo Drive busca uma página e mescla o head e o body
- ✓Como funcionam os refreshes com morph e o evento turbo:morph
- ✓Quando desligar o prefetch ou o Turbo Drive, como nos botões de OAuth
- ✓Como se comportam data-turbo-track, data-turbo-confirm e data-turbo-submits-with
- ✓Como Turbo Frames e Turbo Streams encontram o alvo pelo id
- ✓Como adiar o carregamento de um frame até um diálogo abrir
O que o Turbo Drive substitui
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…
Ler a aula completa grátis →Currículo
7 aulasO que o Turbo Drive substitui
Mostra o recarregamento completo que o Turbo Drive substitui e as duas linhas de configuração que o ligam.
Como o Turbo Drive intercepta um clique
Explica como o Turbo busca a URL clicada, mescla o head, troca o body e usa refreshes com morph.
Desligando o Turbo Drive onde importa
Trata de desligar o prefetch nas grades de cards e o Turbo Drive nos botões de OAuth do GitHub.
Pequenos recursos do Turbo Drive que já vêm prontos
Trata de folhas de estilo rastreadas que forçam recarregamento, diálogos de confirmação nativos e texto de carregamento no envio.
Um Turbo Frame é uma região própria
Explica Turbo Frames como regiões próprias, com uma seção de imagens do admin atualizada por um Turbo Stream de mesmo id.
Frames que carregam depois, e o atributo src
Mostra como um frame de discussão usa data-src para carregar os comentários só quando o aluno abre o diálogo.
Turbo Drive e frames juntos
Revisa os ajustes e frames do curso, seguindo o diálogo de discussão do carregamento da página até a publicação.