Faut-il enterrer jQuery ?
Alors oui, je sais, avec une telle question je risque de faire sortir dans la rue des millions de JS jaunes en situation précaire qui n’imaginent pas un monde sans jQuery. Mais voilà fidèle à notre leitmotiv « No Fucking JS« , il est bon, de temps en temps, de remettre en cause ses acquis surtout quand ceux-ci ont plus de 13 ans !
jQuery, qu’est-ce que c’est ?
jQuery est un framework JavaScript, une bibliothèque de composants JS créée pour faciliter l’écriture de scripts côté client dans le code HTML des pages web. Parmi les actions qu’il simplifie : le parcours de l’arbre DOM, la gestion des événements, les animations et les interactions Ajax.
La promesse de jQuery est d’être facile à apprendre, extensible avec une multitude de plugins et surtout compatible avec pratiquement tous les navigateurs…
Pour conclure cette définition, précisons que jQuery n’est pas un langage : c’est juste du code JavaScript bien écrit.
3 versions différentes de jQuery
En effet, le support navigateur est des plus complets.
Crée en 2006 par John Resig, jQuery en est à sa version 3.3.1. Pourtant, 2 versions antérieures restent disponibles.
- La première version est compatible avec tous les navigateurs et a évolué jusqu’en 2016 pour en être à la version 1.12.
- Avec la version 2 sortie en 2013, le support d’Internet Explorer 6-8, d’Opera 12.1x et de Safari 5.x. a été retiré du code pour des questions de performance (et on le comprend aisément).
- Sortie en 2016, la version 3 change de politique et ne supporte « que » les versions actuelles et précédentes d’un navigateur spécifique.
Pour la version 3, c’est donc une liste de navigateurs encore verts (evergreen) qui sont énumérés comme suit sur jQuery.com :
- Desktop
- Chrome: (Current – 1) and Current
- Edge: (Current – 1) and Current
- Firefox: (Current – 1) and Current, ESR
- Internet Explorer: 9+
- Safari: (Current – 1) and Current
- Opera: Current
- Mobile
- Stock browser on Android 4.0+
- Safari on iOS 7+
Un problème de taille
Si vous nous lisez régulièrement, vous savez que le premier levier de la web performance c’est le poids. Or jQuery souffre d’une mauvaise presse sur le sujet. En effet sa version 1.12 fait quelques 95 ko minifié. Selon W3Techs, jQuery est utilisé sur 97% des sites et que parmi ceux-ci la version 1 représente 85%. Pourtant la version 3 de jQuery est de base plus légère avec ses 85 ko. Et elle fournit même une version dites slim, allégée des requêtes Ajax et des effets d’animations qui ne pèsent que 68 ko. Philosophiquement, on se demande bien pourquoi autant de sites web embarquent un code pour le support de navigateurs plus qu’obsolètes : la version 3 devrait être plus adoptée qu’elle ne l’est aujourd’hui.
En soit, même la version 1 n’est pas trop lourde, mais ce n’est que le framework sur lequel il faut greffer ses propres fonctions ou des plugins prêts à installer. Et pour le coup, on obtient une surcharge de JavaScript qui est pour moitié responsable de la surcharge pondérale du web d’aujourd’hui. Si en plus, le site se met à charger plusieurs versions de jQuery pour être compatible avec différents développements alors on atteint des sommets. Ne rigolez pas, ça arrive plus souvent qu’on ne le pense !
NB : et je ne parle pas ici de Jquery UI, la couche de composants visuels de jQuery. Sinon avec celle-ci le problème est encore pire…
Donc si vous êtes dépendant de jQuery, pensez tout de même à migrer vers la dernière version. Sinon vous risquez de cumuler une dette technologique pharaonique à refondre d’ici quelques années.
Quelles alternatives à jQuery ?
D’autres frameworks ?
Pour vous donner un ordre d’idée sur le site que vous consultez en ce moment même, l’ensemble des JavaScripts présents fait environ 10 ko. C’est donc que des solutions alternatives existent et commencent même à grignoter des parts de marché importante :
- WordPress 5 a crée son nouvel éditeur Gutenberg avec ReactJS.
- Bootstrap abandonne lui aussi jQuery pour du pur JavaScript
Aujourd’hui, les frameworks Angular, Vue et React récupèrent les plus grosses parts de marché (du moins à leur échelle).
Ou pas de framework du tout?
Selon artwaï, dans la plupart des cas, si JavaScript est nécessaire, nous préconisons le VanillaJS, c’est à dire, l’écriture en JavaScript pur comme sur le site artwai.com; et dans la version 6 d’EcmaScript qui est le vrai nom normé de JavaScript (cf les spécifications ECMA-262 et ECMA-402 fournie par ECMA International ).
Toutefois la paradigme JavaScript a changé. HTTP2, CSS3 et les PWAs changent la donne. Il faut repenser complètement notre manière d’implémenter nos JavaScripts :
- avec moins de JavaScript en utilisant un maximum les fonctionnalités HTML5 et CSS3
- être plus modulaire avec des chargements à la demande en fonction du contexte
- et en restant interopérable avec la transpilation ES6 et +
Qu’est-ce que la transpilation ?
La transpilation c’est le fait de traduire un code dans une version antérieure. Dans le cas qui nous intéresse, on code en ES6 (EcmaScript version 6) ou +, et ensuite on « transpile » dans la version correspondante à notre cible de navigateurs. Aujourd’hui c’est ES5 datant de 2009 qui permet de toucher une très large part des navigateurs. Dans tous les cas, un transpiler, sorte de compilateur JavaScript donc, se chargera de la traduction de manière automatique.
De plus, cela signifie que l’on peut toujours utiliser un code moderne et performant pour les navigateurs de dernière génération et fournir un code d’une autre version pour les navigateurs plus anciens. Que demander de plus ?
Conclusion
Bon il est vrai que je force un peu le trait avec ce titre volontairement provocateur. Avec 97% des sites utilisant jQuery on pourrait croire en son immuabilité. Mais nous savons que le changement peut aller très vite dans le monde du web. Si de plus la webperf est poussé par l’acteur principal de la recherche sur Internet, la problématique de l’usage ou non de jQuery va devenir primordiale pour gagner les précieuses secondes qui différencieront votre site de ceux de vos concurrents en terme d’expérience utilisateur et en terme de référencement.
