jQuery: ús actual i alternatives per a WordPress

jQuery és una biblioteca de JavaScript lleugera que simplifica la manipulació d’HTML, el maneig d’esdeveniments, l’animació i les sol·licituds asincròniques, cosa que facilita la creació de pàgines web interactives amb menys codi. És àmpliament utilitzat per al desenvolupament web front-end a causa de la seva simplicitat i compatibilitat entre navegadors.

Comprendre el paper de jQuery a WordPress és essencial per optimitzar el vostre lloc web.

No obstant això, l’ús de jQuery ha disminuït en els últims anys a causa dels avenços en JavaScript modern i la compatibilitat nativa dels navegadors amb les seves funcions. Tot i això, encara hi ha escenaris en què jQuery pot ser beneficiós.

En aquesta publicació, explorarem l’ús continu de jQuery a WordPress, les maneres d’identificar la vostra presència i les alternatives si esteu considerant la transició a altres tecnologies.

Prepara’t per submergir-te al món de jQuery i WordPress.

Table of Contents

• Se segueix usant jQuery a WordPress?
  • jQuery reemplaçat a la interfície de WordPress
  • jQuery encara s’usa al dashboard de WordPress
  • jQuery encara s’usa als plugins de WordPress
  • Continua sent jQuery rellevant?
  • Com identificar jQuery a WordPress?
    • Identifiqueu jQuery usant les eines de desenvolupador del navegador
    • Identifiqueu jQuery usant el navegador Veure codi font de la pàgina
• Quina és l’alternativa a jQuery?
  • Alternativa a jQuery per a la manipulació de HTML/DOM
  • Alternativa a jQuery per a la Gestió d’Esdeveniments
  • Alternativa a jQuery per a trucades AJAX
  • Alternativa a jQuery per a animacions
• Què és jQuery Migrate?
  • Com eliminar jQuery Migrate d’una web de WordPress?
• Conclusió

Se segueix usant jQuery a WordPress?

És prudent pensar que encara sí, mirant aquesta declaració de W3techs:

jQuery és utilitzat pel 94,6% de tots els llocs web la biblioteca de JavaScript dels quals coneixem. Això és el 77,7% de tots els llocs web.

w3techs.com

jQuery ha estat una part integral de WordPress des del seu llançament de la versió 2.2 al maig de 2007.

Ha exercit un paper crucial, no només dins del nucli de WordPress, sinó també com una eina que ha facilitat la interacció entre els desenvolupadors i el divers panorama de navegadors moderns i antics. jQuery ha actuat com un llenguatge universal, tancant la bretxa i simplificant tasques com la manipulació d’HTML/DOM, la gestió d’esdeveniments, les anomenades Ajax i les animacions.

Com a resultat de les seves capacitats, WordPress s’ha basat en gran mesura en aquest marc tant en la interfície com en el backend des del seu ràpid creixement en popularitat a partir del 2008.

JQuery segueix sent molt utilitzat a WordPress, encara que com veurem a continuació hi ha hagut alguns canvis.

jQuery reemplaçat a la interfície de WordPress

En el passat, jQuery era una eina popular que es feia servir per a diverses tasques d’interfície en llocs web, com animacions, controls lliscants i validacions de formularis. Va ser àmpliament utilitzat en kits d’eines HTML com a Bootstrap.

Tot i això, hi ha hagut un canvi en els últims temps.

Els navegadors moderns ara són totalment compatibles amb Vanilla JavaScript, cosa que ho fa compatible i funcional sense necessitat de jQuery.

Aquest canvi també ha influït en el desenvolupament dels temes de WordPress. Destacats creadors de temes com Astra, OceanWP i Neve by Themeisle han adoptat aquesta tendència. Fins i tot temes com Sage by Roots i UnderStrap, una combinació del tema inicial de guions baixos (_s) i Bootstrap, n’han seguit l’exemple.

