jQuery: Uso Actual y Alternativas para WordPress

jQuery es una biblioteca de JavaScript liviana que simplifica la manipulación de HTML, el manejo de eventos, la animación y las solicitudes asincrónicas, lo que facilita la creación de páginas web interactivas con menos código. Es ampliamente utilizado para el desarrollo web front-end debido a su simplicidad y compatibilidad entre navegadores.

Comprender el papel de jQuery en WordPress es esencial para optimizar su sitio web.

Sin embargo, el uso de jQuery ha disminuido en los últimos años debido a los avances en JavaScript moderno y la compatibilidad nativa de los navegadores con sus funciones. A pesar de esto, todavía hay escenarios en los que jQuery puede ser beneficioso.

En esta publicación, exploraremos el uso continuo de jQuery en WordPress, las formas de identificar su presencia y las alternativas si está considerando la transición a otras tecnologías.

Prepárate para sumergirte en el mundo de jQuery y WordPress.

Tabla de contenidos

• ¿Se sigue usando jQuery en WordPress?
  • jQuery reemplazado en la interfaz de WordPress
  • jQuery todavía se usa en el dashboard de WordPress
  • jQuery todavía se usa en los plugins de WordPress
  • ¿Sigue siendo jQuery relevante?
  • ¿Cómo identificar jQuery en WordPress?
    • Identifique jQuery usando las herramientas de desarrollador del navegador
    • Identifique jQuery usando el navegador Ver código fuente de la página
• ¿Cuál es la alternativa a jQuery?
  • Alternativa a jQuery para la manipulación de HTML/DOM
  • Alternativa a jQuery para la Gestión de Eventos
  • Alternativa a jQuery para llamadas AJAX
  • Alternativa a jQuery para animaciones
• ¿Qué es jQuery Migrate?
  • ¿Cómo eliminar jQuery Migrate de una web de WordPress?
• Conclusión

¿Se sigue usando jQuery en WordPress?

Es prudente pensar que todavía sí, mirando esta declaración de W3techs:

jQuery es utilizado por el 94,6% de todos los sitios web cuya biblioteca de JavaScript conocemos. Esto es el 77,7% de todos los sitios web.

w3techs.com

jQuery ha sido una parte integral de WordPress desde su lanzamiento de la versión 2.2 en mayo de 2007.

Ha desempenañado un papel crucial, no solo dentro del núcleo de WordPress, sino también como una herramienta que ha facilitado la interacción entre los desarrolladores y el diverso panorama de navegadores modernos y antiguos. jQuery ha actuado como un lenguaje universal, cerrando la brecha y simplificando tareas como la manipulación de HTML/DOM, la gestión de eventos, las llamadas Ajax y las animaciones.

Como resultado de sus capacidades, WordPress se ha basado en gran medida en este marco tanto en su interfaz como en su backend desde su rápido crecimiento en popularidad a partir de 2008.

JQuery sigue siendo muy utilizado en WordPress, aunque como veremos a continuación ha habido algunos cambios.

jQuery reemplazado en la interfaz de WordPress

En el pasado, jQuery era una herramienta popular que se usaba para varias tareas de interfaz en sitios web, como animaciones, controles deslizantes y validaciones de formularios. Fue ampliamente utilizado en kits de herramientas HTML como Bootstrap.

Sin embargo, ha habido un cambio en los últimos tiempos.

Los navegadores modernos ahora son totalmente compatibles con Vanilla JavaScript, lo que lo hace compatible y funcional sin necesidad de jQuery.

Este cambio también ha influido en el desarrollo de los temas de WordPress. Destacados creadores de temas como Astra, OceanWP y Neve by Themeisle han adoptado esta tendencia. Incluso temas como Sage by Roots y UnderStrap, una combinación del tema inicial de guiones bajos (_s) y Bootstrap, han seguido su ejemplo.

Estos desarrollos indican un claro alejamiento del uso de jQuery en la interfaz de WordPress.

jQuery todavía se usa en el dashboard de WordPress

WordPress continúa confiando en jQuery para ciertas funciones de back-end, incluso con el surgimiento de la revolución de edición completa del sitio de WordPress impulsada por la biblioteca de JavaScript React.js. Se espera que esta dependencia persista en el futuro.

Si bien React.js ha transformado la forma en que creamos interfaces de usuario dinámicas e interactivas, lo que ha tenido un impacto significativo en el desarrollo de nuevas funciones de WordPress como el editor de bloques Gutenberg, jQuery continúa desempeñando un papel vital en el ecosistema de complementos y temas de WordPress.

WordPress todavía utiliza jQuery en varios aspectos de su tablero. Se utiliza para administrar menús, así como en el cargador de medios para manejar archivos de medios. Además, jQuery juega un papel en la gestión y comparación de revisiones dentro de WordPress.

jQuery todavía se usa en los plugins de WordPress

Como se ha mencionado, a pesar de la amplia compatibilidad con JavaScript y las nuevas herramientas de construcción como Webpack, npm, ES6 y módulos, jQuery continúa desempeñando un papel importante en el desarrollo de complementos de WordPress debido a su estabilidad, facilidad de uso y larga integración con WordPress. Sin embargo, con el auge de los marcos de JavaScript frontend y un cambio hacia JavaScript estándar, los nuevos proyectos a menudo evitan las dependencias de jQuery.

