12/08/24

HTMX: O que é e como funciona?

Olá, Kangaroozinho. Seja bem-vindo de volta! Que o JavaScript moldou muito da WEB que conhecemos hoje, todos sabemos muito bem! Com ele, muitos sites começaram a se tornais mais dinâmicos e interativos, mas essa linguagem de programação ainda pode ser uma barreira para alguns.

Assim, o HTMX surge como uma nova proposta de facilitar o uso do JavaScript através do Ajax, permitindo usar o próprio HTML básico da página para definir o comportamento de interação, permitindo a manipulação do DOM do visitante.

Para entender um pouco mais como isso funciona e como implementar esse recurso em seu site, confira até o final este nosso artigo mais que especial.

Sumário

O que é?
Como funciona?
Exemplos de código
Conclusão

O que é o HTMX?

O HTMX é uma biblioteca muito poderosa e altamente funcional que pode ser incorporada diretamente no código HTML de seu site. Seu principal objetivo é facilitar o uso do JavaScript em seus projetos, sem precisar usá-lo diretamente e permitir a manipulação de elementos da página de forma totalmente descomplicada.

Além disso, devido à sua metodologia de funcionamento bastante particular (que já vamos explicar), o HTMX permite que até usuários menos habituados com programação front-end consigam ótimos resultados em termos de dinamismo e interatividade para as páginas.

É possível dizer que essa biblioteca permite que o HTML funcione com “esteróides”, praticamente concedendo super-poderes e a possibilidade de que o front-end (através do HTML) execute requisições para um end-point do seu back-end via Ajax, sendo esse Ajax acionado pela sintaxe própria do HTMX.

Seu uso é bastante interessante por permitir reduzir a complexidade geral do projeto, já que todo o front-end está, no fim das contas, configurado apenas em HTML, já que o HTMX é acionado através de atributos HTML, e é justamente por isso que essa biblioteca se torna tão versátil e até mesmo convidativa para usuários iniciantes em desenvolvimento WEB.

Como ele funciona?

Os efeitos de interatividade são possíveis porque o HTMX faz com que o próprio back-end processe as informações que serão manipuladas, sem que isso seja feito diretamente no navegador do visitante, e as grandes vantagens disso são justamente manter toda a estrutura front-end em um mesmo contexto de linguagem quanto reduzir a complexidade dessa parte do projeto.

Isso pode parecer um tanto confuso a princípio, mas a grande sacada dessa biblioteca é permitir que você adicione atributos HTML que são específicos do HTMX, e com base nos atributos configurados é possível disparar requisições ao endpoint definido.

Como a principal abordagem do HTMX é ser configurado através do HTML e fazer com que o servidor retorne uma resposta também em HTML, essa biblioteca pode ser usada sem problemas junto de quase qualquer linguagem de programação, já que basta ter o HTML básico da página para definir os parâmetros e qualquer linguagem de programação pode processar a requisição e devolver uma resposta também em HTML.

Assim, em termos mais práticos, essa resposta HTML retornada pelo back-end serve para substituir imediatamente outras informações da página, através da manipulação de DOM, o que permite criar páginas “reativas” e com interatividade.

Exemplos

Como todo aprendizado sempre é melhor com exemplos, vamos simular um caso prático de um formulário de contato que, após disparado, exibe uma notificação de sucesso no envio. Para isso, vamos começar pelo nosso código HTML básico, já com o HTMX importado:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário de Contato</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">Formulário de Contato</h1>
        <form hx-post="enviar.php" hx-target="#contato" hx-swap="beforeend" id="contato" class="mt-4">
            <div class="form-group">
                <label for="nome">Nome:</label>
                <input type="text" class="form-control" id="nome" name="nome">
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" name="email">
            </div>
            <div class="form-group">
                <label for="assunto">Assunto:</label>
                <input type="text" class="form-control" id="assunto" name="assunto">
            </div>
            <div class="form-group">
                <label for="mensagem">Mensagem:</label>
                <textarea class="form-control" id="mensagem" name="mensagem" rows="4"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Enviar</button>
        </form>
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
</body>
</html>

HTML

No código de exemplo, temos apenas uma página HTML bastante simples, que tem como conteúdo só um formulário. Porém, observe os atributos adicionados dentro do nosso elemento do <form> e como é feita também a importação da biblioteca para dentro do código.

