1 pièce(s) jointe(s)
Vue.js 3 abandonne finalement son plan visant à prendre en charge Internet Explorer 11
La version 3 de Vue.js, le framework JavaScript progressif, est disponible avec de nouvelles API
et des améliorations de performance
Vue.js est un framework JavaScript progressif open source conçu pour la construction d'interfaces utilisateurs. La bibliothèque centrale de Vue.js se concentre uniquement sur la couche vue et est facile à prendre en main et à intégrer à d'autres bibliothèques ou projets existants. En outre, Vue est également capable de gérer des applications sophistiquées de page unique quand vous le combinez avec des outils modernes et des bibliothèques de support. Vue.js 3.0 est sortie cette semaine avec plusieurs améliorations et embarque également de nouvelles fonctionnalités.
Vue.js 3.0 porte le nom de code “One Piece” et l’équipe de développement du framework a annoncé qu’elle représente plus de deux ans d'efforts de développement. Cela comprend notamment plus de 30 RFC, plus de 2600 commits, 628 demandes d’extraction de 99 contributeurs, et une quantité considérable de travail de développement et de documentation en dehors du cœur du système. Cette nouvelle version majeure du framework offre des bundles plus petits, de nouvelles API pour traiter les cas d'utilisation à grande échelle, etc. Voici ci-dessous les points marquants de Vue.js 3.0.
Approfondissement du concept de “framework progressif”
Selon l’équipe, dès ses humbles débuts, Vue avait une mission simple : être un framework accessible que chacun peut apprendre rapidement. Au fur et à mesure que sa base d’utilisateurs s’est agrandie, Vue s'est également développé pour s'adapter aux demandes croissantes. Il a donc évolué pour devenir ce que l’équipe appelle un “framework progressif” : un framework qui peut être appris et adopté progressivement, tout en offrant un soutien continu à l'utilisateur qui traite des scénarios de plus en plus exigeants. Il compterait aujourd’hui plus de 1,3 million d’utilisateurs dans le monde.
L’équipe de Vue.js a annoncé qu’il voit le framework utilisé dans une large gamme de scénarios, qui vont de l'interactivité saupoudrée sur des pages traditionnelles rendues par le serveur, aux applications complètes sur une seule page avec des centaines de composants. Et à présent, Vue.js 3.0 va encore plus loin dans cette flexibilité.
Modules internes superposés
Vue.js 3.0 core peut toujours être utilisé via une simple balise <script>, par contre ses composants internes ont été réécrits de fond en comble en une collection de modules découplés. D’après l’équipe, la nouvelle architecture offre une plus grande maintenabilité et permet aux utilisateurs finaux de réduire de moitié la taille du runtime grâce à l'arborescence. Ces modules exposent aussi des API de niveau inférieur qui débloquent de nombreux cas d'utilisation avancés, dont :
- le compilateur supporte les transformations AST personnalisées pour les personnalisations du temps de construction (par exemple le temps de construction i18n) ;
- le runtime de base fournit une API de première classe pour la création de rendus personnalisés ciblant différentes cibles de rendu (par exemple mobile natif, WebGL ou terminaux). Le moteur de rendu DOM par défaut est construit en utilisant la même API ;
- le module “@vue/reactivity” exporte des fonctions qui fournissent un accès direct au système de réactivité de Vue, et peut être utilisé comme un ensemble autonome. Il peut être utilisé pour s'associer à d'autres solutions modèles (par exemple lit-html) ou même dans des scénarios hors interface utilisateur.
De nouvelles API pour lutter contre le changement d'échelle
Selon l’équipe, l'API 2.x basée sur l'objet est largement intacte dans la Vue 3. Cependant, la version 3.0 introduit également l'API de composition, un nouvel ensemble d'API visant à traiter les points sensibles de l'utilisation de Vue dans les applications à grande échelle. Cette API s'appuie sur l'API de réactivité et permet une composition et une réutilisation de la logique semblables aux Hooks de React, des modèles d'organisation du code plus flexibles et une inférence de type plus fiable que l'API basée sur l'objet 2.x.
L'API de composition peut aussi être utilisée avec Vue.js 2.x via le plug-in “@vue/composition-api”, et il existe déjà des bibliothèques utilitaires d'API de composition qui fonctionnent à la fois pour Vue.js 2 et 3 (par exemple vueuse et vue-composable).
Améliorations des performances
Selon l’équipe de développement du framework, Vue.js 3 offre des améliorations significatives de performance par rapport à Vue 2 en matière de taille de bundle (jusqu'à 41 % plus léger avec le traitement des arbres), de rendu initial (jusqu'à 55 % plus rapide), de mises à jour (jusqu'à 133 % plus rapide), et d'utilisation de la mémoire (jusqu'à 54 % de moins). Par ailleurs, l’équipe a annoncé qu’elle a adopté à partir de Vue.js 3 l'approche du “DOM virtuel assisté par le compilateur”.
Via cette approche, le compilateur de modèles effectue des optimisations agressives et génère un code de fonction de rendu qui élève le contenu statique, laisse des indices d'exécution pour les types de liaison et, surtout, aplatit les nœuds dynamiques à l'intérieur d'un modèle afin de réduire le coût de traversée du runtime. Selon l’équipe, l'utilisateur obtient de ce fait le meilleur des deux mondes : des performances optimisées par le compilateur à partir de modèles, ou un contrôle direct via des fonctions de rendu manuelles lorsque le cas d'utilisation l'exige.
L’amélioration de l’intégration de TypeScript
D’après l’équipe, la base de code de Vue.js 3 est écrite en TypeScript, avec des définitions de types générées, testées et regroupées automatiquement afin qu'elles soient toujours à jour. Elle a ajouté que l'API de composition fonctionne très bien avec l'inférence de type. En outre, Vetur, l’extension VS Code officielle, prend désormais en charge l'expression des modèles et la vérification des types d'accessoires tout en tirant parti de la typographie interne améliorée de Vue.js 3. Enfin, elle a aussi précisé que la typographie de Vue 3 prend entièrement en charge le TSX si c'est ce que vous préférez.
Fonctionnalités expérimentales
L’équipe a annoncé qu’elle a aussi proposé deux nouvelles fonctionnalités pour les composants monofichiers :
- <installation du script> : sucre syntaxique pour l'utilisation de l'API de composition dans les SFC ;
- <style vars> : variables CSS à état dans les SFC ;
Elle a expliqué que ces fonctionnalités sont déjà mises en œuvre et disponibles dans Vue 3.0, mais elles sont fournies uniquement dans le but de recueillir des commentaires. Elles resteront expérimentales jusqu'à ce que les RFC soient fusionnés. L'équipe a également implémenté un composant <Suspense> actuellement non documenté. Celui-ci permet d'attendre les dépendances asynchrones imbriquées (c’est-à-dire les composants avec async setup() ou les composants asynchrones) lors du rendu initial ou du changement de branche.
Elle a déclaré être en train de tester cette fonctionnalité avec l'équipe de Nuxt.js (Nuxt 3 est en cours de développement) et elle envisage de la consolider probablement dans la version 3.1.
Processus de libération progressive
D’après l’équipe, la sortie de Vue.js 3 marque l'état de préparation général du framework. Bien que certains des sous-projets du framework puissent encore nécessiter des travaux supplémentaires pour atteindre un statut stable (en particulier le routeur et l'intégration de Vuex dans les outils de développement), elle pense qu'il est approprié de lancer dès aujourd'hui de nouveaux projets avec Vue 3. Elle encourage les auteurs de bibliothèques à commencer à mettre à jour leurs projets pour soutenir Vue.js 3.
Migration et support IE11
L’équipe a repoussé la construction de la migration (construction v3 avec comportement compatible avec la v2 + avertissements de migration) et la construction d'IE11 en raison de contraintes de temps. Ainsi, elle prévoit de se concentrer sur eux au quatrième trimestre 2020. Par conséquent, les utilisateurs qui prévoient de migrer une application v2 existante ou qui ont besoin du support d'IE11 doivent être conscients de ces limitations pour le moment.
Source : Page GitHub de Vue.js 3.0
Et vous ?
:fleche: Qu'en pensez-vous ?
Voir aussi
:fleche: Quels sont les frameworks JavaScript que vous aimeriez apprendre en 2020 ? Voici quelques propositions qui sont tributaires des cas d'utilisations
:fleche: Le framework JavaScript pour le développement des applications mobile React Native 0.63 s'accompagne d'une amélioration de LogBox, pour un débogage d'erreur plus facile
:fleche: La version 3 de Svelte, un framework JavaScript de composants graphiques, supporte officiellement le langage de programmation TypeScript depuis juillet 2020
:fleche: La version 5.0 du framework Bootstrap va supprimer jQuery, sa plus grande dépendance côté client pour du pur JavaScript
1 pièce(s) jointe(s)
Vue.js 3 abandonne finalement son plan visant à prendre en charge Internet Explorer 11
Vue.js 3 abandonne finalement son plan visant à prendre en charge Internet Explorer 11
les développeurs qui supportent le navigateur devront rester sur Vue.js 2.7
Initialement publié sans le support d'IE11 en septembre 2020, Vue.js 3 ne prendra finalement pas en charge le célèbre navigateur de Microsoft. L'équipe Vue.js avait prévu d'ajouter le support d'IE11 peu de temps après la publication de Vue.js 3, dans une version mineure, mais a finalement décidé d'abandonner l'idée, après de nombreuses discussions sur le sujet. Au lieu de cela, elle va rétroporter le plus grand nombre possible de fonctionnalités de Vue.js 3.0 (comme Composition-API) dans Vue.js 2.x. Cela supprime également la nécessité de prendre en charge IE11 par toutes les bibliothèques tierces.
L'équipe Vue.js abandonne définitivement le support d'IE11
En septembre 2020, l'équipe de développement du framework a publié Vue.js 3.0 et, en ce qui concerne la migration et le support d'IE11, elle avait déclaré ce que suit : « L’équipe a repoussé la construction de la migration (construction v3 avec comportement compatible avec la v2 + avertissements de migration) et le support d'IE11 en raison de contraintes de temps. Par conséquent, les utilisateurs qui prévoient de migrer une application v2 existante ou qui ont besoin du support d'IE11 doivent être conscients de ces limitations pour le moment ». Elle avait prévu de se concentrer sur eux au quatrième trimestre 2020.
Cependant, après une longue période de concertation et de dialogue avec la communauté, elle a annoncé en avril dernier qu'elle revenait sur sa décision d'ajouter le support d'IE11 à Vue.js 3. « Nous avons été interrogés sur la prise en charge d'IE11 depuis le début du développement de Vue.js 3, en remontant jusqu'à la fin de 2018. De nombreux utilisateurs ont demandé si Vue.js 3 prendrait en charge IE11, et notre plan initial était de publier Vue 3 et de le laisser se stabiliser en premier, et d'ajouter la prise en charge d'IE11 à un stade ultérieur », a déclaré l'équipe dans une note sur la page GitHub du projet.
« Au cours du processus de développement, nous avons également fait des recherches et des expériences pour la compatibilité IE11 sur le côté, mais en raison de la complexité impliquée et de la quantité d'autres travaux à portée de main, il a été délaissé sur la route. Lorsque nous examinons à nouveau le problème aujourd'hui, en 2021, le navigateur et le paysage JavaScript ont bien changé. Davantage de développeurs utilisent désormais les fonctionnalités des langages modernes et, surtout, Microsoft a commencé à éloigner activement les utilisateurs d'IE en investissant dans Edge », a-t-elle ajouté.
L'équipe estime en effet que son choix est aussi motivé par le fait que Microsoft a commencé également à abandonner le support d'IE11 dans ses propres projets majeurs, comme Microsoft 365. Elle a également observé cette dynamique au sein d'autres communautés d'outils pour le Web. Il y a quelques semaines, WordPress a pris la décision d'abandonner le support d'IE11. L'équipe Bootstrap a fait pareil dernièrement avec la sortie de Bootstrap 5. Selon des statistiques avancées par l'équipe, l'utilisation globale d'IE11 est en dessous de 1 %. D'après elle, lorsqu'il s'agit de sites Web et d'applications destinés au public, IE11 est en déclin rapide.
« Nous pensons que c'est l'occasion de repenser le support d'IE11 pour Vue 3 », a-t-elle déclaré. Les raisons évoquées par l'équipe se regroupaient en quatre grands axes, notamment : incompatibilité de comportement, charge de maintenance à long terme, complexité pour les auteurs de bibliothèques et la contribution à la pérennité d'IE11.
Incompatibilité de comportement
Selon l'équipe, le système de réactivité de Vue.js 2 est basé sur des getters/setters ES5. Vue.js 3 quant à lui exploite les proxys ES2015 pour un système de réactivité plus performant et plus complet, qui ne peut pas être polyfillé dans IE11. Selon elle, c'est le principal obstacle, car cela signifie que pour que Vue.js 3 prenne en charge IE11, il faut essentiellement livrer deux versions différentes avec un comportement différent : l'une utilisant le système de réactivité basé sur les proxys, et l'autre utilisant les getters/setters ES5 comme pour Vue.js 2.
Elle explique que le système de réactivité basé sur les proxys de Vue.js 3 offre une couverture quasi complète des fonctionnalités du langage. Il est capable de détecter de nombreuses opérations qu'il est impossible ou peu pratique d'intercepter dans ES5, par exemple l'addition/la suppression de propriétés, les mutations d'indices et de longueurs de tableaux, et dans les vérifications d'opérateurs. Le même code écrit pour la version Proxy de Vue.js 3 ne fonctionnera pas dans la version IE11. Cela créerait non seulement une complexité technique pour l'équipe, mais aussi une charge mentale constante pour les développeurs.
« Notre plan initial était de livrer les implémentations de réactivité Proxy et ES5 dans la version de développement de la version IE11. Lorsqu'elle est exécutée dans un environnement de développement compatible avec Proxy, elle détecte et signale toute utilisation non compatible avec IE11. Cela fonctionnerait en théorie, mais crée une énorme quantité de complexité, car cela nécessite de mélanger les deux implémentations et risque d'entraîner une différence de comportement entre le développement et la production », a-t-elle renchéri.
Charge de maintenance à long terme
D'après l'équipe, la prise en charge d'IE11 signifie également qu'elle devra prendre en compte les fonctionnalités linguistiques utilisées dans l'ensemble de la base de code et définir une stratégie de polyfill/transpilation appropriée pour les fichiers de distribution. Chaque nouvelle fonctionnalité ajoutée qui ne peut pas être polyfillée dans IE11 créerait encore une autre réserve de comportement. « Une fois que Vue.js 3 s'engage à prendre en charge IE11, il ne sera pas en mesure de s'en débarrasser avant la prochaine version majeure », constate l'équipe.
Complexité pour les auteurs de bibliothèques
Par ailleurs, l'équipe ajoute que la complexité serait encore quelque peu acceptable si elle pouvait être entièrement contenue dans Vue.js lui-même. Cependant, après avoir discuté avec les membres de la communauté, elle a réalisé que la coexistence de deux implémentations de la réactivité aurait inévitablement des problèmes pour les auteurs de bibliothèques également. En prenant en charge IE11 dans Vue.js 3, les auteurs de bibliothèques doivent essentiellement faire cet appel également.
Les auteurs de bibliothèques devront tenir compte de la version de Vue.js 3 utilisée par leur bibliothèque (en plus de la prise en charge potentielle de Vue.js 2) et, s'ils décident de prendre en charge IE11, ils devront créer leur bibliothèque en tenant compte de tous les avertissements relatifs à la réactivité ES5.
Contribuer à la pérennité d'IE11
« Personne n'aime supporter IE11. C'est un navigateur moribond, coincé dans le passé. Plus l'écosystème du Web progresse, plus le fossé à combler pour le prendre en charge s'agrandit. Paradoxalement, en prenant en charge IE11 dans Vue.js 3, nous lui donnons plus de raisons de rester. Compte tenu de notre base d'utilisateurs, l'abandon du support d'IE11 contribuera probablement à le rendre obsolète un peu plus rapidement », a déclaré l'équipe.
Pour ceux qui ont absolument besoin du support d'IE11
L'équipe a déclaré qu'elle est bien consciente que la véritable demande pour IE11 provient de ceux qui ne peuvent pas effectuer de mise à niveau : les institutions financières, les secteurs de l'éducation et ceux qui dépendent d'IE11 pour les lecteurs d'écran. Si vous construisez une application destinée à ces secteurs, vous n'avez peut-être pas le choix. De ce fait, elle recommande d'utiliser Vue.js 2 si vous avez besoin de la prise en charge d'IE11.
« Au lieu de contracter une dette technique importante pour Vue.js 3 et les futures versions de Vue.js, nous pensons qu'il serait plus judicieux de rediriger les efforts vers le rétroportage des fonctionnalités compatibles vers Vue.js 2 dans la version 2.7, et de garantir une expérience de développement plus proche entre les deux versions majeures », a déclaré l'équipe. Certaines des fonctionnalités qui peuvent être rétroportées vers la version 2.7 :
- ajout du plugin @vue/composition-api dans Vue.js 2. Cela permettra aux bibliothèques basées sur Composition-API de fonctionner directement à la fois pour Vue.js 2 et Vue.js 3 ;
- ajout de la syntaxe <script setup> dans les composants à fichier unique ;
- ajout de l'option emits ;
- amélioration des typages TypeScript ;
- formaliser le support de Vue.js 2 dans Vite (actuellement via un plugin non officiel) ;
- etc.
Source : Note de l'équipe Vue.js
Et vous ?
:fleche: Quel est votre avis sur le sujet ?
Voir aussi
:fleche: La version 3 de Vue.js, le framework JavaScript progressif, est disponible avec de nouvelles API et des améliorations de performance
:fleche: Bootstrap 5 est officiellement disponible avec un nouveau logo, un nouveau composant offcanvas, des mises à jour pour les composants forms et abandonne jQuery
:fleche: Microsoft va mettre fin au support de la première mouture de Microsoft Edge, ainsi qu'au support des services Microsoft 365 dans Internet Explorer 11 en 2021
:fleche: Microsoft Edge trois fois plus rapide que IE 11 grâce à Asm.js, le navigateur offrira plus de sécurité
