jQuery — dans le monde. La communauté des développeurs web l'a créée à la fin des années 2000, ce qui a mené à l'émergence d'un riche écosystème de sites, de plugins et de frameworks utilisant jQuery en arrière-plan.
Mais ces dernières années, son statut d'outil principal pour le développement web a été ébranlé. Examinons pourquoi jQuery est devenu populaire et pourquoi il a perdu de sa vigueur, ainsi que dans quels cas il est encore raisonnable de l'utiliser pour créer des sites modernes.
Bref historique de jQuery
John Resig () a créé la première version de la bibliothèque en 2005, et - lors d'un événement appelé BarCampNYC. Sur l'auteur a écrit :
jQuery est une bibliothèque JavaScript dont le principe fondamental est : Programmer en JavaScript doit être agréable. jQuery prend les tâches fréquentes et répétitives, élimine tout balisage non nécessaire et les rend courtes, élégantes et compréhensibles.
jQuery a deux principaux atouts. Le premier est une API pratique pour manipuler les pages web. En particulier, elle offre des méthodes puissantes pour sélectionner des éléments. On peut sélectionner non seulement par ID ou par classes, jQuery permet d'écrire des expressions complexes, par exemple pour sélectionner des éléments en fonction de leurs relations avec d'autres éléments :
// Select every item within the list of people within the contacts element
$('#contacts ul.people li');Au fil du temps, le mécanisme de sélection est devenu une bibliothèque distincte, .
Le deuxième atout de la bibliothèque était qu'elle abstrait les différences entre les navigateurs. À cette époque, il était difficile d'écrire du code capable de fonctionner de manière fiable sur tous les navigateurs.
L'absence de normalisation signifiait que les développeurs devaient tenir compte de nombreuses différences entre les navigateurs et des cas particuliers. Regardez et cherchez jQuery.browser. Voici un des exemples :
// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
// Use the handy event callback
jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );
// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {
// Only works if you document.write() it
document.write("<scr" + "ipt id=__ie_init defer=true " +
"src=javascript:void(0)></script>");
// Use the defer script hack
var script = document.getElementById("__ie_init");
script.onreadystatechange = function() {
if ( this.readyState == "complete" )
jQuery.ready();
};
// Clear from memory
script = null;
// If Safari is used
} else if ( jQuery.browser == "safari" ) {
// Continually check to see if the document.readyState is valid
jQuery.safariTimer = setInterval(function(){
// loaded and complete are both valid states
if ( document.readyState == "loaded" ||
document.readyState == "complete" ) {
// If either one are found, remove the timer
clearInterval( jQuery.safariTimer );
jQuery.safariTimer = null;
// and execute any waiting functions
jQuery.ready();
}
}, 10);
}Et grâce à jQuery, les développeurs pouvaient transférer les préoccupations concernant tous ces pièges sur les épaules de l'équipe qui développe la bibliothèque.
Plus tard, jQuery a facilité l'adoption de technologies plus complexes, comme les animations et Ajax. La bibliothèque est en fait devenue une dépendance standard pour les sites web. Et aujourd'hui, elle fait fonctionner une énorme partie d'Internet. W3Techs estime que .
Le contrôle du développement de jQuery est également devenu plus formel. En 2011, l'équipe Et en 2012, le jQuery Board.
En 2015, la jQuery Foundation a fusionné avec la Dojo Foundation,, qui a ensuite fusionné avec la Node.js Foundation en- pour créer, dans laquelle jQuery était l'un des «.»
Circonstances changeantes
Cependant, ces dernières années, jQuery . GitHub. Bootstrap v5 , car c'est sa «» (actuellement d'une taille de 30 Ko, minifié et emballé). Plusieurs tendances en développement web ont affaibli la position de jQuery en tant qu'outil indispensable.
Navigateurs
Pour diverses raisons, les différences et limitations entre navigateurs sont devenues moins importantes. Tout d'abord, la standardisation s'est améliorée. Les principaux développeurs de navigateurs (Apple, Google, Microsoft et Mozilla) collaborent pour développer dans le cadre de.
Bien que les navigateurs diffèrent encore dans plusieurs aspects importants, les fournisseurs disposent au moins d'un moyen de rechercher et de créer une base commune au lieu de les uns contre les autres. En conséquence, les API des navigateurs ont acquis de nouvelles possibilités. Par exemple, peut remplacer les fonctions Ajax de jQuery :
// jQuery
$.getJSON('https://api.com/songs.json')
.done(function (songs) {
console.log(songs);
})
// native
fetch('https://api.com/songs.json')
.then(function (response) {
return response.json();
})
.then(function (songs) {
console.log(songs);
});Méthodes et dupliquent les méthodes de sélection de jQuery :
// jQuery
const fooDivs = $('.foo div');
// native
const fooDivs = document.querySelectorAll('.foo div');Manipuler les classes des éléments est désormais possible avec :
// jQuery
$('#warning').toggleClass('visible');
// native
document.querySelector('#warning').classList.toggle('visible');Sur le site énumère encore d'autres situations où le code jQuery peut être remplacé par du code natif. Certains développeurs restent toujours attachés à jQuery, car ils ne connaissent tout simplement pas les nouvelles API, mais une fois informés, ils commencent à utiliser cette bibliothèque moins fréquemment.
Utiliser les fonctionnalités natives permet d'améliorer les performances des pages. De nombreux peuvent maintenant être réalisés avec CSS.
Une autre raison est que les navigateurs se mettent à jour beaucoup plus rapidement qu'auparavant. La plupart d'entre eux appliquent une , à l'exception d'Apple Safari. Ils peuvent se mettre à jour en arrière-plan sans nécessiter l'intervention de l'utilisateur et ne sont pas liés aux mises à jour du système d'exploitation.
Cela signifie que de nouvelles fonctionnalités des navigateurs et des corrections de bogues sont diffusées beaucoup plus rapidement, et les développeurs n'ont pas à attendre que la part de marché atteindra un niveau acceptable. Ils peuvent utiliser en toute confiance de nouvelles fonctionnalités et API sans charger jQuery ou des polyfills.
La troisième raison est que Internet Explorer s'approche de l'état d'obsolescence totale. IE est depuis longtemps un fléau pour le développement web dans le monde entier. Les erreurs qui lui sont caractéristiques étaient largement répandues, et comme IE dominait dans les années 2000 et n'a pas utilisé de stratégie de mise à jour « evergreen », ses anciennes versions sont encore souvent rencontrées.
En 2016, Microsoft a accéléré le retrait d'IE de la circulation, pour la dixième version et les versions antérieures, se limitant au support d'IE 11. De plus en plus, les développeurs web peuvent se permettre le luxe d'ignorer la compatibilité avec IE.
Même jQuery a cessé de supporter IE 8 et inférieur à partir de , sortie en 2013. Et bien que dans certains cas le support d'IE soit encore nécessaire, par exemple sur des sites anciens, ces situations se font de plus en plus rares.
Nouveaux cadres
Depuis l'apparition de jQuery, de nombreux cadres ont été créés, y compris les leaders modernes , et . Ils ont deux avantages importants par rapport à jQuery.
Tout d'abord, ils permettent de segmenter facilement l'interface utilisateur en composants. Les cadres sont conçus pour gérer le rendu et la mise à jour des pages, tandis que jQuery est généralement utilisé uniquement pour la mise à jour, laissant au serveur la tâche de fournir la page initiale.
D'autre part, les composants React, Angular et Vue permettent de lier étroitement HTML, code et même CSS. Tout comme nous divisons la base de code en nombreuses fonctions et classes autonomes, la possibilité de segmenter l'interface en composants réutilisables simplifie la construction et la maintenance de sites complexes.
Le deuxième avantage est que les cadres plus récents adoptent la paradigme déclaratif, dans lequel le développeur décrit comment l'interface doit apparaître, tandis que le cadre gère les modifications nécessaires pour atteindre l'état désiré. Cette approche contraste avec l'approche impérative typique du code jQuery.
Dans jQuery, vous énoncez explicitement les étapes pour apporter des modifications. Dans un cadre déclaratif, vous dites : « Selon ces données, l'interface doit apparaître ainsi ». Cela peut grandement faciliter l'écriture de code sans bugs.
Les développeurs ont adopté de nouvelles approches pour le développement de sites web, ce qui a conduit à une diminution de la popularité de jQuery.
Quand utiliser jQuery?
Alors quand il convient utiliser jQuery?
Si la complexité du projet augmente, il vaut mieux commencer avec une autre bibliothèque ou un framework qui permet de gérer cette complexité de manière significative. Par exemple, en divisant l'interface en composants. L'utilisation de jQuery dans de tels sites peut sembler acceptable au début, mais cela conduira rapidement à un code spaghetti, où vous ne serez pas sûr de quelle partie influence quelle section de la page.
J'ai déjà été dans une telle situation, où tenter d'effectuer un changement donne l'impression d'une tâche difficile. On ne peut pas être certain de ne rien casser, car les sélecteurs jQuery dépendent de la structure HTML créée par le serveur.
À l'autre bout de l'échelle se trouvent les sites simples qui ne nécessitent qu'un peu d'interactivité ou de contenu dynamique. Dans ces cas, je ne commencerais pas non plus par utiliser jQuery, car avec les API natives, on peut faire beaucoup plus.
Même si j'ai besoin de quelque chose de plus puissant, je chercherai une bibliothèque spécialisée, par exemple, pour Ajax ou pour les animations. Cela sera plus simple que de charger toute la jQuery pour une petite fonctionnalité.
Je pense que la meilleure justification pour utiliser jQuery est qu'elle offre une fonctionnalité complète pour le développement frontend d'un site. Au lieu d'apprendre divers API natifs ou bibliothèques spécialisées, vous pouvez simplement consulter la documentation jQuery et devenir immédiatement productif.
L'approche impérative se déploie mal, mais elle est plus facile à maîtriser que l'approche déclarative d'autres bibliothèques. Pour un site avec des possibilités clairement limitées, il est préférable d'utiliser jQuery et de travailler tranquillement : la bibliothèque ne nécessite pas de construction ou de compilation compliquée.
De plus, jQuery est un bon choix si vous êtes certain que le site ne deviendra pas plus complexe avec le temps, et si vous ne vous souciez pas de la fonctionnalité native, qui nécessitera certainement plus de code qu'avec jQuery.
Vous pouvez également utiliser cette bibliothèque si vous devez prendre en charge les anciennes versions d'IE. À ce moment-là, jQuery vous servira comme à l'époque où IE était le navigateur le plus populaire.
Un regard vers l'avenir
jQuery ne disparaîtra pas de sitôt. Elle , et de nombreux développeurs préfèrent utiliser son API, même en présence de méthodes natives. Cette bibliothèque a aidé toute une génération de développeurs à créer des sites fonctionnant sur tous les navigateurs. Et bien que dans de nombreux aspects, elle soit remplacée par de nouvelles bibliothèques, frameworks et paradigmes, jQuery a joué un rôle énorme et positif dans la création du web moderne.
Si la fonctionnalité de jQuery ne change pas de manière significative, il est probable qu'au cours des prochaines années, son utilisation continuera à diminuer lentement mais sûrement. Les nouveaux sites web sont généralement créés dès le départ en utilisant des frameworks plus modernes, et les cas d'utilisation appropriés de jQuery deviennent de plus en plus rares.
Certaines personnes n'aiment pas l'intensité du désuétude des outils de développement web, mais pour moi, c'est un signe de progrès rapide. jQuery nous a permis d'améliorer de nombreuses choses. Il en va de même pour ses successeurs.
Source : habr.com
