htmx 2.0 - Realizando Web Interativa de Forma Simples

O que e htmx

htmx e uma biblioteca que permite realizar requisicoes AJAX, transicoes CSS, WebSockets e mais usando apenas atributos HTML. Voce pode construir aplicacoes web interativas sem escrever JavaScript.

Novas Funcionalidades do htmx 2.0

Reducao de Tamanho

htmx 1.x: 14KB (gzip)
htmx 2.0: 10KB (gzip)

Novos Atributos

<!-- hx-disabled-elt: desabilita elemento durante a requisicao -->
<button hx-post="/api/submit"
        hx-disabled-elt="this">
  Enviar
</button>

<!-- hx-on: handlers de evento mais concisos -->
<div hx-on:htmx:after-request="alert('Concluido!')">
  ...
</div>

<!-- hx-inherit: controle de heranca -->
<div hx-boost="true">
  <a href="/page" hx-inherit="false">
    Desabilitar boost
  </a>
</div>

Uso Basico

Requisicoes AJAX

<!-- Requisicao GET -->
<button hx-get="/api/users" hx-target="#user-list">
  Obter lista de usuarios
</button>
<div id="user-list"></div>

<!-- Requisicao POST -->
<form hx-post="/api/users" hx-target="#result">
  <input name="name" placeholder="Nome">
  <input name="email" placeholder="E-mail">
  <button type="submit">Cadastrar</button>
</form>
<div id="result"></div>

Personalizacao de Triggers

<!-- Busca ao digitar (com debounce) -->
<input type="search"
       name="q"
       hx-get="/search"
       hx-trigger="input changed delay:300ms"
       hx-target="#search-results">

<!-- Carregar mais ao rolar -->
<div hx-get="/api/posts?page=2"
     hx-trigger="revealed"
     hx-swap="afterend">
  Carregando...
</div>

Estrategias de Swap

<!-- Substituir interior (padrao) -->
<div hx-get="/content" hx-swap="innerHTML">

<!-- Substituir elemento inteiro -->
<div hx-get="/content" hx-swap="outerHTML">

<!-- Adicionar ao final -->
<div hx-get="/content" hx-swap="beforeend">

<!-- Com transicao -->
<div hx-get="/content" hx-swap="innerHTML transition:true">

Integracao com Server-Side

Exemplo com Express

app.get('/api/users', (req, res) => {
  const users = getUsers();

  // Retorna HTML diretamente
  res.send(`
    <ul>
      ${users.map(u => `<li>${u.name}</li>`).join('')}
    </ul>
  `);
});

// Dispara evento com header HX-Trigger
app.post('/api/users', (req, res) => {
  const user = createUser(req.body);
  res.setHeader('HX-Trigger', 'userCreated');
  res.send(`<p>Usuario ${user.name} criado</p>`);
});

Exemplo com Go (Echo)

e.POST("/api/todos", func(c echo.Context) error {
    todo := createTodo(c.FormValue("title"))

    c.Response().Header().Set("HX-Trigger", "todoAdded")
    return c.HTML(200, fmt.Sprintf(
        `<li>%s</li>`, todo.Title,
    ))
})

Extensoes

WebSocket

<script src="https://unpkg.com/htmx.org/dist/ext/ws.js"></script>

<div hx-ext="ws" ws-connect="/chat">
  <div id="messages"></div>
  <form ws-send>
    <input name="message">
    <button>Enviar</button>
  </form>
</div>

Server-Sent Events

<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>

<div hx-ext="sse" sse-connect="/events">
  <div sse-swap="message">
    Aguardando eventos...
  </div>
</div>

Suporte a View Transitions API

<meta name="htmx-config" content='{"globalViewTransitions": true}'>

<style>
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.3s;
  }
</style>

Quando Usar htmx

Sim - Aplicacoes centradas em server-side rendering
Sim - Interacoes simples
Sim - Progressive enhancement
Sim - Quando quer minimizar JavaScript

Nao - Gerenciamento de estado complexo no cliente
Nao - Necessidade de suporte offline
Nao - Componentes de UI ricos

Resumo

htmx 2.0 e uma biblioteca leve que permite construir aplicacoes web interativas apenas com extensoes HTML. Tem otima compatibilidade com server-side rendering e pode ser uma alternativa a frameworks JavaScript complexos para aplicacoes simples.