boosting

Htmx admite el «boosting» de anclajes y formularios HTML regulares con el atributo hx-boost. Este atributo convertirá todas las etiquetas y formularios de anclaje en solicitudes AJAX que, de forma predeterminada, apuntan al cuerpo de la página.

<div hx-boost="true">
    <a href="/blog">Blog</a>
</div>

La etiqueta de anclaje en este div emitirá una solicitud AJAX GET a /blog e intercambiará la respuesta en la etiqueta del cuerpo <body>.

Progressive Enhancement / Mejora progresiva

Una característica de hx-boost es que si javascript no está habilitado: los enlaces y formularios continúan funcionando, simplemente no usan solicitudes ajax. Esto se conoce como mejora progresiva y permite que un público más amplio utilice la funcionalidad de su sitio.

También se pueden adaptar otros patrones htmx para lograr una mejora progresiva, pero requerirán más reflexión.

Considere el ejemplo de búsqueda activa. Tal como está escrito, alguien que no tenga javascript habilitado, no podrá usar esta función. Esto se hace por simplicidad, para mantener el ejemplo lo más breve posible.

<input class="form-control" type="search" 
    name="search" placeholder="Begin typing to search users..." 
    hx-post="/search" 
    hx-trigger="keyup changed delay:500ms, search" 
    hx-target="#search-results" 
    hx-indicator=".htmx-indicator"
>

Sin embargo, puede envolver la entrada mejorada de htmx en un elemento de formulario <form>:

<form action="/search" method="POST">
    <input class="form-control" type="search" 
        name="search" placeholder="Begin typing to search users..." 
        hx-post="/search" 
        hx-trigger="keyup changed delay:500ms, search" 
        hx-target="#search-results" 
        hx-indicator=".htmx-indicator"
    >
</form>

Con esto en su lugar, los clientes habilitados para javascript aún obtendrían la buena experiencia de usuario de búsqueda activa, pero los clientes no habilitados para javascript podrían presionar la tecla Intro y seguir buscando. Aún mejor, también podría agregar un botón «Buscar». Luego, deberá actualizar el formulario con una publicación hx que refleje el atributo de acción, o tal vez usar hx-boost en él.

Debería verificar en el lado del servidor el encabezado HX-Request para diferenciar entre una solicitud regular y una impulsada por htmx, para determinar exactamente qué representar para el cliente.

Se pueden adaptar otros patrones de manera similar para lograr las necesidades de mejora progresiva de su aplicación.

Como puede ver, esto requiere más pensamiento y más trabajo. También gobierna alguna funcionalidad completamente fuera de los límites. Usted, el desarrollador, debe realizar estas compensaciones con respecto a los objetivos y la audiencia de su proyecto.

La accesibilidad es un concepto íntimamente relacionado con la mejora progresiva. El uso de técnicas de mejora progresiva como hx-boost hará que su aplicación htmx sea más accesible para una amplia gama de usuarios.

Las aplicaciones basadas en htmx son muy similares a las aplicaciones web normales que no utilizan AJAX porque htmx está orientado a HTML.

Como tal, se aplican las recomendaciones normales de accesibilidad de HTML. Por ejemplo:

  • Use HTML semántico tanto como sea posible (es decir, las etiquetas correctas para las cosas correctas)
  • Asegúrese de que el estado de enfoque sea claramente visible
  • Asociar etiquetas de texto con todos los campos de formulario
  • Maximice la legibilidad de su aplicación con fuentes apropiadas, contraste, etc.