Agora, vamos falar um pouquinho mais desses atributos tão especiais e o que cada um deles está fazendo em nosso código. Antes de começar, é interessante observar que todos eles estão iniciados em hx- o que é uma convenção da biblioteca.

Por isso, todos atributos usados pelo HTMX sempre levarão esse prefixo, o que vai nos ajudar muito a identificar eles mais facilmente, como os seguintes exemplos:

hx-post

A diretiva hx-post orienta que aquele determinado elemento (quando acionado pelo seu gatilho) irá disparar uma requisição do tipo POST para o endpoint informado. Aqui, temos uma função muito parecida com o que faria o action=”POST” utilizado normalmente.

Assim como definimos para que o elemento disparasse um POST, também é totalmente possível usarmos outros tipos de requisição aceitos pelo protocolo HTTP, como o GET, PUT, PATCH, etc. Para isso, basta trocar o nome do protocolo após o hx-, como em hx-get ou hx-put por exemplo.

hx-target

Já o hx-target define qual elemento será afetado pela resposta retornada pela resposta retornada pelo back-end. Em nosso exemplo, aqui é onde definimos qual é o elemento que será manipulado para receber a resposta do endpoint php.

O hx-target aceita informações de acordo com os padrões de seletor CSS, por isso é possível definir como alvo uma classe, ID ou elemento de seu HTML. No exemplo acima, usamos o ID contato que está atrelado ao elemento <form>

hx-swap

O atributo hx-swap define de que forma o elemento definido pelo hx-target será manipulado, e existe uma série de opções pré-definidas para essa diretiva, que são elas:

innerHTML (padrão): substitui todo o HTML dentro do target pela resposta do endpoint;
outerHTML: substitui todo o HTML pela resposta retornada;
textContent: substitui todo o texto do elemento alvo sem analisar a reposta como um HTML;
beforebegin: posiciona a resposta antes do começo elemento destino;
afterbegin: posiciona a resposta imediatamente após o começo do elemento alvo;
beforeend: posiciona a resposta após o fim do elemento alvo;
afterend: posiciona a resposta imediatamente após o início do elemento alvo;
delete: remove o elemento alvo;
none: não executa nenhuma ação com o elemento alvo.

hx-trigger

Outro atributo muito utilizado é o hx-trigger, que define o gatilho que fará com que a requisição seja disparada. No exemplo acima, não foi necessário usar esse atributo por estarmos usando um formulário com um botão submit, que o HTMX nativamente já entende como um gatilho para a requisição.

Porém, é possível criar botões que acionem gatilhos, por exemplo. Assim, quando clicados, imediatamente a requisição é disparada. Normalmente, a forma mais comum de configuração para esses casos seria através do hx-trigger=”click” para que a requisição ocorra a cada clique, ou com hx-trigger=”click once” para que a requisição seja disparada apenas após o primeiro clique.

Agora, voltando ao nosso exemplo, abaixo temos o código do nosso endpoint, que será o arquivo enviar.php. Nele, definimos apenas um retorno de escrita de texto através do comando echo, que responderá o texto do código HTML que nos dará a notificação de que o formulário foi enviado.

<?php

echo '
<div class="alert alert-success mt-4">
    <strong>Obrigado!</strong> Sua mensagem foi recebida com sucesso.
</div>';

PHP

Por razões didáticas, o código acima apenas fornece a resposta de sucesso em todos os casos, sem validar se realmente foi enviado com sucesso ou não. Em um cenário real, considere ajustar a reposta de acordo com suas validações de possibilidade de erros e lógica de negócio.

Com todo esse cenário, temos o seguinte resultado após enviar o formulário com o HTMX:

Conclusão

O HTMX não somente emprega praticidade no desenvolvimento, como também pode ser uma ótima forma de melhorar a produtividade ao desenvolver projetos front-end, por sua capacidade de simplificar significativamente a complexidade de elementos interativos.

Seja iniciante ou experiente, essa biblioteca ainda sim é não somente poderosa, como amigável para todos os tipos de projeto, atendendo às mais variadas necessidades. Com o crescente sucesso que vem fazendo, com certeza é uma tecnologia muito importante para se ficar de olho, já que sua adoção tem crescido cada vez mais nos últimos anos, e que só tende a aumentar ainda mais.

Esperamos que esse conteúdo introdutório ao HTMX possa ser útil para seus próximos projetos, e não deixe de conferir a documentação oficial para um material ainda mais completo sobre a biblioteca. Por fim, não deixe de continuar acompanhando nosso blog e nos vemos na próxima o/