Pourquoi jQuery est un bon rappel pour arrêter d'utiliser jQuery

Écrit par Shalitha Suranga✏️

jQuery a une histoire longue et respectée, mais sa nouvelle version bêta de jQuery v4 est sortie sans fonctionnalités intéressantes pour les développeurs Web modernes. Il y a plusieurs raisons pour lesquelles c'est le bon moment pour arrêter d'utiliser jQuery :

1. Les navigateurs modernes et les API JavaScript natives prennent désormais en charge nativement toutes les fonctionnalités fournies par jQuery, ce qui le rend redondant et ses fonctions utilitaires obsolètes
2. L'utilisation de jQuery augmente inutilement la taille du bundle d'applications Web et réduit les performances par rapport aux implémentations natives
3. La sortie de jQuery 4 confirme son obsolescence en manquant de nouvelles fonctionnalités significatives, en se concentrant sur la survie et en soulignant que le JavaScript natif et les frameworks modernes l'ont surpassé.
4. La migration de jQuery vers les modules ES et l'adoption de pratiques modernes dans jQuery 4 n'ajoutent rien de nouveau pour les développeurs Web
5. L'utilisation de jQuery avec des frameworks frontend modernes comme React, Vue et Angular peut entrer en conflit avec leurs architectures et leurs recommandations de codage
6. Les frameworks frontend modernes émettent du code de production avec des polyfills, les développeurs n'ont donc pas besoin d'utiliser l'API jQuery pour créer des pages Web pour les navigateurs plus anciens

Nous explorerons ces points plus en détail et expliquerons pourquoi jQuery v4 conclut un voyage d'une décennie en comparant ses fonctionnalités disponibles avec les API Web JavaScript natives.

L'âge d'or de jQuery avant la v4

Dès le début du développement Web front-end, les développeurs ont utilisé JavaScript pour implémenter des frontends Web conviviaux en mettant à jour les éléments HTML de manière dynamique.

Au début des années 2000, il n'existait pas de bibliothèques de développement frontend modernes, complètes et basées sur des composants comme React, et les navigateurs n'offraient pas non plus de fonctionnalités CSS avancées telles que des animations et des fonctionnalités de haut niveau, conviviales pour les développeurs. API de manipulation DOM, les développeurs ont donc dû écrire de nombreuses lignes de code avec les API Web existantes pour créer des interfaces Web – ils ont même dû écrire du code pour résoudre les problèmes de compatibilité du navigateur avec les API de communication AJAX.

jQuery a résolu ces problèmes en proposant des fonctions raccourcies pour la manipulation du DOM et une API AJAX multi-navigateurs, de sorte que chaque développeur Web a inclus le script jQuery dans ses applications Web.

Comme tout le monde recommande aujourd'hui un framework frontend basé sur des composants, jQuery était l'approche la plus recommandée pour créer des frontends Web dynamiques au milieu des années 2000, lorsque l'utilisation de jQuery a atteint son apogée avant sa chute :

Le site officiel Bootstrap 3.4 utilise jQuery du CDN officiel

Au milieu des années 2000, jQuery v1 à v3 était utilisé dans :

• Tous les modèles HTML de sites Web populaires pour implémenter des curseurs, des galeries d'images, etc.
• Applications Web pour effectuer des manipulations DOM et passer des appels HTTP/AJAX avec le support d'Internet Explorer
• Bootstrap pour implémenter des composants tels que des modaux, des listes déroulantes, etc.
• Chaque modèle et plugin WordPress dynamique pour la manipulation du DOM

L'état de jQuery avec la sortie de la v4

jQuery a publié la première version bêta en février 2024 et la deuxième en juillet  —  les responsables de la base de code prévoient de créer bientôt une version release candidate. La version v4 de jQuery présente les changements majeurs suivants :

• Suppression de la prise en charge d'IE 10 et des versions antérieures du navigateur Web
• Méthodes supprimées déjà obsolètes, telles que jQuery.isArray()
• Prise en charge de l'utilisation du contenu HTML créé avec l'API Trusted Types
• Prise en charge de l'utilisation de données binaires JavaScript natives dans les méthodes AJAX
• La base de code jQuery a été migrée vers les modules ES d'AMD (modules JS requis) avec le bundler Rollup

Avec la sortie de jQuery v4 bêta, il tente de moderniser sa base de code en utilisant des modules ES et de réduire la taille du bundle en abandonnant le support d'IE 10. Vous pouvez en savoir plus sur la prochaine version de jQuery v4 à partir de ce billet de blog officiel.

Pourquoi jQuery v4 confirme sa chute

