Was die Beendigung der Unterstützung für Internet Explorer für die Kunden und Entwickler von Maersk.com bedeutete.
Mein Name ist Steve Workman und ich bin Lead Engineer für Maersk.com. Maersk ist weltweit führend im Bereich integrierte Lieferkettenlogistik und unterstützt Kunden seit 118 Jahren bei Online-Buchungen. Anfang Mai 2022 wurde Internet Explorer (IE) von @Maersk offiziell nicht mehr auf den kundenseitigen Systemen unterstützt. Grund dafür war die offizielle Einstellung des Supports für Internet Explorer im Juni 2022 durch Microsoft. Das Ende einer wichtigen Ära des Webs und der Beginn einer neuen Ära.
Ich kam 2018 zu Maersk. Mein erstes Projekt war die Entwicklung einer neuen globalen Navigationsleiste. Die Lösung musste vollständig testbar, einfach zu implementieren und ohne Ausfallzeiten weltweit zu aktualisieren sein, Mobile-First-Lösungen entwickeln, responsiv sein, mehrere Marken unterstützen, konfigurierbar und in 11 Sprachen lokalisieren sowie IE9 unterstützen.
2018 waren Windows 7 und der Standardbrowser IE9 immer noch sehr beliebt, wobei Windows 10 und IE11 erst Anfang 2020 eine kritische Masse erreichten (laut Statistikzähler). In unseren Daten haben wir festgestellt, dass ein erheblicher Teil des Handels von Kunden stammt, die IE9 oder noch schlimmer IE11 im Kompatibilitätsmodus verwenden. Dieser Traffic beschränkte sich stark auf Schwellenmärkte und in Regionen, in denen der Kundenstamm von Maersk schnell wuchs.
Wenn das Navigationsmenü nicht funktioniert, ist es schwierig, die Schaltfläche für die Anmeldung zu finden. Wenn die Anmeldung nicht funktioniert, können keine Container gebucht werden und plötzlich tritt ein großes Problem auf, das durch ältere Browser verursacht wird.
Um dieses Problem zu lösen, haben wir die Navigationskomponente und alle zukünftigen Web-Apps schrittweise verbessert. Wir würden es „funktionieren“, aber es kann erhebliche Polyfills und Einschränkungen dafür geben. IE unterstützt beispielsweise die Fetch API nicht, aber es gibt Polyfills, die zu IE10 zurückkehren, die wir für diese Browser einschließen. Für IE9 haben wir XMLHttpRequest-Aufrufe in einer separaten Datei codiert. Sie wurden nur dann geladen, wenn fetch nicht mit Polyfilling gefüllt werden konnte.
Als es an der Zeit war, die IE9-Unterstützung einzustellen, obwohl nur noch wenige Kunden übrig blieben, konnten wir diesen Code mit minimalem Aufwand und maximalem Nutzen für unsere Nutzer in modernen Browsern einfach aus unseren Anwendungen entfernen.
Im Zuge der digitalen Transformation von Maersk bauten wir viele Teile der Website in VueJS-gestützten Mikro-Frontends wieder auf. Vue verfügte über viele zukunftsfreundliche Funktionen, mit einer erstklassigen Konfiguration für erweitertes Baumwackeln und zur Bundle-Optimierung bis hin zu einem modernen Modus, in dem zwei Versionen der Anwendung erstellt werden: eine Version mit der neuesten ES Module-Syntax für immer aktuelle Browser und eine für ältere Anwendungen, die ES6-Module nicht verstehen. Diese ältere Version wird an Browser wie Internet Explorer geliefert und ist in ihrem gzip-Polyfill-Bundle oft 100 KB größer, allein aufgrund der Anzahl der Funktionen, die im Browser fehlen.
Wir haben festgestellt, dass wir auch die meisten modernen CSS-Layouttechniken wie CSS Grid verwenden können, da Microsoft die Spezifikation bereits mit IE10 begonnen hat. Mit autoprefixer und diesem CSS-Tricks, die uns dabei helfen, die verschiedenen Bereiche einer Seite wirklich gut zu benennen, hatten wir ein Layoutsystem, das einfach ist, sich für jedes Projekt eignet und äußerst flexibel ist. Es gab jedoch Kompatibilitätsprobleme, deren Behebung viel Zeit kostete.
Plötzlich sind wir wieder in der Phase der Kosten-Nutzen-Analyse, aber diesmal gilt für jede Version von Internet Explorer, und genau wie bei IE9, ein Kompromiss zwischen der Unterstützung aller Beteiligten und wochenlanger mühsamer Entwicklungszeit für jedes Projekt. Wir waren überzeugt, dass die Verwendung eines modernen Browsers für unsere Kunden eine bessere Erfahrung ist, und haben unsere Nutzer daher beim Besuch der Website vom Internet Explorer gedeutet. Wir stellten fest, dass dies für aktive Kunden, die Internet Explorer für ihre Interaktionen mit uns geöffnet hatten, in geringem Umfang erfolgreich war. Die Nachricht war gut, aber nicht ausreichend, um die Mathematik zu lösen.
Als die Besuche von Internet Explorer immer mehr nachließen, beschloss Maersk, vielen anderen Unternehmen vor ihnen zu folgen und den offiziellen Support für IE einzustellen, obwohl die Zahlen immer noch sagen, dass wir ihn unterstützen sollten. Warum jetzt?
Einfach ausgedrückt: Die Webplattform hat sich gewandelt und IE11 kann die Dinge nicht, die wir benötigen, selbst mit einer kleinen Armee von Polyfills. Nehmen wir die Navigationskomponente. Bei modernen Webplattformen ist dies ein benutzerdefiniertes Element mit eigenen gekapselten Stilen, das von CSS-Variablen und Containerabfragen gesteuert wird. Es steuert also alles in einer Komponente. Ohne diese Teile der Plattform kann der Stil dieser Komponenten in der App vollständig geändert werden und Stile können in andere Komponenten oder zurück in die App überlaufen. Es gibt Polyfills, mit denen Sie die meisten Funktionen hier emulieren können, darunter benutzerdefinierte Elemente, ShadyCSS, ShadyDOM und das template-Element.
In der Praxis funktionieren diese Polyfills hervorragend für isolierte Komponenten. Wenn jedoch mehrere Komponenten in einer komplexen Anwendung kombiniert werden, kommt der Internet Explorer mit einem weißen Bildschirm von zehn Sekunden zum Stillstand, während die JavaScript-Laufzeit versucht, den Stilbaum für die vierzig Sekunden zu berechnen. Kurz gesagt: Die Benutzeroberfläche wurde zur Unterstützung des Browsers erheblich beeinträchtigt.
Früher gab es kleine Pausen wie Polyfills, die die erste Farbe um eine halbe Sekunde verlängern konnten, aber nicht viel mehr. Das war anders und die Apps konnten nicht mehr genutzt werden. Polyfills können nur dann viel, wenn sie mit der Komplexität der modernen Webplattform konfrontiert werden.
Und wissen Sie, was passiert ist, seit wir den IE-Support eingestellt haben? Sehr, sehr wenig. Es gab weder eine große Menge an Kundensupport-Tickets noch negatives Feedback. Unsere Entwickler sind zufriedener und unsere Anwendungen bieten einen Upgradepfad auf Vue 3, das IE11 nicht unterstützt, sowie auf kleinere Bundle-Größen an, da das Proxy-Objekt nicht mit Polypen gefüllt werden kann. Die vollständige Unterstützung von CSS-Variablen und Variablen mit unterschiedlichen Schriftarten ermöglicht eine einfachere Gestaltung markenübergreifender Themen. Die Verwendung der Tokens in den Einzeldateikomponenten von Vue reduziert auch die kognitive Komplexität und verbessert so die Entwicklererfahrung.
Aus Kundensicht nimmt die Nutzung von Internet Explorer weiterhin langsam ab. Internet Explorer ist zwar nicht von der Website abgeschaltet, aber wenn Progressive Enhancement zu Graceful Degradation wird, funktionieren Funktionen und Anwendungen nicht mehr. Unsere Kunden profitieren von den Fortschritten unserer Technologie. Sie profitieren von einer einheitlicheren Websiteerfahrung, da Best Practices, Barrierefreiheit und Design in einem sich entwickelnden Lit-basierten Designsystem mit vollständiger Interoperabilität mit allen aktuellen und zukünftigen Frameworks verankert sind.
Ich bin gespannt, wie die neuen Funktionen der Webplattform innerhalb des Unternehmens genutzt werden können – vom dunklen Modus, der die Bedienung von Schiffssystemen nachts erleichtert, bis hin zu Web Bluetooth, WebXR und PWAs, mit denen unsere Web-Apps unter allen Bedingungen mit der physischen Welt um uns herum interagieren können. Vielen Dank, Internet Explorer, für viele Dinge. Wir können uns jetzt kostenlos mit der Webplattform beschäftigen.
Hero-Image von Matt Botsford