HTMX nos permite hacer sitios web directamente desde el HTML teniendo acceso a AJAX, WebSockets, Transiciones CSS y Server-sent Events a través del uso de los atributos. Esto nos ahorra la necesidad de usar JavaScript, next.js o frameworks/librerías similares para poder crear interfaces modernas y usables para los usuarios.
Además, HTMX es libre de dependencias y tiene un peso ínfimo, los que nos ayuda a reducir el peso de nuestras aplicaciones considerablemente.
Las motivaciones
La idea es que todas las etiquetas puedan realizar una HTTP request, poder lanzar un evento html y utilizar otros métodos que no sean POST y GET. Todo esto nos permite a poder tener interfaces de usuario modernas que no necesitan refrescar la página para actualizar la información, por ejemplo, usando solo HTML.
Instalación
Instalar HTMX es muy sencillo, podemos usar directamente un CDN en nuestro HTML.
<script src="https://unpkg.com/htmx.org@1.9.5" integrity="sha384-xcuj3WpfgjlKF+FXhSQFQ0ZNr39ln+hwjN3npfM9VBnUskLolQAcN80McRIVOPuO" crossorigin="anonymous"></script>
También podemos instalarlo via NPM
npm install htmx.org
Podemos descargar el paquete de HTMX de unpkg y luego añadirlo en el html.
Para más información, podéis visitar el siguiente enlace: https://htmx.org/docs/#installing
Métodos y Lanzadores (triggers)
Para tener interacción vía AJAX con un servidor tenemos una serie de métodos, que son similares a sus correspondientes métodos HTTP: hx-get, hx-post, hx-put, hx-delete y hx-patch.
En cambio, los lanzadores hacen referencia a los eventos JavaScript que activan estos métodos HTTP. Estos lanzadores tienen modificadores y filtros. Los modificadores cambian el comportamiento del lanzador. Los filtros permiten evaluar condiciones antes de ejecutar el lanzador. Para añadir un filtro se utilizan los corchetes y dentro se mete la condición a evaluar. Por ejemplo:
<input type="text"
hx-get="/trigger_delay_with_filter"
hx-trigger="click[ctrlKey] delay:500ms"
placeholder="Search..."
>
Este lanzador tiene la condición de que hay que presionar la tecla de control (filtro) y tendrá un delay de 500ms (modificador).
Targets
Básicamente los Targets nos permiten especificar, mediante selectores de CSS, donde se mostrará la respuesta de la request realizada. Por ejemplo:
<input type="text"
hx-get="/trigger_delay_with_filter"
hx-trigger="click[ctrlKey] delay:500ms"
placeholder="Search..."
hx-target="#search-results"
>
<div id="search-results"></div>
Con todo esto podemos construir sitios webs de una manera sencilla, rápida y que no dependa de tantas librerías y su peso no sea tan elevado. Para más información podéis visitar la documentación oficial de HTMX.
