HTMX, Adiós al JavaScript Complejo para la Interactividad Web
Inicia sesión para descargar¿Estás cansado de la complejidad de los frameworks de JavaScript para añadir simples interacciones a tus páginas? Hoy exploraremos HTMX, una biblioteca revolucionaria que te permite crear interfaces dinámicas y modernas escribiendo …
¿Estás cansado de la complejidad de los frameworks de JavaScript para añadir simples interacciones a tus páginas? Hoy exploraremos HTMX, una biblioteca revolucionaria que te permite crear interfaces dinámicas y modernas escribiendo solo HTML.
Crearemos un ejemplo práctico y muy común: una lista de publicaciones con un botón "Cargar Más" que añade nuevos elementos sin recargar la página. Te sorprenderá lo simple y elegante que es la solución, sin escribir una sola línea de JavaScript.
🤔 ¿Qué Problema Vamos a Resolver?
La idea es sencilla: tendremos una página que muestra una lista inicial de elementos. Cuando el usuario llega al final, un botón de "Cargar Más" le permitirá añadir los siguientes elementos de forma dinámica, sin recargar la página. Tradicionalmente, esto requeriría código JavaScript para manejar el clic, hacer una petición fetch al servidor y añadir los nuevos elementos al DOM. Con HTMX, en cambio, veremos cómo toda esta lógica se define directamente en nuestro HTML.
🛠️ Preparando Nuestro Entorno
Para este tutorial, solo necesitas Node.js y npm instalados en tu sistema. Usaremos un pequeño servidor con Express.js para simular una API que nos devuelva los nuevos elementos de la lista. Primero, crea una carpeta para tu proyecto y, dentro de ella, inicializa un nuevo proyecto de Node.js abriendo tu terminal y ejecutando el siguiente comando:
npm init -y
Ahora, instala Express, la única dependencia que necesitaremos para nuestro servidor de respaldo.
npm install expressCon esto, nuestro entorno está listo para empezar a construir.
🖥️ Creando el Servidor de Respaldo
Para que HTMX funcione, necesita un servidor que le envíe los fragmentos de HTML que usará para actualizar la página. Para este ejemplo, crea un archivo llamado servidor.js en la carpeta de tu proyecto y añade el siguiente código:
const express = require('express');
const app = express();
const port = 3000;
// Una "base de datos" simple de publicaciones
const publicaciones = [
'HTMX está cambiando el juego',
'WebAssembly y Rust: El futuro del rendimiento',
'CSS Moderno: Más allá de Flexbox y Grid',
'Bun vs. Node.js: ¿Quién gana la carrera?',
'Simplificando el estado en React',
'Tu primera API REST con Go',
];
// Servimos nuestro archivo HTML principal
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// Este es el endpoint que HTMX llamará
app.get('/cargar-mas', (req, res) => {
// Obtenemos el número de la página que se va a cargar
const pagina = parseInt(req.query.pagina || 1);
const tamañoPagina = 2; // Mostraremos 2 elementos a la vez
const inicio = (pagina - 1) * tamañoPagina;
const fin = inicio + tamañoPagina;
// Cortamos los datos de nuestra "base de datos"
const nuevasPublicaciones = publicaciones.slice(inicio, fin);
// Creamos el HTML que se devolverá
let htmlRespuesta = '';
nuevasPublicaciones.forEach(pub => {
htmlRespuesta += `<div class="publicacion">${pub}</div>`;
});
// Si hay más publicaciones, también enviamos el nuevo botón "Cargar Más"
if (fin < publicaciones.length) {
htmlRespuesta += `
<button hx-get="/cargar-mas?pagina=${pagina + 1}" hx-swap="outerHTML" hx-target="this">
Cargar Más
</button>
`;
}
res.send(htmlRespuesta);
});
app.listen(port, () => {
console.log(`Servidor escuchando en http://localhost:${port}`);
});
Este servidor tiene una ruta principal que sirve nuestro archivo index.html y una ruta /cargar-mas que devuelve un fragmento de HTML con las siguientes dos publicaciones y un nuevo botón de "Cargar Más" actualizado.
✨ Escribiendo Nuestro HTML Mágico con HTMX
Estás viendo solo el 60% del contenido. Hazte Premium para acceder al tutorial completo.
Comentarios y valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!