Cosas increíbles que se pueden hacer con HTMX

Introducción

Imagina un framework que te proporciona todos los beneficios y características de React o Vue.js usando simplicidad de HTML.

Ese framework ya existe y se llama HTMX.

HTMX mejora el HTML al proporcionarle la capacidad de realizar llamadas AJAX, transiciones, WebSockets y eventos de servidor, úsando únicamente código HTML.

En este pequeño artículo trato de explicar las ventajas de usar HTMX y como integrarlo en una aplicación Web.

A lo mejor cuando hayas leído todo el artículo empiezas a plantearte reemplazar tu actual framework por HTMX….

1. ¿Que es HTMX?

HTMX permite crear sitios interactivos usando solo HTML.

Proporciona unos atributos especiales para añadir comportamiento dinámico sin el uso de Javascript, ofreciendonos la posibilidad de que sea más facil construir inteficies de usuario.

Por ejemplo, veamos el siguiente tag HTML:

<a href="/miblog">Blog</a>

Al hacer un click en este link el navegaor envía una petición HTTP a /miblog y renderiza el correspondiente HTML de esa ruta.

Con HTMX, de todas formas, se puede realizar una petición HTTP desde cualquier elemento de la página.

Para hacerlo, hemos de añadir unos atributos adicionales al código HTML:

<button hx-post="/obtener-datos"
    hx-trigger="click"
    hx-target="#div-padre"
    hx-swap="outerHTML"
>
    Haz click!
</button>

Al hacer click en este botón, el navegador envía una petición HTTP POST a /obtener-datos, obtiene el contenido de la respuesta y lo usa para replazar el contenido en la ID especificada por “div-padre”.

Todo esto convierte a HTMX en una extensión de HTML que permite:

  • Enviar peticiones HTTP desde cualquier elemento, no sólamente desde elemntos <a> o formularios.

  • Activa peticiones con cualquier evento, no solo clics o envíos de formularios

  • Uso de cualquier tipo de petición HTTP, no sólo GET o POST.

  • Especificar como destino de la petición cualquier elemento del DOM y actualizar el contenido de ese elemento con la respuesta de la petición.

2. Ventajas de usar HTMX

Hay 4 ventajas principales del uso de HTMX:

  1. Es fácil de aprender: Si HTML es familiar para ti, puedes aprender fácilmente a usar HTMX. La libreria es perfecta para los desarrolladores que no están muy acostumbrados a usar Javascript o que simplente quieren crear sitios dínamicos lo más rápido posible.

  2. Mejor rendimiento: HTMX renderiza compontes directamente desde el servidor. Por lo tanto, ofrece un mejor rendimiento al eliminar trabajo del lado del cliente. Esto ofrece una velocidad de carga más rápida y una mejor experiencia de usuario en general.

  3. Mayor accesibilidad: HTMX se desarrolló teniendo en cuenta la accesibilidad del usuario, lo que es ideal para crear sitios web que sean accesibles para todos (especialmente para aquellos con discapacidades).

  4. SEO: URL limpias y HTML semántico. HTMX incluye todas las características esenciales para que un sitio web tenga altas probabilidades de buen posicionamiento en los buscadores.

Una vez comentadas todas las ventajas de HTMX vamos a ver el uso de HTMX en un proyecto práctico.

3. Primeros pasos con HTMX

Para usar HTMX, debemos importar la librería y añadirla en la cabecera de nuestro HTML de la siguiente forma:

<!DOCTTYPE html>
<html lang="en">
<head>
   <script src="https://unpkg.com/htmx.org@1.9.2"></script>
</head>
<body>

</body>

A partir de este momento ya podemos usar los atributos HTMX en todos los elementos contenidos en el elemento padre <body>.

Para realizar las peticiones a la API, vamos a usar Express Server

Para ello es necesario tener Node.js instalado.

Para hacerlo hemos de seguir los siguientes pasos:

  1. Crear un directorio vacio.

  2. Lanzar un shell de línea de comandos (cmd en Windows o los terminales en linux o OSX).

  3. usar el comando cd para acceder al directorio que hemos creado

  4. Ejecutar el siguiente comando para crear un proyecto Node:

npm init -y

A continuación, instalamos express:

npm i express

Si todo ha ido bien, ya tenemos el servidor listo para realizar las peticiones a nuestra API.

4. Realizando una petición GET a la API usando HTMX

Podemos realizar una petición HTTP GET directamente en el HTML usando el atributo hx-get attribute. El valor de este atributo es la URL de nuestro servidor con el endpoint al que queremos llamar:

<button 
  hx-get="http://localhost:5000/hola-mundo"
  hx-swap="outerHTML"
>
  Di hola mundo!
</button>

El código anterior reemplaza el contenido de un botón con la respuesta de la API.

