JQuery histoire et patrimoine


jQuery est la bibliothèque JavaScript la plus populaire au monde. La communauté des développeurs Web l'a créé à la fin des années 2000, ce qui a conduit à l'émergence d'un riche écosystème de sites, de plug-ins et de frameworks qui utilisent jQuery sous le capot.

Mais ces dernières années, son statut de principal outil de développement web a été ébranlé. Voyons pourquoi jQuery est devenu populaire et pourquoi il est passé de mode, ainsi que dans quels cas il est toujours conseillé de l'utiliser pour créer des sites modernes.

Une brève histoire de jQuery


John Resig a créé la première version de la bibliothèque en 2005 et l'a publiée en 2006 lors d'un événement appelé BarCampNYC. Sur le site officiel de jQuery, l' auteur a écrit:

jQuery est une bibliothèque Javascript basée sur la devise: la programmation en Javascript devrait être agréable. jQuery prend des tâches fréquentes et répétitives, extrait toutes les balises inutiles et les rend courtes, élégantes et compréhensibles.

JQuery présente deux avantages principaux. Le premier est une API pratique pour manipuler les pages Web. En particulier, il fournit des méthodes puissantes pour sélectionner des éléments. Vous pouvez choisir non seulement par ID ou par classe, 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 moteur de sélection est devenu une bibliothèque Sizzle distincte.

Le deuxième avantage de la bibliothèque était qu'elle résumait les différences entre les navigateurs. Au cours de ces années, il était difficile d'écrire du code pouvant fonctionner de manière fiable dans tous les navigateurs.

Le manque de normalisation signifiait que les développeurs devaient tenir compte des nombreuses différences entre les navigateurs et les cas limites. Jetez un œil à ce premier code source jQuery 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 déplacer le soin de tous ces pièges sur les épaules de l'équipe de développement de la bibliothèque.

JQuery a ensuite facilité la mise en œuvre de technologies plus sophistiquées telles que les animations et Ajax. La bibliothèque est en fait devenue une dépendance de site Web standard. Et aujourd'hui, il fournit le travail d'une énorme part d'Internet. W3Techs estime que 74% des sites utilisent aujourd'hui jQuery .

Le contrôle du développement de jQuery s'est également officialisé. En 2011, l'équipe a créé le jQuery Board . Et en 2012, le Conseil jQuery s'est transformé en Fondation jQuery .

En 2015, la Fondation jQuery a rejoint la Fondation Dojo pour créer la Fondation JS , qui s'est ensuite associée à la Fondation Node.js en 2019 pour créer la Fondation OpenJS , dans laquelle jQuery était l'un des « projets percutants ».

Changement de circonstances


Cependant, ces dernières années, jQuery a gagné en popularité . GitHub a supprimé la bibliothèque du frontend de son site . Bootstrap v5 supprimera jQuery car il s'agit de sa « plus grande dépendance client pour JavaScript standard » (actuellement 30 Ko, minifiée et packagée). Plusieurs tendances dans le développement Web ont affaibli la position de jQuery en tant qu'outil nécessaire.

Navigateurs


Pour un certain nombre de raisons, les différences et les limitations du navigateur sont devenues moins importantes. Premièrement, la normalisation s'est améliorée. Les principaux développeurs de navigateurs (Apple, Google, Microsoft et Mozilla) développent conjointement des normes Web dans le cadre du Web Hypertext Application Technology Working Group .
Bien que les navigateurs diffèrent encore les uns des autres sur un certain nombre d'aspects importants, les fournisseurs ont au moins un moyen de rechercher et de créer une base commune au lieu d'une guerre permanente les uns avec les autres. En conséquence, les API de navigateur ont acquis de nouvelles fonctionnalités. Par exemple, l' API Fetch est 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); }); 

Les méthodes querySelector et querySelectorAll dupliquent les sélecteurs de jQuery:

 // jQuery const fooDivs = $('.foo div'); // native const fooDivs = document.querySelectorAll('.foo div'); 

Vous pouvez maintenant manipuler les classes d'éléments avec classList :

 // jQuery $('#warning').toggleClass('visible'); // native document.querySelector('#warning').classList.toggle('visible'); 

Le site Web You Might Not Need jQuery répertorie quelques autres situations dans lesquelles vous pouvez remplacer le code jQuery par du code natif. Certains développeurs adhèrent toujours à jQuery, car ils ne connaissent tout simplement pas les nouvelles API, mais lorsqu'ils découvrent, ils commencent à utiliser cette bibliothèque moins souvent.

L'utilisation de fonctionnalités natives peut améliorer les performances des pages. De nombreux effets d'animation jQuery peuvent désormais être implémentés beaucoup plus efficacement avec CSS.

La deuxième raison est que les navigateurs se mettent à jour beaucoup plus rapidement qu'auparavant. La plupart d'entre eux ont une stratégie de mise à jour «à feuilles persistantes» , à l'exception d'Apple Safari. Ils peuvent être mis à jour en arrière-plan sans intervention 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 bogues se propagent beaucoup plus rapidement, et les développeurs n'ont pas besoin d'attendre que le partage Can I Use atteigne un niveau acceptable. Ils peuvent utiliser en toute confiance de nouvelles fonctionnalités et API sans charger jQuery ou polyfiles.

