jQuery - dans le monde une bibliothèque JavaScript. La communauté des développeurs Web l'a créé à la fin des années 2000, ce qui a donné naissance à un riche écosystème de sites, de plugins et de frameworks utilisant jQuery sous le capot.
Mais ces dernières années, son statut de premier outil de développement Web s’est érodé. Voyons pourquoi jQuery est devenu populaire et pourquoi il est passé de mode, et aussi dans quels cas il est encore conseillé de l'utiliser pour créer des sites Web modernes.
Une brève histoire de jQuery
John Resig () a créé la première version de la bibliothèque en 2005, et -m, lors d'un événement appelé BarCampNYC. Sur l'auteur a écrit :
jQuery est une bibliothèque Javascript basée sur la devise : Javascript doit être amusant à coder. jQuery prend en charge les tâches courantes et répétitives, supprime tout le balisage inutile et les rend courtes, élégantes et propres.
jQuery présente deux avantages principaux. La première est une API pratique pour manipuler les pages Web. Il fournit notamment des méthodes puissantes de sélection d’éléments. Non seulement vous pouvez sélectionner par ID ou par classe, mais jQuery vous 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 avantage de la bibliothèque était qu'elle résumait les différences entre les navigateurs. À cette époque, il était difficile d’écrire du code capable de fonctionner de manière fiable dans tous les navigateurs.
Le manque de standardisation signifiait que les développeurs devaient tenir compte de nombreuses différences entre les navigateurs et les cas extrêmes. Jeter un coup d'œil à et recherchez jQuery.browser. Voici un exemple :
// 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 ont pu transférer les inquiétudes concernant tous ces pièges sur les épaules de l'équipe développant la bibliothèque.
Plus tard, jQuery a facilité la mise en œuvre de technologies plus complexes telles que les animations et Ajax. La bibliothèque est effectivement devenue une dépendance standard pour les sites Web. Et aujourd’hui, il alimente une part énorme d’Internet. W3Techs estime que .
Le contrôle du développement de jQuery est également devenu plus formalisé. En 2011, l'équipe . Et en 2012 jQuery Board.
En 2015, la Fondation jQuery a fusionné avec la Fondation Dojo,, qui a ensuite fusionné avec la Fondation Node.js pour devenir-m pour créer, au sein duquel jQuery était l'un des «".
Circonstances changeantes
Cependant, ces dernières années, jQuery . GitHub. Amorcer v5 parce que c'est le sien ""(actuellement 30 Ko, minifié et compressé). Plusieurs tendances dans le développement Web ont affaibli la position de jQuery en tant qu'outil essentiel.
Les navigateurs
Pour un certain nombre de raisons, les différences et limitations des navigateurs sont devenues moins importantes. Premièrement, la normalisation s'est améliorée. Les principaux développeurs de navigateurs (Apple, Google, Microsoft et Mozilla) travaillent ensemble pour développer à l'intérieur.
Bien que les navigateurs diffèrent encore les uns des autres sur un certain nombre de points importants, les fournisseurs disposent au moins d'un moyen de rechercher et de créer une base de données commune au lieu de ensemble. En conséquence, les API des navigateurs ont acquis de nouvelles fonctionnalités. Par exemple, capable de 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 и dupliquer les sélecteurs jQuery :
// jQuery
const fooDivs = $('.foo div');
// native
const fooDivs = document.querySelectorAll('.foo div');Vous pouvez désormais manipuler les classes d'éléments en utilisant :
// jQuery
$('#warning').toggleClass('visible');
// native
document.querySelector('#warning').classList.toggle('visible');Le site Plusieurs autres situations sont répertoriées dans lesquelles le code jQuery peut être remplacé par du code natif. Certains développeurs s'en tiennent toujours à jQuery parce qu'ils ne connaissent tout simplement pas les nouvelles API, mais lorsqu'ils les connaissent, ils commencent à utiliser la bibliothèque moins souvent.
L'utilisation de fonctionnalités natives améliore les performances des pages. Beaucoup maintenant vous pouvez mettre en œuvre en utilisant CSS.
La deuxième raison est que les navigateurs sont mis à jour beaucoup plus rapidement qu’auparavant. La plupart d'entre eux utilisent , à l'exception d'Apple Safari. Ils peuvent être mis à jour en arrière-plan sans la participation de l'utilisateur et ne sont pas liés aux mises à jour du système d'exploitation.
Cela signifie que les nouvelles fonctionnalités du navigateur et les corrections de bugs sont distribuées beaucoup plus rapidement et que les développeurs n'ont pas à attendre la publication. atteindra un niveau acceptable. Ils peuvent utiliser en toute confiance les nouvelles fonctionnalités et API sans télécharger jQuery ou polyfills.
La troisième raison est qu'Internet Explorer s'approche d'un état de non-pertinence totale. IE a longtemps été le fléau du développement Web dans le monde. Ses bogues étaient répandus et, comme IE a dominé les années 2000 et n'a pas utilisé de stratégie de mise à jour permanente, les anciennes versions sont encore courantes.
En 2016, Microsoft a accéléré le déclassement d'IE, dixième version et versions antérieures, limitant la prise en charge à IE 11. Et de plus en plus, les développeurs Web ont le luxe d'ignorer la compatibilité d'IE.
Même jQuery a cessé de prendre en charge IE 8 et versions antérieures à partir de , publié en 2013. Et bien que dans certains cas le support d'IE soit encore nécessaire, par exemple sur des sites plus anciens, ces situations surviennent de moins en moins souvent.
Nouveaux cadres
Depuis l'avènement de jQuery, de nombreux frameworks ont été créés, notamment des leaders modernes , и . Ils présentent deux avantages importants par rapport à jQuery.
Premièrement, ils facilitent la séparation de l’interface utilisateur en composants. Les frameworks sont conçus pour gérer le rendu et la mise à jour des pages. Et jQuery n'est généralement utilisé que pour la mise à jour, laissant le soin de fournir la page initiale au serveur.
D'autre part, les composants React, Angular et Vue permettent de coupler étroitement HTML, code et même CSS. Tout comme nous divisons la base de code en de nombreuses fonctions et classes autonomes, la possibilité de diviser l'interface en composants réutilisables facilite la création et la maintenance de sites complexes.
Le deuxième avantage est que les frameworks plus récents adhèrent à un paradigme déclaratif, dans lequel le développeur décrit à quoi devrait ressembler l'interface et laisse au framework le soin d'apporter toutes les modifications nécessaires pour obtenir ce qu'il souhaite. Cette approche est contraire à l’approche impérative qui caractérise le code jQuery.
Dans jQuery, vous notez explicitement les étapes à suivre pour apporter des modifications. Et dans un cadre déclaratif, vous dites : « D'après ces données, l'interface devrait ressembler à ceci. » Cela peut rendre l’écriture de code sans bug beaucoup plus facile.
Les développeurs ont adopté de nouvelles approches en matière de développement de sites Web, raison pour laquelle la popularité de jQuery a diminué.
Quand utiliser jQuery ?
Donc quand devrait utiliser jQuery ?
Si la complexité du projet augmente, il est préférable de commencer avec une autre bibliothèque ou un autre framework qui vous permet de gérer la complexité de manière significative. Par exemple, divisez l'interface en composants. Utiliser jQuery sur de tels sites peut sembler correct au début, mais cela conduira rapidement à du code spaghetti dans lequel vous ne savez pas quel fragment affecte quelle partie de la page.
J'ai été dans une telle situation, lorsque j'essaie d'apporter un changement, cela me semble une tâche difficile. Vous ne pouvez pas être sûr de ne rien casser car les sélecteurs jQuery dépendent de la structure HTML générée par le serveur.
À l’autre extrémité de l’échelle se trouvent les sites simples qui ne nécessitent qu’un peu d’interactivité ou de contenu dynamique. Je n'utiliserais pas non plus jQuery par défaut dans ces cas, car vous pouvez faire bien plus avec les API natives.
Même si j'ai besoin de quelque chose de plus puissant, je chercherai une bibliothèque spécialisée, par ex. pour l'Ajax ou pour les animations. Ce sera plus facile que de charger tous les jQuery pour une petite fonctionnalité.
Je pense que la meilleure raison d’utiliser jQuery est qu’il fournit des fonctionnalités complètes pour le front-end d’un site Web. Au lieu d'apprendre une variété d'API natives ou de bibliothèques spécialisées, vous pouvez lire uniquement la documentation jQuery et devenir instantanément productif.
L'approche impérative n'est pas bien évolutive, mais elle est plus facile à apprendre que l'approche déclarative d'autres bibliothèques. Pour un site aux capacités clairement limitées, mieux vaut utiliser jQuery et travailler sereinement : la bibliothèque ne nécessite pas d'assemblage ou de compilation complexe.
De plus, jQuery est une bonne solution si vous êtes sûr que votre site ne se compliquera pas avec le temps et si vous ne vous souciez pas des fonctionnalités natives, ce qui nécessitera certainement d'écrire plus de code que jQuery.
Vous pouvez également utiliser cette bibliothèque si vous devez prendre en charge les anciennes versions d'IE. Ensuite, jQuery vous servira comme à l’époque où IE était le navigateur le plus populaire.
Prospection
jQuery ne disparaîtra pas de sitôt. Elle , et de nombreux développeurs préfèrent utiliser son API, même si des méthodes natives sont disponibles. La bibliothèque a aidé toute une génération de développeurs à créer des sites Web qui fonctionnent sur n'importe quel navigateur. Bien qu’il ait été remplacé à bien des égards par de nouvelles bibliothèques, frameworks et paradigmes, jQuery a joué un rôle extrêmement positif dans la création du Web moderne.
À moins que les fonctionnalités de jQuery ne changent de manière significative, il est probable que l'utilisation de la bibliothèque continuera à diminuer lentement mais régulièrement au cours des prochaines années. Les nouveaux sites Web ont tendance à être construits dès le départ à l’aide de frameworks plus modernes, et les cas d’utilisation appropriés de jQuery deviennent de plus en plus rares.
Certaines personnes n'aiment pas la vitesse à laquelle les outils de développement Web deviennent obsolètes, mais pour moi, c'est la preuve d'un progrès rapide. jQuery nous a permis de faire beaucoup de choses mieux. Il en va de même pour ses successeurs.
Source: habr.com