# Htmx

htmx (también escrito como HTMX) es una biblioteca JavaScript front-end de código abierto que extiende HTML con atributos personalizados que permiten el uso de AJAX directamente en HTML y basado fuertemente en hipermedia. Estos atributos permiten el desarrollo de una página web dinámica en HTML y CSS, sin necesidad de escribir JavaScript adicional. Estos atributos permiten que tareas que tradicionalmente requerían escribir JavaScript se realicen completamente con HTML. La biblioteca fue creada por Carson Gross como una nueva versión de intercooler.js.
La biblioteca soporta la comunicación con el servidor mediante métodos HTTP estándar y simplifica la inserción de respuestas del servidor (generalmente texto o fragmentos HTML) en partes designadas de la página web sin tener que volver a renderizar la página entera. Esto a su vez permite un comportamiento similar al que se puede lograr con el comportamiento de reconciliación en DOM virtuales.

## Historia

htmx tiene sus raíces en intercooler.js, una biblioteca frontend creada por Carson Gross en 2013. La biblioteca tenía como objetivo abordar la complejidad asociada con AJAX mediante la introducción de un enfoque simplificado utilizando atributos HTML. La intención era crear un marco de referencia que estuviera alineado con la intención original de Roy Fielding para el paradigma REST (transferencia de estado representacional), y específicamente HATEOAS (hipermedia como motor del estado de la aplicación). El problema se describe en la publicación del blog de Fielding "Las API REST deben estar controladas por hipertexto" de octubre de 2008.
htmx se creó como una versión mejorada de intercooler.js que no dependía de jQuery y la versión 1.0.0 se lanzó en noviembre de 2020. El lanzamiento de htmx fue un hito importante para el proyecto, al ofrecer una forma de utilizar AJAX, transiciones CSS, WebSockets y eventos enviados por el servidor directamente en HTML mediante atributos.
En 2023, htmx fue incluida en la primera cohorte del programa GitHub Accelerator, un programa que brinda a proyectos de código abierto con financiamiento y orientación por parte de miembros de proyectos de código abierto maduros.

## Diseño y funcionalidad

htmx combina las capacidades de los framework modernos con el procesamiento del lado del servidor de las aplicaciones web tradicionales. La filosofía de diseño de la biblioteca gira en torno al objetivo de "hacer HTML completo como hipertexto". Al aprovechar los atributos HTML personalizados con el prefijo hx- para disparar solicitudes AJAX para obtener contenido con el que actualizar partes del DOM, htmx permite a los desarrolladores definir un comportamiento dinámico directamente dentro de su marcado HTML. Esto permite reducir o incluso eliminar la necesidad de código JavaScript. Esta aproximación confiere algunos beneficios, como por ejemplo, evita problemas ocasionados por grandes cantidades de Javascript, administración de estados complejos e hidratación. Este enfoque ofrece una forma más accesible e intuitiva de crear interfaces de usuario modernas, evitando al mismo tiempo las complejidades que suelen asociarse con los frameworks de JavaScript tradicionales. Como htmx puede actualizar partes específicas de una página web sin necesidad de recargar toda la página, al igual que utilizar HTML y CSS simples, su uso puede dar como resultado una mejor experiencia y mayor rendimiento para el usuario, ya que solo una parte de los datos necesita ser solicitada nuevamente al servidor.
La biblioteca también desafía el enfoque tradicional de utilizar JSON como formato estándar para solicitudes HTTP al reemplazarlo con HTML. Esto tiene como objetivo resolver los problemas relacionados con el rendimiento y la sobrecarga cognitiva de la serialización, de serialización y uso posterior en la interfaz de usuario, como la incapacidad de JavaScript y JSON para procesar con precisión números mayores que 2$^{53}$ o distinguir números de punto flotante de números enteros y la complejidad involucrada con alternativas a REST basadas en JSON, como GraphQL o gRPC. Además, una ventaja potencial de htmx y de los enfoques orientados a hipertexto, es que los datos recuperados directamente de la base de datos no necesitan estar en un formato JSON o compatible con JSON, como el utilizado por muchas bases de datos de documentos o el tipo JSON de PostgreSQL, o ser serializados por el servidor solo para volver a ser de serializados por el cliente. La reducción del cómputo del lado del cliente también ayuda a cambiar el foco del desarrollo hacia el backend, lo que podría dar como resultado un mejor rendimiento del lado del cliente, aunque a costa de una mayor carga del servidor. Esta aproximación brinda a los desarrolladores una forma más simple de resolver problemas del lado del servidor, sirviéndose del lenguaje de programación que deseen, que de otra forma deberían ser resueltos del lado del cliente con JavaScript.

## Uso

htmx agrega atributos personalizados al HTML para definir comportamientos dinámicos, como disparar solicitudes al servidor y actualizar contenido. La funcionalidad de htmx se basa en los atributos hx-get, hx-post, hx-put, hx-delete y hx-patch, que realizan solicitudes AJAX con el método HTTP especificado. Estas solicitudes se realizan cuando se activa un determinado evento DOM, change para elementos de input, select o textarea, submit para elementos de formulario y click para otros elementos. Los eventos se puede anular con hx-trigger. . Otros atributos incluyen hx-target para especificar un destino distinto del elemento actual para intercambiar contenido y hx-swap para establecer cómo se debe intercambiar o ubicar el contenido obtenido del servidor en relación con el elemento de destino.

## Comunidad y adopción

Desde su creación como intercooler.js y su posterior evolución a htmx, la biblioteca ha ganado un número significativo de seguidores dentro de la comunidad de desarrollo web. htmx ha sido considerado como una alternativa más simple y liviana a los framework de JavaScript completos como React, Vue.js y Angular. Como resultado, ha ganado cierta popularidad como alternativa al enfoque utilizado por la mayoría de los framework de JavaScript utilizados para crear aplicaciones web dinámicas.
Se han desarrollado integraciones de htmx con distintos framework web full-stack, lenguajes de programación y motores de plantillas, tales como Node.js, Django, Flask, Adobe ColdFusion y ASP. NET, Clojure y Ruby on Rails. Estas bibliotecas suelen ser simplemente por conveniencia, ya que el diseño portátil y minimalista de htmx le permite integrarse con prácticamente cualquier motor de plantillas HTML.