HTML es el lenguaje de marcado que nos permite definir la estructura y contenido de nuestras páginas web, con este lenguaje sumado a CSS es que podemos hacer una web estática, como un blog o un portafolio.
Sin embargo, si queremos agregar más interactividad es que necesitamos la ayuda de JavaScript, por defecto estos son los 3 lenguajes que siempre necesitaremos independientemente si es que utilizas un framework o librería, es lo que siempre está corriendo por detrás en estas tecnologías.
Pero ¿qué pasaría si no tuviéramos que utilizar JS para crear aplicaciones?, para eso tenemos a HTMX, que si bien podríamos decir que es una «evolución» a HTML ya que esta biblioteca nos permite de agregar interactividad con solamente usar HTML, pero ¿qué tan bueno es?
¿Páginas dinámicas con solo HTML?
He probado un poco el alcance de esta tecnología para ver qué podíamos hacer con esta tecnología y si era suficientemente buena para nunca más tener que usar JS, y la respuesta es no, aunque esta tecnología pareciera no usar JS, es que por detrás es JS, y aun así, para lograr hacer una aplicación completa es necesario utilizarlo:
EJEMPLO 1: lista de tareas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Tareas con htmx y LocalStorage</title>
<script src="https://unpkg.com/htmx.org@1.6.0/dist/htmx.js"></script>
</head>
<body>
<h1>Lista de Tareas</h1>
<div>
<input type="text" id="task" placeholder="Nueva tarea">
<button hx-post="/add" hx-target="#taskList" hx-swap="outerHTML">Agregar</button>
</div>
<ul id="taskList">
<!-- Aquí se mostrarán las tareas -->
<li hx-get="/tasks">Cargando tareas...</li>
</ul>
<script>
// Función para cargar las tareas desde localStorage
function loadTasks() {
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
const taskList = document.querySelector('#taskList');
taskList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
li.textContent = task;
taskList.appendChild(li);
});
}
// Cargar las tareas al cargar la página
loadTasks();
// Manejar la adición de una nueva tarea
document.querySelector('button').addEventListener('click', function () {
const taskInput = document.querySelector('#task');
const task = taskInput.value.trim();
if (task !== '') {
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
tasks.push(task);
localStorage.setItem('tasks', JSON.stringify(tasks));
taskInput.value = '';
loadTasks();
}
});
</script>
</body>
</html>
En este ejemplo estamos haciendo una lista de tareas, una de las grandes ventajas de esta tecnología es que nos permite hacer peticiones sin necesidad de hacer esto con JS, si te fijas en la siguiente línea:
<button hx-post="/add" hx-target="#taskList" hx-swap="outerHTML">Agregar</button>
Tenemos dos propiedades muy particulares, que no son propias de HTML sino de HTMX , y es que agregando la propiedad hx-post="/add" es que podemos hacer peticiones a un endpoint, y la respuesta la podemos guardar en otro elemento, esto lo hacemos con el atributo hx-target="#taskList", con lo que le digo a HTMX que guarde la respuesta en el elemento con el id taskList.
Esta nos podría servir para poder traer o enviar datos de una aplicación sencilla, como te mencionaba al principio, por ejemplo un blog, aunque con esto dudaría qué tan beneficioso puede llega a ser esto, porque si hablamos de una app sencilla, hacerla estática puede ser mucho mucho más beneficiosa a nivel de SEO y de rendimiento, porque aunque podamos trabajar de manera más fácil haciendo peticiones de esta manera, cuando tengamos que traer datos desde una API parece ser algo sencillo, pero puede terminar siendo algo que se habla mucho, que es tener que cargar la menor cantidad de JS en el cliente, con temas como Server Side Rendering o lo que hacen nuevos frameworks de JS.
Vamos a un ejemplo para traer datos:
EJEMPLO 2: Consumiendo la Poke API
Este es un ejemplo más sencillo, pero veremos cómo podemos traer fácilmente datos usando la Poke API:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://unpkg.com/htmx.org@1.9.6"></script>
<body>
<div hx-get="https://pokeapi.co/api/v2/pokemon/ditto" hx-target="#response">
Cargar Pokemon
</div>
<div id="response"></div>
</body>
</html>
En esta podemos ver cómo guardamos la respuesta de hacer un get de la Poke API en el DOM, por supuesto esta nos llega como un JSON, y es así como lo guarda HTMX en nuestros nodos HTML, aquí lo importante es ver lo fácil que es hacer peticiones y agregarle eventos a nuestros elementos HTML con unas propiedades en nuestras etiquetas, esto claro que tendríamos que usar los atributos que nos ofrece HTMX para poder capturar los resultados de la petición y usar directamente JavaScript para poder manipular los elementos del DOM
Per esto comentaba que no sé hasta qué punto es conveniente usar esta herramienta, que para practicar y hacer algunos proyectos sencillos está excelente, pero para construir una aplicación completa es lo más complicado con este tipo de herramientas, que con un fetch podemos realizar con JS o cen un framework que es que podemos hacer todo del lado del servidor y de esta manera tener aplicaciones mucho más optimizadas y con un mejor posicionamiento en los motores de búsqueda.
Hay mucho que explorar de esta biblioteca de para hacer aplicaciones web y mucho más que experimentar, si quieres adentrarte mucho más a esta te dejaré la documentación oficial: HTMX ya que es interesante, si quieres comenzar a adentrarte en el tema de HTML, te dejaremos también nuestro curso: HTML5: sin fronteras y si ya llevas mucho más avanzado, te dejaremos los cursos: Aprende Javascript, HTML5, CSS3 y NodeJS desde cero y React – Guía definitiva: hooks, router, redux, next + Proyectos.
Te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, y además te invitamos al siguiente enlace donde vas a poder obtener un descuento en tu primer año a sólo $49.90 usando el cupón PRIMERA_VEZ al momento de realizar tu pago
O igualmente puedes optar por cada curso de manera individual en Udemy.
Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter, Instagram y Tiktok, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.
¡Hasta la próxima!, y chao mundo
Comments (4)
Mariosays:
diciembre 16, 2023 at 4:10 pmYa es bastante cansado leer por todas partes que htmx (o probablemente) es la evolución de html, cuando esto, absolutamente de ninguna forma es o será así. HTMX al final del día no deja de ser un framework más del tipo alpinejs, porque sigue usando un recurso JS para su implementación y uso, contrario a HTML plano. Además, la intención de HTML siempre ha sido dar estructura a los sitios web y mantener la interactividad de forma limitada a los pocos elementos que la contienen (como details o select) e incluso a esos pocos elementos hay que dotarlos de funcionalidad con JS. Así que no, HTMX no es, ni será una evolución de HTML ni se convertirá en ningún standar a futuro (cómo muchos lo piden).
Gabriel Hernándezsays:
diciembre 19, 2023 at 11:02 amAsí es, creo que está interesante, pero a mi parecer yo prefiero tener el JS por separado, siento que tengo más control y la división de responsabilidades me parece mucho mejor. Es interesante todo lo que sale, y quién sabe que pueda ser de esto en el futuro, pero es interesante
William Garcíasays:
marzo 26, 2024 at 5:39 pmAcabo de enterarme de HTMX y quise buscarlo en Google. Me alegró ver que apareció la página de HolaMundo de primera después de la página oficial. Buen contenido!
Julian Lassosays:
junio 20, 2024 at 10:44 pmNo sé por qué ese tema me hace recordar a PHP…. pero bueno, a mí en lo particular, me gusta tener la lógica separada de la presentación