Ce qu'était l'abandon de la prise en charge d'Internet Explorer pour les clients et les développeurs de Maersk.com.
Je m'appelle Steve Workman et je suis ingénieur en chef chez Maersk.com. Maersk est le leader mondial de la logistique de la chaîne d'approvisionnement intégrée. Il aide ses clients à déplacer des marchandises dans le monde entier depuis 118 ans, avec des réservations en ligne depuis plus de 20 ans. Début mai 2022, @Maersk a officiellement cessé de prendre en charge Internet Explorer (IE) sur ses systèmes destinés aux clients. Microsoft a officiellement mis fin à cette compatibilité en juin 2022. C'est la fin d'une ère importante du Web et le début d'une nouvelle.
J'ai rejoint Maersk en 2018, et mon premier projet était de créer une nouvelle barre de navigation globale. Elle devait pouvoir être testée, facile à déployer et à mettre à jour à l'échelle mondiale sans temps d'arrêt, être optimisée pour les appareils mobiles, être réactive, prendre en charge plusieurs marques, être configurable, être localisé en 11 langues et être compatible avec IE9.
En 2018, Windows 7 et IE9, son navigateur par défaut, étaient toujours très populaires. D'après le compteur de statistiques, Windows 10 et IE11 n'ont atteint qu'une masse critique début 2020. En examinant nos données, nous avons constaté qu'un grand nombre d'échanges étaient effectués par des clients utilisant IE9 (ou pire, IE11) en mode de compatibilité. Ce trafic était fortement orienté vers les marchés émergents et dans les régions où la clientèle de Maersk augmentait rapidement.
Si le menu de navigation ne fonctionne pas, il est difficile de trouver le bouton de connexion. Si la connexion ne fonctionne pas, ils ne peuvent pas réserver de conteneurs, et vous rencontrez soudainement un gros problème, causé par les anciens navigateurs.
Pour résoudre ce problème, nous avons adopté une approche d'amélioration progressive du composant de navigation et de toutes les futures applications Web. Nous ferions en sorte que cela "fonctionne ", mais il peut y avoir des polyfills et des restrictions importants pour le faire. Par exemple, IE n'est pas compatible avec l'API Fetch, mais nous incluons des polyfills qui renvoient à IE10 pour ces navigateurs. Pour IE9, nous avons codé les appels XMLHttpRequest dans un fichier distinct, à charger uniquement dans les cas où fetch ne pouvait pas être émulé.
Lorsque nous avons abandonné IE9, alors qu'il ne restait plus qu'une poignée de clients, nous avons pu supprimer ce code de nos applications, avec un minimum d'efforts et un maximum d'avantages pour nos utilisateurs de navigateurs récents.
Au fur et à mesure de la transformation numérique de Maersk, nous avons reconstruit de nombreuses parties du site à l'aide de micro-interfaces optimisées par VueJS. Vue comportait de nombreuses fonctionnalités qui la rendaient adaptée à l'avenir, avec une configuration prédéfinie excellente pour le tremblement d'arborescence avancé et l'optimisation des bundles, ainsi qu'un mode moderne dans lequel deux versions de l'application sont créées : l'une qui utilise la dernière syntaxe du module ES pour les navigateurs permanents et l'autre pour les anciennes applications qui ne comprennent pas les modules ES6. Cette ancienne version est diffusée dans les navigateurs tels qu'IE. Bien souvent, elle dépasse 100 Ko de plus dans son bundle de polyfills compressés avec gzip, simplement en raison de la quantité de fonctionnalités manquantes dans le navigateur.
Nous avons découvert que nous pouvions aussi utiliser la plupart des techniques de mise en page CSS modernes telles que la grille CSS, car Microsoft a commencé à utiliser les spécifications dans IE10. Grâce au préfixe automatique et à cet article d'aide sur les CSS, qui nous permet de mieux nommer les différentes zones d'une page, nous avons créé un système de mise en page léger, parfaitement adapté à tous les projets et extrêmement flexible. Toutefois, certains problèmes de compatibilité coûtaient beaucoup de temps à résoudre.
Soudain, nous sommes de retour à la phase d'analyse coûts-avantages. Cependant, quelle que soit la version d'IE cette fois-ci, et comme avec IE9, il s'agit d'un compromis entre la prise en charge de tout le monde et des semaines de développement pénible pour chaque projet. Convaincus qu'un navigateur récent est une meilleure expérience pour nos clients, nous avons incité nos utilisateurs à abandonner IE lorsqu'ils visitaient le site Web. Nous avons constaté que cette stratégie était efficace en petite quantité pour les clients actifs qui avaient pris l'habitude d'ouvrir Internet Explorer pour leurs interactions avec nous. Ce message était bien, mais pas assez pour faire fonctionner le calcul.
Alors que les visites en provenance d'Internet s'arrêtaient, Maersk a décidé de suivre l'exemple de nombreuses autres personnes avant elles et de mettre fin à la prise en charge officielle de cette technologie, même si les chiffres indiquent toujours que nous devrions la soutenir. Pourquoi maintenant ?
Pour faire simple, la plate-forme Web a évolué et IE11 ne peut pas faire ce qu'elle doit faire, même avec une petite armée de polyfills. Prenons l'exemple du composant de navigation. Dans l'univers des plates-formes Web modernes, il s'agit d'un élément personnalisé, doté de ses propres styles encapsulés, basé sur des variables CSS et des requêtes de conteneur, de sorte qu'il contrôle tout dans un seul composant. Sans ces éléments de la plate-forme, le style de ces composants peut être complètement modifié à partir de l'application, et les styles peuvent être transmis à d'autres composants ou renvoyés vers l'application. Il existe des polyfills qui vous permettront d'émuler la plupart des éléments géographiques ici, y compris les éléments personnalisés, ShadyCSS, ShadyDOM et l'élément template.
En pratique, ces polyfills fonctionnent parfaitement pour les composants isolés, mais lorsqu'il combine plusieurs composants dans une application complexe, IE s'arrête avec des dizaines de secondes d'écran blanc tandis que l'environnement d'exécution JavaScript tente de calculer l'arborescence de style pendant quarante secondes. En bref, l'expérience utilisateur a été gravement compromise pour prendre en charge le navigateur.
Par le passé, il y avait de petites interruptions : des polyfills qui pouvaient ajouter une demi-seconde à la première peinture, mais pas beaucoup plus. C'était différent et ces applications sont devenues inutilisables. Les polyfills ne sont pas aussi efficaces que s'ils sont confrontés à la complexité de la plate-forme Web moderne.
Et savez-vous ce qui s'est passé depuis l'abandon de la prise en charge d'IE ? Très, très peu. Il n'y a eu aucune avalanche de tickets d'assistance ou de commentaires négatifs. Nos ingénieurs sont plus satisfaits. Nos applications peuvent passer à Vue 3 (qui n'est pas compatible avec IE11, car l'objet Proxy ne peut pas être polyrempli) et des tailles de groupe plus petites. La compatibilité totale avec les variables CSS et les polices variables simplifie la thématisation pour toutes les marques. De plus, la possibilité d'utiliser les jetons dans les composants de fichier unique de Vue réduit la complexité cognitive, ce qui améliore l'expérience des développeurs.
Du point de vue des clients, l'utilisation d'IE continue de diminuer lentement. IE n'a pas été arrêtée du site, mais au fur et à mesure que l'amélioration se transforme en une dégradation élégante, les fonctionnalités et les applications cesseront de fonctionner. Les clients bénéficieront des avancées de notre technologie, qui bénéficieront d'une expérience plus cohérente sur le site, car les bonnes pratiques, l'accessibilité et la conception sont intégrées dans un système de conception basé sur Lit en constante évolution, offrant une interopérabilité totale avec n'importe quel framework existant ou futur.
J'ai hâte de voir comment les nouvelles fonctionnalités de la plate-forme Web peuvent être utilisées au sein de l'entreprise, du mode sombre pour faciliter l'utilisation des systèmes des navires la nuit, à la technologie Web Bluetooth, WebXR et PWA qui permettra à nos applications Web d'interagir avec le monde physique qui nous entoure, quelles que soient les conditions. Internet Explorer est un grand merci pour beaucoup de choses. Nous sommes maintenant libres de prendre des nouvelles de la plate-forme Web.
Image principale de Matt Botsford