Lancement de jQuery v4.0 Beta, cette nouvelle version de la bibliothèque JavaScript ne prend plus en charge les versions d'Internet Explorer antérieures à 11

Le 7 février 2024 à 14:49, par Jade Emy

29PARTAGES

La version 4.0.0 de jQuery est en préparation depuis longtemps, mais elle est maintenant prête pour une version bêta ! Elle corrige des bogues, améliore les performances et apporte quelques changements. La prise en charge d'Internet Explorer (IE) 10 et des versions antérieures a été supprimé de cette version. Cependant, selon l'équipe de jQuery, on peux s'attendre à ce que les perturbations soient minimes.

jQuery est une bibliothèque JavaScript conçue pour simplifier la traversée et la manipulation de l'arbre HTML DOM, ainsi que la gestion des événements, les animations CSS et Ajax. Il s'agit d'un logiciel open-source, libre et gratuit utilisant la licence permissive MIT. En août 2022, jQuery était utilisé par 77 % des 10 millions de sites web les plus populaires. L'analyse du web indique qu'il s'agit de la bibliothèque JavaScript la plus largement déployée, avec une marge importante, puisqu'elle est au moins trois à quatre fois plus utilisée que n'importe quelle autre bibliothèque JavaScript.

La syntaxe de jQuery est conçue pour faciliter la navigation dans un document, la sélection d'éléments DOM, la création d'animations, la gestion d'événements et le développement d'applications Ajax. jQuery permet également aux développeurs de créer des plug-ins au-dessus de la bibliothèque JavaScript. Cela permet aux développeurs de créer des abstractions pour l'interaction et l'animation de bas niveau, des effets avancés et des widgets de haut niveau pouvant être thématisés. L'approche modulaire de la bibliothèque jQuery permet de créer de puissantes pages web dynamiques et des applications web.

Pour jQuery 4.0.0 Beta, la plupart des changements sont ceux que l'équipe voulait faire depuis des années, mais qu'elle ne pouvait pas faire dans un patch ou une version mineure. Ils ont réduit le code hérité, supprimé certaines API précédemment obsolètes, supprimé certains paramètres internes aux fonctions publiques qui n'ont jamais été documentés, et abandonné la prise en charge de certains comportements "magiques" qui étaient trop compliqués. Voici quelques points forts de jQuery 4.0.0 beta.

Adieu IE<11

jQuery 4.0 abandonne la prise en charge d'Internet Explorer (IE) 10 et des versions antérieures. Certains se demandent peut-être pourquoi ils n'ont pas supprimé la prise en charge d'IE 11. Ils prévoient de supprimer le support par étapes, et la prochaine étape aura lieu dans jQuery 5.0. Pour l'instant, ils commençent par supprimer le code prenant spécifiquement en charge les versions d'IE antérieures à 11, ce qui donne une réduction de taille de -867 octets gzippés en un seul PR !

Ils ont également supprimé la prise en charge d'autres navigateurs très anciens, notamment Edge Legacy, iOS <11, Firefox <65, et Android Browser. Aucun changement ne devrait être nécessaire de côté utilisateur. Si on a besoin de supporter l'un de ces navigateurs, il suffit rester simplement avec jQuery 3.x.

API obsolètes supprimées

Ces fonctions sont obsolètes depuis plusieurs versions. Il est temps de les supprimer maintenant que la mise à jour a atteint une version majeure. Ces fonctions ont toujours été destinées à être internes ou ont maintenant des équivalents natifs dans tous les navigateurs supportés. Les fonctions supprimées sont les suivantes :

jQuery.cssNumber
jQuery.cssProps
jQuery.isArray
jQuery.parseJSON
jQuery.nodeName
jQuery.isFunction
jQuery.isWindow
jQuery.camelCase
jQuery.type
jQuery.now
jQuery.isNumeric
jQuery.trim
jQuery.fx.interval

push, sort, et splice supprimé