Los desarrolladores ahora tienen una gama más amplia de opciones para crear interfaces de usuario dinámicas e interactivas, aprovechando las capacidades de estos marcos modernos sin depender de jQuery.

La disponibilidad de tecnologías más nuevas y el cambio hacia JavaScript estándar han llevado a una menor dependencia de jQuery en el desarrollo de la interfaz de WordPress. Esta tendencia refleja el deseo de bases de código más ligeras y optimizadas, además de adoptar la naturaleza modular del desarrollo de JavaScript moderno.

¿Sigue siendo jQuery relevante?

La respuesta es un rotundo «sí» cuando consideramos su uso predominante. Los resultados de la encuesta State of JavaScript 2022 brindan amplia evidencia de la relevancia de jQuery:

Sin embargo, es importante reconocer que esto se refiere a la utilización actual, lo que no indica necesariamente su importancia para las tendencias de desarrollo futuras. A medida que evoluciona el ecosistema de JavaScript, el interés se desplaza gradualmente hacia los marcos modernos y JavaScript estándar. Puedes verificar esta evidencia en Google Trends:

¿Cómo identificar jQuery en WordPress?

Para identificar si jQuery está cargado en WordPress, puede usar varios métodos:

Identifique jQuery usando las herramientas de desarrollador del navegador

El método más sencillo es utilizar las herramientas de desarrollo integradas en su navegador web. En Google Chrome o Firefox, abra las «Herramientas de desarrollo» y busque jQuery siguiendo estos pasos:

• “Menú superior→Ver→Desarrollador→Herramientas del desarrollador” o
• “Opción ⌥ + Comando ⌘ + I” en Mac o
• “F12+Ctrl+Shift+I” en Windows.
• Vaya a la pestaña «Red».
• Vuelva a cargar la página.
• Escriba «jquery» en el cuadro de filtro.

Si jQuery está cargado, debería verlo en la lista.

Identifique jQuery usando el navegador Ver código fuente de la página

Otra forma sencilla es ver el código fuente de la página de su sitio web de WordPress.

Puede hacerlo haciendo clic con el botón derecho en la página y seleccionando » Ver código fuente de la página «. Luego use la función de búsqueda del navegador (Ctrl+F o Comando ⌘+F en una Mac) para buscar «jquery». Si jQuery está cargado, debería ver una etiqueta <script> .

¿Cuál es la alternativa a jQuery?

Como se mencionó anteriormente, jQuery ha servido como conjunto de herramientas versátil para varias tareas. Ahora, profundicemos en las alternativas disponibles en la actualidad.

Alternativa a jQuery para la manipulación de HTML/DOM

1. «Vanila» JavaScript: con los avances en los navegadores modernos, muchas de las tareas de manipulación de DOM se pueden realizar de forma nativa utilizando JavaScript simple. Métodos como querySelector(), querySelectorAll(), getElementById(), getElementsByClassName() , etc., brindan formas poderosas y fáciles de manipular el DOM.
2. Cash Esta es la mejor alternativa compacta de jQuery para los navegadores modernos (IE11+), que ofrece una sintaxis de estilo jQuery para la manipulación de DOM.
3. Umbrella JS: una pequeña biblioteca JavaScript de código abierto (2,5 kb) para navegadores modernos. Proporciona una sintaxis similar a jQuery para manipular el DOM, por lo que es una buena opción si estás buscando algo ligero pero familiar.

Alternativa a jQuery para la Gestión de Eventos

Si tu objetivo es simplemente manejar eventos de la manera más ligera posible, entonces Vanilla JavaScript es la opción recomendada.

Con Vanilla JavaScript: puedes usar los métodos addEventListener() and removeEventListener() para el manejo de eventos en JavaScript simple.

Si planea conservar la sintaxis del código, Cash es una buena alternativa liviana para los navegadores modernos.

Sin embargo, para proyectos más complejos, un marco frontend puede ser más adecuado. Esta imagen de la encuesta The State of JavaScript 2022 muestra la clasificación de uso de los frontend frameworks más conocidos:

Sin embargo, al codificar con un framewordk debes tener en cuenta el peso de la biblioteca base.

Comparemos una aplicación básica «Hello World» usando estos frontend frameworks. Aquí están las estimaciones aproximadas:

• React: el tamaño de una aplicación React mínima, incluido ReactDOM (que se requiere para representar los componentes de React en la web), es de aproximadamente 100 KB minimizado y comprimido con gzip.
• Angular: una aplicación Angular mínima de «Hello World» tiene alrededor de 150 KB minimizada y comprimida con gzip. Sin embargo, la compilación CLI y AOT de Angular puede ayudar a reducir este tamaño considerablemente al eliminar el código Angular innecesario y minimizar la salida.
• Vue: una aplicación simple de «Hello World» Vue tiene aproximadamente 30 KB minimizados y comprimidos con gzip.
• Svelte: el paquete resultante de una aplicación «Hello World» de Svelte es uno de los más pequeños, alrededor de 4 KB minimizado y comprimido con gzip, porque Svelte compila su código en un JavaScript pequeño y sin marco.
• Preact: una alternativa rápida y ligera a React, con la misma API moderna. Un «Hello World» en Preact puede ser tan pequeño como unos 4 KB minimizado y comprimido con gzip.

