HTMX: Una Nueva Era de Potencial en Desarrollo Web
HTMX se ha consolidado como una biblioteca de JavaScript bien conocida, revolucionando la manera en que manejamos la lógica de aplicaciones web dinámicas directamente en HTML. ¡Después de más de cuatro años de desarrollo, finalmente se lanzó HTMX 2.0 en junio de 2024!
Esta nueva versión no solo trae consigo mejoras impresionantes, sino que también introduce un soporte optimizado para Web Components, cumplimiento de estándares HTTP, y una gestión de extensiones mejorada.
.png "HTMX: Potencial revolucionario en el desarrollo web")
En este artículo, desglosaremos por qué era imperativo un nuevo lanzamiento de HTMX, exploraremos las actualizaciones clave de la versión 2.0 y te guiaremos en la migración desde la versión 1.0.
Como se abordó en nuestra guía dedicada, HTMX es una biblioteca de JavaScript ligera que integra AJAX, WebSockets, transiciones CSS y Eventos Enviados por el Servidor directamente en HTML.
El objetivo subyacente de este proyecto es permitir la creación de aplicaciones web dinámicas sin necesidad de un framework de JavaScript. Compara HTMX con Vue y React, y verás la diferencia.
Desde su creación, HTMX ha cosechado un éxito notable, con su repositorio oficial en GitHub acumulando miles de estrellas en apenas unos años. La gráfica a continuación ilustra el impresionante crecimiento del repositorio HTMX en términos de estrellas en GitHub:
La ascensión de HTMX fuente: star-history.com.
Sin embargo, la versión 1.0 de HTMX presentaba algunas limitaciones y comportamientos no estándar que requerían atención.
Por ejemplo, carecía de un soporte completo para Web Components y permitía, por defecto, solicitudes AJAX de dominio cruzado. Dada la rápida ascensión en popularidad de HTMX, se hacía necesaria una versión más robusta y estable.
Durante los últimos meses, el equipo de HTMX escuchó atentamente los comentarios de los usuarios, incorporándolos en esta nueva versión estable. Finalmente, el 17 de junio de 2024, lanzaron HTMX 2.0.
{getToc} $title={Tabla de Contenidos} $count={Boolean} $expanded={Boolean}
HTMX 2.0: ¿Qué hay de nuevo?
Es momento de explorar todos los cambios, actualizaciones y nuevas características que presenta HTMX 2.0.
Manejo de Parámetros en Solicitudes HTTP DELETE
En HTMX 1.0, las solicitudes HTTP DELETE desde atributos hx-delete incluían parámetros de solicitud en un cuerpo codificado de formulario. El problema radica en que, de acuerdo con la especificación HTTP, el método DELETE debe emplear parámetros de consulta como en las solicitudes GET.
Para cumplir con esa especificación, HTMX 2.0 ahora establece parámetros de consulta para las solicitudes DELETE realizadas con hx-delete.
Migración de Extensiones
HTMX soporta un mecanismo de extensión que permite personalizar el comportamiento de la biblioteca. Puedes definir extensiones en JavaScript mediante la función htmx.defineExtension() y utilizarlas a través del atributo hx-ext.
En la versión 1.0, algunas extensiones clave mantenidas por el equipo de HTMX formaban parte del paquete de la biblioteca htmx. Ahora, todas las extensiones han sido trasladadas de la biblioteca central a sus respectivos repositorios dedicados. Por lo tanto, todas las extensiones ahora se versionan de manera individual y deben instalarse por separado.
Deprecación de hx-sse
El atributo hx-sse de HTMX 1.0, utilizado para trabajar con Eventos Enviados por el Servidor, ha sido desaprobado. A partir de HTMX 2.0, este atributo ha sido reemplazado por la extensión sse equivalente.
Deprecación de hx-ws
Igualmente, el atributo hx-ws para trabajar con Web Sockets en HTML ahora es obsoleto. Este atributo ha sido reemplazado por la correspondiente extensión ws en HTMX 2.0.
Nueva Sintaxis hx-on
Los atributos hx-on* permiten incrustar scripts de JavaScript en línea para abordar eventos específicos directamente en un elemento HTML. En HTMX 1.0, podías especificar el atributo hx-on con una sintaxis más larga, pero en HTMX 2.0, el atributo hx-on ahora solo soporta una sintaxis más sencilla.
Nuevos Valores Predeterminados
A continuación, se presenta una lista de configuraciones predeterminadas que cambiaron de HTMX 1.0 a HTMX 2.0:
htmx.config.scrollBehaviorcambió de 'smooth' a 'instant'.htmx.config.selfRequestsOnlycambió de false a true.
Nueva API swap()
La función interna selectAndSwap() ha sido reemplazada por el método más confiable swap().
Soporte Mejorado para Web Components
La mejora más significativa en HTMX 2.0 es el apoyo optimizado para Web Components. Con la versión 2.0, ahora puedes integrar HTMX con Web Components sin esfuerzo, incluso aquellos que utilizan shadow DOM.
Guía de Migración: De HTMX 1.0 a HTMX 2.0
La migración de HTMX 1.0 a 2.0 requiere poco esfuerzo. Aun así, hay algunos cambios importantes que debes tener en cuenta:
- Las extensiones ahora deben cargarse como scripts individuales en tus páginas HTML.
- Si utilizas los atributos obsoletos hx-ws y hx-sse, actualízalos a sus extensiones equivalentes.
- Presta atención a los nuevos valores predeterminados.
- Las solicitudes HTTP DELETE ahora manejan parámetros de consulta en lugar de un cuerpo codificado de formulario.
HTMX es una biblioteca impresionante que puede transformar tu flujo de trabajo en desarrollo web.
.png&description=HTMX: Una Nueva Era de Potencial en Desarrollo Web){kind=link}