Le prototype jQuery comporte depuis longtemps des méthodes Array qui ne se comportent pas comme les autres méthodes jQuery et qui ont toujours été destinées à un usage interne uniquement. Ces méthodes sont push, sort et splice. L'équipe a transféré l'utilisation de ces méthodes vers les fonctions Array au lieu du prototype jQuery. Par exemple, $elems.push( elem ) est devenu [].push.call( $elems, elem ). Il est mentionné ici au cas où il y aurait des plugins qui se seraient appuyés sur ces méthodes.

Ordre des événements focusin et focusout

Pendant longtemps, les navigateurs n'étaient pas d'accord sur l'ordre des événements de mise au point et de flou, qui comprennent focusin, focusout, focus, and blur. Enfin, les dernières versions de tous les navigateurs pris en charge par jQuery 4.0 ont convergé vers un ordre commun des événements. Malheureusement, il diffère de l'ordre cohérent que jQuery avait choisi il y a plusieurs années, ce qui en fait un changement radical. Au moins, tout le monde est sur la même longueur d'onde maintenant !

Dans les versions précédentes, l'ordre de jQuery pour les quatre événements était le suivant :

focusout
blur
focusin
focus

À partir de la version 4.0 de jQuery, le comportement natif n'est plus. Cela signifie que tous les navigateurs, à l'exception d'IE, suivront la spécification actuelle du W3C, à savoir :

blur
focusout
focus
focusin

Pour les curieux, la spécification du W3C définissait auparavant un ordre différent :

focusout
focusin
focusin
blur

Mais peu de gens ont pensé que c'était intuitif et la spécification a été modifiée en 2023 pour correspondre à ce que les navigateurs avaient déjà mis en œuvre. Ironiquement, le seul navigateur à avoir suivi l'ancienne spécification est Internet Explorer.

Prise en charge de FormData

jQuery.ajax a ajouté la prise en charge des données binaires, y compris FormData. Auparavant, les données binaires n'étaient pas un type de données connu et étaient converties en chaînes de caractères. Ce comportement pouvait être désactivé en désactivant la conversion des données et en traitant les données manuellement, mais ils ont décidé de le faire fonctionner automatiquement. Il s'agit techniquement d'une rupture, mais le comportement devrait être plus proche de celui attendu.

Suppression de la promotion automatique de JSONP

Auparavant, jQuery.ajax avec dataType : "json" avec un callback fourni était automatiquement converti en une requête JSONP. Aujourd'hui, la manière préférée d'interagir avec un backend inter-domaine est avec CORS, qui fonctionne dans tous les navigateurs supportés par jQuery 4.0. Cela devrait permettre d'éviter des comportements inattendus dans le cas où un développeur ne sait pas qu'un code peut être exécuté à partir d'un domaine distant avec JSONP.

La source de jQuery migre vers les modules ES

Ce fut un jour spécial lorsque la source de jQuery sur la branche main a été migrée d'AMD vers des modules ES. Les sources de jQuery ont toujours été publiées avec les versions de jQuery sur npm et GitHub, mais ne pouvaient pas être importées directement en tant que modules sans RequireJS, qui était l'outil de construction de jQuery de prédilection. Depuis, ils sont passés à Rollup pour l'empaquetage de jQuery. L'équipe éffectue également des tests sur les modules ES avant de les empaqueter.

Types de confiance et CSP

jQuery 4.0 ajoute la prise en charge des Types de confiance (Trusted Types), garantissant que le HTML enveloppé dans TrustedHTML peut être utilisé comme entrée dans les méthodes de manipulation de jQuery d'une manière qui n'enfreint pas la directive Content Security Policy require-trusted-types-for.

