Home Northwind

jueves, 5 de junio de 2025

Haz grandes cosas con HTMX

Publicadas por Carlos Juan a la/s 7:57 p.m.

 # 😵‍💫 ¿Nos estamos complicando demasiado?

No sé si te ha pasado, pero últimamente siento que la programación web se ha ido de las manos.

Para hacer un simple **TODO list**, algunos tutoriales te piden:

  • React
  • Next.js
  • Tailwind
  • TypeScript
  • Zustand
  • Prisma
  • y no sé qué más...

¿De verdad necesitamos todo eso solo para agregar tareas y marcarlas como hechas?

Claro, estas herramientas tienen su lugar. Son potentes, escalables y están bien hechas. 

Pero para muchas apps del día a día, no necesitamos todo eso.

¿no será que estamos sobre-ingenierizando todo?


Cómo HTMX me devolvió la alegría de programar interfaces web

Con solo HTML, unas vistas en Django, y un poco de lógica en el backend, pude hacer cosas como:

  • Filtros combinados (por ejemplo, búsqueda + selección con `<select>`).  
  • Paginación dinámica con botones « Anterior | Siguiente ».  
  • Formularios AJAX que se envían sin recargar la página.  
  • Indicadores de carga mientras se hace la consulta.  
  • Toasts o alertas al estilo SweetAlert.


Y lo mejor: casi sin escribir JavaScript personalizado.  

La interactividad la manejo con atributos como `hx-get`, `hx-post`, `x-data`, `x-show`, etc.

Sí, Alpine.js es JavaScript, pero en una forma divertida, declarativa, y que no me hace abrir mil archivos `.js`.

Porque seamos sinceros:  

no se puede vivir sin JavaScript, pero si lo tengo que escribir, mínimo que sea divertido.


¿Qué es HTMX?

HTMX es una pequeña librería JS que te permite hacer cosas modernas usando solo HTML. Literalmente.

- En lugar de hacer `fetch()` o `axios`… usas `hx-get`.
- En lugar de `addEventListener()`… usas `hx-trigger`.
- En lugar de `innerHTML =`… usas `hx-target`.


Y lo mejor de todo: HTMX deja de forzarte a usar JSON para todo. 

Puedes devolver HTML directamente desde tu backend y reemplazar fragmentos en el DOM. Así de simple.

¿HTMX compite con TALL y Blazor?

Sí compite... en el terreno de la simplicidad y la experiencia del desarrollador:

HTMX, TALL (Laravel + Livewire) y Blazor Server ofrecen formas de construir interfaces reactivas sin una SPA completa.



Conclusión

HTMX es como si el HTML hubiera renacido: moderno, ágil, expresivo.

Si sentís que el stack moderno es demasiado para tareas simples, o que terminás escribiendo más configuración que funcionalidad…


dale una oportunidad al TAPH Stack (Tailwind, Alpine.js, Python/Django, HTMX).

Porque programar debería ser divertido. No un máster en Webpack y Vite para poder mostrar una tabla.


Sé que cada stack tiene su lugar, y no todo es blanco o negro. Pero si este post te hizo pensar o te devolvió la curiosidad por lo simple… misión cumplida. 


Ejemplos de HTMX con Django

  1. django-htmx
    Una extensión oficial para integrar HTMX con Django. Incluye documentación detallada y ejemplos básicos para comenzar.

  2. django-htmx-patterns
    Este repositorio presenta patrones comunes para usar HTMX con Django, incluyendo validación de formularios y modales.

  3. django-htmx-examples
    Una colección de ejemplos prácticos que replican los patrones de la documentación oficial de HTMX, adaptados a Django.

  4. django-htmx-intro
    Un proyecto introductorio que muestra cómo mejorar un formulario de Django utilizando HTMX para una experiencia más dinámica.

  5. django-htmx-fun
    Una aplicación de diario que demuestra cómo HTMX puede hacer que las aplicaciones Django sean más interactivas sin necesidad de JavaScript adicional.

  6. django-htmx-demo
    Demuestra cómo implementar varios ejemplos de la documentación de HTMX dentro de un proyecto Django.

  7. django-htmx-quickstart
    Una plantilla de inicio rápido que combina Django, HTMX, Alpine.js y TailwindCSS para prototipado ágil.

Recursos del TAPH Stack

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)