Impact de la fin de la prise en charge d'Internet Explorer sur les clients et les développeurs de Maersk.com
Je m'appelle Steve Workman et je suis ingénieur en chef pour Maersk.com. Maersk est le leader mondial de la logistique intégrée de la chaîne d'approvisionnement. Cela fait 118 ans que Maersk aide ses clients à transporter des marchandises à travers le monde et effectue 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, car Microsoft a officiellement mis fin à sa compatibilité avec IE en juin 2022. C'est la fin d'une ère importante du Web, qui marque le début d'une nouvelle ère.
J'ai rejoint Maersk en 2018, et mon premier projet consistait à 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, être 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 avec un gros problème, causé par d'anciens navigateurs.
Pour résoudre ce problème, nous avons adopté une démarche d'amélioration progressive avec le composant de navigation et toutes les futures applications Web. Bien que cela fonctionne, il peut y avoir un grand nombre de polyfills et de restrictions. Par exemple, IE n'est pas compatible avec l'API Fetch, mais certains polyfills retournent dans IE10 que nous incluons 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 décidé d'abandonner la prise en charge d'IE9, alors qu'il ne restait qu'une poignée de clients, nous avons pu simplement supprimer ce code de nos applications, avec un effort minimal et un bénéfice maximal pour nos utilisateurs sur les navigateurs modernes.
Au fur et à mesure que la transformation numérique de Maersk se poursuivait, nous avons reconstruit de nombreuses parties du site avec des micro-frontaux optimisés par VueJS. Vue comportait de nombreuses fonctionnalités qui le rendaient pérenne, avec une excellente configuration prédéfinie pour l'organisation avancée de l'arborescence et l'optimisation des bundles, jusqu'à un mode moderne où deux versions de l'application sont créées : l'une utilisant la syntaxe du module ES la plus récente pour les navigateurs permanents et l'autre pour les anciennes applications 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.
Soudain, nous sommes de retour à la phase d'analyse coûts-avantages, mais pour chaque version d'IE cette fois-ci, et 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énible pour chaque projet. Convaincu que l'utilisation d'un navigateur récent est une meilleure expérience pour nos clients, nous avons incité nos utilisateurs à quitter IE lorsqu'ils ont visité notre 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 bon, mais pas assez pour que le calcul fonctionne.
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, il y avait de petites interruptions : des polyfills qui pouvaient ajouter une demi-seconde à la première peinture, 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 vous savez ce qui s'est passé depuis que nous ne prenons plus en charge IE ? Très, très peu. Nous n'avons pas constaté d'avalanche de demandes d'assistance client ni d'avis négatifs. 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 pour les 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 bénéficieront d'une expérience plus cohérente sur le site, car les bonnes pratiques, l'accessibilité et le design seront intégrés à un système de conception Lit en constante évolution, avec une interopérabilité totale avec tout framework actuel 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 : mode sombre pour faciliter l'utilisation des systèmes des navires de nuit, Bluetooth Web, WebXR et PWA pour que nos applications Web puissent interagir avec le monde physique en toutes circonstances. Merci, Internet Explorer, pour de nombreuses choses. Nous sommes désormais libres de rattraper notre retard sur la plate-forme Web.