HTMX: interactividad sin framework SPA

javi
Pantalla con etiquetas HTML ordenadas en tema claro representando marcado web simple

HTMX propone alternativa radical a SPAs: atributos HTML que permiten AJAX, WebSocket, SSE sin escribir JavaScript. Tu backend devuelve HTML, HTMX lo inserta en el DOM. Parece old-school pero elimina capas enteras de complejidad moderna. En 2024 hay adopción creciente en equipos pequeños-medianos que valoran simplicidad.

El modelo

Atributos clave:

<button hx-get="/users/42" hx-target="#user-detail">
  Ver usuario 42
</button>

<div id="user-detail">
  <!-- HTMX inserta aquí HTML devuelto por /users/42 -->
</div>

Sin React, Vue, build step, state management. Tu Flask/Rails/Django/Phoenix devuelve HTML parcial, HTMX swap en DOM.

Features

  • hx-get, hx-post, hx-put, hx-delete: verbos HTTP.
  • hx-trigger: cuándo disparar (click, keyup, every 5s).
  • hx-target, hx-swap: dónde y cómo insertar.
  • hx-push-url: history API sin SPA.
  • WebSocket / SSE: hx-ws, hx-sse.
  • Animations / transitions: nativas via CSS.

Todo atributos HTML — zero JavaScript en la mayoría de casos.

Casos donde HTMX brilla

  • Admin dashboards CRUD.
  • Apps form-heavy: e-commerce checkout, onboarding.
  • Dashboards con updates periódicos.
  • Prototipos rápidos.
  • Migraciones de apps tradicionales server-rendered.
  • Equipos pequeños sin expertise frontend moderno.

HTMX vs React

Aspecto HTMX React
Bundle size ~14KB >200KB typical
State management Backend Frontend (Redux, etc)
Routing Backend react-router
Backend returns HTML JSON
Learning curve Muy baja Alta
Ecosystem UI CSS + components HTML npm packages masivos

Para apps content-driven con forms, HTMX compite seriamente. Para SPAs complejos con estado client-side rico, React gana.

Con qué backend

HTMX es agnóstico:

  • Django + django-htmx: popular en community Python.
  • Flask con templates Jinja2.
  • Rails + Turbo/HTMX: similar philosophy.
  • Phoenix LiveView: alternativa relacionada.
  • Go templates + HTMX.
  • Node + Express: funciona.

Backend languages conservadores (PHP, Ruby, Python) se alinean naturalmente.

HTMX + Alpine.js

Para interactividad client-side puntual (animaciones, dropdowns), Alpine.js es compañero natural:

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open">Content</div>
</div>

Combinación HTMX + Alpine cubre 95% de apps sin React.

Patrones comunes

Inline editing

<div hx-get="/edit/42" hx-trigger="dblclick" hx-swap="outerHTML">
  Double-click to edit: Ana
</div>

Infinite scroll

<div hx-get="/page/2" hx-trigger="revealed" hx-swap="afterend">
  <!-- next page content loads when visible -->
</div>
<input hx-get="/search"
       hx-trigger="keyup changed delay:500ms"
       hx-target="#results"
       name="q">

Simple syntax cubre patterns complejos.

Casos reales

  • Contexte: portal de news en HTMX.
  • Raycast: docs + web portions.
  • Many Django/Rails apps modernizando con HTMX en lugar de full SPA rewrite.

Limitaciones

  • Apps client-rich: offline-first, real-time collaborative (tipo Figma) no encaja.
  • Gaming / canvas-heavy: HTMX irrelevante.
  • Mobile apps: HTMX es web — no nativo.
  • Vendor lock-in con SPA-oriented: Vercel, Next.js-first PaaS no optimizan bien HTMX.

Accessibility ganancia

HTMX encourages progressive enhancement: site funciona sin JS. Esto mejora a11y naturalmente. Links son links, forms son forms, HTMX mejora.

Deployment

HTMX deploys con el backend:

  • Docker + Flask/Django: single container.
  • Traditional hosting: compartido con PHP/Ruby.
  • Serverless: Lambda con SSR works.

No separado frontend deploy. Simplicidad operativa significativa.

Curva aprendizaje

Para developer que sabe HTML + backend:

  • Day 1: entiende atributos básicos.
  • Day 3: construye pages interactivas.
  • Week 2: patrones avanzados.

Para developer React-only pasando a HTMX: requires unlearn del SPA mental model.

Conclusión

HTMX es antidote pragmático al SPA-default. Para la gran mayoría de apps empresariales (forms, dashboards, admin, content) es choice sensata con ops simpler y menos deuda técnica. Para SPAs ricos con state complex, React/Vue siguen ganando. El movimiento “hypermedia-driven” (HTMX, Turbo, HTMZ, LiveView) representa reclamo de simplicidad web perdida en la era SPA. Para equipos pequeños-medianos sin presupuesto para expert frontend, puede ser ganancia masiva de productividad.

Síguenos en jacar.es para más sobre web simplicity, HTMX y alternatives a SPA.

Entradas relacionadas