Simplificando el desarrollo web dinámico con Django y HTMX (Parte 3): Integración con Django

La robusta filosofía de "Pilas Incluidas" de Django, combinada con la astuta forma en que HTMX aprovecha los fragmentos de HTML recién generados por el backend, crea una sinergia perfecta.

En esta publicación, la tercera parte de nuestra serie Simplificando el desarrollo web dinámico con Django y HTMX, exploraremos dos métodos específicos para integrar HTMX en un proyecto Django real.

Imagen de Django y HTMX combinados

1. Uso directo sin paquetes de terceros

Este es el método más puro y ligero. Permite usar las funciones de HTMX al instante, simplemente añadiendo una línea de script en su plantilla HTML, sin procesos de instalación complejos.

Métodos de instalación

La documentación oficial de HTMX sugiere varios métodos de instalación, pero el más rápido es, sin duda, el uso de un CDN.

  • Uso de CDN (el más rápido): Simplemente inserte el siguiente código dentro de la etiqueta <head> de su base.html:
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js" integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" crossorigin="anonymous"></script>
  • Descarga directa: Si la seguridad o un entorno sin conexión son cruciales, puede descargar htmx.min.js, colocarlo en la carpeta static de su proyecto y especificar la ruta.
  • npm: Si está utilizando un sistema de compilación, puede instalarlo con el comando npm install htmx.org.

Acceder a la documentación oficial de instalación de HTMX

2. Uso del paquete django-htmx

En el ecosistema de Django, existe una librería dedicada que ayuda a usar HTMX de una manera más "a lo Django": se trata de django-htmx.

Instalación y configuración

Siga los pasos a continuación según la documentación oficial de django-htmx.

  1. Instalación del paquete

    bash python -m pip install django-htmx

  2. Registro en INSTALLED_APPS

    python INSTALLED_APPS = [ ..., "django_htmx", ..., ]

  3. Añadir Middleware

    python MIDDLEWARE = [ ..., "django_htmx.middleware.HtmxMiddleware", ..., ]

¿Qué tan conveniente es django-htmx?

Es cierto que uno podría preguntarse si realmente es necesario instalar un paquete adicional como django-htmx, dado que HTMX es una herramienta bastante sencilla por sí misma. De hecho, las funcionalidades principales pueden implementarse sin este paquete. Sin embargo, al examinar las características de conveniencia que ofrece, se comprende por qué muchos desarrolladores optan por utilizarlo.

Según la documentación oficial de django-htmx, su característica principal es que extiende el objeto request a través de un middleware. Al registrar el middleware, se crea un atributo request.htmx, que permite acceder fácilmente a la siguiente información detallada:

  • Verificación de la solicitud: boosted, current_url, current_url_abs_path, history_restore_request, prompt
  • Control de objetivos y disparadores: target, trigger, trigger_name, triggering_event

Además, soporta dos etiquetas especiales que facilitan el trabajo con plantillas:

  • {% htmx_script %}: La etiqueta principal que inserta el script de la librería HTMX.
  • {% django_htmx_script %}: Una etiqueta auxiliar que añade scripts de extensión para depuración, útil cuando HTMX se ha incluido directamente desde un CDN o como archivo estático.

Un aspecto particularmente impresionante son los 11 métodos útiles incluidos en el módulo django_htmx.http. Entre ellos, trigger_client_event() destaca claramente. Permite configurar fácilmente el encabezado HX-Trigger en el lado del servidor y enviarlo con la respuesta, lo que posibilita controlar eventos del cliente directamente desde el servidor. Una vez que te acostumbras, se convierte en una herramienta potente y de uso muy frecuente.

Por supuesto, todas estas funcionalidades pueden ser implementadas por el desarrollador creando middlewares o manipulando encabezados directamente. Por lo tanto, si prefiere un enfoque más manual, como yo, quizás no lo considere un paquete esencial.

En conclusión, django-htmx no es un paquete "imprescindible", pero sin duda "hace que el desarrollo sea notablemente más cómodo". La cantidad de documentación oficial no es extensa, por lo que con una o dos horas de dedicación será suficiente para comprenderlo. Decida si implementarlo o no según la naturaleza de su proyecto.

Conclusión

Si solo planea implementar unos pocos botones de alternancia o funcionalidades de 'me gusta', el uso directo (CDN) será suficiente. Evitar dependencias innecesarias puede ser lo más económico.

Sin embargo, si el proyecto crece en escala y se encuentra a menudo en situaciones donde una única vista debe manejar tanto páginas completas como parciales, entonces django-htmx es una opción a considerar.

¿Qué enfoque le resulta más atractivo? De hecho, dado que django-htmx no es un paquete pesado, sino bastante ligero, la respuesta podría ser simplemente instalarlo y usarlo sin pensarlo demasiado. Es más bien una cuestión de la preferencia y el estilo del desarrollador: 'Minimizaré los paquetes de dependencia' o 'Prefiero hacer la mayoría de las cosas yo mismo'. Creo que se reduce a la personalidad del desarrollador.

No obstante, sea cual sea su elección, con HTMX podrá disfrutar de la simplicidad de HTML, liberándose de JavaScript.

Artículos relacionados :