Aquests desenvolupaments indiquen un clar allunyament de l’ús de jQuery a la interfície de WordPress.

jQuery encara s’usa al dashboard de WordPress

WordPress continua confiant en jQuery per a certes funcions de back-end, fins i tot amb el sorgiment de la revolució d’edició completa del lloc de WordPress impulsada per la biblioteca de JavaScript React.js. S’espera que aquesta dependència persisteixi en el futur.

Si bé React.js ha transformat la manera com creem interfícies d’usuari dinàmiques i interactives, cosa que ha tingut un impacte significatiu en el desenvolupament de noves funcions de WordPress com l’editor de blocs Gutenberg, jQuery continua exercint un paper vital a l’ecosistema de complements i temes de WordPress.

WordPress encara utilitza jQuery en diversos aspectes del tauler. S’utilitza per administrar menús, així com al carregador de mitjans per manejar fitxers de mitjans. A més, jQuery juga un paper en la gestió i comparació de revisions dins de WordPress.

jQuery encara s’usa als plugins de WordPress

Com s’ha esmentat, malgrat l’àmplia compatibilitat amb JavaScript i les noves eines de construcció com Webpack, npm, ES6 i mòduls, jQuery continua jugant un paper important en el desenvolupament de complements de WordPress a causa de la seva estabilitat, facilitat d’ús i llarga integració amb WordPress. Tot i això, amb l’auge dels marcs de JavaScript frontend i un canvi cap a JavaScript estàndard, els nous projectes sovint eviten les dependències de jQuery.

Els desenvolupadors tenen ara una gamma més àmplia d’opcions per crear interfícies d’usuari dinàmiques i interactives, aprofitant les capacitats d’aquests marcs moderns sense dependre de jQuery.

La disponibilitat de tecnologies més noves i el canvi cap a JavaScript estàndar han portat a una menor dependència de jQuery en el desenvolupament de la interfície de WordPress. Aquesta tendència reflecteix el desig de bases de codis més lleugeres i optimitzades, a més d’adoptar la naturalesa modular del desenvolupament de JavaScript modern.

Continua sent jQuery rellevant?

La resposta és un rotund “sí” quan considerem el seu ús predominant. Els resultats de l’enquesta State of JavaScript 2022 brinden àmplia evidència de la rellevància de jQuery:

No obstant això, és important reconèixer que això es refereix a la utilització actual, cosa que no indica necessàriament la seva importància per a les tendències de desenvolupament futures. A mesura que evoluciona l’ecosistema de JavaScript, l’interès es desplaça gradualment cap als marcs moderns i el JavaScript estàndard. Pots verificar aquesta evidència a Google Trends:

Com identificar jQuery a WordPress?

Per identificar si jQuery està carregat a WordPress, podeu utilitzar diversos mètodes:

Identifiqueu jQuery usant les eines de desenvolupador del navegador

El mètode més senzill és utilitzar les eines de desenvolupament integrades al vostre navegador web. A Google Chrome o Firefox, obriu les “Eines de desenvolupament” i busqueu jQuery seguint aquests passos:

• “Menú superior→Veure→Desenvolupador→Eines del desenvolupador” o
• “Opció ⌥ + Ordre ⌘ + I” a Mac o
• “F12+Ctrl+Shift+I” al Windows.
• Aneu a la pestanya “Xarxa”.
• Torneu a carregar la pàgina.
• Escriviu “jquery” al quadre de filtre.

Si jQuery està carregat, ho hauríeu de veure a la llista.

Identifiqueu jQuery usant el navegador Veure codi font de la pàgina

Una altra manera senzilla és veure el codi font de la pàgina del vostre lloc web de WordPress.

Podeu fer-ho fent clic amb el botó dret a la pàgina i seleccionant ” Veure codi font de la pàgina “. Després utilitzeu la funció de cerca del navegador (Ctrl+F o Ordre ⌘+F en una Mac) per cercar “jquery”. Si jQuery està carregat, hauríeu de veure una etiqueta <script> .

