Introdução
Htmx é uma biblioteca JavaScript para executar solicitações AJAX, disparar transições CSS e invocar WebSocket e eventos enviados pelo servidor diretamente de elementos HTML. O Htmx permite que você crie interfaces de usuário modernas e poderosas com marcações simples.
Esta biblioteca pesa cerca de 10 KB (min.gz’d), não tem dependências (ou seja, não requer nenhum outro pacote JavaScript para ser executado) e também é compatível com o IE11.
Neste tutorial, exploraremos os poderosos recursos do htmx enquanto abordamos as seguintes seções:
- Instalando htmx
- Envio de solicitações AJAX com htmx
- Validação de entrada htmx personalizada
- Acionando animação CSS com htmx
Instalando htmx
Você pode começar com htmx baixando o arquivo de origem htmx ou incluindo seu CDN diretamente em sua marcação, como abaixo:
O script acima carrega a versão estável atual do htmx, que no momento da escrita é a versão 1.3.3, em sua página da web. Depois de fazer isso, você pode implementar recursos htmx em sua página da web.
Enviando solicitações AJAX com htmx
Htmx fornece um conjunto de atributos que permite enviar solicitações AJAX diretamente de um elemento HTML. Os atributos disponíveis incluem:
-
hx-get-envia a solicitaçãoGETpara o URL fornecido -
hx-post-enviar solicitaçãoPOSTpara o URL fornecido -
hx-put-envia a solicitaçãoPUTpara o URL fornecido -
hx-patch-enviar solicitaçãoPATCHpara o URL fornecido -
hx-delete-envia a solicitaçãoDELETEpara o URL fornecido
Amostra de código
O exemplo de código acima informa ao navegador que quando o usuário clica no botão, ele envia uma solicitação GET ( hx-get ) para o URL fornecido, que neste o caso é http://localhost/todos .
Por padrão, a resposta retornada de qualquer solicitação htmx será carregada no elemento atual que está enviando a solicitação. Na seção Elementos de segmentação para solicitações AJAX, exploraremos como carregar a resposta em outro elemento HTML.
Elementos de segmentação para a seção de solicitações AJAX, exploraremos como carregar a resposta em outro elemento HTML.
Solicitações de gatilho
Você deve observar que as solicitações AJAX em htmx são acionadas pelo evento natural do elemento. Por exemplo, input , select textarea são acionados pelo evento onchange , e form é acionado pelo evento onsubmit , e todas as outras coisas são acionadas pelo evento onclick .
Em uma situação em que você deseja modificar o evento que dispara a solicitação, htmx fornece um atributo hx-trigger especial para isso:
Passe o mouse sobre mim!
No exemplo acima, a solicitação GET será enviada ao URL fornecido se e somente se o mouse do usuário passar sobre o div.
Modificadores de gatilho
O atributo hx-trigger mencionado na seção anterior aceita um modificador adicional para alterar o comportamento do gatilho. Os modificadores de gatilho disponíveis incluem:
-
uma vez-garante que uma solicitação ocorrerá apenas uma vez -
alterado-emite uma solicitação se o valor do elemento HTML mudou -
delay:-espera por um determinado período de tempo antes de emitir a solicitação (por exemplo,delay-1s). Se o evento disparar novamente, a contagem regressiva é reiniciada -
throttle:-espera um determinado período de tempo antes de enviar a solicitação (por exemplo,throttle: 1s). Mas, ao contrário do atraso, se um novo evento ocorrer antes do limite de tempo ser atingido, o evento ficará em uma fila para que seja acionado no final do evento anterior -
from:-escuta o evento em um elemento diferente
Amostra de código
No exemplo de código fornecido acima, depois que o usuário executa um evento keyup no elemento de entrada (ou seja, o usuário digita qualquer texto na caixa de entrada) e seu valor anterior muda, o navegador enviará automaticamente uma solicitação GET para http://localhost/search após 500 ms.
Sondagem com o atributo htmx-trigger
No atributo htmx-trigger, você também pode especificar a cada n segundos em vez de esperar por um evento que dispara a solicitação. Com esta opção, você pode enviar uma solicitação a um URL específico a cada n segundos:
O exemplo de código acima instrui o navegador a emitir uma solicitação GET para o endpoint /history a cada 2s e carregar a resposta no div.
Elementos de segmentação para solicitações AJAX
Nas seções anteriores, mencionamos que a resposta de uma solicitação AJAX em htmx será carregada no elemento que faz a solicitação. Se precisar que a resposta seja carregada em um elemento diferente, você pode usar o atributo hx-target para fazer isso. Este atributo aceita um seletor CSS e injeta automaticamente a resposta AJAX em um elemento HTML com o seletor especificado.
Podemos modificar nosso exemplo de tarefas para se adequar a este caso:
Ao contrário do exemplo anterior, este novo exemplo de código envia uma solicitação para http://localhost/todos e carrega a resposta em nosso div com id=result .
Trocando o HTML retornado no DOM
Semelhante a hx-target , o atributo hx-swap é usado para definir como a resposta AJAX retornada será carregada no DOM. Os valores suportados incluem:
-
innerHTML-valor padrão, esta opção irá carregar a resposta AJAX dentro do elemento atual enviando a solicitação -
outerHTML-esta opção substitui todo o elemento que envia a solicitação pela resposta retornada -
afterbegin-carrega a resposta como um primeiro filho do elemento que envia a solicitação -
beforebegin-carrega a resposta como um elemento pai do elemento real que aciona a solicitação -
beforeend-carrega e anexa a resposta AJAX após o último filho do elemento que envia a solicitação -
afterend-ao contrário do anterior, acrescenta a resposta AJAX após o elemento que envia a solicitação -
nenhum-esta opção não irá anexar ou preceder a resposta de uma solicitação AJAX
Solicitar indicadores
Ao enviar uma solicitação AJAX, geralmente é uma boa prática informar ao usuário que algo está acontecendo em segundo plano, já que o navegador não fará isso automaticamente por padrão. Você pode fazer isso facilmente em htmx com a classe htmx-indicator .
Considere o exemplo de código abaixo:
A opacidade de qualquer elemento HTML definido com a classe htmx-indicator é definida como 0 por padrão, tornando o elemento invisível, mas presente no DOM.
E, ao emitir uma solicitação AJAX, htmx adicionará automaticamente uma nova classe htmx-request ao elemento que envia a solicitação. Esta nova classe htmx-request fará com que um elemento filho com a classe htmx-indicator faça a transição para uma opacidade de 1, mostrando, portanto, o indicador.
Solicitando dados
Se sua solicitação AJAX foi acionada por um formulário ou elemento de entrada, por padrão htmx incluirá automaticamente o valor de todos os campos de entrada em sua solicitação.
Mas no caso em que deseja incluir os valores de outros elementos, você pode usar o atributo hx-include com um seletor CSS de todos os elementos cujos valores deseja incluir na solicitação.
Amostra de código
Digite o nome de usuário:
Como no exemplo de código acima, ao emitir uma solicitação para o endpoint /register , sua solicitação AJAX incluirá automaticamente o campo de e-mail em seu corpo.
Filtragem de parâmetros
Htmx também fornece outro atributo htmx-params com o qual você pode filtrar os únicos parâmetros que serão enviados quando uma solicitação AJAX for enviada.
Enviar pedido
O exemplo de código acima incluirá todos os elementos de entrada em sua página como seus parâmetros de solicitação.
Todos os valores possíveis incluem:
-
*-incluirá todos os parâmetros presentes em sua página da web e os enviará junto em sua solicitação AJAX -
nenhum-não inclui nenhum parâmetro em sua solicitação -
não-inclui todos os outros parâmetros e exclui a lista separada por vírgulas de nomes de parâmetros
Carregando arquivos
Com htmx, você pode enviar facilmente arquivos como imagens, vídeos, PDFs etc. para o seu back-end para processamento, adicionando o atributo hx-encoding com o valor multipart/form-data para o elemento pai do elemento real que envia a solicitação:
Validação de entrada htmx personalizada
O Htmx está integrado à API de validação HTML5 por padrão e não emitirá uma solicitação se uma entrada validável for inválida. Este recurso funciona para solicitações AJAX e WebSocket eventos .
Além disso, o htmx também dispara eventos em torno da validação, o que pode ser muito útil na validação de entrada personalizada e tratamento de erros.
Os eventos de validação disponíveis incluem:
-
htmx: validation: validate-este evento é útil para adicionar login de validação personalizado, pois é chamado antes de um elemento ser validado -
htmx: validation: failed-este evento é disparado quando uma validação de elemento retorna falso, ou seja, indicando uma entrada inválida -
htmx: validation: halted-este evento é chamado quando um elemento não foi capaz de emitir uma solicitação devido a erros de validação de entrada
Acionando animação CSS com htmx
O Htmx fornece uma maneira de anexar facilmente transições CSS suaves a eventos AJAX e também em sua página da web em geral.
Usando class-tool
htmx class-tool é uma extensão que você pode usar facilmente para alternar , adicionar ou remover um nome de classe específico de um elemento HTML sem escrever nenhum código JavaScript.
Você pode utilizar esta extensão adicionando o atributo classes ao seu elemento e, em seguida, especificando a ação, seguida pelo nome da classe que deseja adicionar ou remover:
Como no exemplo de código acima, assim que o conteúdo do navegador for carregado, o htmx adicionará automaticamente uma nova classe ( sample-class ) ao div após 1s.
Observe também que você pode criar uma fila de ações separando cada ação com uma vírgula (, ) ou fazer várias ações serem executadas simultaneamente separando-as com um"e"comercial ( & ):
Abaixo está um exemplo que alterna a visibilidade de um elemento:
Estou desaparecendo! ⚡
Resumo
Neste artigo, exploramos o processo de instalação do htmx, como enviar solicitações AJAX, validação de formulário e também como acionar a animação CSS sem escrever nenhum código JavaScript.
O Htmx oferece suporte experimental para WebSocket e eventos enviados pelo servidor, que não foram abordados neste artigo porque ainda estão em desenvolvimento. Você pode aprender mais sobre o suporte WebSocket e SSE na documentação htmx .
Contribua com htmx no GitHub .
A postagem Htmx: O mais novo antigo maneira de fazer aplicativos da web apareceu primeiro no LogRocket Blog .
