JQuery passe en version 3.0 ! Découvrez si votre site est compatible

Le 25/05/2016

Dans Développement

Aujourd'hui le blog du Webdesign fait le point sur la nouvelle mise à jour majeur d'une des ressources les plus incontournables un développement front-end : jQuery

jQuery = Javascript ?

Bien que le titre de cette section fasse certainement grincer les dents de certains, ce pense qu'il est important de faire un petit point pour certains. Non, Javascript et jquery ne sont pas deux mots pour désigner la même chose.

Javascript est un "langage" que comprennent les navigateurs, et qui permet de rendre dynamiques les pages web (il peut aussi tourner sur un serveur, mais cela ne nous concerne pas ici).

JQuery est une ressource, un framework qui permet de simplifier de nombreuses opérations que le Javascript rend inutilement fastidieuses. Vous trouverez parfois des ressources présentées sous le nom de "ressource jQuery". C'est en réalité des ressources en Javascript qui ont pour dépendance jQuery (et qui ne fonctionneront donc pas sans lui).

Jquery

La confusion vient du fait que 90% des développeurs front-end (moi compris) ont tendance à intégrer jquery presque "par défaut" sur tous nos projets. L'API Javascript sort d'une logue traversée du désert, et une simple manipulation d'élément sur une page a longtemps été très fastidieuse sans jQuery. Ce n'est maintenant plus le cas, mais les vieilles habitudes demeures, malheureusement pour le poids des pages et les performances mobiles.

Malgré tout, jquery reste une excellente ressource (comme le prouve sa très large adoption) extrêmement utile, bien que souvent sous-exploitée. Il est souvent possible de prendre des ressources plus ciblée et de plus petite taille, comme Sizzle par exemple, qui n'est que le moteur de query de jQuery.

Sizzle

jQuery 3.0

Plus de 3 ans après le passage à jQuery 2.0, une nouvelle version sort, avec son lot de nouveautés et d'incompatibilités.

Certains d'entre vous s'en souviennent peut-être, le passage à la version 2 avait créé quelques soucis avec l'abandon d'Internet explorer 6, 7 et 8 au profit d'un gros gain de vitesse sur mobile.

Internet explorer 8

Même si il n'y a pas de changement aussi gros que l'abandon du support d'un navigateur, il y a de grandes chances pour que le passage ne se fasse pas tout seul et que de nombreux sites cassent lors de la mise à jour. Pour vous aider à faire le tri, je vous propose un résumé des points les plus chauds du change log.

1/ show() et hide : Le fonctionnement des methods show() et hide() a changé pour éviter de marcher sur les framework responsive comme Foundation et Bootstrap. Si vous avez un élément défini comme "display: none" dans votre CSS, il ne réapparaitra plus avec .show().

2/ data() : Pour coller aux spécifications HTML5, data('fooBar') et data('foo-bar') vont tout les deux chercher le même attribut. Ce point peut mener à des confusions, bien que je ne pense pas que du code réel puisse réelement être impacté.

3/ jQuery.Deferred : Quelques changements au niveau de la prise en charge pour mieux coller au fonctionnement des promises; Si vous utilisez des promises jQuery, je vous conseille de repasser sur votre code lors du changement de version, les différences sont subtiles et peuvent mener à des bugs complexes à retrouver.

4/ width() et height() ne retournent plus des valeurs arondies, mais les valeurs décimales telles que vue dans un analyseur de DOM.

5/ .load(), .unload() et .error ont été supprimées. Elles sont dépréciées depuis jQuery 1.8, c'est donc normal.

Voilà ! Je vous laisse découvrire la liste des autres changements (positifs et  n'amenant pas de problème de compatibilité) dans le changelog complet, avec des explications plus poussées sur les changement que j'ai indiqué. Le plus gros changement est une grosse accélération lors des recalcul de CSS et lors de l'usage de certains selectors CSS comme :visible.

Dois-je mettre à jour ?

Si votre site n'évolue pas régulièrement, ou que vous pensez que votre prochaine mise à jour amènera des changement radicaux, je ne pense pas qu'il faille prendre le temps de faire la mise à jour. Les mises à jour de sécurité seront de toute manière surement assurées, et vous n'aurez qu'à choisir des plugins compatibles pour vos prochaines modifications minimes.

Si votre site est en constante évolution, la mise à jour s'impose, car certaines ressources risquent de ne plus fonctionner avec jQuery 2.0 lors de leurs prochaine mise à jour. Pour vous aider jquery à mettre un outil à votre disposition: jQuery Migrate, ainsi qu'un guide pour vois aider lors d'une mise à jour manuel.