En 2020, el programador Carson Gross presentó HTMX, una biblioteca JavaScript que permite crear interfaces web modernas usando HTML estándar. A algunos les encantó la idea tanto que comenzaron a decir que frameworks como React o Angular podrían volverse prescindibles.
En este artículo, entenderás qué es HTMX, qué problemas resuelve y si realmente ya no es necesario aprender React.
Según los datos de JavaScript Rising Stars 2024, la biblioteca htmx ocupó el primer lugar en la sección de Front-end Frameworks y el sexto lugar en la sección de Most Popular Projects Overall.
El desarrollo frontend moderno es complicado, pero existe una solución.
Todo sobre HTMX
Problemas del frontend moderno
Las razones del surgimiento de HTMX deben considerarse en el contexto del desarrollo web en los últimos años. Las aplicaciones web existentes se pueden dividir en dos grandes grupos:
- Aplicaciones multi-página (MPA): que actualizan toda la página con cada interacción del usuario. En este enfoque, el estado de la página suele ser 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 mediante llamadas a la API, que devuelven datos, normalmente en formato JSON. Luego, la aplicación actualiza la interfaz sin recargar toda la página.
Aunque los SPA tienen ventajas obvias, esta modelo tiene un inconveniente con el que no todos están dispuestos a lidiar: su alta complejidad. Para que un SPA funcione correctamente, el navegador debe cargar y ejecutar una gran cantidad de archivos JavaScript. Debido a esto, los SPA pueden ser lentos y consumir mucha memoria RAM, especialmente si estos archivos están mal optimizados y saturan 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, es necesario conectar mucha infraestructura auxiliar: frameworks, bibliotecas, módulos NPM, compiladores. Comienza un caos de problemas con las dependencias: cómo conectar dos componentes, cómo cambiar una parte de la aplicación sin romper otra, cómo transferir un proyecto sin problemas de un framework a otro.
Debido al gran número de herramientas, los desarrolladores frontend tienen que volver a aprender constantemente. ¿Has trabajado con React toda tu vida? No te preocupes, aprenderás Vue. ¿Usaste Redux en tu trabajo anterior? Tendrás que trabajar con MobX. ¿Cómo es que no sabes las diferencias entre Nuxt, Next y Nest? Y así sucesivamente.
Surge la pregunta lógica: ¿no sería más sencillo renunciar a toda esta “romántica” situación con frameworks, JavaScript y 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 abandonar la plataforma web”.
Rich Harris, uno de los desarrolladores de Svelte.js, Have Single-Page Apps Ruined the Web?
HTMX es un intento de solucionar los problemas mencionados anteriormente, manteniendo la funcionalidad moderna de las aplicaciones. Permite lograr los mismos objetivos que los frameworks populares, pero de una manera 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 podemos 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, sin requerir una recarga completa de la página, y a la vez, en su simplicidad, se acerca más a las MPA. En este modelo, el renderizado de la página se realiza en el servidor, y al cliente se le envía el código HTML ya preparado, que luego se integra en el lugar correcto del árbol DOM del sitio.
El navegador no necesita interpretar ni visualizar nada: todas estas operaciones las realiza el servidor. Este enfoque simplifica el proceso de desarrollo al minimizar la complejidad del lado del cliente.
Comparemos, por ejemplo, cómo se ve el código de un contador simple escrito en JavaScript con React y en HTMX. Comencemos 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>
);
}
}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>Lo que sucede aquí:
- Creamos una clase HTML normal
<div>, en la que escribimos un párrafo<p>y un botón llamado Increment. - Cuando se carga la página, HTMX solicita al servidor el valor del contador usando el atributo
hx-get, y luego lo coloca en el párrafo. - Cuando el usuario hace clic en el botón, HTMX envía una señal al servidor usando
hx-post. - El servidor ve la señal y devuelve al cliente el HTML actualizado de todo el elemento, que se colocará en el diseño general usando
hx-swap.
La diferencia es evidente. Lo primero que llama la atención es la cantidad de código. Y en el ejemplo de React, ni siquiera implementamos la interacción con el servidor, solo la lógica del cliente. Pero lo principal es que en HTMX el contador se actualiza sin una recarga completa de la página. El trabajo principal se realiza en el servidor, y en el cliente queda el marcado HTML y los elementos HTMX.
La claridad y simplicidad de HTMX en comparación con React y otros frameworks JS se confirma no solo con ejemplos sintéticos, sino también con 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 fueron los resultados:
- El tamaño de la base de código se redujo en un 67%.
- La cantidad 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 cantidades mucho mayores de datos, con las que React simplemente no podía manejar.
- La carga de memoria disminuyó en un 46% (de 75 a 40 MB).
- La experiencia del usuario (UX) no se vio afectada.
Los desarrolladores que están cansados de tener que lidiar diariamente con cientos de componentes, optimizar consultas y estar pendientes de las dependencias, y que simplemente quieren disfrutar de la auténtica sencillez y fiabilidad del HTML, son fervientes defensores de HTMX. En su mayoría, curiosamente, son desarrolladores de backend 🙂
Cómo funciona HTMX
Ahora analicemos 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, realiza una solicitud HTTP GET a /blog y carga 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, realiza una solicitud HTTP POST a la dirección /clicked y usa 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"
>
¡Haz clic aquí!
</button>HTMX amplía significativamente las capacidades de HTML, agregando 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 agregar dinamismo e interactividad a la página sin usar scripts.
Estos son algunos beneficios más:
- Ahora cualquier elemento del marcado puede enviar una solicitud HTTP, no solo anclajes y formularios.
- Ahora cualquier evento puede desencadenar una solicitud, no solo un clic del ratón o el envío de un formulario.
- Ahora cualquier elemento de la página puede ser el objeto de la actualización en la solicitud, no solo toda la ventana.
Además, el servidor entrega directamente HTML, no JSON, como ocurre cuando se trabaja 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, utilizando la animación CSS.
<div hx-get="/load-content" hx-trigger="click" hx-indicator="#spinner">
Haz click para cargar
</div>
<div id="spinner" class="hidden">
Cargando...
</div>Este enfoque refuta efectivamente la creencia común de que se necesita JavaScript para crear aplicaciones web dinámicas, y demuestra que hay una forma más sencilla de crear aplicaciones web.
Ventajas de HTMX
Entre las ventajas de HTMX se pueden mencionar las siguientes:
✅ Independencia de frameworks o lenguajes. Gracias a esto, la biblioteca se puede utilizar con diversas plataformas de servidor: Node, Django, Phoenix, Laravel y otras.
✅ Base de código pequeña en comparación con otras bibliotecas y frameworks, como React o Angular.
✅ Facilidad de uso. No hay necesidad de pasos de compilación adicionales ni de herramientas complejas como Webpack.
✅ Ahorro de recursos. Con HTMX, puedes arreglártelas con menos desarrolladores y herramientas, lo que reduce los costos de desarrollo y mantenimiento.
✅ No necesitas instalar miles de paquetes NPM. Herramientas, bibliotecas y aplicaciones necesarias para el proyecto.
✅ Base de código única. Como el renderizado se realiza del lado del servidor, ya no se necesita una base de código separada para el cliente, como en el caso de los SPA. Podemos usar el mismo código para generar HTML en el servidor y para mostrarlo del lado del cliente, lo que simplifica significativamente su mantenimiento.
✅ Integración sencilla. HTMX está diseñado para interactuar con diferentes tecnologías de servidor, por lo que en muchos casos funcionará “listo para usar”. Mientras que los frameworks y bibliotecas como React a menudo requieren una configuración adicional, especialmente si el proyecto no está construido solo en el ecosistema de JavaScript.
Desventajas de HTMX
Paradójicamente, aunque HTMX se desarrolló inicialmente para simplificar el desarrollo, su uso está asociado con una serie de dificultades:
❌ Lógica de servidor compleja. Ahora todos los escenarios de interacción con el usuario deberán programarse 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 JSON con algunos datos, ahora tendremos que especificar en detalle qué animaciones funcionarán, qué opciones aparecerán para el cliente, etc.
❌ Dificultades con 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 intercambiar datos con el servidor con menos 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 descubierto, HTMX requiere una buena comprensión del funcionamiento del backend.
Cuándo elegir HTMX
Resumimos los casos principales en los que usar HTMX es adecuado 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 es mejor usar React con DOM virtual.
- Interacción simple con el servidor. Si necesitas un envío simple de formularios y solicitudes AJAX, sin necesidad de una gestión de estado compleja, actualizaciones en tiempo real y optimización de renderizado, entonces HTMX es una buena opción.
- JavaScript deshabilitado. Si quieres asegurarte de que el sitio esté disponible y no pierda parte de su funcionalidad incluso para usuarios con JavaScript deshabilitado.
- Mínimo JavaScript, o “el sueño de un desarrollador backend”. HTMX es perfecto para los desarrolladores backend que quieren agregar 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 comunitario, interfaces de usuario complejas y actualizaciones en tiempo real, entonces React, Vue o Angular son más adecuados.
En resumen: ¿Vale la pena aprender HTMX?
La popularidad de HTMX está creciendo gradualmente, pero principalmente entre desarrolladores profesionales. Si eres un junior que está aprendiendo tecnologías frontend y quieres encontrar trabajo rápidamente, aquí tienes el 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 viniera a mí y dijera: ‘Oye, no sé nada de programación y necesito un trabajo de frontend. ¿Qué debo aprender?’, le diría: ‘Aprende React’. Porque si entras en el sitio indeed.com y buscas ‘React’, habrá 30.000 ofertas de trabajo en tu región. Si buscas ‘HTMX’, habrá cero. Creo que apostar por React es mucho más seguro que apostar por algo como HTMX.
Carson Gross, creador de HTMX, Go Time – Episodio #266
Si aún así te decides, en el sitio web oficial tienes todo lo que necesitas para empezar.
Quiero comentar algo