Quina és l’alternativa a jQuery?

Com es va esmentar anteriorment, jQuery ha servit com a conjunt d’eines versàtil per a diverses tasques. Ara, aprofundim en les alternatives disponibles actualment.

Alternativa a jQuery per a la manipulació de HTML/DOM

1. “Vanila” JavaScript: amb els avenços en els navegadors moderns, moltes de les tasques de manipulació de DOM es poden realitzar de forma nativa utilitzant JavaScript simple. Mètodes com querySelector(), querySelectorAll(), getElementById(), getElementsByClassName() , etc., proporcionen formes poderoses i fàcils de manipular el DOM.
2. Cash Aquesta és la millor alternativa compacta de jQuery per als navegadors moderns (IE11+), que ofereix una sintaxi d’estil jQuery per a la manipulació del DOM.
3. Umbrella JS : una petita biblioteca JavaScript de codi obert (2,5 kb) per a navegadors moderns. Proporciona una sintaxi similar a jQuery per manipular el DOM, per la qual cosa és una bona opció si està buscant alguna cosa lleugera però familiar.

Alternativa a jQuery per a la Gestió d’Esdeveniments

Si el vostre objectiu és simplement manejar esdeveniments de la manera més lleugera possible, llavors Vanilla JavaScript és l’opció recomanada.

Amb Vanilla JavaScript: podeu utilitzar els mètodes addEventListener() and removeEventListener() per al maneig d’esdeveniments en JavaScript simple.

Si teniu previst conservar la sintaxi del codi, Cash és una bona alternativa lleugera per als navegadors moderns.

Tot i això, per a projectes més complexos, un marc frontend pot ser més adequat. Aquesta imatge de l’enquesta The State of JavaScript 2022 mostra la classificació d’ús dels frontend frameworks més coneguts:

No obstant això, en codificar amb un framewordk heu de tenir en compte el pes de la biblioteca base.

Comparem una aplicació bàsica “Hello World” usant aquests frontend frameworks. Aquí hi ha les estimacions aproximades:

• React : la mida d’una aplicació React mínima, inclòs ReactDOM (que es requereix per representar els components de React a la web), és d’aproximadament 100 KB minimitzat i comprimit amb gzip.
• Angular : una aplicació Angular mínima de “Hello World” té al voltant de 150 KB minimitzada i comprimida amb gzip. Tot i això, la compilació CLI i AOT d’Angular pot ajudar a reduir aquesta mida considerablement en eliminar el codi Angular innecessari i minimitzar la sortida.
• Vue : una aplicació simple de “Hello World” Vue té aproximadament 30 KB minimitzats i comprimits amb gzip.
• Svelte : el paquet resultant d’una aplicació “Hello World” de Svelte és un dels més petits, al voltant de 4 KB minimitzat i comprimit amb gzip, perquè Svelte compila el codi en un JavaScript petit i sense marc.
• Preact : una alternativa ràpida i lleugera a React, amb la mateixa API moderna. Un “Hello World” a Preact pot ser tan petit com uns 4 KB minimitzat i comprimit amb gzip.

Alternativa a jQuery per a trucades AJAX

AJAX, que significa JavaScript i XML Asíncron (Asynchronous Javascript And XML en anglès), permet que una pàgina web interactuï amb serveis remots, actualitzant i mostrant noves dades sense necessitat d’actualitzar la pàgina completa.

Les alternatives més modernes a AJAX de jQuery inclouen:

1. Obtenir API. Aquest reemplaçament basat en promeses per a AJAX està integrat als navegadors moderns com a part d’ES6 (ECMAScript 6). L’API Fetch simplifica el procés de fer sol·licituds asincròniques i administrar respostes.
2. Axis . Igual que Fetch API, Axios es basa en promeses. Tot i això, compta amb funcions addicionals, com el seguiment del progrés de la càrrega, la compatibilitat amb navegadors més antics, la transformació automàtica de dades JSON, la protecció del costat del client contra XSRF, etc., la qual cosa la converteix en una eina més potent i flexible.
3. Si l’aplicació és complexa, com es va esmentar a la secció anterior, pot passar a un marc de treball frontend.

