HTMX es una herramienta optimizada para frameworks de desarrollo web centrados en el servidor como Django, que reduce la complejidad de JavaScript y permite manejar solicitudes Ajax a través de atributos HTML, proporcionando una funcionalidad simple pero poderosa. En esta entrega, exploraremos la relación entre HTMX y Ajax, y la diferencia entre HTMX y React, además de conocer la ejemplo de funcionamiento de las solicitudes Ajax y HTMX para entender el uso real de HTMX.

Comparación entre HTMX y React en el desarrollo web dinámico

Relación entre HTMX y Ajax

HTMX utiliza solicitudes Ajax internamente. Cuando el navegador detecta los atributos HTMX (por ejemplo, hx-get, hx-post), genera una solicitud Ajax y inserta la respuesta del servidor en los elementos HTML del cliente. En este proceso, los desarrolladores no necesitan escribir complejos códigos JavaScript.

Flujo de solicitudes Ajax de HTMX

  1. Los atributos HTML (por ejemplo, hx-get, hx-post) generan solicitudes Ajax.
  2. El servidor procesa la solicitud y devuelve los datos necesarios.
  3. HTMX inserta los datos de respuesta en los elementos HTML (por ejemplo, hx-target).
  4. Las actualizaciones adicionales del DOM se realizan automáticamente.

Diferencias entre HTMX y React

HTMX y React pueden implementar páginas web dinámicas, pero su enfoque es completamente diferente.

Característica HTMX React
Método de renderizado Renderización del lado del servidor (SSR) Renderización del lado del cliente (CSR)
Gestión del estado El servidor gestiona el estado El cliente gestiona el estado
Complejidad Configuración simple, poco código Alta configuración y cantidad de código
Dependencia de JavaScript Casi nula Obligatoria
Proyectos adecuados Aplicaciones web simples o centradas en el servidor SPA complejas

Ejemplo de operación de solicitudes Ajax y HTMX

Usando atributos HTMX en HTML

<button hx-post="/like/" hx-trigger="click" hx-target="#like-count">
    Me gusta
</button>
<div id="like-count">0</div>

Manejando solicitudes Ajax en la vista de Django

from django.http import JsonResponse

def like_post(request):
    # Procesar la cantidad de 'me gusta' en el servidor
    likes = 1  # Datos de ejemplo
    return JsonResponse({'likes': likes})

Resultados

  1. Cuando el usuario hace clic en el botón de "me gusta", se envía una solicitud POST a /like/.
  2. El servidor devuelve datos JSON: {'likes': 1}
  3. HTMX actualiza automáticamente el contenido del elemento #like-count.

Concluyendo este episodio

HTMX es una herramienta que simplifica el manejo de solicitudes Ajax y potencia el enfoque de desarrollo web centrado en el servidor. En proyectos que no requieren renderización del cliente pesada y complicada como React o Vue.js, HTMX puede ser una alternativa poderosa y flexible.

En la próxima entrega, exploraremos las configuraciones necesarias para integrar Django y HTMX, y detallaremos el proceso para implementar HTMX en el proyecto. ¡No se lo pierdan!