HTMX: HTML com Super Poderes

O HTMX é biblioteca inovadora que permite a criação de páginas dinâmicas usando apenas HTML, reduzindo a necessidade de JavaScript. Nesse artigo vamos explora o que é o HTMX, como ele funciona, suas principais vantagens e oferece alguns exemplos práticos de seu uso.

O que é HTMX?

HTMX é uma biblioteca de desenvolvimento web que estende as capacidades do HTML, permitindo que desenvolvedores adicionem interações complexas nas páginas web de maneira simples e eficaz. Utilizando atributos especiais prefixados por "hx-", como hx-get ou hx-post, nos, desenvolvedores, podemos realizar operações que normalmente requereriam chamadas AJAX e manipulações de DOM com JavaScript.

Como Funciona?

Para instalar o  HTMX, você pode usar 3 métodos:

Por um CDN, onde você carregar o HTMX em seu site/app incluindo o CDN no início do arquivo:

One future | Evento online e gratuito de programação | Rocketseat
Descubra como ganhar tempo para acelerar na sua carreira em programação através de uma oportunidade nunca antes vista e celebre o aniversário da Rocketseat junto a comunidade.
<script
  src="<https://unpkg.com/htmx.org@1.9.6>"
  integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
  crossorigin="anonymous"
></script>

Colocando o arquivo fonte HTMX em um diretório do seu site/app:

<script src="/path/to/htmx.min.js"></script>

Ou ainda, através de gerenciadores de pacotes como npm:

npm install htmx.org

Para mais opções de sugiro ler:

</> htmx ~ Documentation
htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx is small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code…

O funcionamento do HTMX é baseado na adição de atributos específicos às tags HTML que descrevem como as interações com o usuário devem ser tratadas. Por exemplo, o atributo hx-get pode ser usado para carregar conteúdo em uma parte específica da página sem necessidade de recarregar toda a página. Isso é feito por meio de uma solicitação AJAX que o HTMX automatiza.

Principais Atributos do HTMX:

  • hx-get: Realiza uma solicitação GET.
  • hx-post: Envia dados de um formulário usando POST.
  • hx-target: Especifica onde o conteúdo retornado deve ser inserido.
  • hx-trigger: Define quando a solicitação deve ser enviada (por exemplo, em um click ou hover).

Vantagens do HTMX

  1. Simplicidade: HTMX permite que desenvolvedores implementem funcionalidades que antes exigiriam JavaScript complexo apenas com HTML.
  2. Redução de Código: Diminui a quantidade de JavaScript necessária, o que pode resultar em páginas mais leves e rápidas.
  3. Fácil de Aprender: Como estende o HTML, desenvolvedores com conhecimento básico de HTML podem começar a usar HTMX rapidamente.
  4. Interoperabilidade: Funciona bem com qualquer framework backend, sendo agnóstico à tecnologia do servidor.

Exemplos Práticos

Situações em que você deseja alterar o evento que inicia a solicitação:

<div hx-post="<http://localhost:3000/submit>" hx-trigger="mouseenter">
  Submit
</div>

No código acima, somente se o mouse do usuário passar sobre o div a solicitação GET será feita para o URL especificado.

Formulário de Submissão sem Refresh:

<form hx-post="/submit" hx-target="#resultado">
    <input type="text" name="mensagem">
    <button type="submit">Enviar</button>
</form>
<div id="resultado"></div>

Aqui, um formulário é enviado via POST, e o resultado é exibido na div com id resultado, tudo sem sair da página.

One future | Evento online e gratuito de programação | Rocketseat
Descubra como ganhar tempo para acelerar na sua carreira em programação através de uma oportunidade nunca antes vista e celebre o aniversário da Rocketseat junto a comunidade.

O HTMX oferece uma forma revolucionária de adicionar interatividade às páginas web, tornando o processo mais acessível e menos dependente de JavaScript. Com sua abordagem simplificada e poderosa, HTMX está ganhando espaço como uma ferramenta valiosa para desenvolvedores que buscam eficiência e simplicidade no desenvolvimento web. Seu uso facilita a manutenção, aprimora a performance das páginas e abre novas possibilidades para a criação de experiências de usuário ricas e dinâmicas.