Alternativamente, se puede definir donde queremos que se inserte la respuesta usando el tag hx-target:

<button 
  hx-get="http://localhost:5000/hola-mundo"   
  hx-target="#divRespuesta"
  hx-swap="outerHTML"
  >
    Di hola mundo!
</button>

<div id="divRespuesta">

</div>

La respuesta reemplazará todo el elemento <div> con la respuesta de la API.

Para crear el endpoint hola-mundo de nuestra API, vamos a crear un fichero llamado server.js con el siguiente código:

const express = require('express')

const app = express()

app.get('/hola-mundo', (req, res)=> {
    res.send("Hola mundo!")
})

app.listen(5000, ()=> {
    console.log("El servidor está activos")
})

Arrrancamos el servidor ejecutando el siguiente comando:

node server.js

Cuando hacemos un click en el botón, HTMX internamente realizará la petición GET al servidor y al obtener la respuesta la inserterá en el elemento destino, tal y como hemos visto antes, todo esto de forma asíncrona.

Algunas cosas a destacar:

  1. Se pueden realizar peticiones POST, PUT y DELETE añadiendo el el prefijo “hx-” y seguidamente el verbo (hx-post, hx-put, etc).

  2. El atributo hx-target nos permite encontrar el elemento a través de un selector CSS pero se necesita especificar una sintaxis especial, incluyendo next y closest.

De esta forma podemos encontrar el elemento correcto sin usar id’s personalizadas.

<button 
  hx-get="..."   
  hx-target="next #respuestaDiv"
  hx-swap="..."
  >
  Di hola mundo!
</button>

<div id="respuestaDiv">
</div>

Una vez visto como actualizar la respuesta de una petición vamos a ver como funciona el tema de los eventos.

5. Configurando un trigger para un evento personalizado en HTMX

El atributo hx-trigger permite personalizar un evento que cuando se ejecute la petición a la API. Podemos usar los modificadores como delay o throttle para controlar de que forma se realiza la petición:

<button 
  hx-get="..." 
  hx-target="..."
  hx-trigger="keyup changed delay:1s"
>
  Key up

  <img class="htmx-indicator" src="loader.gif" />
</button>

En este caso, la petición GET se lanza cuando se produce el evento keyup en el botón.

Mientras la petición se está procesando, se usa la clase CSS .htmx-indicator para mostrar la animación del spinner que indica que la petición se esta procesando.

El código CSS es:

.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
  opacity: 1
}

.htmx-request.htmx-indicator. {
  opacity: 1
}

La soprendente de HTMX es que se ha realizado todo este proceso sin usar una sola línea de código Javascript.

6. Usando un router en la parte cliente

La librería HTMX tiene un sistema de routing en la parte cliente llamado boost .

Este sistema de routing permite que una aplicación tradicional web se comporte como una aplicación single-page :

<div hx-boost="true">
  <a href="/inicio">Incio</a>
  <a href="/acerca">Acerca de</a>
</div>

Básicamente, intercambia las diferentes páginas en la etiqueta <body>.

Este es el mismo comportamiento que obtendriamos usando los frameworks SPA como React o Vue.js.

<body>
  <!-- Inserta dinámicamente la página actual aquí -->
</body>

La libería también proporciona extensiones para el uso de características más avanzadas como web sockets y integraciones con otras frameworks HTML como Alpine. .

7. Sistema de eventos

HTMX tiene un potente sistema de eventos permite interceptar cualquier evento que se produzca.

El siguiente código se ejecutará justo antes de que se produzca el evento.

Primero chequea si el código de respuesta de la petición es 404 y en el caso de que lo sea responde con un mensaje de alerta “Página no encontrada!”

document.body.addEventListener('htmx:beforeswap', (ev) => {
  if(ev.detail.xhr.status === 404) {
    alert("Página no encontrada!")
  }
})

El atributo hx-on permite asignar un evento a una función escrita en Javascript en el caso de que queramos ejecutar código Javascript:

<button hx-on:'click: alert('click!')'>
  Click aquí!
</button>

8. Conclusión

HTMX es una librería ligera, potente y fácil de usar.

Como hemos visto, ofrece las capacidades dinámicas a menudo asociadas con otras librerías Javascript complejas, siendo una gran alternativa para crear aplicaciones web interactivas.

Sin embargo, para aplicaciones más complejas, todavía es necesario el uso de un framework Javascript. Pero si tu objetivo es crear una aplicación web ágil, interactiva y fácil de usar sin agregar mucha complejidad, definitivamente vale la pena considerar HTMX.

A medida que el desarrollo web continúa evolucionando, herramientas como HTMX proporcionan nuevas y refrescantes formas de crear mejores experiencias para los usuarios.

Posts que te pueden interesar:

LinkedIn
comments powered by Disqus