La troisième raison est qu'Internet Explorer approche d'un état de non-pertinence totale. IE est depuis longtemps le fléau du développement web dans le monde. Ses bogues typiques étaient répandus, et comme IE dominait dans les années 2000 et n'utilisait pas de stratégie de mise à jour «persistante», ses anciennes versions sont toujours courantes.

En 2016, Microsoft a accéléré le déclassement d'IE en interrompant la prise en charge de la dixième et des versions antérieures, en se limitant à la prise en charge d'IE 11. Et 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 prendre en charge IE 8 et inférieur depuis la version 2.0 , publiée en 2013. Et bien que dans certains cas, la prise en charge d'IE soit toujours requise, par exemple sur les sites plus anciens, cependant, ces situations se produisent de moins en moins.

De nouveaux cadres


Depuis l'avènement de jQuery, de nombreux frameworks ont été créés, y compris les leaders modernes de React , Angular et Vue . Ils ont deux avantages importants par rapport à jQuery.

Tout d'abord, ils facilitent la division de l'interface utilisateur en composants. Les frameworks sont conçus pour gérer le rendu et l'actualisation des pages. Et jQuery est généralement utilisé uniquement pour la mise à jour, confiant au serveur la tâche de fournir la page de démarrage.

D'un autre côté, les composants React, Angular et Vue vous permettent de lier étroitement HTML, code et même CSS. Comme nous divisons la base de code en de nombreuses fonctions et classes autonomes, la possibilité de diviser l'interface en composants réutilisables simplifie l'assemblage et la maintenance de sites complexes.

Le deuxième avantage est que les cadres plus récents adhèrent à un paradigme déclaratif, dans lequel le développeur décrit à quoi devrait ressembler l'interface et confie au cadre la mise en œuvre de tous les changements nécessaires pour atteindre celui souhaité. Cette approche contredit l'approche impérative caractéristique du code jQuery.

Dans jQuery, vous prescrivez explicitement les étapes pour effectuer des modifications. Et dans le cadre déclaratif, vous dites: "Selon ces données, l'interface devrait ressembler à ceci." Cela peut grandement faciliter l'écriture de code sans bogues.

Les développeurs ont adopté de nouvelles approches pour le développement de sites Web, c'est pourquoi la popularité de jQuery a chuté.

Quand utiliser jQuery?


Alors, quand utiliser jQuery?

Si la complexité du projet augmente, il est préférable de commencer avec une autre bibliothèque ou un cadre qui vous permet de gérer de manière significative la complexité. Par exemple, pour diviser l'interface en composants. L'utilisation de jQuery dans de tels sites au premier abord peut sembler acceptable, mais elle conduira rapidement à du code spaghetti lorsque vous ne savez pas quel fragment affecte quelle partie de la page.

J'ai été dans une telle situation, quand j'essaye de faire un changement, j'ai le sentiment d'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 créée par le serveur.

À l'autre extrémité de l'échelle se trouvent des sites simples qui ne nécessitent qu'une touche d'interactivité ou de contenu dynamique. Dans de tels cas, je n'utiliserais pas jQuery par défaut, car beaucoup plus peut être fait avec des API natives.

Même si j'ai besoin de quelque chose de plus puissant, je chercherai une bibliothèque spécialisée, par exemple, axios pour Ajax ou Animate.css pour les animations. Ce sera plus facile que de charger tous les jQuery pour un peu de fonctionnalité.

Je pense que la meilleure justification de l'utilisation de jQuery est qu'il fournit des fonctionnalités complètes pour le site frontal. Au lieu d'apprendre une variété d'API natives ou de bibliothèques spécialisées, vous ne pouvez lire que la documentation jQuery et vous deviendrez immédiatement productif.

L'approche impérative n'évolue pas bien, mais est plus facile à apprendre que l'approche déclarative des autres bibliothèques. Pour un site aux capacités clairement limitées, il est préférable d'utiliser jQuery et de travailler en silence: la bibliothèque ne nécessite ni assemblage ni compilation complexes.

De plus, jQuery est bon dans les cas où vous êtes sûr que le site ne se compliquera pas avec le temps, et si vous ne vous souciez pas des fonctionnalités natives, ce qui, bien sûr, nécessitera 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 au temps où IE était le navigateur le plus populaire.

Regardez vers l'avenir


jQuery ne disparaîtra pas de sitôt. Il se développe activement et de nombreux développeurs préfèrent utiliser son API, même avec la disponibilité de méthodes natives. 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. Et bien que sous de nombreux aspects, il ait été remplacé par de nouvelles bibliothèques, cadres et paradigmes, jQuery a joué un rôle positif énorme dans la création d'un Web moderne.

Si la fonctionnalité de jQuery ne change pas de manière significative, il est probable qu'au cours des prochaines années, l'utilisation de la bibliothèque continuera de décliner lentement mais régulièrement. Les nouveaux sites Web sont généralement créés dès le début à l'aide de cadres plus modernes, et les scénarios d'utilisation jQuery appropriés deviennent moins courants.

Quelqu'un n'aime pas l'intensité de l'obsolescence des outils de développement Web, mais pour moi, c'est une preuve de progrès rapides. jQuery nous a permis de faire beaucoup mieux. Il en va de même pour ses successeurs.

Source: https://habr.com/ru/post/fr468169/


All Articles