Frameworks Frontend Sem JavaScript (HTMX, Phoenix LiveView)

Introdução

Os frameworks frontend são ferramentas fundamentais no desenvolvimento de software, pois permitem a criação de interfaces usuário eficientes e escaláveis. No entanto, grande parte dos frameworks frontend é baseada em JavaScript, o que pode não ser a melhor escolha para todos os projetos.

Com a crescente demanda por aplicações web mais rápidas e responsivas, os desenvolvedores buscam alternativas mais eficientes e escaláveis. Nesse contexto, surgem frameworks como HTMX e Phoenix LiveView, que permitem o desenvolvimento de interfaces usuário sem necessidade de JavaScript.

Esses frameworks são especialmente úteis em projetos que exigem uma abordagem mais simples e direta no desenvolvimento da interface usuário, onde a complexidade introduzida pelo JavaScript pode ser um obstáculo. Além disso, eles oferecem uma forma eficiente de criar interfaces reativas sem o overhead de bibliotecas JavaScript.

Nesse artigo, vamos explorar os principais conceitos e características desses frameworks, abordando seus pontos fortes e vulnerabilidades em relação a outros métodos tradicionais de desenvolvimento frontend. Ao final desta leitura, você estará capacitado a avaliar a adequação dessas ferramentas para o seu próprio projeto.

O que é e por que importa

HTMX e Phoenix LiveView são frameworks frontend que permitem a criação de interfaces usuário sem necessidade de JavaScript. HTMX é um framework focado em criar experiências de interface usuário reativas, utilizando solicitações HTTP para atualizar a página, enquanto Phoenix LiveView é uma biblioteca desenvolvida sobre Elixir e Phoenix Framework, que permite a criação de aplicativos web interativos com suporte a múltiplos clientes simultâneos.

Ambas as ferramentas visam resolver problemas relacionados à complexidade do JavaScript em aplicações frontend. Muitas vezes, o uso de bibliotecas JavaScript adiciona overhead e complica a manutenção do código, especialmente em projetos que exigem alta escalabilidade e performance. Além disso, os desenvolvedores podem enfrentar desafios ao lidar com problemas como ciclos de vida da aplicação, estado e comunicação entre componentes, o que pode levar a um código mais difícil de manter.

Os principais motivos pelos quais essas ferramentas são importantes incluem:

Permite a criação de interfaces usuário reativas sem a necessidade de bibliotecas JavaScript, tornando-a uma opção mais leve e escalável;
Oferece suporte a múltiplos clientes simultâneos, o que é especialmente útil em aplicações que exigem alta escalabilidade;
Reduz a complexidade do código frontend ao evitar a necessidade de lidar com ciclos de vida da aplicação, estado e comunicação entre componentes;

Em resumo, HTMX e Phoenix LiveView são ferramentas poderosas que permitem aos desenvolvedores criar interfaces usuário mais eficientes, escaláveis e fáceis de manter.

Como funciona na prática

HTMX funciona enviando solicitações HTTP para atualizar a página dinamicamente, em vez de depender de bibliotecas JavaScript que manipulam o DOM direta e indiretamente.

Etapas do funcionamento interno:

O código cliente: O HTMX é incluído no HTML da página. Quando um evento ocorre (por exemplo, clique em um botão), ele identifica a TAG específica que contém a solicitação para atualizar;
Envio de solicitações HTTP: A TAG com a solicitação é adicionada a uma lista de elementos da página que devem ser verificados. Quando o elemento for clicado, HTMX irá enviar um pedido HTTP para uma URL específica no servidor para obter dados.
Atualização da página: O código do servidor pode retornar os dados solicitados por volta da solicitação anterior e atualizar a parte da página com essas informações ou redirecionar a página completamente.

Por outro lado, o Phoenix LiveView utiliza-se de Elixir e o servidor para gerenciar as atualizações da interface e lidar com os eventos do cliente. A ideia é enviar dados ao cliente e atualizar partes da página através de solicitação HTTP que são feitas pelo LiveView Server.

Etapas do funcionamento interno:

Criação das aplicações: É necessário criar as aplicações em Elixir, com o framework Phoenix, onde irão definir quais comportamentos podem ser alcançados, e os elementos a serem renderizados no cliente.
Gerar código HTML: Com base nos dados fornecidos pelo servidor, gerar o conteúdo da página, mantendo sincronizado as atualizações com o servidor.

O LiveView utiliza-se do protocolo WebSockets para fazer o acompanhamento das atualizações da aplicação e enviar informações ao cliente.

Exemplo real

