Executando verificação de segurança...
1

Prós e contras para um iniciante no htmx

Atualmente a comunidade tem falado muito sobre o htmx, e como esta nova ferramenta pode beneficiar aplicações front-end. No entanto, meu principal objetivo com este post é dar ao leitor algo para se pensar, os prós e os contras, antes de entrar nessa nova tendência.

O que é htmx

Mas primeiro, preciso explicar o que realmente é essa ferramenta. É uma biblioteca Javascript leve (~10kb) que dá ao desenvolvedor o poder de fazer requisições AJAX de qualquer elemento do DOM e adicionar a possibilidade de alterar alguns elementos da página como efeito colateral das respostas. Ele também pode lidar com eventos SSE, WebSockets e transições CSS. Com as ferramentas que o htmx fornece, podemos agora pensar em nossos arquivos HTML como um SPA (Single Page Application) e ver os elementos da página como uma espécie de componente, permitindo a possibilidade de alterar os elementos sem atualizar a página.

Embora isso soe como a próxima grande novidade no desenvolvimento front-end, preciso fazer algumas ressalvas sobre isso. Nos parágrafos seguintes, apontarei todos os prós e contras que encontrei em minha primeira experiência pessoal usando htmx em um projeto do mundo real.

Prós

  • Leve: O arquivo original da biblioteca é bem leve e praticamente não gera impacto no tamanho final do pacote javascript, o que contrasta com as outras bibliotecas/frameworks js mais populares atualmente utilizadas. por exemplo, o htmx tem um tamanho de aproximadamente 10 kb (GZipped e minified) em comparação com react (com react-dom) com ~50 kb na versão 18.2.0 e Vue 3.2.37 com ~34 kb.
  • Simples de usar: Definitivamente não é uma curva de aprendizado íngreme, dando ao desenvolvedor a possibilidade de fazer aplicações funcionais em um tempo muito curto. Além disso, a documentação é muito direta e clara com muitos exemplos que facilitam o aprendizado rápido.
function App() {
	const [user, setUser] = useState();
	
	useEffect(() => {
		const getUser = async () => {
			const { user } = await fetch("/users/1");
			setUser(user);
		}
	}, [])

	return (
		<>
		{user && 
			<div>
				{user.username}
			</div>
		}
		</>
	)
}

Este é o trecho de código para obter os dados do usuário no servidor quando o componente é montado. Implementação usando hooks do React.

<div hx-get="/users/1" hx-trigger="load" hx-swap="outerHTML"></div>

O exemplo equivalente da maneira htmx. Não é necessário definir nenhuma condicional no código, pois a resposta da requisição será o próprio HTML que substituirá a div do exemplo.

  • Fácil de configurar: A instalação do htmx é bem simples, tudo que você precisa é vincular o arquivo original da biblioteca no cabeçalho do arquivo HTML, não sendo necessário usar nenhum gerenciador de pacotes como npm ou yarn.

Não precisa de module bundlers

Contras

  • As respostas devem ser HTML: Htmx só funciona corretamente quando a resposta da solicitação acionada responde com um HTML, portanto, criar uma UI que consome uma API JSON existente, utilizando htmx sem usar nenhuma extensão, pode ser uma tarefa difícil.
  • Comunidade pequena: A comunidade em torno do htmx não é tão grande quanto os mais populares frameworks front-end de javascript, então será mais difícil para o usuário encontrar soluções para os problemas.

Comparação entre as comunidades

  • Falta de componentes pré-fabricados: Isso não é necessariamente um problema, mas no mundo real do desenvolvimento front-end é bom ter alguns componentes pré-fabricados, com toda a lógica interna escondida e testada, onde copiar e colar o trecho em seu código é tudo o que é necessário. Com o htmx, isso não é possível (ainda), e você provavelmente gastará mais tempo de implementação caso seja necessário criar algum componente mais sofisticado na sua interface.

Conclusão

Por fim, quero enfatizar que o htmx é uma excelente ferramenta para desenvolvimento front-end, mas exige uma camada extra de pensamento para desenvolver coisas mais complexas, principalmente se você estiver muito acostumado a utilizar outro framework js. Apesar disso, a biblioteca é muito nova, e possivelmente mudará no futuro (assim como suas extensões), corrigindo a maioria dos problemas descritos aqui. Para projetos de longo prazo com possibilidade de escalar, pode ser melhor continuar usando React, Angular e outros. No entanto, recomendo experimentar o htmx em alguns projetos pessoais ou em projetos pequenos/médios, pois aprender a utilizar essa biblioteca é algo que definitivamente vale a pena aprender.

Referências

Site oficial do htmx

Exemplos de uso do htmx

Calculando o bundle da sua biblioteca js

Carregando publicação patrocinada...
1
2
1

Eu acho o HTMX extremamente útil pra projetos quando o objetivo não tem um foco tão grande no design e interatividade, mas que seja responsivo o suficiente. Tu consegue usar facilmente o HTMX em Rails e Django que usam templates pro HTML. Eles pecam em renderização porque cada ação no HTML bate no Back-end e precisa recarregar todo o front de novo. Pense num list view. Tu deleta um registro, mas você não precisa fazer uma nova requisição para renderizar. É só apagar do front aquele registro. Com o HTMX, o front fica responsivo, evitando requisiçoes desnecessárias e com fácil uso dos dados vindos do Back-end. Não mexi com Spring e .NET que são os Back-end corporativos, mas acredito que eles tenham esse mesmo problema do Rails e Django.