La sortie de jQuery v4 bêta n'est en effet pas une raison pour arrêter de regarder jQuery, mais la croissance et l'avenir montrés par la version v4 confirment la chute de jQuery dans la technologie Web moderne. Cela a commencé lentement lorsque le standard de navigateur a commencé à offrir des fonctionnalités de manipulation DOM de haut niveau axées sur la productivité des développeurs et des fonctionnalités avancées en CSS qui ont aidé les développeurs à implémenter des styles dynamiques sans utiliser JavaScript.

jQuery v1 à v3 a sans aucun doute implémenté des fonctionnalités conviviales pour les développeurs multi-navigateurs que les navigateurs n'offraient pas nativement. Par exemple, le moteur de sélection Sizzle de jQuery a aidé les développeurs à interroger les éléments du DOM avant que les navigateurs n'implémentent document.querySelectorAll(). De plus, $.ajax() était le fetch() des développeurs précédents en raison de problèmes de compatibilité du navigateur avec l'API AJAX intégrée.

Une ancienne réponse StackOverflow qui recommande d'utiliser jQuery au lieu des anciennes API Web natives

Au cours de la période jQuery v2 à v3, les API HTML, JavaScript, CSS et Web ont été considérablement améliorées et ont proposé des API standard pour les fonctionnalités de jQuery, faisant ainsi de jQuery un choix obsolète.

jQuery a essayé de survivre en adhérant aux API standard, telles que la prise en charge de l'interface Promise standard dans la v3 et la suppression du code en double, mais les fonctionnalités standard du navigateur ont conquis le cœur du développeur moderne. jQuery a publié la v4 non pas avec des fonctionnalités mais avec des améliorations pour rester pertinent dans la technologie Web moderne.

jQuery v4 vous apporte un incrément de bundle gzippé de 27 Ko pour les fonctionnalités fournies nativement par votre navigateur Web avec un code JavaScript côté client de 0 Ko !

jQuery et API de navigateur natif

Comparons côte à côte le code API de jQuery et celui du navigateur natif pour plusieurs exigences de développement et voyons comment les API Web modernes rendent jQuery obsolète.

Créez un nouveau fichier HTML et liez la version bêta de jQuery v4 via le CDN officiel comme suit pour commencer :

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

Sélection d'éléments DOM

Les bibliothèques et frameworks frontend modernes offrent le concept ref pour accéder aux références d'éléments DOM, mais les développeurs Web doivent souvent interroger les éléments DOM s'ils ne dépendent pas d'un framework frontend spécifique. Découvrez comment document.querySelectorAll() implémente une sélection DOM simple et native similaire à jQuery :

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

Résultat :

Sélection d'éléments DOM avec des requêtes CSS à l'aide de jQuery et des API Web natives

jQuery propose la méthode la plus proche() pour revenir en arrière et trouver un nœud DOM correspondant pour un sélecteur donné. L'API DOM native implémente également la même méthode en utilisant le modèle POO :

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

Résultat :

Sélection des éléments DOM les plus proches à l'aide de jQuery et des API Web natives

Certaines fonctionnalités de jQuery n'ont pas d'alternatives identiques et abrégées dans l'API DOM standard moderne, mais nous pouvons utiliser efficacement les méthodes de l'API DOM existantes avec les fonctionnalités JavaScript modernes.

Par exemple, jQuery prend en charge le sélecteur non standard :contains(text), nous devons donc l'implémenter avec la méthode de tableau filter() comme suit :

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

Résultat :

Filtrer les éléments contenant un segment de texte spécifique à l'aide de jQuery et des API Web natives

La méthode querySelectorAll() exploite la puissance des pseudo-classes CSS modernes pour offrir une meilleure alternative native à la fonction jQuery find(). Par exemple, nous pouvons utiliser la pseudo-classe :scope pour définir les appels du sélecteur de requête natif similaire à la fonction jQuery find() :

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

Résultat :

Portée des sélecteurs d'éléments DOM à l'aide de jQuery et des API Web natives

Récupération et mise à jour des attributs DOM

L'attribut de classe, les attributs spécifiques à un élément et les attributs de données personnalisés sont des attributs HTML courants que les développeurs Web doivent souvent récupérer et mettre à jour lors du développement d'applications Web.

Dans le passé, les développeurs devaient manipuler manuellement la propriété className native pour mettre à jour les noms de classe d'éléments, ils utilisaient donc les implémentations de fonctions pré-développées addClass(), removeClass() et toggleClass() de jQuery. Mais maintenant, l'objet natif classList implémente une meilleure prise en charge de la gestion des valeurs d'attribut de classe :

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

Résultat :

