Was die Einstellung der Internet Explorer-Unterstützung für die Kunden und Entwickler von Maersk.com bedeutete
Ich bin Steve Workman und leite die Entwicklung von Maersk.com. Maersk ist der weltweit führende Anbieter integrierter Logistiklösungen für die Lieferkette. Seit 118 Jahren unterstützen wir Kunden dabei, Güter auf der ganzen Welt zu transportieren, und seit über 20 Jahren können Buchungen online erfolgen. Anfang Mai 2022 hat @Maersk die offizielle Unterstützung des Internet Explorers (IE) auf seinen kundenorientierten Systemen eingestellt, da Microsoft den Support für IE im Juni 2022 offiziell eingestellt hat. Dies ist das Ende einer wichtigen Ära des Webs und der Beginn einer neuen.
Ich bin 2018 zu Maersk gekommen und mein erstes Projekt bestand darin, eine neue globale Navigationsleiste zu erstellen. Sie musste vollständig testbar, einfach bereitzustellen und weltweit ohne Ausfallzeiten aktualisierbar sein, ein Mobile-first-Design haben, responsiv sein, mehrere Marken unterstützen, konfigurierbar sein, in 11 Sprachen lokalisiert werden und IE9 unterstützen.
2018 waren Windows 7 und sein Standardbrowser IE9 noch sehr beliebt. Windows 10 und IE11 erreichten laut Statistikzähler erst Anfang 2020 eine kritische Masse. Bei der Auswertung unserer Daten haben wir festgestellt, dass ein erheblicher Teil der Umsätze von Kunden stammt, die den IE9 oder noch schlimmer den IE11 im Kompatibilitätsmodus verwenden. Diese Zugriffe waren stark auf aufstrebende Märkte und Regionen ausgerichtet, in denen der Kundenstamm von Maersk schnell wuchs.
Wenn das Navigationsmenü nicht funktioniert, ist es schwierig, die Anmeldeschaltfläche zu finden. Wenn die Anmeldung nicht funktioniert, können sie keine Container buchen. Plötzlich haben Sie ein großes Problem, das durch alte Browser verursacht wird.
Um dieses Problem zu lösen, haben wir bei der Navigationskomponente und allen zukünftigen Webanwendungen auf progressive Verbesserung gesetzt. Wir würden dafür sorgen, dass es „funktioniert“, aber es kann erhebliche Polyfills und Einschränkungen geben. Beispielsweise unterstützt der IE die Fetch API nicht, aber es gibt Polyfills, die bis IE10 zurückgehen und die wir für diese Browser einbinden. Für IE9 haben wir XMLHttpRequest-Aufrufe in einer separaten Datei codiert, die nur geladen wird, wenn fetch nicht polyfilled werden konnte.
Als es an der Zeit war, die Unterstützung für IE9 einzustellen, als nur noch eine Handvoll Kunden übrig war, konnten wir diesen Code einfach aus unseren Anwendungen entfernen – mit minimalem Aufwand und maximalem Nutzen für unsere Nutzer in modernen Browsern.
Im Zuge der digitalen Transformation von Maersk haben wir viele Teile der Website in VueJS-gestützten Micro-Front-Ends neu aufgebaut. Vue hatte viele Funktionen, die es zukunftsfähig machten, mit einer hervorragenden voreingestellten Konfiguration für erweitertes Tree-Shaking und Bundle-Optimierung bis hin zu einem modernen Modus, in dem zwei Versionen der Anwendung erstellt werden – eine, die die neueste ES-Modulsyntax für Evergreen-Browser verwendet, und eine für Legacy-Anwendungen, die ES6-Module nicht verstehen. Diese alte Version wird an Browser wie den IE gesendet und ist im gezippten polyfill-Bundle oft 100 KB größer, einfach aufgrund der Anzahl der Funktionen, die dem Browser fehlen.
Wir haben festgestellt, dass wir auch die meisten modernen CSS-Layouttechniken wie CSS-Grid verwenden können, da Microsoft die Spezifikation bereits im IE10 eingeführt hat. Mithilfe von autoprefixer und diesem Artikel von CSS Tricks, der uns dabei half, die verschiedenen Bereiche einer Seite richtig zu benennen, hatten wir ein schlankes, für jedes Projekt geeignetes und äußerst flexibles Layoutsystem. Es gab jedoch Kompatibilitätsprobleme, deren Behebung viel Zeit in Anspruch nahm.
Plötzlich sind wir wieder bei der Kosten-Nutzen-Analyse, diesmal aber für jede Version von IE. Und genau wie bei IE 9 ist es ein Kompromiss zwischen der Unterstützung aller und wochenlanger, mühsamer Entwicklungszeit für jedes Projekt. Wir sind davon überzeugt, dass die Nutzung eines modernen Browsers für unsere Kunden besser ist. Deshalb haben wir Nutzer, die die Website besuchten, dazu angehalten, den IE zu schließen. Wir haben festgestellt, dass dies in kleinen Mengen für aktive Kunden, die sich angewöhnt hatten, den IE für ihre Interaktionen mit uns zu öffnen, erfolgreich war. Diese Nachricht war gut, aber nicht ganz ausreichend, um die Rechnung aufzustellen.
Da die Anzahl der Zugriffe über den Internet Explorer zurückging, hat sich Maersk dazu entschlossen, dem Beispiel vieler anderer Unternehmen zu folgen und den offiziellen Support für den Internet Explorer einzustellen, auch wenn die Zahlen immer noch dafür sprechen würden, ihn zu unterstützen. Warum jetzt?
Einfach ausgedrückt: Die Webplattform hat sich weiterentwickelt und IE11 kann die Aufgaben, die wir von ihm erwarten, nicht erfüllen – auch nicht mit einer kleinen Armee von Polyfills. Nehmen wir die Navigationskomponente: Auf einer modernen Webplattform ist dies ein benutzerdefiniertes Element mit eigenen gekapselten Stilen, das von CSS-Variablen und Containerabfragen gesteuert wird, sodass alles in einer Komponente gesteuert wird. Ohne diese Teile der Plattform kann der Stil dieser Komponenten vollständig über die Anwendung geändert werden und Stile können in andere Komponenten oder zurück in die Anwendung gelangen. Mit Polyfills können Sie die meisten der hier beschriebenen Funktionen emulieren, einschließlich benutzerdefinierter Elemente, ShadyCSS, ShadyDOM und des template-Elements.
In der Praxis funktionieren diese Polyfills hervorragend für einzelne Komponenten. Wenn Sie jedoch mehrere Komponenten in einer komplexen Anwendung kombinieren, kommt der IE zum Stillstand und zeigt zehn Sekunden lang einen weißen Bildschirm an, während die JavaScript-Laufzeit versucht, den Stilbaum zum 42. Mal zu berechnen. Kurz gesagt: Die Nutzerfreundlichkeit wurde stark beeinträchtigt, um den Browser zu unterstützen.
In der Vergangenheit gab es kleine Unterbrechungen – polyfills, die dem First Paint eine halbe Sekunde hinzufügen konnten, aber nicht viel mehr. Dies war anders und diese Apps wurden unbrauchbar. Polyfills sind bei der Komplexität der modernen Webplattform nur begrenzt einsetzbar.
Und wissen Sie, was passiert ist, seit wir den IE-Support eingestellt haben? Sehr, sehr wenig. Es gab keine Flut von Kundensupport-Tickets oder negatives Feedback. Unsere Entwickler sind zufriedener und unsere Anwendungen haben einen Upgradepfad auf Vue 3 (das IE11 nicht unterstützt, da das Proxyobjekt nicht polyfilled werden kann) und kleinere Bundle-Größen. Die vollständige Unterstützung von CSS-Variablen und variablen Schriftarten ermöglicht eine einfachere thematische Gestaltung für alle Marken. Die Möglichkeit, die Tokens in den einzelnen Dateikomponenten von Vue zu verwenden, reduziert auch die kognitive Komplexität und sorgt für eine bessere Entwicklererfahrung.
Aus Sicht der Kunden nimmt die Nutzung von IE langsam ab. Der IE wird nicht von der Website ausgeschlossen. Wenn die progressive Verbesserung jedoch in eine schrittweise Fehlertoleranz übergeht, funktionieren Funktionen und Anwendungen nicht mehr. Kunden profitieren von den Fortschritten unserer Technologie. Die Website ist jetzt einheitlicher, da Best Practices, Barrierefreiheit und Design in ein sich entwickelndes Lit-basiertes Designsystem integriert sind, das mit allen aktuellen und zukünftigen Frameworks vollständig interoperabel ist.
Ich bin gespannt, wie die neuen Funktionen der Webplattform im Unternehmen eingesetzt werden können – vom Dark Mode, mit dem Schiffssysteme nachts leichter zu bedienen sind, bis hin zu Web Bluetooth, WebXR und PWAs, damit unsere Web-Apps unter allen Bedingungen mit der physischen Welt um uns herum interagieren können. Vielen Dank, Internet Explorer. Wir können jetzt mit der Webplattform Schritt halten.