Par ailleurs, alors que certaines requêtes AJAX utilisaient déjà des balises <script> pour maintenir des attributs tels que crossdomain, ils ont depuis changé la plupart des requêtes de script asynchrones pour utiliser <script> afin d'éviter toute erreur CSP causée par l'utilisation de scripts en ligne. Il existe encore quelques cas où XHR est utilisé pour les requêtes de script asynchrones, comme lorsque l'option "headers" est passée (utilisez scriptAttrs à la place !), mais on utilise maintenant une balise <script> chaque fois que cela est possible.

Mise à jour

L'équipe de jQuery ne prévoit pas de problèmes de compatibilité lors de la mise à jour à partir d'une version jQuery 3.0+. Si vous n'avez pas encore mis à jour vers jQuery 3.0, consultez le Guide de mise à jour 3.5 et le Guide de mise à jour 3.0.

Le plugin jQuery Migrate vous aidera à identifier les problèmes de compatibilité dans votre code. N'hésitez pas à tester cette version bêta et à faire part des problèmes que vous rencontrez.

Si vous ne pouvez pas encore passer à la version 3.5+, Daniel Ruf a gentiment fourni des correctifs pour les versions précédentes de jQuery.

Mise à jour de slim build

Le slim build est devenu encore plus petit dans jQuery 4.0.0 avec la suppression des Deferreds et des Callbacks (maintenant moins de 20k octets gzippés !). Les Deferreds ont longtemps supporté le standard Promises A+, donc les Promises natives peuvent être utilisées à la place dans la plupart des cas et elles sont disponibles dans tous les navigateurs supportés par jQuery à l'exception d'IE11. Les Deferreds ont quelques fonctionnalités supplémentaires que les Promises natives ne supportent pas, mais la plupart de leur utilisation peut être migrée vers les méthodes Promise. Si vous avez besoin de supporter IE11, il est préférable d'utiliser la version principale ou d'ajouter un polyfill pour les promesses natives.

Téléchargement

Vous pouvez obtenir les fichiers à partir du CDN de jQuery, ou les lier directement :

https://code.jquery.com/jquery-4.0.0-beta.js

https://code.jquery.com/jquery-4.0.0-beta.min.js

Vous pouvez également télécharger cette version depuis npm :

npm install jquery@4.0.0-beta

Slim build

Parfois, vous n'avez pas besoin d'ajax, ou vous préférez utiliser l'une des nombreuses bibliothèques autonomes qui se concentrent sur les requêtes ajax. Et il est souvent plus simple d'utiliser une combinaison de CSS et de manipulation de classes pour les animations web. Enfin, tous les navigateurs supportés par jQuery (à l'exception d'IE11) prennent désormais en charge les promesses natives, de sorte que les Deferreds et les Callbacks ne sont plus nécessaires dans la plupart des cas. En plus de la version normale de jQuery qui inclut tout, une version "slim" qui exclut ces modules a été publiée. La taille de jQuery est très rarement un problème de performance de charge de nos jours, mais la version "slim" est environ 8k octets gzippés plus petite que la version normale. Ces fichiers sont également disponibles dans le paquet npm et sur le CDN :

https://code.jquery.com/jquery-4.0.0-beta.slim.js

https://code.jquery.com/jquery-4.0.0...ta.slim.min.js

Ces mises à jour sont déjà disponibles en tant que versions actuelles sur npm et Bower. Des informations sur toutes les façons d'obtenir jQuery sont disponibles à l'adresse https://jquery.com/download/. Les CDN publics reçoivent leurs copies aujourd'hui, veuillez leur laisser quelques jours pour poster les fichiers. Si vous souhaitez démarrer rapidement, utilisez les fichiers sur le CDN de l'équipejQuery jusqu'à ce qu'ils aient une chance de se mettre à jour.

Nous publierons un guide de mise à jour complet avant la version finale, afin de présenter le code supprimé et la manière de migrer. Le plugin jQuery Migrate sera également prêt à vous aider. Pour l'instant, nous vous invitons à tester la version bêta et à nous faire savoir si vous rencontrez des problèmes.

Source : Annonce de jQuery v4.0 Beta

Et vous ?