O HTMX permite atualizar partes da página sem recarregar a página inteira, tornando-o ideal para aplicações que precisam de uma experiência mais interativa e ágil.

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Exemplo HTMX</title>
</head>
<body>
    <!-- Botão que dispara a solicitação para atualizar a parte da página -->
    <button id="botao" hx-get="/dados" hx-target="#conteudo">Carregar dados do servidor</button>

    <!-- Div onde os dados serão carregados e exibidos -->
    <div id="conteudo"></div>
</body>
</html>

// scripts.js
import { htmx } from "htmx";

document.addEventListener("DOMContentLoaded", function () {
  // Carregar dados do servidor quando o botão for clicado
  const botao = document.getElementById('botao');
  botao.addEventListener('click', async (event) => {
    const resposta = await fetch('/dados');
    const dados = await resposta.json();
    document.getElementById("conteudo").innerHTML = `
      <h2>Dados do servidor</h2>
      <p>Nome: ${dados.nome}</p>
      <p>E-mail: ${dados.email}</p>
    `;
  });
});

// app.exlixir (com o Phoenix)
defmodule MyAppWeb.Router do
  def routes do
    scope "/", MyAppWeb do
      pipe_through [:browser]

      get "/dados", PageController, :dados
    end
  end
end

defmodule PageController do
  use MyAppWeb, :controller

  def dados(conn, _) do
    nome = "João"
    email = "joao@email.com"

    conn
    |> render("dados.html", %{nome: nome, email: email})
  end
end

Boas práticas

Trabalhar com a documentação oficial e recursos de comunidade

Leia a documentação oficial de HTMX, Phoenix LiveView e bibliotecas relacionadas para entender as melhores práticas de implementação.
Participe das comunidades de desenvolvedores dessas tecnologias para trocar dicas e soluções para problemas comuns.
Mantenha-se atualizado sobre novas características e melhorias nas bibliotecas.

Estruturação do código

Use a estrutura de diretórios e arquivos recomendada pelas bibliotecas, como por exemplo a organização de templates em subpastas dentro da pasta views.
Utilize importações e exportações claras para evitar confusões.
Segue a convenção de nomenclatura sugerida pelo framework.

Armadilhas comuns

O problema do estado local

Evite usar o storage local para armazenar dados que precisam ser compartilhados entre requisições, pois isso pode causar problemas ao usar tecnologias como Phoenix LiveView.
Em vez disso, use o estado gerenciado pelo framework ou bibliotecas específicas.

Conflitos de versões

Certifique-se de manter as bibliotecas e frameworks atualizados, para evitar conflitos de versão e compatibilidade entre elas.
Use ferramentas como npm shrinkwrap ou yarn.lock para garantir a consistência das dependências.

Desempenho

Lembre-se de que, embora as tecnologias utilizadas permitam uma experiência mais interativa, podem afetar o desempenho do aplicativo caso não seja usado corretamente.
Optimize o uso de requisições e atualizações da página para evitar sobrecarga no servidor.

Conclusão

Ao trabalhar com frameworks frontend sem JavaScript, como HTMX e Phoenix LiveView, é crucial entender as melhores práticas de implementação, manter-se atualizado sobre novas características e melhorias nas bibliotecas e estar ciente dos desafios específicos de cada tecnologia. Além disso, é importante estruturar o código de forma organizada, utilizar importações e exportações claras e seguir convenções de nomenclatura sugeridas pelo framework.

Se você está considerando migrar seu projeto para essas tecnologias, é recomendável:

Leia as documentações oficiais e participe das comunidades de desenvolvedores.
Teste diferentes abordagens e escolha a que melhor se adequa ao seu projeto.
Aprenda a utilizar ferramentas como npm shrinkwrap ou yarn.lock para gerenciar dependências.

Ao abordar esses pontos, você estará preparado para aproveitar as vantagens desses frameworks sem JavaScript e construir experiências mais interativas e eficientes.

Referências

Fowler, M. Patterns of Enterprise Application Architecture. https://martinfowler.com/books/eaa.html.
Alvaro Videla. HTMX Documentation. Disponível em: https://htmx.org/docs/. Acesso: 2024.
MDN Web Docs. Web Sockets API. Disponível em: https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API. Acesso: 2024.
ThoughtWorks. Designing Data Intensive Applications. Disponível em: https://www.thoughtworks.com/insights/blog/designing-data-intensive-applications. Acesso: 2024.
Kim Mäenpää. Phoenix LiveView Documentation. Disponível em: https://hexdocs.pm/phoenix_live_view/. Acesso: 2024.