Qu’est-ce que le JavaScript
JavaScript est un langage de programmation créé en 1995 par Brendan Eich. Il permet de dynamiser des pages web en offrant notamment; la manipulation du DOM1, de modifier des effets graphiques (CSS, images ect…) ainsi que gérés des requêtes asynchrones, par exemple vers des API afin de récupérer des données.
1 Le DOM est utilisé par les navigateurs pour générer le rendu.
Qu’est-ce que jQuery
jQuery n’est pas un langage de programmation, mais une librairie JavaScript créée en 2006. C’est une boite à outils qui permet de facilement manipuler le DOM, les éléments graphiques ou les requêtes asynchrones. Ses principaux points forts résident dans sa simplicité de prise en main ainsi qu’une gestion des compatibilités des différents navigateurs web. Je pense que c’est pour ces raisons que beaucoup de développeurs l’ont rapidement adopté.
Avantage jQuery et inconvénient JavaScript
La librairie jQuery est légère, actuellement la version 3.6.0 minifiée pèse seulement 87,4 ko. De plus, comme expliquée précédemment, la force de jQuery réside dans le fait de faciliter l’utilisation de JavaScript ainsi que de gérer la compatibilité des navigateurs. Ce qui économise des heures de travail et pour une entreprise le temps c’est de l’argent.
Prenons comme exemple une page HTML, dans laquelle nous souhaitons simplement effectuer une alerte dès que l’on clique sur un bouton (d’accord, ça ne sert à rien, mais ça permet de réaliser un exemple simple).
HTML
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple Jquery</title>
</head>
<body>
<button class="btn">button 1</button>
<button class="btn">button 2</button>
<button class="btn">button 3</button>
</body>
</html>jQuery
$(document).ready(function(){
$('.btn').on('click', function(){
const index = $('.btn').index(this) + 1
alert('Vous avez cliqué sur le bouton ' + index)
})
})Lien Jsfiddle : https://jsfiddle.net/solinus/wm7g5pf2/14/
JavaScript pur
var ready = function(callback) {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready( () => {
[].forEach.call(document.querySelectorAll('.btn'), function(el, i) {
el.addEventListener('click', function() {
alert('Vous avez cliqué sur le bouton ' + (i + 1) )
})
})
})Lien Jsfiddle : https://jsfiddle.net/solinus/wm7g5pf2/14/
C’est un exemple simple, mais nous constatons que le script qui utilise jQuery contient 6 lignes, contre 12 en JavaScript pur. Cela fait le double, et même si dans notre cas, cela n’est pas énorme, je vous laisse imaginer ce que cela peut donner pour des développements plus complexes… Mais, dans mon code, je ne tiens pas compte de la compatibilité entre les différents navigateurs. Les deux scripts devraient fonctionner sans trop de problèmes, mais si l’on devait faire attention aux anciens navigateurs cela serait plus compliqué. En effet, les lignes 1 et 6 utilisent une fonction fléchée :
var ready = function(callback)
ready( () => { Les fonctions fléchées ne sont pas acceptées dans Internet Explorer. De plus, la boucle qui parcourt des éléments ne fonctionne qu’à partir d’Internet Explorer 9.
La syntaxe JavaScript complexifie sa prise en main et nécessite plus de temps d’apprentissage. De plus, assurer la compatibilité avec les anciens navigateurs peut vite devenir compliqué et rallonger la taille des scripts.
Inconvénient jQuery/Avantage JavaScript
Maintenant, parlons des inconvénients de jQuery. Nous devons réaliser des sites toujours plus légers et plus rapides afin d’offrir une expérience agréable à l’utilisateur final, que cela soit sur ordinateur ou sur un téléphone. Pour cela, nous les testons sur des plateformes comme Page Speed ou Dareboost qui vont analyser nos pages, calculer le temps de chargement pour donner un score à notre site.
Si nous reprenons la première version de notre exemple, nous chargeons jQuery qui pèse 87,4 ko. Notre script qui exécute la fonction alert() ne fait que 1 ko.
Le code JavaScript pur fait également 1 ko et n’a pas besoin de librairie supplémentaire. Donc, dans notre cas cette version native chargera plus rapidement. Pour utiliser jQuery, nous devons le charger, ce qui engendre déjà avec un malus pour la performance des sites. De plus, comme expliqué en début d’article jQuery constitué un framework JavaScript. C’est-à-dire que les possibilités données par la librairie jQuery peuvent être développées en JavaScript pur. JQuery facilite l’utilisation de JavaScript, ce qui le rend plus lent que le JavaScript natif. On trouve de nombreux benchmarks sur internet où l’on peut voir que majoritairement les fonctions JavaScript pures sont plus rapides qu’avec jQuery.
Conclusion
Pour ma part, j’ai abandonné jQuery depuis un moment. Les deux raisons principales à cela. La première réside dans le fait que je travaille dans une agence web qui met en avant la performance et la rapidité des sites. Dans l’ensemble, nous obtenions de très bonnes notes sur Dareboost (entre 90 et 100 %). Cependant, sur Page Speed, même si nous arrivions également entre 90 et 100 % sur desktop, ce n’était pas le cas sur mobile. En décortiquant les analyses de Page Speed, j’ai remarqué que le problème venait de la librairie jQuery. Le résultat diminuait encore quand la jQuery UI était chargée.
Nous réalisons majoritairement des sites vitrine. Nous nous servons de JavaScript pour dynamiser les pages avec la mise en place de Sliders, d’Ajax et de lazy loading. De plus, nous avons allégé la compatibilité des navigateurs pour nous concentrer principalement sur le mobile (61 % des visites depuis un mobile en 2020 aux US – https://www.perficient.com/insights/research-hub/mobile-vsdesktop-usage). Du coup, nous supportons seulement les navigateurs communs, Edge Chromium, Chrome, Firefox et Safari. Quant à la première version Edge de Microsoft et Internet Explorer 11, nous nous assurons simplement que les pages apparaissent propres et lisibles. Pour ces raisons, nous n’avons pas vraiment besoin de la gestion de compatibilité offerte par la librairie jQuery. En codant directement en JavaScript pur, nous réduisons le temps de chargement et d’exécution des pages.