Alternativa a jQuery per a animacions

A la dècada de 2010, jQuery era el conjunt d’eines base de l’animació web. Però ha passat el temps des de les animacions de JavaScript pur, i avui dia, CSS i SVG van arribar als navegadors moderns amb capacitats de rendiment ràpides i potents.

Per a animacions hi ha diverses alternatives a jQuery però la llista és infinita:

1. Transicions/Animacions CSS: per a animacions simples, les transicions i animacions CSS estàndard poden ser una alternativa poderosa. Són lleugeres i poden accelerar-se per maquinari en els navegadors moderns, cosa que sovint dóna com a resultat animacions més fluides.
2. API d’animacions web : aquesta és una API de navegador nativa que proporciona una manera de crear animacions i controlar la seva reproducció amb JavaScript. Per a la manipulació del DOM, una tasca que un cop va estar regida per jQuery, l’API d’animació web del navegador nadiu ha tancat la bretxa. És més potent que les animacions i transicions CSS.
3. GSAP (GreenSock Animation Platform) : la plataforma d’animació GreenSock (GSAP) és una sòlida biblioteca de JavaScript per crear animacions d’alt rendiment. És més eficaç i flexible que els mètodes d’animació de jQuery i ofereix un control precís sobre la seqüència, el temps i l’acceleració de l’animació.
4. Mo.js : aquesta és una poderosa biblioteca de gràfics en moviment per a la web, que ofereix maneig declaratiu per a animacions, cosa que fa que les seqüències d’animació d’interfície d’usuari complexes siguin més simples i manejables.
5. Animate.css : una biblioteca llesta per utilitzar amb diverses animacions CSS entre navegadors que podeu utilitzar en el vostre projecte. Està centrat en CSS, però és fàcil dutilitzar i es pot integrar amb JavaScript per crear animacions més complexes.

Què és jQuery Migrate?

jQuery Migrate és una biblioteca de JavaScript que es va crear per simplificar la transició de versions anteriors de jQuery a versions més noves. Serveix com a pont entre les funcions de versions anteriors i la versió més recent.

Per defecte, WordPress inclou jQuery Migrate quan s’encola la biblioteca jQuery .

Això es fa per garantir la compatibilitat amb temes i complements més antics que poden dependre de característiques obsoletes del jQuery.

Si els vostres complements i temes estan actualitzats, és possible que vulgueu considerar deshabilitar jQuery Migrate. Pot ajudar a accelerar una mica més la teva pàgina web!

Com eliminar jQuery Migrate d’una web de WordPress?

Pots eliminar jQuery Migrate de la teva web de WordPress amb unes poques línies de codi. T’expliquem com:

Obre el fitxer functions.php del teu tema. Si utilitzeu un tema secundari, feu servir functions.php del tema secundari. Afegeix el codi següent:

//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ó

De cara al futur, el paper de jQuery a WordPress segueix sent segur, principalment a causa de la compatibilitat dels complements.

Tot i això, amb les biblioteques JavaScript natives i modernes guanyant popularitat, el panorama podria evolucionar. Estigues informat i adapta’t per aprofitar aquests canvis en el teu procés de desenvolupament web. El futur de jQuery i WordPress és una història que encara sestà escrivint.

Roman atent!

Resumidament, som uns techies apassionats per WordPress que hem creat Wetopi, un Hosting WordPress Gestionat, per minimitzar la fricció a la que tot professional s’enfronta en treballar i allotjar projectes WordPress.

Inclou servidors de desenvolupament Gratis.
No cal tarjeta de crèdit.