{"id":1253,"date":"2024-08-12T22:30:00","date_gmt":"2024-08-13T01:30:00","guid":{"rendered":"https:\/\/kangaroo.host\/blog\/htmx-o-que-e-como-funciona\/"},"modified":"2024-11-01T23:08:52","modified_gmt":"2024-11-02T02:08:52","slug":"htmx-o-que-e-como-funciona","status":"publish","type":"post","link":"https:\/\/kangaroo.host\/blog\/htmx-o-que-e-como-funciona\/","title":{"rendered":"HTMX: O que \u00e9 e como funciona?"},"content":{"rendered":"\n

Ol\u00e1, Kangaroozinho. Seja bem-vindo de volta! Que o JavaScript<\/a> moldou muito da WEB que conhecemos hoje, todos sabemos muito bem! Com ele, muitos sites come\u00e7aram a se tornais mais din\u00e2micos e interativos, mas essa linguagem de programa\u00e7\u00e3o ainda pode ser uma barreira para alguns.<\/p>\n\n\n\n

Assim, o HTMX<\/a> surge como uma nova proposta de facilitar o uso do JavaScript atrav\u00e9s do Ajax, permitindo usar o pr\u00f3prio HTML b\u00e1sico da p\u00e1gina para definir o comportamento de intera\u00e7\u00e3o, permitindo a manipula\u00e7\u00e3o do DOM do visitante.<\/p>\n\n\n\n

Para entender um pouco mais como isso funciona e como implementar esse recurso em seu site, confira at\u00e9 o final este nosso artigo mais que especial.<\/p>\n\n\n\n

Sum\u00e1rio<\/h3>\n\n\n\n
    \n
  1. O que \u00e9?<\/li>\n\n\n\n
  2. Como funciona?<\/li>\n\n\n\n
  3. Exemplos de c\u00f3digo<\/li>\n\n\n\n
  4. Conclus\u00e3o<\/li>\n<\/ol>\n\n\n\n

    O que \u00e9 o HTMX?<\/h2>\n\n\n\n
    \"Site
    Imagem: Site oficial HTMX<\/figcaption><\/figure>\n\n\n\n

    O HTMX \u00e9 uma biblioteca muito poderosa e altamente funcional que pode ser incorporada diretamente no c\u00f3digo HTML de seu site. Seu principal objetivo \u00e9 facilitar o uso do JavaScript em seus projetos, sem precisar us\u00e1-lo diretamente e permitir a manipula\u00e7\u00e3o de elementos da p\u00e1gina de forma totalmente descomplicada.<\/p>\n\n\n\n

    Al\u00e9m disso, devido \u00e0 sua metodologia de funcionamento bastante particular (que j\u00e1 vamos explicar), o HTMX permite que at\u00e9 usu\u00e1rios menos habituados com programa\u00e7\u00e3o front-end consigam \u00f3timos resultados em termos de dinamismo e interatividade para as p\u00e1ginas.<\/p>\n\n\n\n

    \u00c9 poss\u00edvel dizer que essa biblioteca permite que o HTML funcione com “ester\u00f3ides”, praticamente concedendo super-poderes e a possibilidade de que o front-end (atrav\u00e9s do HTML) execute requisi\u00e7\u00f5es para um end-point do seu back-end via Ajax, sendo esse Ajax acionado pela sintaxe pr\u00f3pria do HTMX.<\/p>\n\n\n\n

    Seu uso \u00e9 bastante interessante por permitir reduzir a complexidade geral do projeto, j\u00e1 que todo o front-end est\u00e1, no fim das contas, configurado apenas em HTML, j\u00e1 que o HTMX \u00e9 acionado atrav\u00e9s de atributos HTML, e \u00e9 justamente por isso que essa biblioteca se torna t\u00e3o vers\u00e1til e at\u00e9 mesmo convidativa para usu\u00e1rios iniciantes em desenvolvimento WEB.<\/p>\n\n\n\n

    Como ele funciona?<\/h2>\n\n\n\n

    Os efeitos de interatividade s\u00e3o poss\u00edveis porque o HTMX faz com que o pr\u00f3prio back-end processe as informa\u00e7\u00f5es que ser\u00e3o manipuladas, sem que isso seja feito diretamente no navegador do visitante, e as grandes vantagens disso s\u00e3o justamente manter toda a estrutura front-end em um mesmo contexto de linguagem quanto reduzir a complexidade dessa parte do projeto.<\/p>\n\n\n\n

    Isso pode parecer um tanto confuso a princ\u00edpio, mas a grande sacada dessa biblioteca \u00e9 permitir que voc\u00ea adicione atributos HTML que s\u00e3o espec\u00edficos do HTMX, e com base nos atributos configurados \u00e9 poss\u00edvel disparar requisi\u00e7\u00f5es ao endpoint definido.<\/p>\n\n\n\n

    Como a principal abordagem do HTMX \u00e9 ser configurado atrav\u00e9s do HTML e fazer com que o servidor retorne uma resposta tamb\u00e9m em HTML, essa biblioteca pode ser usada sem problemas junto de quase qualquer linguagem de programa\u00e7\u00e3o, j\u00e1 que basta ter o HTML b\u00e1sico da p\u00e1gina para definir os par\u00e2metros e qualquer linguagem de programa\u00e7\u00e3o pode processar a requisi\u00e7\u00e3o e devolver uma resposta tamb\u00e9m em HTML.<\/p>\n\n\n\n

    Assim, em termos mais pr\u00e1ticos, essa resposta HTML retornada pelo back-end serve para substituir imediatamente outras informa\u00e7\u00f5es da p\u00e1gina, atrav\u00e9s da manipula\u00e7\u00e3o de DOM, o que permite criar p\u00e1ginas “reativas” e com interatividade.<\/p>\n\n\n\n

    Exemplos<\/h2>\n\n\n\n

    Como todo aprendizado sempre \u00e9 melhor com exemplos, vamos simular um caso pr\u00e1tico de um formul\u00e1rio de contato que, ap\u00f3s disparado, exibe uma notifica\u00e7\u00e3o de sucesso no envio. Para isso, vamos come\u00e7ar pelo nosso c\u00f3digo HTML b\u00e1sico, j\u00e1 com o HTMX importado:<\/p>\n\n\n\n

    <\/circle><\/circle><\/circle><\/g><\/svg><\/span>
    <!DOCTYPE<\/span> <\/span>html<\/span>><\/span><\/span>\n<html<\/span> <\/span>lang<\/span>=<\/span>"<\/span>pt-BR<\/span>"<\/span>><\/span><\/span>\n<head><\/span><\/span>\n    <\/span><meta<\/span> <\/span>charset<\/span>=<\/span>"<\/span>UTF-8<\/span>"<\/span>><\/span><\/span>\n    <\/span><meta<\/span> <\/span>name<\/span>=<\/span>"<\/span>viewport<\/span>"<\/span> <\/span>content<\/span>=<\/span>"<\/span>width=device-width, initial-scale=1.0<\/span>"<\/span>><\/span><\/span>\n    <\/span><title><\/span>Formul\u00e1rio de Contato<\/span><\/title><\/span><\/span>\n    <\/span><link<\/span> <\/span>href<\/span>=<\/span>"<\/span>https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css<\/span>"<\/span> <\/span>rel<\/span>=<\/span>"<\/span>stylesheet<\/span>"<\/span>><\/span><\/span>\n<\/head><\/span><\/span>\n<body><\/span><\/span>\n    <\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>container mt-5<\/span>"<\/span>><\/span><\/span>\n        <\/span><h1<\/span> <\/span>class<\/span>=<\/span>"<\/span>text-center<\/span>"<\/span>><\/span>Formul\u00e1rio de Contato<\/span><\/h1><\/span><\/span>\n        <\/span><form<\/span> <\/span>hx-post<\/span>=<\/span>"<\/span>enviar.php<\/span>"<\/span> <\/span>hx-target<\/span>=<\/span>"<\/span>#contato<\/span>"<\/span> <\/span>hx-swap<\/span>=<\/span>"<\/span>beforeend<\/span>"<\/span> <\/span>id<\/span>=<\/span>"<\/span>contato<\/span>"<\/span> <\/span>class<\/span>=<\/span>"<\/span>mt-4<\/span>"<\/span>><\/span><\/span>\n            <\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>form-group<\/span>"<\/span>><\/span><\/span>\n                <\/span><label<\/span> <\/span>for<\/span>=<\/span>"<\/span>nome<\/span>"<\/span>><\/span>Nome:<\/span><\/label><\/span><\/span>\n                <\/span><input<\/span> <\/span>type<\/span>=<\/span>"<\/span>text<\/span>"<\/span> <\/span>class<\/span>=<\/span>"<\/span>form-control<\/span>"<\/span> <\/span>id<\/span>=<\/span>"<\/span>nome<\/span>"<\/span> <\/span>name<\/span>=<\/span>"<\/span>nome<\/span>"<\/span>><\/span><\/span>\n            <\/span><\/div><\/span><\/span>\n            <\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>form-group<\/span>"<\/span>><\/span><\/span>\n                <\/span><label<\/span> <\/span>for<\/span>=<\/span>"<\/span>email<\/span>"<\/span>><\/span>Email:<\/span><\/label><\/span><\/span>\n                <\/span><input<\/span> <\/span>type<\/span>=<\/span>"<\/span>email<\/span>"<\/span> <\/span>class<\/span>=<\/span>"<\/span>form-control<\/span>"<\/span> <\/span>id<\/span>=<\/span>"<\/span>email<\/span>"<\/span> <\/span>name<\/span>=<\/span>"<\/span>email<\/span>"<\/span>><\/span><\/span>\n            <\/span><\/div><\/span><\/span>\n            <\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>form-group<\/span>"<\/span>><\/span><\/span>\n                <\/span><label<\/span> <\/span>for<\/span>=<\/span>"<\/span>assunto<\/span>"<\/span>><\/span>Assunto:<\/span><\/label><\/span><\/span>\n                <\/span><input<\/span> <\/span>type<\/span>=<\/span>"<\/span>text<\/span>"<\/span> <\/span>class<\/span>=<\/span>"<\/span>form-control<\/span>"<\/span> <\/span>id<\/span>=<\/span>"<\/span>assunto<\/span>"<\/span> <\/span>name<\/span>=<\/span>"<\/span>assunto<\/span>"<\/span>><\/span><\/span>\n            <\/span><\/div><\/span><\/span>\n            <\/span><div<\/span> <\/span>class<\/span>=<\/span>"<\/span>form-group<\/span>"<\/span>><\/span><\/span>\n                <\/span><label<\/span> <\/span>for<\/span>=<\/span>"<\/span>mensagem<\/span>"<\/span>><\/span>Mensagem:<\/span><\/label><\/span><\/span>\n                <\/span><textarea<\/span> <\/span>class<\/span>=<\/span>"<\/span>form-control<\/span>"<\/span> <\/span>id<\/span>=<\/span>"<\/span>mensagem<\/span>"<\/span> <\/span>name<\/span>=<\/span>"<\/span>mensagem<\/span>"<\/span> <\/span>rows<\/span>=<\/span>"<\/span>4<\/span>"<\/span>><\/textarea><\/span><\/span>\n            <\/span><\/div><\/span><\/span>\n            <\/span><button<\/span> <\/span>type<\/span>=<\/span>"<\/span>submit<\/span>"<\/span> <\/span>class<\/span>=<\/span>"<\/span>btn btn-primary<\/span>"<\/span>><\/span>Enviar<\/span><\/button><\/span><\/span>\n        <\/span><\/form><\/span><\/span>\n    <\/span><\/div><\/span><\/span>\n    <\/span><script<\/span> <\/span>src<\/span>=<\/span>"<\/span>https:\/\/unpkg.com\/htmx.org@2.0.1<\/span>"<\/span>><\/script><\/span><\/span>\n<\/body><\/span><\/span>\n<\/html><\/span><\/span><\/code><\/pre>HTML<\/span><\/div>\n\n\n\n
    No c\u00f3digo de exemplo, temos apenas uma p\u00e1gina HTML bastante simples, que tem como conte\u00fado s\u00f3 um formul\u00e1rio. Por\u00e9m, observe os atributos adicionados dentro do nosso elemento do <form> e como \u00e9 feita tamb\u00e9m a importa\u00e7\u00e3o da biblioteca para dentro do c\u00f3digo.<\/p>\n\n\n\n
    Agora, vamos falar um pouquinho mais desses atributos t\u00e3o especiais e o que cada um deles est\u00e1 fazendo em nosso c\u00f3digo. Antes de come\u00e7ar, \u00e9 interessante observar que todos eles est\u00e3o iniciados em hx-<\/mark><\/strong> o que \u00e9 uma conven\u00e7\u00e3o da biblioteca.<\/p>\n\n\n\n
    Por isso, todos atributos usados pelo HTMX sempre levar\u00e3o esse prefixo, o que vai nos ajudar muito a identificar eles mais facilmente, como os seguintes exemplos:<\/p>\n\n\n\n
    hx-post<\/mark><\/strong><\/h3>\n\n\n\n
    A diretiva hx-post orienta que aquele determinado elemento (quando acionado pelo seu gatilho) ir\u00e1 disparar uma requisi\u00e7\u00e3o do tipo POST <\/em><\/strong>para o endpoint informado. Aqui, temos uma fun\u00e7\u00e3o muito parecida com o que faria o action=”POST”<\/em><\/strong> utilizado normalmente.<\/p>\n\n\n\n
    Assim como definimos para que o elemento disparasse um POST<\/em>, tamb\u00e9m \u00e9 totalmente poss\u00edvel usarmos outros tipos de requisi\u00e7\u00e3o aceitos pelo protocolo HTTP, como o GET, PUT, PATCH<\/em><\/strong>, etc. Para isso, basta trocar o nome do protocolo ap\u00f3s o hx-, como em hx-get<\/em><\/strong> ou hx-put<\/em><\/strong> por exemplo.<\/p>\n\n\n\n
    hx-target<\/mark><\/strong><\/h3>\n\n\n\n
    J\u00e1 o hx-target define qual elemento ser\u00e1 afetado pela resposta retornada pela resposta retornada pelo back-end. Em nosso exemplo, aqui \u00e9 onde definimos qual \u00e9 o elemento que ser\u00e1 manipulado para receber a resposta do endpoint php.<\/p>\n\n\n\n
    O hx-target aceita informa\u00e7\u00f5es de acordo com os padr\u00f5es de seletor CSS, por isso \u00e9 poss\u00edvel definir como alvo uma classe, ID ou elemento de seu HTML. No exemplo acima, usamos o ID contato que est\u00e1 atrelado ao elemento <form><\/p>\n\n\n\n
    hx-swap<\/mark><\/strong><\/h3>\n\n\n\n
    O atributo hx-swap define de que forma o elemento definido pelo hx-target ser\u00e1 manipulado, e existe uma s\u00e9rie de op\u00e7\u00f5es pr\u00e9-definidas para essa diretiva, que s\u00e3o elas:<\/p>\n\n\n\n