Qu\u00e9 es HTMX<\/h2>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/htmx-logo.png\")
El logotipo de HTMX.<\/figcaption><\/figure>\nEn pocas palabras, HTMX<\/a> es una biblioteca de JavaScript que ampl\u00eda el Lenguaje de Marcado de Hipertexto Est\u00e1ndar (HTML)<\/a> sin la necesidad de escribir JavaScript<\/a> vanilla o de framework. Estas extensiones te permiten acceder tambi\u00e9n a otras tecnolog\u00edas:<\/p>\n\n- JavaScript As\u00edncrono y XML (AJAX).<\/strong> HTMX utiliza AJAX para realizar peticiones \u00abas\u00edncronas\u00bb al servidor. Esto te permite realizar actualizaciones parciales de la p\u00e1gina sin necesidad de recargarla por completo.<\/li>\n
- WebSockets.<\/strong> Puedes establecer conexiones WebSocket y permitir la comunicaci\u00f3n bidireccional en tiempo real entre el navegador y el servidor.<\/li>\n
- Eventos enviados por el servidor (SSE).<\/strong> Esta tecnolog\u00eda permite al servidor enviar datos al navegador. Desde all\u00ed, puedes utilizar HTMX para realizar actualizaciones de la p\u00e1gina en tiempo real.<\/li>\n
- Transiciones CSS.<\/strong> Puedes integrarte con transiciones CSS<\/a>, lo que te permite implementar actualizaciones suaves y animadas en tu sitio.<\/li>\n<\/ul>\n
En esencia, HTMX pretende simplificar la forma de crear aplicaciones web din\u00e1micas e interactivas. Su funcionalidad clave es c\u00f3mo puede hacer GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code>, y DELETE<\/code> peticiones HTTP<\/a> desde elementos HTML. Esto significa que puedes procesar actualizaciones parciales de la p\u00e1gina de forma fluida, como si fuera una aplicaci\u00f3n m\u00f3vil. En conjunto, HTMX es un potente conjunto de herramientas para ayudarte a crear una experiencia web din\u00e1mica sin necesidad de montones de c\u00f3digo JavaScript.<\/p>\nPor qu\u00e9 todos hablamos de HTMX<\/h2>\n
Recientemente ha habido un gran revuelo en torno a HTMX, y las b\u00fasquedas de la biblioteca se han disparado en los \u00faltimos cinco a\u00f1os<\/a>.<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/htmx-trends.png\")
El gr\u00e1fico de Google Trends muestra un aumento de las b\u00fasquedas de HTMX en un periodo de cinco a\u00f1os.<\/figcaption><\/figure>\nEste 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\u00f3n de desarrollo.<\/p>\n
\n- Simplicidad.<\/strong> Dado que HTMX utiliza la conocida sintaxis HTML para ayudarte a crear aplicaciones web din\u00e1micas e interactivas, es muy f\u00e1cil de implementar y no tiene casi ninguna de las complejidades de los t\u00edpicos frameworks JavaScript<\/a>.<\/li>\n
- Rendimiento.<\/strong> Al minimizar la cantidad de JavaScript necesaria, HTMX puede ofrecer tiempos de carga m\u00e1s r\u00e1pidos<\/a> y mejor rendimiento que otros frameworks, especialmente para dispositivos m\u00f3viles.<\/li>\n
- Renderizaci\u00f3n del lado del servidor. <\/strong> La renderizaci\u00f3n del lado del servidor es genial si quieres mejorar los tiempos de carga iniciales de la p\u00e1gina y la optimizaci\u00f3n para motores de b\u00fasqueda (SEO)<\/a>. HTMX incorpora esto en su conjunto de funciones.<\/li>\n
- Mejora progresiva.<\/strong> Esto significa a\u00f1adir interactividad a los sitios web sin romper la funcionalidad para quienes desactivan JavaScript. HTMX funciona seg\u00fan estos principios, por lo que hay disponible un beneficio de accesibilidad.<\/li>\n<\/ul>\n
Adem\u00e1s, a diferencia de algunos frameworks m\u00e1s grandes, HTMX no requiere un proceso de construcci\u00f3n o una cadena de herramientas complejas. Combinado con una curva de aprendizaje mucho menor, integrar la biblioteca en tus proyectos es m\u00e1s f\u00e1cil.<\/p>\n
Estas ventajas, a su vez, conducen a un mayor debate y adopci\u00f3n de HTMX. Si buscas una soluci\u00f3n m\u00e1s sencilla para crear experiencias web interactivas, esta biblioteca podr\u00eda ser tu elecci\u00f3n.<\/p>\n
La arquitectura de WordPress en relaci\u00f3n con JavaScript<\/h2>\n
La historia de WordPress con JavaScript cogi\u00f3 ritmo a partir del State of the Word 2015<\/a>, cuando Matt Mullenweg concluy\u00f3 con la frase: \u00abAprende JavaScript profundamente\u00bb.<\/p>\nEl camino t\u00edpico para los desarrolladores de WordPress era investigar la necesidad de componentes interactivos y din\u00e1micos en un sitio web. En la mayor\u00eda de los casos, jQuery<\/a> ha sido el framework JavaScript de WordPress. Incluso el popular\u00edsimo sitio web Harvard Gazette<\/a> se basa en jQuery:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/harvard-gazette.png\")
El sitio web Harvard Gazette, que utiliza WordPress y jQuery para funcionar.<\/figcaption><\/figure>\nPor eso, WordPress utiliza jQuery<\/u><\/a> por defecto. Adem\u00e1s, muchas funciones del core, plugins y temas lo utilizan de manera generalizada. Este enfoque es coherente y est\u00e1 ampliamente soportado.<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/block-editor.png\")
Mostrando la barra lateral de Bloques dentro del Editor de Bloques de WordPress.<\/figcaption><\/figure>\nSin embargo, a medida que evoluciona el desarrollo web, tambi\u00e9n lo hace el enfoque de WordPress respecto a JavaScript. La introducci\u00f3n del Editor de Bloques<\/a> vino acompa\u00f1ada de un cambio hacia el uso del framework React<\/a> para construir interfaces de usuario, especialmente en el panel de control de WordPress.<\/p>\nVentajas e inconvenientes de utilizar la implementaci\u00f3n actual de JavaScript de WordPress<\/h3>\n
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:<\/p>\n
\n- 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\u00f3n con WordPress.<\/li>\n
- Muchos desarrolladores est\u00e1n familiarizados con los frameworks porque React y jQuery son populares. Adem\u00e1s, puedes encontrar m\u00e1s recursos para aprender y solucionar problemas de ambos.<\/li>\n
- WordPress ofrece soporte integrado para AJAX a trav\u00e9s de
wp_ajax<\/code>.<\/li>\n<\/ul>\nSin embargo, estos pros tienen varios aspectos negativos que los equilibran:<\/p>\n
\n- Depender de jQuery<\/a> afecta al rendimiento de tu sitio, y puede que no necesites el framework para algunas aplicaciones.<\/li>\n
- No todas las caracter\u00edsticas y funcionalidades \u00abmodernas\u00bb de JavaScript est\u00e1n implementadas en WordPress por motivos de compatibilidad y seguridad. Esto podr\u00eda suponer un problema si hay algo en particular que te gustar\u00eda construir.<\/li>\n
- Con la incorporaci\u00f3n de React a \u00e1reas de WordPress (como los editores de bloques y de sitios), tienes una curva de aprendizaje mayor que nunca.<\/li>\n<\/ul>\n
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\u00ed, es probable que quieras una soluci\u00f3n que no tenga la complejidad de los frameworks t\u00edpicos, pero que proporcione una experiencia interactiva moderna en el front end. En este caso, HTMX deber\u00eda ser considerado.<\/p>\n
Por qu\u00e9 HTMX podr\u00eda ser m\u00e1s adecuado para algunas tareas de desarrollo de WordPress<\/h2>\n
HTMX ofrece algunas ventajas convincentes cuando se trata del desarrollo de WordPress. Podr\u00eda proporcionar un punto intermedio entre la simplicidad de jQuery y la modernidad y rendimiento de React.<\/p>\n
Ya hemos hablado de algunos de estos aspectos, pero recapitulemos brevemente:<\/p>\n
\n- El \u00abpeso\u00bb de HTMX puede tener un gran impacto en el rendimiento en comparaci\u00f3n con jQuery y React.<\/li>\n
- La mayor\u00eda de los desarrolladores de WordPress se consideran m\u00e1s expertos en HTML y PHP que en JavaScript. HTMX presenta una barrera de entrada m\u00e1s f\u00e1cil a medida que trabajas con \u00e9l, como si fuera un lenguaje de marcado.<\/li>\n
- PHP y HTMX tambi\u00e9n funcionar\u00e1n bien juntos, gracias a la renderizaci\u00f3n del lado del servidor, lo que de nuevo podr\u00eda tener un impacto positivo en el rendimiento.<\/li>\n
- A pesar de ser una biblioteca \u00abm\u00e1s nueva\u00bb, puedes integrar HTMX con mayor facilidad y ponerte al d\u00eda sobre su funcionamiento. Esto beneficiar\u00e1 a tu flujo de trabajo.<\/li>\n<\/ul>\n
Para el desarrollo de WordPress, tambi\u00e9n nos gusta la facilidad con la que puedes crear prototipos de nuevas funcionalidades para un sitio. Puedes crear r\u00e1pidamente nuevas funciones complejas programando dentro del HTML existente. A partir de ah\u00ed, tienes la flexibilidad de a\u00f1adir componentes React o un poco de jQuery cuando sea necesario.<\/p>\n
Los principios de mejora progresiva de HTMX tambi\u00e9n son atractivos. La accesibilidad debe ser fundamental en tu estrategia de dise\u00f1o, y HTMX puede permitirte construir interactividad sin romperla para quienes eligen desactivar JavaScript en el navegador.<\/p>\n
Por \u00faltimo, una ventaja significativa de HTMX es que no requiere ninguna configuraci\u00f3n personalizada o especial del lado del servidor. Puedes utilizar tu marcado HTMX con cualquier alojamiento, incluido Kinsta<\/a>.<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/kinsta-website.png\")
La p\u00e1gina de inicio de Kinsta mostrando el panel MyKinsta.<\/figcaption><\/figure>\nDado el rendimiento de calidad de nuestros servicios de alojamiento, un sitio que utilice HTMX deber\u00eda ir viento en popa. Esto repercutir\u00e1 en tus m\u00e9tricas SEO, en las cifras de tr\u00e1fico, en el tiempo de desarrollo, en el flujo de trabajo de resoluci\u00f3n de problemas y en toda la cadena de desarrollo.<\/p>\n
Casos de uso t\u00edpicos de HTMX<\/h2>\n
Te lo hemos adelantado en la \u00faltima secci\u00f3n, pero HTMX no ser\u00e1 una biblioteca que utilices como sustituto directo de ninguno de los frameworks de JavaScript m\u00e1s conocidos. Por el contrario, funcionar\u00e1 mejor junto a lo que ya existe para ayudar a soportar la carga cuando sea necesario.<\/p>\n
Esto significa que emplear\u00e1s HTMX para ciertas tareas para las que jQuery y React pueden no ser \u00f3ptimas. Antes de sumergirnos en la implementaci\u00f3n de HTMX en WordPress, vamos a exponer tres escenarios comunes en los que la biblioteca podr\u00eda mejorar WordPress.<\/p>\n
<\/div><\/kinsta-auto-toc>\nRecargas parciales de p\u00e1gina<\/h3>\n
El gran caso de uso de HTMX es c\u00f3mo puedes implementar actualizaciones parciales de p\u00e1gina con el m\u00ednimo esfuerzo. Esto podr\u00eda ser muy importante para muchos desarrolladores, especialmente para maquetas y prototipos r\u00e1pidos. Sin embargo, HTMX podr\u00eda ofrecer resultados con calidad de producci\u00f3n.<\/p>\n
Por ejemplo, podr\u00eda ayudarte a implementar la funcionalidad de b\u00fasqueda en tiempo real en tu sitio:<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/live-search.gif\")
Una interfaz de b\u00fasqueda din\u00e1mica en tiempo real utilizando HTMX.<\/figcaption><\/figure>\nLa biblioteca de ejemplos<\/a> HTMX tambi\u00e9n se adentra en la metodolog\u00eda para llevar a cabo actualizaciones en tiempo real en otras \u00e1reas de contenido dentro de la p\u00e1gina. Por ejemplo, su ejemplo<\/a> utiliza un formulario de contacto con una tabla de contactos disponibles que se actualizar\u00eda una vez que el usuario enviara una nueva incorporaci\u00f3n. HTMX tiene varias formas elegantes de conseguirlo:<\/p>\n<div id=\"table-and-form\">\n <h2>Contacts<\/h2>\n <table class=\"table\">\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Email<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"contacts-table\">\n\n ...\n\n <\/tbody>\n <\/table>\n\n <h2>Add A Contact<\/h2>\n\n <form hx-post=\"\/contacts\" hx-target=\"#table-and-form\">\n <label>\n Name\n <input name=\"name\" type=\"text\"> \n <\/label>\n\n <label>\n Email\n <input name=\"email\" type=\"email\"> \n <\/label>\n <\/form>\n<\/div>\n<\/code><\/pre>\nEl formulario utiliza los atributos hx-post<\/code> y hx-target<\/code> para ampliar su objetivo. Tambi\u00e9n podr\u00edas utilizar atributos HTMX para conservar las entradas del formulario<\/a> tras un error u otro intento de validaci\u00f3n que utilice actualizaciones:<\/p>\n<input form=\"binaryForm\" type=\"file\" name=\"binaryFile\">\n\n<form method=\"POST\" id=\"binaryForm\" enctype=\"multipart\/form-data\" hx-swap=\"outerHTML\" hx-target=\"#binaryForm\">\n <button type=\"submit\">Submit<\/button>\n<\/form>\n<\/code><\/pre>\nAqu\u00ed, colocas la entrada del archivo binario fuera del elemento principal del formulario y utilizas los atributos hx-swap<\/code> y hx-target<\/code>.<\/p>\nCarga din\u00e1mica<\/h3>\n
Este enfoque de la actualizaci\u00f3n y carga din\u00e1micas tambi\u00e9n puede ser adecuado para tareas m\u00e1s comunes. Por ejemplo, el desplazamiento infinito<\/a>:<\/p>\n<tr hx-get=\"\/contacts\/?page=2\"\n hx-trigger=\"revealed\"\n hx-swap=\"afterend\">\n <td>Agent Smith<\/td>\n <td>void29@null.org<\/td>\n <td>55F49448C0<\/td>\n<\/tr>\n<\/code><\/pre>\nEl atributo hx-swap<\/code> act\u00faa como \u00ablistener\u00bb (oyente) del atributo hx-trigger<\/code>. Cuando un usuario llegue al final de la lista, HTMX cargar\u00e1 la segunda p\u00e1gina de contactos de forma infinita.<\/p>\nTambi\u00e9n podr\u00edas aplicar el mismo m\u00e9todo a la funcionalidad de carga perezosa<\/a>:<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/lazy-loading-gif.gif\")
Utilizar HTMX para implementar la carga perezosa.<\/figcaption><\/figure>\nEsto utiliza de nuevo los atributos hx-get<\/code> y hx-trigger<\/code> para iniciar una transici\u00f3n de asentamiento htmx para cargar el gr\u00e1fico utilizando un fundido lento.<\/p>\nPresentaci\u00f3n de datos<\/h3>\n
No deber\u00eda sorprender que el HTMX sea excelente para presentar informaci\u00f3n en pantalla utilizando elementos interactivos o din\u00e1micos.<\/p>\n
Por ejemplo, puedes implementar todos los tipos de filtrado de contenidos, como las selecciones de valores<\/a>. En este caso, las opciones de una lista se rellenan en funci\u00f3n de las de otra:<\/p>\n![\"GIF](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/value-select-gif.gif\")
Utilizar HTMX para asignar selecciones de valor a elementos del sitio.<\/figcaption><\/figure>\nIncluso podr\u00edas configurar cuadros de di\u00e1logos modales<\/a> o pesta\u00f1as de interfaz con la misma facilidad. Esto tambi\u00e9n muestra c\u00f3mo funciona HTMX junto con otras bibliotecas y frameworks, como Bootstrap:<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/modal-box-gif.gif\")
Abrir un cuadro de di\u00e1logo modal con HTMX.<\/figcaption><\/figure>\nEsta flexibilidad se extiende tambi\u00e9n a la implementaci\u00f3n de pesta\u00f1as. Hay dos formas de hacerlo: combinando JavaScript vanilla<\/a> y HTMX o utilizando los principios del Hipertexto Como Motor del Estado de la Aplicaci\u00f3n (HATEOAS)<\/a>:<\/p>\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/content-tabs.gif\")
GIF de una interfaz con pesta\u00f1as utilizando HTMX.<\/figcaption><\/figure>\nHay muchas m\u00e1s formas de utilizar HTMX para los elementos front-end del sitio, con su core en el lado del servidor. En la siguiente secci\u00f3n, te daremos las herramientas para crear tu propia visi\u00f3n dentro de WordPress.<\/p>\n
C\u00f3mo integrar HTMX en WordPress<\/h2>\n
Si quieres a\u00f1adir HTMX a tu sitio web de WordPress, la buena noticia es que es r\u00e1pido y sencillo. A continuaci\u00f3n, veremos un enfoque de tres pasos para hacerlo. No abordaremos todo el proceso y el c\u00f3digo para desarrollar la funcionalidad para WordPress, aunque s\u00ed abordaremos todos los puntos clave que debes seguir.<\/p>\n
Adem\u00e1s, gran parte del proceso, especialmente el primer paso, deber\u00eda ser habitual si ya has desarrollado para WordPress.<\/p>\n
<\/div><\/kinsta-auto-toc>\n1. Agrega HTMX a tu c\u00f3digo PHP<\/h3>\n
Como con cualquier script adicional para WordPress, debes incluir la biblioteca HTMX en el c\u00f3digo de tu tema o plugin.<\/p>\n
wp_enqueue_script('htmx-script', 'https:\/\/unpkg.com\/htmx.org@2.0.0\/dist\/htmx.min.js', array(), '2.0.0', true);\n<\/code><\/pre>\n
En pocas palabras, HTMX<\/a> es una biblioteca de JavaScript que ampl\u00eda el Lenguaje de Marcado de Hipertexto Est\u00e1ndar (HTML)<\/a> sin la necesidad de escribir JavaScript<\/a> vanilla o de framework. Estas extensiones te permiten acceder tambi\u00e9n a otras tecnolog\u00edas:<\/p>\n En esencia, HTMX pretende simplificar la forma de crear aplicaciones web din\u00e1micas e interactivas. Su funcionalidad clave es c\u00f3mo puede hacer Recientemente ha habido un gran revuelo en torno a HTMX, y las b\u00fasquedas de la biblioteca se han disparado en los \u00faltimos cinco a\u00f1os<\/a>.<\/p>\n 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\u00f3n de desarrollo.<\/p>\n Adem\u00e1s, a diferencia de algunos frameworks m\u00e1s grandes, HTMX no requiere un proceso de construcci\u00f3n o una cadena de herramientas complejas. Combinado con una curva de aprendizaje mucho menor, integrar la biblioteca en tus proyectos es m\u00e1s f\u00e1cil.<\/p>\n Estas ventajas, a su vez, conducen a un mayor debate y adopci\u00f3n de HTMX. Si buscas una soluci\u00f3n m\u00e1s sencilla para crear experiencias web interactivas, esta biblioteca podr\u00eda ser tu elecci\u00f3n.<\/p>\n La historia de WordPress con JavaScript cogi\u00f3 ritmo a partir del State of the Word 2015<\/a>, cuando Matt Mullenweg concluy\u00f3 con la frase: \u00abAprende JavaScript profundamente\u00bb.<\/p>\n El camino t\u00edpico para los desarrolladores de WordPress era investigar la necesidad de componentes interactivos y din\u00e1micos en un sitio web. En la mayor\u00eda de los casos, jQuery<\/a> ha sido el framework JavaScript de WordPress. Incluso el popular\u00edsimo sitio web Harvard Gazette<\/a> se basa en jQuery:<\/p>\n Por eso, WordPress utiliza jQuery<\/u><\/a> por defecto. Adem\u00e1s, muchas funciones del core, plugins y temas lo utilizan de manera generalizada. Este enfoque es coherente y est\u00e1 ampliamente soportado.<\/p>\n Sin embargo, a medida que evoluciona el desarrollo web, tambi\u00e9n lo hace el enfoque de WordPress respecto a JavaScript. La introducci\u00f3n del Editor de Bloques<\/a> vino acompa\u00f1ada de un cambio hacia el uso del framework React<\/a> para construir interfaces de usuario, especialmente en el panel de control de WordPress.<\/p>\n 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:<\/p>\n Sin embargo, estos pros tienen varios aspectos negativos que los equilibran:<\/p>\n 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\u00ed, es probable que quieras una soluci\u00f3n que no tenga la complejidad de los frameworks t\u00edpicos, pero que proporcione una experiencia interactiva moderna en el front end. En este caso, HTMX deber\u00eda ser considerado.<\/p>\n HTMX ofrece algunas ventajas convincentes cuando se trata del desarrollo de WordPress. Podr\u00eda proporcionar un punto intermedio entre la simplicidad de jQuery y la modernidad y rendimiento de React.<\/p>\n Ya hemos hablado de algunos de estos aspectos, pero recapitulemos brevemente:<\/p>\n Para el desarrollo de WordPress, tambi\u00e9n nos gusta la facilidad con la que puedes crear prototipos de nuevas funcionalidades para un sitio. Puedes crear r\u00e1pidamente nuevas funciones complejas programando dentro del HTML existente. A partir de ah\u00ed, tienes la flexibilidad de a\u00f1adir componentes React o un poco de jQuery cuando sea necesario.<\/p>\n Los principios de mejora progresiva de HTMX tambi\u00e9n son atractivos. La accesibilidad debe ser fundamental en tu estrategia de dise\u00f1o, y HTMX puede permitirte construir interactividad sin romperla para quienes eligen desactivar JavaScript en el navegador.<\/p>\n Por \u00faltimo, una ventaja significativa de HTMX es que no requiere ninguna configuraci\u00f3n personalizada o especial del lado del servidor. Puedes utilizar tu marcado HTMX con cualquier alojamiento, incluido Kinsta<\/a>.<\/p>\n Dado el rendimiento de calidad de nuestros servicios de alojamiento, un sitio que utilice HTMX deber\u00eda ir viento en popa. Esto repercutir\u00e1 en tus m\u00e9tricas SEO, en las cifras de tr\u00e1fico, en el tiempo de desarrollo, en el flujo de trabajo de resoluci\u00f3n de problemas y en toda la cadena de desarrollo.<\/p>\n Te lo hemos adelantado en la \u00faltima secci\u00f3n, pero HTMX no ser\u00e1 una biblioteca que utilices como sustituto directo de ninguno de los frameworks de JavaScript m\u00e1s conocidos. Por el contrario, funcionar\u00e1 mejor junto a lo que ya existe para ayudar a soportar la carga cuando sea necesario.<\/p>\n Esto significa que emplear\u00e1s HTMX para ciertas tareas para las que jQuery y React pueden no ser \u00f3ptimas. Antes de sumergirnos en la implementaci\u00f3n de HTMX en WordPress, vamos a exponer tres escenarios comunes en los que la biblioteca podr\u00eda mejorar WordPress.<\/p>\n El gran caso de uso de HTMX es c\u00f3mo puedes implementar actualizaciones parciales de p\u00e1gina con el m\u00ednimo esfuerzo. Esto podr\u00eda ser muy importante para muchos desarrolladores, especialmente para maquetas y prototipos r\u00e1pidos. Sin embargo, HTMX podr\u00eda ofrecer resultados con calidad de producci\u00f3n.<\/p>\n Por ejemplo, podr\u00eda ayudarte a implementar la funcionalidad de b\u00fasqueda en tiempo real en tu sitio:<\/p>\n La biblioteca de ejemplos<\/a> HTMX tambi\u00e9n se adentra en la metodolog\u00eda para llevar a cabo actualizaciones en tiempo real en otras \u00e1reas de contenido dentro de la p\u00e1gina. Por ejemplo, su ejemplo<\/a> utiliza un formulario de contacto con una tabla de contactos disponibles que se actualizar\u00eda una vez que el usuario enviara una nueva incorporaci\u00f3n. HTMX tiene varias formas elegantes de conseguirlo:<\/p>\n El formulario utiliza los atributos Aqu\u00ed, colocas la entrada del archivo binario fuera del elemento principal del formulario y utilizas los atributos Este enfoque de la actualizaci\u00f3n y carga din\u00e1micas tambi\u00e9n puede ser adecuado para tareas m\u00e1s comunes. Por ejemplo, el desplazamiento infinito<\/a>:<\/p>\n El atributo Tambi\u00e9n podr\u00edas aplicar el mismo m\u00e9todo a la funcionalidad de carga perezosa<\/a>:<\/p>\n Esto utiliza de nuevo los atributos No deber\u00eda sorprender que el HTMX sea excelente para presentar informaci\u00f3n en pantalla utilizando elementos interactivos o din\u00e1micos.<\/p>\n Por ejemplo, puedes implementar todos los tipos de filtrado de contenidos, como las selecciones de valores<\/a>. En este caso, las opciones de una lista se rellenan en funci\u00f3n de las de otra:<\/p>\n Incluso podr\u00edas configurar cuadros de di\u00e1logos modales<\/a> o pesta\u00f1as de interfaz con la misma facilidad. Esto tambi\u00e9n muestra c\u00f3mo funciona HTMX junto con otras bibliotecas y frameworks, como Bootstrap:<\/p>\n Esta flexibilidad se extiende tambi\u00e9n a la implementaci\u00f3n de pesta\u00f1as. Hay dos formas de hacerlo: combinando JavaScript vanilla<\/a> y HTMX o utilizando los principios del Hipertexto Como Motor del Estado de la Aplicaci\u00f3n (HATEOAS)<\/a>:<\/p>\n Hay muchas m\u00e1s formas de utilizar HTMX para los elementos front-end del sitio, con su core en el lado del servidor. En la siguiente secci\u00f3n, te daremos las herramientas para crear tu propia visi\u00f3n dentro de WordPress.<\/p>\n Si quieres a\u00f1adir HTMX a tu sitio web de WordPress, la buena noticia es que es r\u00e1pido y sencillo. A continuaci\u00f3n, veremos un enfoque de tres pasos para hacerlo. No abordaremos todo el proceso y el c\u00f3digo para desarrollar la funcionalidad para WordPress, aunque s\u00ed abordaremos todos los puntos clave que debes seguir.<\/p>\n Adem\u00e1s, gran parte del proceso, especialmente el primer paso, deber\u00eda ser habitual si ya has desarrollado para WordPress.<\/p>\n Como con cualquier script adicional para WordPress, debes incluir la biblioteca HTMX en el c\u00f3digo de tu tema o plugin.<\/p>\n\n
GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code>, y DELETE<\/code> peticiones HTTP<\/a> desde elementos HTML. Esto significa que puedes procesar actualizaciones parciales de la p\u00e1gina de forma fluida, como si fuera una aplicaci\u00f3n m\u00f3vil. En conjunto, HTMX es un potente conjunto de herramientas para ayudarte a crear una experiencia web din\u00e1mica sin necesidad de montones de c\u00f3digo JavaScript.<\/p>\nPor qu\u00e9 todos hablamos de HTMX<\/h2>\n
\n
La arquitectura de WordPress en relaci\u00f3n con JavaScript<\/h2>\n
Ventajas e inconvenientes de utilizar la implementaci\u00f3n actual de JavaScript de WordPress<\/h3>\n
\n
wp_ajax<\/code>.<\/li>\n<\/ul>\n\n
Por qu\u00e9 HTMX podr\u00eda ser m\u00e1s adecuado para algunas tareas de desarrollo de WordPress<\/h2>\n
\n
Casos de uso t\u00edpicos de HTMX<\/h2>\n
Recargas parciales de p\u00e1gina<\/h3>\n
<div id=\"table-and-form\">\n <h2>Contacts<\/h2>\n <table class=\"table\">\n <thead>\n <tr>\n <th>Name<\/th>\n <th>Email<\/th>\n <th><\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"contacts-table\">\n\n ...\n\n <\/tbody>\n <\/table>\n\n <h2>Add A Contact<\/h2>\n\n <form hx-post=\"\/contacts\" hx-target=\"#table-and-form\">\n <label>\n Name\n <input name=\"name\" type=\"text\"> \n <\/label>\n\n <label>\n Email\n <input name=\"email\" type=\"email\"> \n <\/label>\n <\/form>\n<\/div>\n<\/code><\/pre>\nhx-post<\/code> y hx-target<\/code> para ampliar su objetivo. Tambi\u00e9n podr\u00edas utilizar atributos HTMX para conservar las entradas del formulario<\/a> tras un error u otro intento de validaci\u00f3n que utilice actualizaciones:<\/p>\n<input form=\"binaryForm\" type=\"file\" name=\"binaryFile\">\n\n<form method=\"POST\" id=\"binaryForm\" enctype=\"multipart\/form-data\" hx-swap=\"outerHTML\" hx-target=\"#binaryForm\">\n <button type=\"submit\">Submit<\/button>\n<\/form>\n<\/code><\/pre>\nhx-swap<\/code> y hx-target<\/code>.<\/p>\nCarga din\u00e1mica<\/h3>\n
<tr hx-get=\"\/contacts\/?page=2\"\n hx-trigger=\"revealed\"\n hx-swap=\"afterend\">\n <td>Agent Smith<\/td>\n <td>void29@null.org<\/td>\n <td>55F49448C0<\/td>\n<\/tr>\n<\/code><\/pre>\nhx-swap<\/code> act\u00faa como \u00ablistener\u00bb (oyente) del atributo hx-trigger<\/code>. Cuando un usuario llegue al final de la lista, HTMX cargar\u00e1 la segunda p\u00e1gina de contactos de forma infinita.<\/p>\nhx-get<\/code> y hx-trigger<\/code> para iniciar una transici\u00f3n de asentamiento htmx para cargar el gr\u00e1fico utilizando un fundido lento.<\/p>\nPresentaci\u00f3n de datos<\/h3>\n
C\u00f3mo integrar HTMX en WordPress<\/h2>\n
1. Agrega HTMX a tu c\u00f3digo PHP<\/h3>\n
wp_enqueue_script('htmx-script', 'https:\/\/unpkg.com\/htmx.org@2.0.0\/dist\/htmx.min.js', array(), '2.0.0', true);\n<\/code><\/pre>\n