Passer de jQuery à Vanilla JS

Publié par Fabrice le 02 mai 2019, temps de lecture estimé : 5 minutes Webmastering

Passer de jQuery à Vanilla JS

Retour d'expérience du passage de jQuery à Vanilla JS. Quels sont les gains de performance ? Quels sont les avantages et inconvénients ?

Il faut d'abord rappeler que Vanilla JS signifie simplement du JavaScript pure, sans dépendance à une librairie externe (comme jQuery, React, Vue.js, Ember, Meteor, etc - il existe presque autant de librairies JavaScript que de morts dans Game of Thrones).

Très utilisée, la librairie jQuery apporte une certaine simplicité dans le codage (les sélecteurs, par exemple), la compatibilité avec les différents navigateurs et un nombre impressionnant d'extensions pour faire à peu près tout ce que l'on veut (il suffit d'aller faire un tour sur CodePen ou GitHub pour comprendre). La création d'un back-office complexe sera sans doute plus rapide à réaliser.
Mais, outre le fait d'ajouter presque 90 kilo-octets, cette librairie possède plusieurs inconvénients. D'abord, les extensions - souvent bien pratiques - disposent de nombreuses options et API qui alourdissent le code. Second problème avec les extensions : l'accessibilité y est souvent que partiellement prise en charge, voire pas du tout (ce n'est pas propre à cette librairie qui peut parfaitement traiter l'accessibilité !). Enfin, jQuery est parfois/souvent utilisé pour ajouter une ou deux petites fonctionnalités (charger 90 kilo-octets pour changer quelques classes est un peu absurde).
Cette profusion d'extensions pousse souvent le webmaster à ne devenir qu'un simple assembleur, laissant de côté le codage, mais aussi la maîtrise de bout en bout de son site internet.

Passons à Vanilla JS, dont le premier avantage est sa rapidité. Les tests de Marco Trombino sont assez frappant de ce point de vue : de 10 à 25 fois plus rapide par rapport à jQuery. Les scripts en eux-même sont plus légers, expurgés des nombreuses options, on retourne, bien souvent, à une simplicité bienvenue. Malgré tout, développer en Vanilla JS (surtout au début) est un peu plus long.

Retour d'expérience

Passons de la théorie à la pratique avec le passage d'un site internet de jQuery à Vanilla JS : il s'agissait de convertir 6 scripts JavaScript.

  • Avec jQuery : 131 kilo-octets (jQuery inclus)
  • Avec Vanilla JS : 19 kilo-octets

Soit une économie de 112 kilo-octets. Il s'avère également à l'usage, comme décrit plus haut, une bien meilleur réactivité.
La rétrocompatibilité, elle, ne pose guère de soucis. Par exemple, la méthode addEventListener est prise en charge dès Internet Explorer 9 et la propriété classList dès Internet Explorer 10.

Pour ceux qui voudraient se lancer, il est à noter que cette conversion peut se faire de manière progressive, un script après l'autre.