HTMX 101: Empoderando o HTML · filipeapdo

Se você precisa de um website institucional estático, por mais que seja legal escrever tudo usando o puro suco da web 1.0, faz total sentido buscar um CMS (Content Management System). Tipo um Wordpress, Hostinger, Wix da vida. É meio "boring", mas vai resolver. É o que, baseado em vozes da minha cabeça, 99,9% das agências utilizam e, como eu disse, - para um website institucional estático -, resolve.

Mesmo para features mais dinâmicas, como chatbots ou captura de leads via WhatsApp, os CMSs de prateleira atendem à demanda através de plugins ou da adição de serviços extras, o famoso upselling.

Bom, foi uma enorme introdução para dizer o seguinte: você não precisa de HTMX, ou sequer saber programar, para colocar um website institucional, até mesmo com algumas funcionalidades dinâmicas, no ar. Você só precisa de dinheiro. E é isso pessoal, até a próxima... hahaha... brincadeira!

Features por apenas ~50kB

Agora, se você é a pessoa ("Freela", "Dev", "carinha da TI") que vai desenvolver features customizadas, não mais num website estático, mas num pequeno web app, e quer honrar nossos antepassados, adotando uma abordagem KISS - Keep It Simple, Stupid. HTMX é uma excelente ideia.

HTMX é uma biblioteca escrita em JavaScript, sem dependências externas e orientada à Hypermedia, capaz de estender as capacidades do HTML dentro do conceito de Hypermedia Systems. Sim, estamos quase escrevendo isso: agora dá pra "programar em HTML".

A lib HTMX foi projetada para "generalizar HTML como Hypermedia", estendendo sua capacidade em 4 oportunidades:

Qualquer elemento pode ser utilizado como uma "Hypermedia control", enviando requests para o servidor, não apenas links e formulários.
Qualquer evento pode ser utilizado para disparar requests para o servidor, não apenas o "click", por exemplo.
Qualquer "verbo" HTTP pode ser utilizado nas requests para o servidor, não apenas "GET" e "POST", mas adicionando "DELETE", "PUT" e "PATCH". Deixando a aplicação, de fato, RESTful.
Qualquer parte do documento HTML pode ser substituída a partir da response do servidor, não apenas o documento completo.

"Palavras comovem, Exemplos arrastam"

Imagine a seguinte demanda: "Hey Dev! Precisamos criar uma feature que o nosso time de vendas possa clicar num botão e ver todos os leads na tela! Eles estão reclamando que a tela "pisca" do jeito que está hoje, e não conseguem fechar vendas por causa disso... Resolva isso o mais rápido possível!" - baseado em fatos reais. "Leave it to me, boss!"

Com a capacidade do HTML estendida através da lib HTMX, podemos fazer o seguinte:

Criar um botão e dar ele a capacidade de enviar uma request ao servidor.
Este botão poderia ser acionado também por um atalho: tipo "Ctrl+b".
Para evitar que a tela pisque, afinal estamos perdendo vendas por causa disso, podemos trocar apenas o elemento "próximo" ao botão.

Creio que com esses 3 itens, conseguimos cobrir a feature! Com um "plus a mais" de fornecer um atalho para os nossos queridos vendedores.

Task 1: Criar o botão capaz de enviar a request para o servidor

Essa é bem simples, vamos utilizar o "hx-get" para enviar uma request para o servidor.

<button hx-get="/contactsList">Get Leads!</button>

Ahhh... ok... Parece que alguma coisa deu errado... a response foi parar dentro do botão? Pelo menos a tela não "piscou"!

htmx hx-get example

Task 2: Fazer a response ir parar em outro lugar

O que ocorre é que o comportamento default do "hx-get" é substituir o HTML interno do target element. Neste caso, não estamos passando nenhum elemento como "alvo", então o HTMX vai devolver para o elemento que gerou a request. Para resolver isso, vamos incluir o "hx-target", que vai permitir escolher "onde" colocar a response do servidor.

<div id="leads">
  <button
    hx-get="/contactsList"
    hx-target="#leads"
  >
    Get Leads!
  </button>
</div>

Se você não acha isso incrível, "você tá morto por dentro!". Com dois míseros atributos, transformamos um botão num "Hypermedia control", enviamos uma request para o servidor e trocamos "apenas" uma pequena parte do documento HTML! Beleza, o botão desapareceu, "tem que ver isso aí!".

htmx hx-get + hx-target example

Task 3: Manter o botão parece ser um requisito

Bom, como um dev, talvez eu pudesse pensar "My job here is done!". O requisito foi cumprido: "a pessoa de vendas possa clicar num botão e ver todos os leads na tela!"... Mas como um Engenheiro de Software, bruto, criado no XGH (eXtreme Go Horse), resolvedor de problemas reais, talvez eu possa me antecipar e deixar a experiência do usuário melhor, certo? Claro!

A ideia vai ser utilizar um outro atributo da lib HTMX que permite ajustar a forma como o elemento é trocado, o atributo "hx-swap". Nesta mesma task já vou "shipar" o botão de atalho, utilizando o "hx-trigger".

<div id="leads">
  <button
    hx-get="/contactsList"
    hx-target="#leads"
    hx-swap="beforebegin"
    hx-trigger="click, keyup[ctrlKey && key == 'b'] from:body"
  >
    Get Leads!
  </button>
</div>

E... Voilà... com 'hx-swap="beforebegin"' eu fiz a response do servidor ser colocada "antes" do elemento alvo (a div "leads"). E com o "hx-trigger" eu adicionei um atalho.

htmx hx-get + hx-target + hx-swap + hx-trigger example

Conclusão

Sem "parsear" um JSON, sem instalar um pacote NPM (HTMX pode ser colocado na sua pastinha "assets" e ser servido estaticamente), sem firula, foi possível entregar uma nova feature.

Eu quero evangelizar você!

Sim, HTMX é muito bom pra não ser compartilhado. Inclusive se você quer "vibe codar" o seu SaaS de R$ 1MM por mês, considere isso, você vai ter muito menos partes móveis para se preocupar!

<3 HTMX, #pas

E aí, bora dar uma chance para o HTMX? Eu sei que você tá aí com mil argumentos que React ou Vue te dão um milhão de possibilidades de fazer esse exemplo "dummy".