htmx 2.0 - Lograr webs interactivas de forma simple

¿Qué es htmx?

htmx es una biblioteca que permite realizar solicitudes AJAX, transiciones CSS, WebSocket y más usando solo atributos HTML. Permite construir aplicaciones web interactivas sin escribir JavaScript.

Nuevas funciones de htmx 2.0

Reducción de tamaño

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

Nuevos atributos

<!-- hx-disabled-elt: Desactivar elemento durante la solicitud -->
<button hx-post="/api/submit"
        hx-disabled-elt="this">
  Enviar
</button>

<!-- hx-on: Manejadores de eventos más concisos -->
<div hx-on:htmx:after-request="alert('¡Completado!')">
  ...
</div>

<!-- hx-inherit: Control de herencia -->
<div hx-boost="true">
  <a href="/page" hx-inherit="false">
    Desactivar boost
  </a>
</div>

Uso básico

Solicitudes AJAX

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

<!-- Solicitud POST -->
<form hx-post="/api/users" hx-target="#result">
  <input name="name" placeholder="Nombre">
  <input name="email" placeholder="Email">
  <button type="submit">Registrar</button>
</form>
<div id="result"></div>

Personalización de triggers

<!-- Búsqueda al escribir (con debounce) -->
<input type="search"
       name="q"
       hx-get="/search"
       hx-trigger="input changed delay:300ms"
       hx-target="#search-results">

<!-- Carga adicional al hacer scroll -->
<div hx-get="/api/posts?page=2"
     hx-trigger="revealed"
     hx-swap="afterend">
  Cargando...
</div>

Estrategias de swap

<!-- Reemplazar interior (por defecto) -->
<div hx-get="/content" hx-swap="innerHTML">

<!-- Reemplazar elemento completo -->
<div hx-get="/content" hx-swap="outerHTML">

<!-- Agregar al final -->
<div hx-get="/content" hx-swap="beforeend">

<!-- Con transición -->
<div hx-get="/content" hx-swap="innerHTML transition:true">

Integración con el servidor

Ejemplo con Express

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

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

// Disparar evento con 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} creado</p>`);
});

Ejemplo con 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,
    ))
})

Extensiones

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">
    Esperando eventos...
  </div>
</div>

Soporte para View Transitions API

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

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

¿Cuándo usar htmx?

✓ Aplicaciones centradas en renderizado del lado del servidor
✓ Interacciones simples
✓ Mejora progresiva
✓ Cuando se desea minimizar JavaScript

✗ Gestión de estado complejo en el cliente
✗ Cuando se necesita soporte offline
✗ Componentes UI ricos

Resumen

htmx 2.0 es una biblioteca ligera que permite construir aplicaciones web interactivas solo con extensiones de HTML. Tiene buena compatibilidad con el renderizado del lado del servidor y para aplicaciones simples puede ser una alternativa a frameworks JavaScript complejos.