Alternativa a jQuery para llamadas AJAX

AJAX, que significa JavaScript y XML Asíncrono (Asynchronous Javascript And XML en inglés) , permite que una página web interactúe con servicios remotos, actualizando y mostrando nuevos datos sin necesidad de actualizar la página completa.

Las alternativas más modernas a AJAX de jQuery incluyen:

1. Obtener API. Este reemplazo basado en promesas para AJAX está integrado en los navegadores modernos como parte de ES6 (ECMAScript 6). La API Fetch simplifica el proceso de realizar solicitudes asincrónicas y administrar respuestas.
2. Axios . Al igual que Fetch API, Axios se basa en promesas. Sin embargo, cuenta con funciones adicionales, como el seguimiento del progreso de la carga, la compatibilidad con navegadores más antiguos, la transformación automática de datos JSON, la protección del lado del cliente contra XSRF, etc., lo que la convierte en una herramienta más potente y flexible.
3. Si la aplicación es compleja, como se mencionó en la sección anterior, puede pasar a un marco de trabajo frontend.

Alternativa a jQuery para animaciones

En la década de 2010, jQuery era el conjunto de herramientas base de la animación web. Pero ha pasado el tiempo desde las animaciones de JavaScript puro, y hoy en día, CSS y SVG llegaron a los navegadores modernos con capacidades de rendimiento rápidas y potentes.

Para animaciones existen varias alternativas a jQuery pero la lista es infinita:

1. Transiciones/Animaciones CSS: para animaciones simples, las transiciones y animaciones CSS estándar pueden ser una alternativa poderosa. Son livianas y pueden acelerarse por hardware en los navegadores modernos, lo que a menudo da como resultado animaciones más fluidas.
2. API de animaciones web: esta es una API de navegador nativa que proporciona una forma de crear animaciones y controlar su reproducción con JavaScript. Para la manipulación de DOM, una tarea que una vez estuvo regida por jQuery, la API de animación web del navegador nativo ha cerrado la brecha. Es más potente que las animaciones y transiciones CSS.
3. GSAP (GreenSock Animation Platform): la plataforma de animación GreenSock (GSAP) es una sólida biblioteca de JavaScript para crear animaciones de alto rendimiento. Es más eficaz y flexible que los métodos de animación de jQuery y ofrece un control preciso sobre la secuencia, el tiempo y la aceleración de la animación.
4. Mo.js: esta es una poderosa biblioteca de gráficos en movimiento para la web, que ofrece manejo declarativo para animaciones, lo que hace que las secuencias de animación de interfaz de usuario complejas sean más simples y manejables.
5. Animate.css: una biblioteca lista para usar con varias animaciones CSS entre navegadores que puede usar en su proyecto. Está centrado en CSS, pero es fácil de usar y se puede integrar con JavaScript para crear animaciones más complejas.

¿Qué es jQuery Migrate?

jQuery Migrate es una biblioteca de JavaScript que se creó para simplificar la transición de versiones anteriores de jQuery a versiones más nuevas. Sirve como puente entre las funciones de versiones anteriores y la versión más reciente.

De forma predeterminada, WordPress incluye jQuery Migrate cuando se encola la biblioteca jQuery .

Esto se hace para garantizar la compatibilidad con temas y complementos más antiguos que pueden depender de características obsoletas de jQuery.

Si sus complementos y temas están actualizados, es posible que desees considerar deshabilitar jQuery Migrate. ¡Puede ayudar a acelerar un poco más tu página web!

¿Cómo eliminar jQuery Migrate de una web de WordPress?

Puedes eliminar jQuery Migrate de tu web de WordPress con unas pocas líneas de código. Te explicamos cómo:

Abre el archivo functions.php de tu tema. Si estás utilizando un tema secundario, usa functions.php del tema secundario. Agrega el siguiente código:

//Remove JQuery migrate
function remove_jquery_migrate( $scripts ) {
    if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) {
        $script = $scripts->registered['jquery'];
 
        if ( $script->deps ) { // Check whether the script has any dependencies
            $script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );
        }
    }
}
 
add_action( 'wp_default_scripts', 'remove_jquery_migrate' );

Conclusión

De cara al futuro, el papel de jQuery en WordPress sigue siendo seguro, principalmente debido a la compatibilidad de los complementos.

Sin embargo, con las bibliotecas JavaScript nativas y modernas ganando popularidad, el panorama podría evolucionar. Mantente informado y adáptate para aprovechar estos cambios en tu proceso de desarrollo web. El futuro de jQuery y WordPress es una historia que aún se está escribiendo.

¡Permanece atento!

¿No tienes una cuenta en wetopi?

Incluye servidores desarrollo Gratis.
Sin tarjeta de crédito.