Introdução ao Turbo: crie aplicações web dinâmicas sem escrever Javascript

Índice

1 O que é o Turbo?
2 Turbo Drive: navegando com fluidez
3 Turbo Frame: atualizações segmentadas
4 Turbo Stream: atualizações em tempo real
5 Qual será o resultado de tudo isso?
6 O futuro de Turbo

Enquanto a arquitetura Single-Page Application (SPA) dominou a última década, impulsionada por bibliotecas como React, surge agora uma alternativa: o Turbo. Ele garante dinamismo e fluidez das SPAs sem a necessidade de escrever Javascript. Nunca ouviu falar disso? Então vamos entender do que se trata neste artigo.

O que é o Turbo?

Lançado em setembro de 2021 pelos mesmos criadores do Ruby on Rails, o Turbo é uma leve biblioteca Javascript, com menos de 400kb. Além disso, é simples de usar e tem uma curva de aprendizado pequena. Contudo, é muito poderoso. Com ele, você consegue construir páginas web dinâmicas que se comportam como aplicações SPA, mas sem utilizar o Javascript. Logo, o desenvolvimento é mais produtivo e menos complexo.

Parte da simplicidade vem do fato que com Turbo não é necessário gerenciar estado, autenticação e autorização, roteamento, entre outras coisas. Isso porque ele recebe HTML do servidor já renderizado e somente o insere na página.

Mas faz isso de uma forma muito inteligente. Com Turbo Drive, a navegação é fluida e não há recarregamento da página. Em vez disso, os componentes da página podem ser atualizados separadamente com o Turbo Frame e atualizações dinâmicas podem ser feitas usando o Turbo Stream.

Para entender melhor como tudo isso funciona, vamos nos aprofundar em cada um desses três componentes.

Turbo Drive: navegando com fluidez

Para carregar a página com fluidez, o Turbo Drive monitora os cliques em <a href> e intercepta envios de formulário ao impedir o comportamento padrão do browser. Depois, altera a URL usando a History API e solicita a nova página com a função fetch. Por fim, o HTML é recebido e inserido na página.

Tudo isso é feito de forma otimizada. Enquanto o conteúdo do <body> é substituído, o <head> é mesclado, mantendo assim o estado da aplicação. O resultado para o usuário é tão fluido quanto uma aplicação SPA.

No entanto, frequentemente, o comportamento do usuário altera somente uma pequena parte da página. Por exemplo, supondo que temos uma aplicação de lista de tarefas, ao marcar um item como concluído, somente o estado dele é modificado. Assim, alterar todo o <body> seria desnecessário.

Portanto, para evitar isso, vamos ao segundo componente.

Turbo Frame: atualizações segmentadas

O Turbo Frame permite alterar partes da página. Para fazer isso, encapsulamos o elemento dentro de um <turbo-frame>. Por exemplo, imagine que abaixo seja o nosso item de tarefa:

Quando o usuário clicar em Done, gostaríamos que somente o item seja atualizado, alterando o link para Undone. Para alcançar isso, a resposta do servidor deve ser um <turbo-frame>, como abaixo:

Dessa forma, o Turbo Drive substituirá somente o <turbo-frame id=”task-1″>. Poranto, a requisição é mais rápida, visto que o conteúdo é bem menor se comparado com uma página completa.

Caso a lista de itens seja muito grande, você pode postergar o carregamento das que não estão visíveis para o usuário adicionando o src no <turbo-frame>:

Para concluir os exemplos, imagine que temos uma listagem com 2 itens e gostaríamos de excluir um deles. Ao clicar em Delete, precisamos remover o elemento da página:

Portanto, é neste contexto que o Turbo Stream se torna útil.

Turbo Stream: atualizações em tempo real

Com o Turbo Stream é possível adicionar, remover e alterar elementos de toda a página através de respostas do servidor, mensagens via WebSocket ou qualquer outro meio de transporte.

No exemplo anterior, ao clicar em Delete para o item Aprender Rails, o servidor enviará a seguinte resposta contendo o <turbo-stream>:

Além disso, se quisermos remover o item em tempo real para os demais usuários visualizando a lista, podemos enviar a action do <turbo-stream> via WebSocket. Portanto, usando Ruby on Rails, primeiro criamos o canal WebSocket que vai receber as atualizações referentes aos itens:

Depois disso, atualizamos nosso modelo para que quando um item for removido, ele faça um broadcast para todos os conectados no canal de itens:

Qual será o resultado de tudo isso?

Com essas alterações, a remoção do item é enviada em tempo real para todos os usuários conectados na página de listagem de itens. O resultado será parecido com esse:

Além da ação de remover, você pode executar as seguintes ações:

– prepend: Insere conteúdo no início do elemento alvo.
– append: Adiciona conteúdo ao final do elemento alvo.
– replace: Substitui o elemento alvo pelo conteúdo fornecido.
– update: Atualiza o conteúdo interno do elemento alvo.
– before: Insere conteúdo imediatamente antes do elemento alvo.
– after: Adiciona conteúdo imediatamente após o elemento alvo.

O futuro de Turbo

Portanto, fica evidente que o Turbo oferece uma abordagem mais simples e menos complexa do que as SPAs tradicionais. Afinal, com ele, toda a lógica fica no servidor. Ou seja, é eliminada a necessidade de JSON, gerenciamento de estado, ferramentas de building como Webpack e outras que complicam o desenvolvimento front-end atual.

Depois de entender tudo isso, é hora de buscar melhorar neste meio. Para isso, eu recomendo participar ativamente de uma Comunidade, tirando dúvidas e trocando experiências com outros e outras profissionais. Inclusive, quer uma recomendação? Confira o servidor da Impulso no Discord, vale muito a pena.

Enfim, o futuro da programação web pode ser menos complicado do que imaginamos. Por isso, vale a pena experimentar o Turb. Eu garanto que você vai se surpreender com a produtividade e facilidade que você terá ao criar aplicações web dinâmicas sem escrever sequer uma única linha de Javascript.