Ao navegar pelo mundo do desenvolvimento front-end moderno, muitas ferramentas prometem simplificar a criação de interações dinâmicas sem sobrecarregar o desenvolvedor com códigos Javascript complexos.
Por essa razão, o HTMX tem se tornado popular. Com ele é possível atualizações dinâmicas em partes específicas da página sem recarregar completamente. Mas o que torna o Hotwire diferente? E como ele pode substituir o que você já conhece no HTMX?
Neste artigo, vamos explorar o Hotwire, destacando suas particularidades e diferenças em relação ao HTMX. Se você já usa HTMX, prepare-se para conhecer uma nova abordagem que promete otimizar ainda mais o desenvolvimento web no Rails.
O que eles tem em comum?
Ambos reconhecem as vantagens de uma abordagem centrada em HTML. Isso contrasta com os inúmeros frameworks de Single Page Application (SPA) em JavaScript que implementam o padrão fat client no navegador, tratando o HTML apenas como um meio de renderização.
Por outro lado, tanto o Hotwire quanto o HTMX reconhecem que o HTML se torna mais poderoso quando é utilizado como o mecanismo de transferência de dados. Os princípios por trás do design do HTML como uma tecnologia que prioriza o processamento pelo backend são antigos, mas ainda muito válidos. O HTML evoluiu muito, e a combinação HTML5 + CSS nos navegadores modernos é muito poderosa. No entanto, ainda não é suficiente para construir aplicações interativas modernas e ricas – está quase lá, mas ainda falta um pouco.
É justamente assim que Frameworks como Hotwire e HTMX buscam preencher essa lacuna, permitindo que o HTML renderizado no servidor ofereça uma experiência de usuário moderna. Eles são implementados em JavaScript, mas foram projetados para exigir o mínimo possível de JavaScript personalizado na aplicação. No fim das contas, isso torna a construção da maioria das aplicações web modernas muito mais simples e rápida de ser feita.
A filosofia por Trás do Hotwire
Diferente do HTMX, o Hotwire foi criado com um foco específico no ecossistema Rails. Ele é composto por três partes principais: Turbo Drive, Turbo Frame e Turbo Stream. Cada uma dessas partes permite atualizações no cliente sem a necessidade de JavaScript adicional, mas com abordagens diferentes daquelas que encontramos no HTMX.
Turbo Drive: Melhor Navegação com Menos Recarregamento
Com o Turbo Drive, o Hotwire intercepta as navegações tradicionais no site e evita recarregamentos completos da página. Isso proporciona uma navegação semelhante a uma aplicação single-page, sem a complexidade de um framework front-end.
No Rails, por padrão, ele automaticamente interceptará as requisições de links e formulários. Por exemplo:
<a href="/produtos">
Lista de Produtos
</a>
Neste caso, ao clicar, o Turbo Drive carregará o conteúdo sem recarregar a página inteira. No HTMX, você precisaria configurar manualmente cada link ou formulário que deseja atualizar de forma dinâmica, algo como:
<a href="/produtos" hx-get="/produtos" hx-target="#conteudo">
Lista de Produtos
</a>
Neste exemplo, podemos ver como o HTMX exige que você especifique o hx-get e o hx-target em cada elemento, enquanto o Turbo Drive aplica globalmente a interceptação, de forma transparente e sem parâmetros adicionais obrigatórios.
Turbo Frame: Componentes e Interatividade
O Turbo Frame temos uma forma de carregar e atualizar partes específicas da página sem grandes Javascript extensos.
Esse conceito é similar ao hx-target do HTMX, mas com uma integração mais profunda e transparente em seus projetos Rails. Basta envolver o conteúdo que deseja atualizar dinamicamente em um turbo-frame e ao realizar as requisições a mágica acontece.
<turbo-frame id="comentarios">
<%= render @comentarios %>
</turbo-frame>
Ao atualizar o conteúdo desse frame, através da resposta de uma requisição, você pode enviar respostas parciais do servidor, contendo apenas o trecho a ser atualizado, mantendo assim a interatividade.
Se estivéssemos utilizando o HTMX, seria necessário configurar hx-target e hx-swap, como no exemplo a seguir:
<div id="comentarios" hx-get="/comentarios" hx-trigger="load" hx-target="#comentarios">
<!-- conteúdo dos comentários -->
</div>
O HTMX exigirá configuração manual para cada interação que você realizar.
Turbo Stream: Reatividade em Tempo Real
O Hotwire utiliza o Turbo Stream para cenários onde atualizações em tempo real são necessárias, como notificações, atualizações de feed e chat. Turbo Streams são altamente eficientes, permitindo que o servidor envie atualizações automáticas para o cliente.
Por exemplo, ao adicionar um novo comentário, você pode aplicar o Turbo Stream na resposta servidor, de forma parecida ao exemplo a seguir:
<%= turbo_stream.append "comentarios" do %>
<%= render @comentario %>
<% end %>
Isso adicionará o novo comentário automaticamente ao div com o id comentarios. No entanto, caso você estivesse utilizando HTMX, você precisaria configurar chamadas específicas para verificar o servidor periodicamente, para obter um comportamento de atualização similar ao do Turbo Stream.
<div id="comentarios" hx-sse="connect: /comentarios">
<!-- comentários aparecerão aqui -->
</div>
Mas isso não seria tão performático, quando apenas uma atualização on-demand. Para replicar a funcionalidade de atualização em tempo real, o HTMX exige configurações mais avançadas com SSE (Server-Sent Events) ou WebSockets. Isso não é algo trivial, principalmente se você estiver começando no mundo do desenvolvimento web, então será uma complexidade extra que não é necessária no Rails.
A Experiência de Desenvolvedor com Rails
Minha opinião é de que se você já está usando Rails, o Hotwire é uma extensão natural do framework. Ele simplifica a estrutura de suas aplicações e foi projetado para aproveitar ao máximo as convenções do Rails.
O HTMX, por outro lado, por ser concebido para ser usado em qualquer stack, tem um propósito mais generalista. O que acaba refletindo em suas configurações adicionais necessárias para seu funcionamento.
Pelo fato do Hotwire estar em sinergia com o Rails, ele oferece uma curva de aprendizado mais suave, especialmente para quem já conhece o framework. Um formulário de criação de produtos, aplicando o Hotwire ficaria assim:
<%= form_with model: @produto, data: { turbo_frame: "produtos" } do |form| %>
<%= form.text_field :nome %>
<%= form.submit "Salvar" %>
<% end %>
Neste cenário o turbo_frame automaticamente cuida do redirecionamento e atualização da lista de produtos. Simples assim!
Se formos comparar com o HTMX, seria necessário definir atributos para gerenciar o comportamento do formulário, o target, para somente depois atualizar a lista após o envio. Apesar de ambas ferramentas serem poderosas, elas têm abordagens diferentes.
Se você já usa HTMX, vale a pena experimentar o Hotwire para ver como ele pode simplificar ainda mais o desenvolvimento de seus projetos.