Mise à jour des valeurs des attributs de classe à l'aide de jQuery et des API Web natives

Pendant ce temps, les méthodes DOM natives getAttribute() et setAttribute() deviennent un remplacement standard de la fonction abrégée jQuery attr() bien connue :

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

Résultat :

Modification et récupération des attributs des éléments HTML à l'aide de jQuery et des API Web natives

jQuery recommande aux développeurs d'utiliser sa fonction attr() pour définir des attributs de données personnalisés, mais vous pouvez désormais utiliser la propriété d'ensemble de données intégrée pour une récupération/modification plus productive des attributs de données comme suit :

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

Résultat :

Mise à jour des attributs de données personnalisés à l'aide de jQuery et des API Web natives

Manipulation des éléments DOM

Dans le passé, la plupart des développeurs utilisaient jQuery pour la manipulation du DOM, car l'API native de manipulation du DOM n'offrait pas de fonctionnalités axées sur la productivité des développeurs. Désormais, tous les navigateurs Web standards modernes implémentent une prise en charge productive et intégrée de la manipulation DOM de haut niveau.

La création et l'ajout d'éléments sont les opérations les plus fréquentes dans les tâches de manipulation DOM. Voici comment procéder en utilisant à la fois jQuery et les API Web natives :

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

Résultat :

Utilisation des fonctions before() et after() à l'aide de jQuery et des API Web natives

Animation d'éléments DOM

Si vous êtes un développeur Web expérimenté qui a créé des applications Web il y a plus de dix ans, vous savez comment les fonctions jQuery fadeIn(), fadeOut() et animate() vous ont aidé à rendre vos applications Web plus interactives. Ces fonctions d'animation prenaient même en charge l'animation pour créer des animations plus fluides.

Les animations/transitions CSS natives et l'API d'animation Web JavaScript ont rendu l'API d'animation jQuery obsolète. Voici comment implémenter fadeIn() avec l'API d'animations Web standard :

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

Résultat :

Attachement et suppression de gestionnaires d'événements avec jQuery et les API Web natives

JQuery et l'API DOM native offrent des moyens abrégés d'attacher des écouteurs d'événements :

<ul>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.items input[type=checkbox]:checked');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log(elms);

jQuery propose également la fonction one() pour déclencher un gestionnaire d'événements une fois — maintenant, tous les navigateurs Web standard prennent en charge l'option once dans le même but :

// jQuery:
const elms = $('.items input[type=checkbox]:checked')
             .closest('li');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items input[type=checkbox]:checked');
console.log([...elms].map(e => e.closest('li')));

Communiquer avec les services Web

Les anciennes applications Web monolithiques envoyaient fréquemment des requêtes HTTP au serveur principal pour obtenir de nouvelles pages avec des données mises à jour  —  Les applications Web restituaient la page entière pour chaque action majeure de l'utilisateur.

Plus tard, les développeurs ont créé de meilleures applications Web interactives en mettant à jour une partie de la page Web en demandant du contenu HTML via AJAX. Ils ont utilisé jQuery pour envoyer des requêtes AJAX en raison de problèmes de compatibilité du navigateur et de productivité avec l'API AJAX intégrée.

Les développeurs peuvent désormais utiliser la fonction fetch() standard au lieu des fonctionnalités AJAX de jQuery :

// jQuery:
const elms = $('.items li label:contains("Java")');
console.log(elms.toArray());

// Native:
const elms = document.querySelectorAll('.items li label');
console.log([...elms].filter(e => e.textContent.includes('Java')));

Résultat :

Envoi de requêtes HTTP avec jQuery et API web natives

De nos jours, la plupart des développeurs utilisent des API RESTful pour séparer les sources de données de la couche de présentation. jQuery offre une fonction raccourcie et productive pour obtenir des données JSON à partir de services RESTful, mais native fetch() offre une meilleure approche standard :

<div>





<pre class="brush:php;toolbar:false">// jQuery:
const elms = $('.pages')
             .find('.pages > .page-1');
console.log(elms.toArray());

// Native:
const elms = document.querySelector('.pages')
             .querySelectorAll(':scope .pages > .page-1');
console.log(elms);

Résultat :

Demande de données JSON à partir d'un service Web RESTful avec jQuery et des API Web natives

Fonctions utilitaires

jQuery propose diverses fonctions utilitaires pré-développées pour faire gagner du temps aux développeurs Web. De nos jours, nous pouvons trouver des fonctionnalités ECMAScript intégrées pour toutes ces fonctions utilitaires pré-développées qui existent dans jQuery v4, comme indiqué dans le tableau suivant :

