Impact de l'abandon d'Internet Explorer sur les clients et les développeurs de Maersk.com
Je m'appelle Steve Workman et je suis ingénieur principal pour Maersk.com. Maersk est le leader mondial de la logistique intégrée de la chaîne d'approvisionnement. Depuis 118 ans, il aide ses clients à transporter des marchandises dans le monde entier, et propose 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, après que Microsoft a officiellement cessé de prendre en charge IE en juin 2022. C'est la fin d'une ère importante du Web et le début d'une autre.
J'ai rejoint Maersk en 2018, et mon premier projet a consisté à créer une nouvelle barre de navigation globale. Il devait être entièrement testable, facile à déployer et à mettre à jour dans le monde entier sans temps d'arrêt, mobile first, responsif, compatible avec plusieurs marques, configurable, localisé dans 11 langues, et compatible avec IE9.
En 2018, Windows 7 et son navigateur par défaut IE9 étaient encore très populaires, et Windows 10 et IE11 n'ont atteint la masse critique qu'au début de l'année 2020 (selon le compteur de statistiques). En examinant nos données, nous avons constaté que de nombreux échanges provenaient de clients utilisant IE9 ou, pire, IE11 en mode compatibilité. Ce trafic était fortement orienté vers les marchés émergents et 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 vous retrouvez face à un gros problème, causé par d'anciens navigateurs.
Pour résoudre ce problème, nous avons adopté une approche d'amélioration progressive pour le composant de navigation et toutes les futures applications Web. Nous ferions en sorte que cela "fonctionne ", mais cela peut nécessiter des polyfills et des restrictions importants. Par exemple, IE n'est pas compatible avec l'API Fetch, mais nous incluons des polyfills remontant à IE10 pour ces navigateurs. Pour IE9, nous avons codé les appels XMLHttpRequest dans un fichier distinct, à ne charger que dans les cas où fetch ne pouvait pas être polyfilled.
Lorsque nous avons décidé de ne plus prendre en charge IE9, alors qu'il ne restait qu'une poignée de clients, nous avons pu supprimer ce code de nos applications avec un minimum d'effort et un maximum d'avantages pour nos utilisateurs sur les navigateurs modernes.
Au fur et à mesure de la transformation numérique de Maersk, nous avons reconstruit de nombreuses parties du site dans des micro-frontends basés sur VueJS. Vue disposait de nombreuses fonctionnalités qui le rendaient évolutif, avec une configuration prédéfinie idéale pour l'optimisation avancée de l'arborescence et des bundles, ainsi qu'un mode moderne dans lequel deux versions de l'application sont compilées : l'une qui utilise la dernière syntaxe de module ES pour les navigateurs evergreen, et l'autre pour les applications obsolètes qui ne comprennent pas les modules ES6. Cette ancienne version est diffusée auprès de navigateurs tels qu'IE et est souvent 100 Ko plus volumineuse dans son bundle de polyfill gzippé, simplement en raison du nombre de fonctionnalités manquantes dans le navigateur.
Nous avons constaté que nous pouvions également utiliser la plupart des techniques de mise en page CSS modernes, telles que la grille CSS, car Microsoft a commencé à développer la spécification dès IE10. Grâce à autoprefixer et à cet article de CSS Tricks qui nous a aidés à nommer parfaitement les différentes zones d'une page, nous avons obtenu un système de mise en page léger, adapté à tous les projets et extrêmement flexible. Cependant, des problèmes de compatibilité ont nécessité beaucoup de temps pour être résolus.
Nous nous retrouvons soudainement à l'étape de l'analyse coûts-avantages, mais cette fois pour n'importe quelle version d'IE. Tout comme avec IE9, il s'agit d'un compromis entre la prise en charge de tous les utilisateurs et des semaines de développement pénibles pour chaque projet. Convaincus que l'utilisation d'un navigateur moderne offre une meilleure expérience à nos clients, nous avons incité nos utilisateurs à abandonner IE lorsqu'ils visitaient le site Web. Nous avons constaté que cette approche était efficace à petite échelle pour les clients actifs qui avaient pris l'habitude d'ouvrir IE pour interagir avec nous. Ce message était correct, mais pas tout à fait suffisant pour que les calculs fonctionnent.
Les visites provenant d'Internet Explorer ayant diminué, Maersk a décidé de suivre l'exemple de nombreux autres avant lui et de mettre fin à la prise en charge officielle d'IE, même si les chiffres indiquent toujours que nous devrions le prendre en charge. Pourquoi maintenant ?
Autrement dit, la plate-forme Web a évolué, et IE11 ne peut pas effectuer les tâches dont nous avons besoin, même avec une petite armée de polyfills. Prenons le composant de navigation. Dans un monde de plates-formes Web modernes, il s'agit d'un élément personnalisé, avec ses propres styles encapsulés, piloté par des variables CSS et des requêtes de conteneur. Il contrôle donc 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 se propager à d'autres composants ou revenir à l'application. Des polyfills vous permettent d'émuler la plupart des fonctionnalités 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. Toutefois, lorsque vous combinez plusieurs composants dans une application complexe, IE s'arrête pendant des dizaines de secondes avec un écran blanc, tandis que l'environnement d'exécution JavaScript tente de calculer l'arborescence de styles pour la quarante-deuxième fois. En résumé, l'expérience utilisateur a été fortement compromise pour prendre en charge le navigateur.
Auparavant, nous avions de petites interruptions : des polyfills qui pouvaient ajouter une demi-seconde au premier rendu, mais pas beaucoup plus. Ce n'était pas le cas pour ces applications, qui sont devenues inutilisables. Lespolyfills ne peuvent pas faire grand-chose face à la complexité de la plate-forme Web moderne.
Et savez-vous ce qui s'est passé depuis que nous avons cessé de prendre en charge IE ? Très, très peu. Aucune avalanche de demandes d'assistance client ni de commentaires négatifs n'a été enregistrée. Nos ingénieurs sont plus heureux, et nos applications disposent d'un chemin de migration vers Vue 3 (qui n'est pas compatible avec IE11, car l'objet Proxy ne peut pas être polyfilled) et de tailles de bundle plus petites. La prise en charge complète des variables CSS et des polices variables permet de simplifier la thématisation entre les marques. La possibilité d'utiliser les jetons dans les composants de fichier unique de Vue réduit également 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é désactivé sur le site, mais à mesure que l'amélioration progressive se transforme en dégradation élégante, les fonctionnalités et les applications cesseront de fonctionner. Les clients bénéficieront des avancées de notre technologie. Ils profiteront d'une expérience plus cohérente sur le site, car les bonnes pratiques, l'accessibilité et la conception sont intégrées à un système de conception basé sur Lit en constante évolution, avec une interopérabilité totale avec tous les frameworks actuels ou futurs.
Je suis impatient 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, au Web Bluetooth, au WebXR et aux PWA pour permettre à nos applications Web d'interagir avec le monde physique qui nous entoure dans toutes les conditions. Merci, Internet Explorer, pour beaucoup de choses. Nous sommes maintenant libres de rattraper notre retard sur la plate-forme Web.