Como usar o Hotwire com o Ruby On Rails – Passo a Passo

Neste tutorial você vai aprender como construir aplicações web modernas sem usar muito JavaScript enviando HTML em vez de JSON pela rede (over the wire).

Isso torna as primeiras páginas mais rápidas ao carregar, mantendo a renderização no servidor (server-side) e permitindo uma experiência de desenvolvimento mais simples e produtiva como o Rails sempre trouxe em suas tecnologias, sem sacrificar a velocidade ou a capacidade de resposta associadas a uma aplicação tradicional de página única (Single Page Application ou SPA).

 

Exemplo inspirado em um Screecast do Go Rails 🤘

 

Ferramentas

  • Ruby

  • Ruby On Rails

  • Redis

  • SQLite

  • Hotwire para Rails

  • TurboRails

  • StimulusJS

  • WebSocket

  • ActionCable

 

O que é o Hotwire?

O coração do Hotwire é a gem Turbo. Um conjunto de técnicas complementares, para acelerar a navegação das páginas e envios de formulários, dividindo páginas complexas em componentes e transmitindo atualizações parciais das páginas através do WebSocket (o qual consiste em ActionCable, Channels e Streaming Data).

Tudo isso com a possibilidade de não escrever nenhum JavaScript, apenas se for necessário escrever algum código customizado e para esse caso usaremos o Stimulus que torna isso muito fácil com uma abordagem centrada em HTML para estados e navegação entre a rede (wire) e que foi projetado desde o início para se integrar perfeitamente com aplicativos híbridos nativos para iOS e Android.

 

O que vamos criar?

Uma aplicação web responsiva para se adequar as telas de computador e celular aonde poderemos criar, visualizar, atualizar, dar like e retweetar o tweet se igualando quase a uma SPA sem sacrificar velocidade e capacidade de armazenamento das respostas usando Rails com Hotwire.

 

Então bora codar!

1 – Primeiramente vamos criar nosso projeto Rails, para isso, rode no terminal (isso pode demorar um pouco, é uma boa hora para um café):


2 – Para adicionar e instalar o Hotwire no nosso projeto, rode no terminal:


3 – Vamos instalar as configurações iniciais, rode no terminal:


4 – É um ótimo momento para nós analisarmos com calma quais foram essas configurações iniciais que o hotwire fez, visitando o primeiro arquivo então
app/javascripts/packs/application.js, ele deve estar parecido com esse:

  • Podemos observar que não importamos mais o Turbolinks e agora importamos o turbo-rails, pois o turbo rails substitui o turbolinks e no final da linha vemos que importamos os controllers e esse ultimo está relacionado com os arquivos do Stimulus o qual podemos checar se esta instalado no packagase.json


5 – Se formos checar como ficou o
Gemfile vamos ver ele mais ou menos dessa forma:


6 – Podemos observar que a gem
redis foi adicionada no projeto isso porque o ActionCable precisa dele para guardar alguns dados temporários durante a navegação do WebSocket. Porém só instalar o redis não é suficiente para usar ele, precisamos checar se ele esta configurado corretamente, vá no arquivo config/cable.yml ele deve se parecer dessa forma:


7 – Agora sim, temos certeza de que no nosso projeto a configuração do hotwire está OK. Vamos gerar nossas
views, controllers, models e migrations para a tabela tweets com as colunas body e likes, para isso rode no terminal:


8 – Agora que temos tudo gerado precisamos mandar essas alterações para o banco de dados, para isso rode no terminal:


9 – Se tudo der certo podemos rodar o servidor e checar se está tudo OK, para isso vamos rodar o servidor e depois visitar a página de tweets que será
http://localhost:3000/tweets, então rode no terminal:

Rails e Hotwire


10 – Agora vamos colocar os tweets e o formulário juntos para ter tudo na mesma página, para isso edite o arquivo
app/views/tweets/index.html.erb


11 – Edite o formulário para que não apareça a opção adicionar likes, pois vamos implementar os likes quando os tweets já estiverem criados, então vamos deixar o arquivo
app/views/tweets/_form.html.erb dessa forma:


12 – Agora vamos listar os tweets, para isso vamos criar o arquivo
app/views/tweets/_tweet.html.erb e adicionar nele o seguinte código:


13 – Precisamos validar o campo body (que não pode ser nulo) e vamos dizer para o broadcast para após criar o tweet exibir ele na tela como o primeiro tweet, para isso vamos editar o arquivo
app/models/tweet.rb e colocar o seguinte código:


14 – Agora para carregar os tweets na ordem correta, e para quando criarmos o tweet apareça o novo tweet ou alguma mensagem de erro no formulário para indicar que algo deu errado, vamos editar o arquivo
app/controllers/tweets_controller.rb


15 – Agora já podemos testar o formulário, e mais legal ainda, podemos também fazer o teste pelo terminal que a lista de tweets deve atualizar em tempo real:
hotwire

  • Agora analisando o fluxo das requisições pelo terminal podemos observar ele transmitindo os dados para os métodos por TURBO_STREAM e é isso que nos permite renderizar o formato turbo_stream, redirecionar e renderizar outra página via html sem precisar atualizar.

    Então, usando esse método ele manda o HTML atual dos tweets já criados para o método create nesse nosso exemplo, depois que ele inserir com sucesso o tweet ele monta o HTML do novo tweet pelo ActionCable, com isso ele redireciona o backend para a página de tweets mas não retorna HTML e sim um status http 302 (found), dessa forma a página não atualiza, e para finalizar ele transmite para a página de tweets os dados do novo tweet e coloca ele aonde for indicado, se a action for prepend como é nosso caso ele vai colocar antes dos tweets, se fosse append por exemplo ele colocaria no final dos tweets.


16 – Dando continuidade, vamos agora codificar a parte de editar o twitter, dar like e excluir certo? Para isso vamos configurar o broadcast para os casos de update e destroy deixando o arquivo app/models/tweet.rb dessa forma:


17 – Agora vamos criar um link para editar e quando clicar a ideia é remover o tweet para colocar um formulário no mesmo lugar com os dados do tweet, para fazer isso primeiramente vamos identificar no arquivo
app/views/tweets/edit.html.erb o id do frame que ele vai precisar substituir, renderizar o formulário e ainda mostrar um link de cancelar, deixando ele dessa forma:


18 – Agora ele já sabe que deve substituir o mesmo frame que estiver com o id do tweet, mas nós não identificamos os ids dos tweets na nossa lista de tweets, então para identificar basta deixar o arquivo
app/views/tweets/tweet.html.erb dessa forma:


19 – Agora vamos arrumar os requests e o que eles devem fazer lá no arquivo
app/controllers/tweets_controller.rb , deixaremos ele dessa forma:


20 – Agora quando clicar em cancelar e quando terminar de atualizar o tweet, queremos que suma o formulário e apareça o tweet de volta atualizado ou não, para isso precisamos deixar o arquivo
app/views/tweets/show.html.erb dessa forma:


21 – Nossa aplicação já está quase pronta, mas ainda falta uma coisinha, deletar os tweets, para fazer isso é mais fácil do que parece, basta adicionar os links de deletar nos arquivos
app/views/tweets/_tweet.html.erb e app/views/tweets/show.html.erb, e eles vão ficar dessa forma respectivamente:

Action Cable

 

Conclusão

Através desse artigo foi possível compreender como funciona o “framework mágico” tradução livre do artigo da basecamp, através das requisições via turbo stream agregado com manipulação e navegação via WebSocket.

Nele você ainda teve a possibilidade de desenvolver na prática uma pequena aplicação simples, mas que já lhe permite aplicar esse conhecimento de maneira aprofundada em muitos outros projetos legais e acredite até mesmo projetos grandes com o conhecimento que você adquiriu aqui tenho certeza que será capaz de lidar com eles sem problemas.

Caso haja alguma dúvida, ou até mesmo alguma parte que não saiu como esperado, você pode acessar o meu repositório no GitHub, ou utilize os comentários para que nós possamos nos comunicar.

 

 

 

Aviso Importante (Criando um E-commerce profissional com Rails)

E ai Programador(a), tudo bem?
Leonardo Scorza por aqui 🙂

Em breve nós vamos abrir uma nova turma do Novo Bootcamp, nele nós ensinamos como criar um E-commece Profissional usando Ruby On Rails, React e React Native.
Vou deixar um link a baixo para você se inscrever para ser avisado assim que uma nova turma abrir, basta deixar seu email 🤘

-> Me avise sobre a próxima turma: https//bootcamp.onebitcode.com

 

5 1 vote
Article Rating
fevereiro 4, 2021
Subscribe
Notify of
guest
5 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ruhan Dutra
Ruhan Dutra
2 meses atrás

Ótimo conteúdo! Super útil 🤘

jCom
jCom
1 mês atrás

Opa que Ide é essa que vc ta usando ?

Felipe Kosouski
Felipe Kosouski
1 mês atrás

Muito bom, quanto menos js melhor hahahha

Feito com s2 por OneBitCode
5
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: