HTMX: ¿Qué es Esta Biblioteca y Cómo Funciona?

En 2020, el programador Carson Gross presentó la biblioteca JavaScript HTMX, que permite crear interfaces web modernas usando HTML simple. A algunos les gustó tanto la idea que se empezó a hablar de que los frameworks como React o Angular pronto llegarían a su fin. En este artículo, trataremos de entender qué es HTMX, qué problemas resuelve y si realmente podemos dejar de aprender React.

Los problemas del desarrollo frontend actual

Las razones de la aparición de HTMX deben considerarse en el contexto del desarrollo web en los últimos años. Las aplicaciones web existentes se pueden dividir condicionalmente en dos grandes grupos:

• Aplicaciones multi-página (MPA): Actualizan toda la página con cada interacción del usuario. Con este enfoque, el estado de la página normalmente es controlado por el servidor. Sin embargo, la recarga de la página con cada cambio puede ralentizar el funcionamiento de la aplicación.
• Aplicaciones de una sola página (SPA): En las que la gestión del estado se realiza mediante JavaScript que se ejecuta en el navegador. Los SPA interactúan con el servidor a través de llamadas API, que devuelven datos, normalmente en formato JSON. Luego, la aplicación actualiza la interfaz sin recargar la página completa.

Aunque los SPA tienen ventajas evidentes, este modelo tiene un inconveniente con el que no todos están dispuestos a lidiar: la alta complejidad. Para que un SPA funcione correctamente, el navegador debe cargar y ejecutar una gran cantidad de archivos JavaScript. Esto puede ralentizar los SPA y consumir memoria, especialmente si estos archivos están mal optimizados y bombardean el servidor con decenas de solicitudes cada segundo.

Pero el principal problema, por supuesto, no es la velocidad. Para escribir una lógica de cliente completa en JavaScript, necesitas conectar una gran cantidad de infraestructura auxiliar: frameworks, bibliotecas, módulos NPM, compiladores. Se inicia una locura con los problemas de dependencias: cómo conectar dos componentes, cómo cambiar una parte de la aplicación sin que se rompa la otra, cómo migrar un proyecto sin problemas de un framework a otro.

Debido al arsenal de herramientas inflado, los desarrolladores frontend tienen que estar constantemente aprendiendo de nuevo. ¿Llevas toda la vida trabajando con React? No te preocupes, te familiarizarás con Vue. ¿En tu trabajo anterior utilizabas Redux? Tendrás que esforzarte con MobX. ¿Cómo es que no sabes las diferencias entre Nuxt, Next y Nest? Y así sucesivamente.

Surge una pregunta lógica: ¿No sería más fácil simplemente renunciar a toda esta romántica aventura con los frameworks, JavaScript y el renderizado del cliente?

«Si los mejores ingenieros frontend del mundo no pueden hacer que el texto y las imágenes funcionen sin cinco megabytes de JavaScript, entonces tal vez deberíamos simplemente renunciar a la plataforma web».

RICH HARRIS,
Uno de los desarrolladores de Svelte.js, Have Single-Page Apps Ruined the Web?

La biblioteca HTMX es un intento de escapar de los problemas mencionados anteriormente, manteniendo al mismo tiempo la funcionalidad moderna de las aplicaciones. Permite lograr los mismos objetivos que los frameworks populares, pero de una forma más sencilla.

¿Qué es HTMX?

HTMX es una biblioteca que permite crear interfaces web dinámicas utilizando solo HTML y un poco de JavaScript. La idea es que podamos ejecutar elementos interactivos escritos con AJAX, CSS Transitions, WebSockets y Server Sent Events, directamente desde el código HTML.

HTMX conserva las ventajas de los SPA, evitando la recarga completa de la página, y al mismo tiempo, por su simplicidad, está más cerca de los MPA. En este modelo, el renderizado de la página se realiza en el servidor y se envía al cliente un código HTML ya preparado, que luego se inserta en el lugar deseado del árbol DOM del sitio. El navegador no tiene que interpretar ni visualizar nada: el servidor se encarga de todos estos cálculos. Este enfoque simplifica el proceso de desarrollo al minimizar la complejidad del lado del cliente.

Como ejemplo, comparemos cómo se ve el código de un contador simple escrito en JavaScript con React y en HTMX. Empecemos con React:

import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  incrementCount() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

¿Qué está pasando aquí? En el ejemplo anterior, creamos un componente Counter, que almacena el valor del contador (por defecto, 0). Cuando el usuario hace clic en el botón, el componente llama al método incrementCount, que incrementa el valor del contador en 1. Esto hace que React vuelva a dibujar el componente con el nuevo valor del contador en el párrafo.

Ahora, veamos cómo se implementa la misma funcionalidad en HTMX:

<div>
  <p hx-get="/count">Count: 0</p>
  <button hx-post="/increment" hx-swap="outerHTML">Increment</button>
</div>

¿Qué está pasando aquí?

• Se crea una clase HTML estándar <div>, en la que se escribe un párrafo <p> y un botón llamado Increment.
• Cuando se carga la página, HTMX solicita el valor del contador al servidor mediante el atributo hx-get, y luego lo inserta en el párrafo.
• Cuando el usuario hace clic en el botón, HTMX envía una señal al servidor con hx-post.
• El servidor ve la señal y devuelve al cliente el HTML actualizado de todo el elemento, que se inserta en la distribución general mediante hx-swap.

La diferencia es evidente. Lo primero que llama la atención es la cantidad de código. Y es que en el ejemplo de React, ni siquiera hemos implementado la interacción con el servidor, solo la lógica del cliente. Pero lo principal es que en HTMX, el contador se actualiza sin recargar la página completamente. La mayor parte del trabajo se realiza en el servidor, mientras que en el cliente solo queda la estructura HTML y los elementos HTMX.

La claridad y simplicidad de HTMX en comparación con React y otros frameworks JS se confirma no solo en casos sintéticos, sino también en la práctica. En 2022, en la conferencia DjangoCon, el desarrollador David Giló contó cómo los desarrolladores de la empresa Contexte migraron un proyecto escrito en React con backend en Django a la biblioteca HTMX.

Estos son los resultados que obtuvieron:

• El tamaño de la base de código se redujo en un 67%.
• El número de dependencias JS se redujo en un 96%: de 255 a 9.
• El tiempo de compilación del sitio se redujo en un 88%: de 40 segundos a 5.
• La velocidad de la primera carga de la página aumentó en un 50-60%: de 2-6 segundos a 1-2.
• La aplicación comenzó a procesar volúmenes mucho más grandes de datos, con los que React simplemente no podía lidiar.
• La carga de la memoria disminuyó en un 46%: de 75 a 40 MB.
• La calidad de la experiencia del usuario (UX) no se vio afectada.

Los desarrolladores que están cansados de hurgar diariamente en cientos de componentes, optimizar las solicitudes y controlar las dependencias, y simplemente quieren disfrutar de la auténtica ligereza y confiabilidad del HTML, abogan por HTMX. Curiosamente, la mayoría de ellos son, por extraño que parezca, desarrolladores backend 🙂

Cómo Funciona HTMX

Ya hemos revisado las definiciones, ahora veamos algunos ejemplos del funcionamiento de HTMX. Como recordamos, el sentido de esta biblioteca es que podemos usar las capacidades de los navegadores modernos directamente desde HTML, sin JavaScript.

Por ejemplo, la siguiente entrada le dice al navegador: cuando el usuario haga clic en este enlace, realice una solicitud HTTP-GET a /blog y cargue el contenido de la respuesta en la ventana del navegador.

<a href="/blog" hx-get="/blog">Blog</a>

Y el siguiente código le dice al navegador: cuando el usuario haga clic en el botón, realice una solicitud HTTP-POST a la dirección /clicked y use el contenido de la respuesta para reemplazar el elemento con el ID parent-div en el DOM. Este es un ejemplo de cómo HTMX realiza una solicitud AJAX al servidor.

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Click Me!
</button>

HTMX amplía significativamente las capacidades del HTML, añadiendo nuevos atributos a las etiquetas HTML estándar, que les permiten realizar solicitudes AJAX y actualizar partes de la página sin recargarla. Nos ayuda a añadir dinamismo e interactividad a la página sin usar scripts.

Estos son algunos beneficios adicionales:

• Ahora, cualquier elemento de la estructura puede enviar una solicitud HTTP, no solo los anclajes y los formularios.
• Ahora, cualquier evento puede invocar una solicitud, no solo los clics del ratón o el envío de formularios.
• Ahora, el objeto de actualización en la solicitud puede ser cualquier elemento de la página, no solo toda la ventana.

Al mismo tiempo, el servidor entrega inmediatamente HTML, no JSON, como ocurre al trabajar con JavaScript y los frameworks basados en él.

HTMX también interactúa fácilmente con CSS. Por ejemplo, los desarrolladores pueden usar el atributo hx-indicator para mostrar un cargador usando una animación CSS.

<div hx-get="/load-content" hx-trigger="click" hx-indicator="#spinner">
  Click to Load
</div>
<div id="spinner" class="hidden">
  Loading...
</div>

Este enfoque, en realidad, refuta la opinión generalizada de que para crear aplicaciones web dinámicas es necesario usar JavaScript, y demuestra que existe una forma más sencilla de crear aplicaciones web.

Ventajas de HTMX

Entre las ventajas de HTMX podemos mencionar las siguientes:

✅ Independencia de frameworks o lenguajes. Gracias a esto, la biblioteca puede utilizarse con las más diversas plataformas de servidor: Node, Django, Phoenix, Laravel y otras.

✅ Tamaño de la base de código reducido en comparación con otras bibliotecas y frameworks, como React o Angular.

✅ Facilidad de uso. No es necesario realizar pasos de compilación adicionales ni utilizar herramientas complejas como Webpack.

✅ Ahorro de recursos. Con HTMX, puedes prescindir de menos desarrolladores y herramientas, lo que reduce los costes de desarrollo y mantenimiento.

✅ No es necesario instalar miles de paquetes NPM: herramientas, bibliotecas y aplicaciones necesarias para el proyecto.

✅ Una única base de código. Dado que el renderizado se realiza del lado del servidor, ya no es necesaria una base de código separada para el cliente, como en el caso de los SPA. Podemos utilizar el mismo código para generar HTML en el servidor y para mostrarlo del lado del cliente, lo que simplifica enormemente su mantenimiento.

✅ Integración sencilla. HTMX está diseñado inicialmente para interactuar con diferentes tecnologías de servidor, por lo que en muchos casos funcionará «de serie». Mientras que los frameworks y las bibliotecas como React a menudo requieren una configuración adicional, especialmente si el proyecto no se basa solo en la ecología de JavaScript.

«La mayor ventaja que veo en HTMX es la cantidad mínima de JavaScript que escribimos o enviamos al navegador. De hecho, se pueden crear aplicaciones web interactivas y completas utilizando solo HTMX, sin escribir código para el lado del cliente».

RAJASEGAR CHANDRAN,
Arquitecto frontend en Freshworks, HTMX and HTML Driven Development

Desventajas de HTMX

Paradoja: aunque HTMX se desarrolló inicialmente para simplificar el desarrollo, su aplicación está ligada a una serie de dificultades.

❌ Compleja lógica del servidor. Ahora, todos los escenarios de interacción con el usuario tendrán que ser especificados directamente en el backend. Por ejemplo, si antes, en respuesta a un clic en el botón de reenvío, simplemente enviábamos al navegador un JSON con algunos datos, ahora tendremos que especificar detalladamente qué animaciones se activarán, qué opciones aparecerán en el cliente, etc.

❌ Dificultades con las páginas dinámicas. HTMX no es adecuado para aplicaciones dinámicas como juegos online o mapas, donde el estado cambia constantemente. En este caso, los frameworks son más adecuados, ya que permiten no intercambiar datos con el servidor con tanta frecuencia.

❌ Dificultades de aprendizaje. Una nueva tecnología son nuevos conocimientos. Aunque HTMX simplifica el proceso de desarrollo, para su uso eficaz es necesario estudiar en detalle los atributos, métodos y enfoques correspondientes. Además, como hemos visto, HTMX requiere un buen conocimiento del funcionamiento del backend.

Cuándo se Debe Elegir HTMX

Vamos a hablar brevemente sobre los principales casos en los que utilizar HTMX sería apropiado hoy en día:

• Proyectos pequeños. HTMX es una biblioteca ligera que puede ser una excelente opción para proyectos pequeños que requieren interactividad dinámica sin los gastos de un framework frontend completo. Si tienes una aplicación a gran escala con actualizaciones frecuentes, entonces React con un DOM virtual es mejor.
• Interacción simple con el servidor. Si necesitas un simple envío de formularios y solicitudes AJAX, sin necesidad de una compleja gestión del estado, actualizaciones en tiempo real y optimización del renderizado, HTMX es una buena opción.
• JavaScript desactivado. Si quieres asegurarte de que el sitio web esté disponible y no pierda parte de su funcionalidad incluso para los usuarios con JavaScript desactivado.
• Mínimo JavaScript, o «el sueño del backend». HTMX es perfecto para los desarrolladores backend que quieren añadir interactividad a su proyecto sin recurrir a JavaScript y sin sumergirse en las profundidades de los frameworks.

Si necesitas una solución integral a gran escala con soporte de la comunidad, con interfaces de usuario complejas y actualizaciones en tiempo real, React, Vue o Angular son mejores.

Entonces, ¿Qué Pasa al Final? ¿Vale la Pena Aprender HTMX?

La popularidad de HTMX está creciendo gradualmente, pero principalmente entre los desarrolladores profesionales. Si eres un junior que está aprendiendo tecnologías frontend y quieres encontrar un trabajo rápidamente, aquí tienes un consejo del creador de HTMX.

«La realidad es que hoy en día React es el estándar. Por mucho que me guste HTMX, si alguien se me acercara y me dijera: «Oye, no sé nada de programación y necesito un trabajo como desarrollador frontend. ¿Qué debería aprender?», le diría: «Aprende React». Porque si entras en indeed.com y buscas «React», en tu región habrá 30.000 vacantes. Si buscas «HTMX», no habrá ninguna. Creo que apostar por React es mucho más seguro que por algo como HTMX».

CARSON GROSS,
Creador de HTMX, Go Time — Episode #266

Si aún así te animas, en el sitio web oficial tienes todo lo que necesitas para empezar. https://htmx.org/