Cómo crear una aplicación web sin framework pesado usando HTMX
Crear aplicaciones web modernas no siempre requiere utilizar frameworks complejos como React o Angular. Con HTMX, HTML y un lenguaje de backend como Python, PHP o C#, puedes desarrollar interfaces dinámicas con menos JavaScript y una estructura más sencilla.
¿Qué es HTMX?
HTMX es una biblioteca de JavaScript que permite agregar interactividad a una página web mediante atributos HTML. Con ella puedes actualizar partes de una interfaz, enviar formularios, realizar búsquedas y cargar información sin recargar toda la página.
Su principal ventaja es que permite trabajar directamente con HTML, mientras el servidor se encarga de procesar las operaciones y devolver el contenido actualizado.
1. Preparar el proyecto
Para comenzar, necesitas un editor como Visual Studio Code, un navegador y un servidor backend. Puedes utilizar ASP.NET Core, Flask o Django, dependiendo de tus conocimientos y necesidades.
HTMX se puede incorporar mediante un CDN, sin instalar un entorno de desarrollo complejo:
<script src="https://unpkg.com/htmx.org@2.0.8"></script>También puedes descargar la biblioteca y alojarla localmente para tener mayor control sobre sus dependencias.
2. Crear una interfaz interactiva
Imagina que quieres construir una aplicación que muestre información sin actualizar toda la página. Con HTMX, puedes crear un botón que solicite contenido al servidor:
<button
hx-get="/mensaje"
hx-target="#resultado"
hx-swap="innerHTML">
Cargar mensaje
</button>
<div id="resultado">
Aquí aparecerá el mensaje.
</div>Cuando el usuario pulsa el botón, HTMX realiza una petición GET a /mensaje. La respuesta del servidor se inserta dentro del elemento identificado como resultado.
Así puedes implementar interacciones útiles sin escribir código JavaScript para gestionar manualmente las peticiones y modificar el DOM.
3. Conectar HTMX con el backend
HTMX no reemplaza al backend: trabaja junto a él. El servidor recibe las solicitudes, ejecuta la lógica de negocio y devuelve HTML.
Por ejemplo, con ASP.NET Core puedes crear un endpoint que responda con un fragmento HTML:
app.MapGet("/mensaje", () =>
Results.Content(
"<p>¡Contenido cargado correctamente!</p>",
"text/html"
)
);Este ejemplo devuelve el contenido que HTMX mostrará en la página. En una aplicación real, el endpoint podría consultar una base de datos o procesar información antes de responder.
4. Construir funciones reales
Una vez comprendas el funcionamiento básico, puedes desarrollar aplicaciones completas con funcionalidades como:
- Formularios dinámicos: enviar datos y mostrar resultados sin recargar la página.
- Búsquedas en tiempo real: filtrar registros mientras el usuario escribe.
- Tablas interactivas: actualizar listados, paginar resultados y eliminar registros.
- Paneles administrativos: mostrar estadísticas y actualizar secciones específicas.
- Validaciones: presentar mensajes de error generados por el servidor.
Además, puedes combinar HTMX con CSS tradicional o Tailwind CSS para crear interfaces atractivas y adaptables a dispositivos móviles.
5. Ventajas y limitaciones
HTMX reduce la cantidad de JavaScript necesario y permite mantener gran parte de la lógica en el servidor. Esto puede simplificar el desarrollo, facilitar el mantenimiento y aprovechar tecnologías backend que ya conoces.
Sin embargo, no elimina todas las necesidades del frontend. Para aplicaciones con interacciones gráficas muy complejas, edición avanzada en tiempo real o estados compartidos entre muchos componentes, un framework especializado podría resultar más conveniente.
Crear una aplicación web sin un framework pesado es posible utilizando HTML, HTMX y un backend bien estructurado. Esta combinación resulta especialmente útil para sistemas de gestión, paneles administrativos, aplicaciones CRUD y herramientas empresariales.
La mejor forma de aprender es comenzar con una aplicación pequeña, como una lista de tareas o un registro de clientes, e incorporar progresivamente formularios, búsquedas y actualizaciones parciales. De esta manera, podrás construir soluciones funcionales con menos complejidad y concentrarte en lo realmente importante: resolver las necesidades del usuario.