Les utilitaires plus anciens comme $.parseJSON() étaient déjà obsolètes dans les versions précédentes de jQuery et supprimés dans la v4.

Puis-je utiliser jQuery avec Vue, React ou Angular ?

Les développeurs Web utilisaient jQuery lorsque les bibliothèques frontales de développement d'applications modernes n'existaient pas. Ils ont utilisé la manipulation DOM de jQuery et les fonctionnalités AJAX principalement pour mettre à jour dynamiquement le frontend sans actualiser la page Web entière. Désormais, les techniques de développement SPA (application d'une seule page) dans les frameworks/bibliothèques frontend modernes permettent aux développeurs Web de créer des applications Web hautement interactives, bien structurées et légères sans utiliser les techniques de rendu à l'ancienne basées sur AJAX.

Nous pouvons utiliser jQuery avec Vue, React et Angular comme n'importe quelle bibliothèque/framework frontend populaire, mais l'intégration de jQuery avec ces bibliothèques frontend est déconseillée car elle n'apporte aucune valeur à l'écosystème de développement frontend moderne.

Chaque bibliothèque frontale populaire propose le concept ref pour accéder aux références d'éléments DOM dans les composants, vous n'avez donc pas besoin d'utiliser jQuery ou document.querySelector(). Par exemple, vous pouvez obtenir la référence de l'élément DOM d'un fichier

<script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script>

<script>
importer $ depuis 'jquery' ;

exporter par défaut {
 monté() {
   const orme = $('#orme');
   console.log(elm);
 }
}
</script>

<modèle>
 <div>



<p>La manipulation manuelle du DOM se produit rarement avec les bibliothèques frontales modernes comme Vue. Cependant, si vous êtes confronté à une telle situation, l'utilisation d'API Web natives est l'approche recommandée.</p>

<h2>
  
  
  Conclusion
</h2>

<p>jQuery était sans aucun doute une bibliothèque JavaScript remarquable qui a introduit une approche productive et conviviale pour les développeurs pour créer des interfaces d'applications Web avec la manipulation DOM et les techniques AJAX. jQuery a gagné en popularité grâce à des problèmes de compatibilité des navigateurs et au manque de fonctionnalités axées sur les développeurs dans les API Web natives. Le W3C et ECMAScript ont résolu ces problèmes en introduisant de nouvelles API Web et fonctionnalités du langage JavaScript. </p>

<p>L'état actuel des API Web offre des classes et des fonctions meilleures, modernes et conviviales pour les développeurs pour toutes les fonctionnalités que possède jQuery, ce qui rend jQuery inutile dans le Web moderne. </p>

<p>La récente version bêta v4 de jQuery l'a confirmé avec des suppressions de fonctionnalités et des améliorations axées sur la maintenance plutôt que sur l'innovation. La V4 et les autres versions de jQuery comporteront très probablement davantage de suppressions de fonctionnalités en raison de la disponibilité d'API Web natives multi-navigateurs. </p><p>Les versions à venir pourraient mettre fin à la prise en charge des anciens navigateurs, car la plupart des utilisateurs ont tendance à utiliser des navigateurs à jour. Je pense également que jQuery ne redeviendra pas populaire puisque les API Web natives actuelles sont stables et bien standardisées, mais les développeurs qui travaillent avec des applications Web existantes qui dépendent de jQuery continueront à l'utiliser et à mettre à niveau leurs projets vers jQuery v4, v5 et bientôt. Tout cela étant dit, personne ne veut augmenter la taille des bundles d'applications Web en ajoutant jQuery pour des fonctionnalités de développement qu'ils peuvent facilement trouver dans n'importe quel navigateur Web populaire !</p>


<hr>

<h2>
  
  
  LogRocket : déboguez plus facilement les erreurs JavaScript en comprenant le contexte
</h2>

<p>Le débogage du code est toujours une tâche fastidieuse. Mais plus vous comprenez vos erreurs, plus il est facile de les corriger.</p>

<p>LogRocket vous permet de comprendre ces erreurs de manière nouvelle et unique. Notre solution de surveillance front-end suit l'engagement des utilisateurs avec vos frontends JavaScript pour vous donner la possibilité de voir exactement ce que l'utilisateur a fait qui a conduit à une erreur.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173087043468616.jpg" alt="Why jQuery s a good reminder to stop using jQuery"></p>

<p>LogRocket enregistre les journaux de la console, les temps de chargement des pages, les traces de pile, les requêtes/réponses réseau lentes avec les corps d'en-tête, les métadonnées du navigateur et les journaux personnalisés. Comprendre l'impact de votre code JavaScript n'aura jamais été aussi simple !</p>

<p>Essayez-le gratuitement.</p>