Aunque hay muchos lenguajes de programación aceptables, el desarrollo web se está asentando en unas cuantas tecnologías fiables. Esto es especialmente cierto en el caso de WordPress.
JavaScript aún está en fase de maduración para la plataforma, aunque las expectativas de los usuarios en cuanto a sitios web dinámicos e interactivos siguen vigentes. Los frameworks pueden salvar esa distancia, pero la complejidad de algunos de los más populares puede obstaculizar tu desarrollo. Aquí es donde entra HTMX. Esta ligera biblioteca promete ofrecer usabilidad y simplificación a la hora de crear experiencias web modernas.
En este artículo vamos a explorar cómo HTMX puede integrarse en tu propio flujo de trabajo de desarrollo de WordPress. A lo largo de todo el artículo, aprenderás a utilizar esta potente y accesible forma de crear contenido dinámico e interactividad.
Hablaremos de qué es HTMX, por qué está ganando adeptos y cómo se conecta con WordPress. También obtendrás una guía práctica sobre la integración y el uso de HTMX con WordPress.
Qué es HTMX
En pocas palabras, HTMX es una biblioteca de JavaScript que amplía el Lenguaje de Marcado de Hipertexto Estándar (HTML) sin la necesidad de escribir JavaScript vanilla o de framework. Estas extensiones te permiten acceder también a otras tecnologías:
- JavaScript Asíncrono y XML (AJAX). HTMX utiliza AJAX para realizar peticiones «asíncronas» al servidor. Esto te permite realizar actualizaciones parciales de la página sin necesidad de recargarla por completo.
- WebSockets. Puedes establecer conexiones WebSocket y permitir la comunicación bidireccional en tiempo real entre el navegador y el servidor.
- Eventos enviados por el servidor (SSE). Esta tecnología permite al servidor enviar datos al navegador. Desde allí, puedes utilizar HTMX para realizar actualizaciones de la página en tiempo real.
- Transiciones CSS. Puedes integrarte con transiciones CSS, lo que te permite implementar actualizaciones suaves y animadas en tu sitio.
En esencia, HTMX pretende simplificar la forma de crear aplicaciones web dinámicas e interactivas. Su funcionalidad clave es cómo puede hacer GET, POST, PUT, PATCH, y DELETE peticiones HTTP desde elementos HTML. Esto significa que puedes procesar actualizaciones parciales de la página de forma fluida, como si fuera una aplicación móvil. En conjunto, HTMX es un potente conjunto de herramientas para ayudarte a crear una experiencia web dinámica sin necesidad de montones de código JavaScript.
Por qué todos hablamos de HTMX
Recientemente ha habido un gran revuelo en torno a HTMX, y las búsquedas de la biblioteca se han disparado en los últimos cinco años.
Este aumento de popularidad se debe en parte a la visibilidad en las redes sociales y en los foros de desarrolladores. Sin embargo, HTMX tiene varios factores que lo convierten en una atractiva opción de desarrollo.
- Simplicidad. Dado que HTMX utiliza la conocida sintaxis HTML para ayudarte a crear aplicaciones web dinámicas e interactivas, es muy fácil de implementar y no tiene casi ninguna de las complejidades de los típicos frameworks JavaScript.
- Rendimiento. Al minimizar la cantidad de JavaScript necesaria, HTMX puede ofrecer tiempos de carga más rápidos y mejor rendimiento que otros frameworks, especialmente para dispositivos móviles.
- Renderización del lado del servidor. La renderización del lado del servidor es genial si quieres mejorar los tiempos de carga iniciales de la página y la optimización para motores de búsqueda (SEO). HTMX incorpora esto en su conjunto de funciones.
- Mejora progresiva. Esto significa añadir interactividad a los sitios web sin romper la funcionalidad para quienes desactivan JavaScript. HTMX funciona según estos principios, por lo que hay disponible un beneficio de accesibilidad.
Además, a diferencia de algunos frameworks más grandes, HTMX no requiere un proceso de construcción o una cadena de herramientas complejas. Combinado con una curva de aprendizaje mucho menor, integrar la biblioteca en tus proyectos es más fácil.
Estas ventajas, a su vez, conducen a un mayor debate y adopción de HTMX. Si buscas una solución más sencilla para crear experiencias web interactivas, esta biblioteca podría ser tu elección.
La arquitectura de WordPress en relación con JavaScript
La historia de WordPress con JavaScript cogió ritmo a partir del State of the Word 2015, cuando Matt Mullenweg concluyó con la frase: «Aprende JavaScript profundamente».
El camino típico para los desarrolladores de WordPress era investigar la necesidad de componentes interactivos y dinámicos en un sitio web. En la mayoría de los casos, jQuery ha sido el framework JavaScript de WordPress. Incluso el popularísimo sitio web Harvard Gazette se basa en jQuery:
Por eso, WordPress utiliza jQuery por defecto. Además, muchas funciones del core, plugins y temas lo utilizan de manera generalizada. Este enfoque es coherente y está ampliamente soportado.
Sin embargo, a medida que evoluciona el desarrollo web, también lo hace el enfoque de WordPress respecto a JavaScript. La introducción del Editor de Bloques vino acompañada de un cambio hacia el uso del framework React para construir interfaces de usuario, especialmente en el panel de control de WordPress.
Ventajas e inconvenientes de utilizar la implementación actual de JavaScript de WordPress
Esto significa que hay una mezcla de frameworks soportados en el core de WordPress. Esto tiene algunos puntos positivos y algunos inconvenientes. Primero, los puntos positivos:
- Existe una amplia compatibilidad tanto para React como para jQuery. Con el primero, es un framework potente y popular. Con el segundo, tiene una larga asociación con WordPress.
- Muchos desarrolladores están familiarizados con los frameworks porque React y jQuery son populares. Además, puedes encontrar más recursos para aprender y solucionar problemas de ambos.
- WordPress ofrece soporte integrado para AJAX a través de
wp_ajax.
Sin embargo, estos pros tienen varios aspectos negativos que los equilibran:
- Depender de jQuery afecta al rendimiento de tu sitio, y puede que no necesites el framework para algunas aplicaciones.
- No todas las características y funcionalidades «modernas» de JavaScript están implementadas en WordPress por motivos de compatibilidad y seguridad. Esto podría suponer un problema si hay algo en particular que te gustaría construir.
- Con la incorporación de React a áreas de WordPress (como los editores de bloques y de sitios), tienes una curva de aprendizaje mayor que nunca.
La arquitectura JavaScript actual de WordPress es adecuada si tienes conocimientos de desarrollo de los frameworks recomendados o tiempo para aprenderlos. Si no es así, es probable que quieras una solución que no tenga la complejidad de los frameworks típicos, pero que proporcione una experiencia interactiva moderna en el front end. En este caso, HTMX debería ser considerado.
Por qué HTMX podría ser más adecuado para algunas tareas de desarrollo de WordPress
HTMX ofrece algunas ventajas convincentes cuando se trata del desarrollo de WordPress. Podría proporcionar un punto intermedio entre la simplicidad de jQuery y la modernidad y rendimiento de React.
Ya hemos hablado de algunos de estos aspectos, pero recapitulemos brevemente:
- El «peso» de HTMX puede tener un gran impacto en el rendimiento en comparación con jQuery y React.
- La mayoría de los desarrolladores de WordPress se consideran más expertos en HTML y PHP que en JavaScript. HTMX presenta una barrera de entrada más fácil a medida que trabajas con él, como si fuera un lenguaje de marcado.
- PHP y HTMX también funcionarán bien juntos, gracias a la renderización del lado del servidor, lo que de nuevo podría tener un impacto positivo en el rendimiento.
- A pesar de ser una biblioteca «más nueva», puedes integrar HTMX con mayor facilidad y ponerte al día sobre su funcionamiento. Esto beneficiará a tu flujo de trabajo.
Para el desarrollo de WordPress, también nos gusta la facilidad con la que puedes crear prototipos de nuevas funcionalidades para un sitio. Puedes crear rápidamente nuevas funciones complejas programando dentro del HTML existente. A partir de ahí, tienes la flexibilidad de añadir componentes React o un poco de jQuery cuando sea necesario.
Los principios de mejora progresiva de HTMX también son atractivos. La accesibilidad debe ser fundamental en tu estrategia de diseño, y HTMX puede permitirte construir interactividad sin romperla para quienes eligen desactivar JavaScript en el navegador.
Por último, una ventaja significativa de HTMX es que no requiere ninguna configuración personalizada o especial del lado del servidor. Puedes utilizar tu marcado HTMX con cualquier alojamiento, incluido Kinsta.
Dado el rendimiento de calidad de nuestros servicios de alojamiento, un sitio que utilice HTMX debería ir viento en popa. Esto repercutirá en tus métricas SEO, en las cifras de tráfico, en el tiempo de desarrollo, en el flujo de trabajo de resolución de problemas y en toda la cadena de desarrollo.
Casos de uso típicos de HTMX
Te lo hemos adelantado en la última sección, pero HTMX no será una biblioteca que utilices como sustituto directo de ninguno de los frameworks de JavaScript más conocidos. Por el contrario, funcionará mejor junto a lo que ya existe para ayudar a soportar la carga cuando sea necesario.
Esto significa que emplearás HTMX para ciertas tareas para las que jQuery y React pueden no ser óptimas. Antes de sumergirnos en la implementación de HTMX en WordPress, vamos a exponer tres escenarios comunes en los que la biblioteca podría mejorar WordPress.
Recargas parciales de página
El gran caso de uso de HTMX es cómo puedes implementar actualizaciones parciales de página con el mínimo esfuerzo. Esto podría ser muy importante para muchos desarrolladores, especialmente para maquetas y prototipos rápidos. Sin embargo, HTMX podría ofrecer resultados con calidad de producción.
Por ejemplo, podría ayudarte a implementar la funcionalidad de búsqueda en tiempo real en tu sitio:
La biblioteca de ejemplos HTMX también se adentra en la metodología para llevar a cabo actualizaciones en tiempo real en otras áreas de contenido dentro de la página. Por ejemplo, su ejemplo utiliza un formulario de contacto con una tabla de contactos disponibles que se actualizaría una vez que el usuario enviara una nueva incorporación. HTMX tiene varias formas elegantes de conseguirlo:
<div id="table-and-form">
<h2>Contacts</h2>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody id="contacts-table">
...
</tbody>
</table>
<h2>Add A Contact</h2>
<form hx-post="/contacts" hx-target="#table-and-form">
<label>
Name
<input name="name" type="text">
</label>
<label>
Email
<input name="email" type="email">
</label>
</form>
</div>
El formulario utiliza los atributos hx-post y hx-target para ampliar su objetivo. También podrías utilizar atributos HTMX para conservar las entradas del formulario tras un error u otro intento de validación que utilice actualizaciones:
<input form="binaryForm" type="file" name="binaryFile">
<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
<button type="submit">Submit</button>
</form>
Aquí, colocas la entrada del archivo binario fuera del elemento principal del formulario y utilizas los atributos hx-swap y hx-target.
Carga dinámica
Este enfoque de la actualización y carga dinámicas también puede ser adecuado para tareas más comunes. Por ejemplo, el desplazamiento infinito:
<tr hx-get="/contacts/?page=2"
hx-trigger="revealed"
hx-swap="afterend">
<td>Agent Smith</td>
<td>[email protected]</td>
<td>55F49448C0</td>
</tr>
El atributo hx-swap actúa como «listener» (oyente) del atributo hx-trigger. Cuando un usuario llegue al final de la lista, HTMX cargará la segunda página de contactos de forma infinita.
También podrías aplicar el mismo método a la funcionalidad de carga perezosa:
Esto utiliza de nuevo los atributos hx-get y hx-trigger para iniciar una transición de asentamiento htmx para cargar el gráfico utilizando un fundido lento.
Presentación de datos
No debería sorprender que el HTMX sea excelente para presentar información en pantalla utilizando elementos interactivos o dinámicos.
Por ejemplo, puedes implementar todos los tipos de filtrado de contenidos, como las selecciones de valores. En este caso, las opciones de una lista se rellenan en función de las de otra:
Incluso podrías configurar cuadros de diálogos modales o pestañas de interfaz con la misma facilidad. Esto también muestra cómo funciona HTMX junto con otras bibliotecas y frameworks, como Bootstrap:
Esta flexibilidad se extiende también a la implementación de pestañas. Hay dos formas de hacerlo: combinando JavaScript vanilla y HTMX o utilizando los principios del Hipertexto Como Motor del Estado de la Aplicación (HATEOAS):
Hay muchas más formas de utilizar HTMX para los elementos front-end del sitio, con su core en el lado del servidor. En la siguiente sección, te daremos las herramientas para crear tu propia visión dentro de WordPress.
Cómo integrar HTMX en WordPress
Si quieres añadir HTMX a tu sitio web de WordPress, la buena noticia es que es rápido y sencillo. A continuación, veremos un enfoque de tres pasos para hacerlo. No abordaremos todo el proceso y el código para desarrollar la funcionalidad para WordPress, aunque sí abordaremos todos los puntos clave que debes seguir.
Además, gran parte del proceso, especialmente el primer paso, debería ser habitual si ya has desarrollado para WordPress.
1. Agrega HTMX a tu código PHP
Como con cualquier script adicional para WordPress, debes incluir la biblioteca HTMX en el código de tu tema o plugin.
wp_enqueue_script('htmx-script', 'https://unpkg.com/[email protected]/dist/htmx.min.js', array(), '2.0.0', true);
Sin embargo, una idea objetivamente buena es envolver esta carga dentro de una función que también añada y registre un Bloque en WordPress. Por supuesto, esto depende de si tu proyecto requiere trabajar con el Editor de Bloques.
La parte final para cargar HTMX es invocar la función completa utilizando add_action. Tendrás que volver a utilizar hooks y filtros más adelante cuando trabajes con peticiones AJAX.
2. Añadir elementos HTMX a tus archivos de plantilla de WordPress
A partir de nuestros casos de uso, verás que HTMX requiere el marcado adecuado dentro del HTML para gestionar y activar las peticiones AJAX. La biblioteca utiliza los típicos atributos de petición HTTP para crear los suyos propios – GET, POST, PUSH, PATCH, y DELETE – con un prefijo hx-:
hx-post
Las peticiones AJAX de WordPress utilizan el endpoint admin-ajax. php, ¡que debes recordar! Los elementos típicos que crearás con HTMX realizarán una petición AJAX, la enviarán a un elemento de destino y, potencialmente, procesarán un trigger.
El atributo hx-target te permite especificar a dónde irá el resultado de tu solicitud. Puede ser otra página, un div específico o cualquier otra cosa. Piensa en ello como en las etiquetas de anclaje de HTML:
<input type="search"
name="search" placeholder="Search..."
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
…HTMX utiliza «natural» y «no natural» para definir una acción. Por ejemplo, submit activará un formulario, y esto es un evento de elemento natural. Para los eventos de elementos no naturales, utilizarás el atributo hx-trigger. Estos triggers pueden ser una de las partes más complejas de HTMX, aunque siguen siendo sencillos de entender.
Por ejemplo, podrías utilizar un trigger para controlar un campo de entrada:
…
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
hx-trigger="input changed delay:500ms, search"
hx-indicator=".htmx-indicator">
…Cambiar lo que haya en un campo de entrada desencadenará una actualización en otra parte de la página. Otro ejemplo: podrías querer desencadenar un evento una sola vez basándote en una acción atípica, como la entrada del cursor en una parte de la pantalla:
<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
[Here Mouse, Mouse!]
</div>
Esto podría inspirarte para crear aplicaciones como ventanas emergentes u otros cuadros de diálogos modales. Sin embargo, antes de que puedas verlas en acción, tienes que procesar la petición AJAX.
3. Gestionar las peticiones AJAX
Por último, tienes que gestionar la petición AJAX en el lado del servidor. Para WordPress, es una práctica beneficiosa almacenar todo esto en un archivo separado. Puedes llamarlo como quieras, pero ajax-functions.php es suficientemente descriptivo y claro.
Esta parte del uso de HTMX requerirá que pongas a prueba tus conocimientos de PHP. El procesamiento de tus peticiones AJAX será único para tu proyecto en particular. Es donde enlazas los atributos que nombras en tus archivos de plantilla con el procesamiento del lado del servidor.
Por supuesto, deberías hacer esto de todos modos, independientemente de si programas con HTMX, JavaScript vainilla u otra cosa. Aquí tienes un pseudocódigo que muestra cómo quedaría:
function my_search_action() {
$search_term = sanitize_text_field( $_POST['search'] );
$args = array(
's' => $search_term,
'post_type' => 'post',
'posts_per_page' => 5
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();
echo '<h2>' . get_the_title() . '</h2>';
echo '<p>' . get_the_excerpt() . '</p>';
endwhile;
else:
echo 'No results found.';
endif;
wp_reset_postdata();
wp_die();
}
Aun así, puede que esto no sea relevante o ni siquiera se parezca a la gestión AJAX de tu propio proyecto. Las mismas habilidades que utilizarás para crear plantillas de Bloque, ampliar plugins utilizando PHP, etc., te ayudarán a crear tus propios manejadores y funciones de peticiones AJAX.
Consejos para utilizar HTMX con WordPress
Aunque utilizar HTMX es una de las formas más sencillas de implementar contenido dinámico con WordPress, sigue necesitando una gestión y una atención minuciosas. También hay algunas formas de mejorar tu experiencia de desarrollo.
El primer consejo está relacionado con la «madurez» de HTMX. Ahora mismo, es una biblioteca nueva para la plataforma, por lo que no tiene el mismo nivel de integración que jQuery, por ejemplo.
HTMX tiene una gran documentación, pero no hay tantos recursos para combinar la biblioteca con WordPress. Esto significa que tendrás que ponerte manos a la obra para hacer que las cosas funcionen sin la red de seguridad de una comunidad preparada.
Uno de los grandes consejos que podemos darte es que, de momento, incorpores tu funcionalidad dentro de un plugin. Esto puede proporcionarte una estructura y una gestión más sencilla mientras compruebas si hay bugs u otros errores de integración.
Ya que hablamos de WordPress, intenta comprender cómo se conecta el archivo admin-ajax.php con el resto del ecosistema, ya que muchas interacciones lo involucrarán.
Aunque HTMX tiene un gran rendimiento, debes asegurarte de que el uso de AJAX sea lo suficientemente bajo como para que no afecte a la velocidad de carga de tu sitio ni al SEO. La depuración de peticiones también debe ser un elemento básico de tu flujo de trabajo, especialmente las métricas XMLHttpRequest (XHR) dentro de las herramientas de desarrollo de tu navegador.
Este es el registro de los datos de solicitud y respuesta, que utilizarás para depurar las solicitudes AJAX y las llamadas a la Interfaz de Programación de Aplicaciones (API). Dado que HTMX aún no tiene una estrecha integración con WordPress, la depuración puede ser una tarea más pertinente de lo que sería con otros frameworks de JavaScript.
Resumen
Para los desarrolladores de WordPress que deseen crear elementos de sitio dinámicos e interactivos sin que los complejos frameworks de JavaScript dominen su tiempo, HTMX trae una propuesta muy interesante. Te permite construir dentro de HTML y ofrece una alternativa ligera a jQuery y React, sin dejar de ofrecerte una interactividad moderna.
En la práctica, utilizarás HTMX junto a esos otros frameworks, ya que no será adecuado para todas las tareas. Aún así, es sencillo de implementar y te ofrece una forma rápida de crear prototipos de los elementos interactivos de tu sitio, e incluso podría convertirse en tu versión de producción.
¿Te parece que HTMX y WordPress son un binomio tentador? Danos tu opinión en la sección de comentarios más abajo
Deja una respuesta