Das Ende von Internet Explorer

Was bedeutet die Beendigung der Unterstützung für Internet Explorer für die Kunden und Entwickler bei Maersk.com?

steveworkman
steveworkman

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 von Internet Explorer (IE) auf seinen kundenorientierten Systemen eingestellt, da Microsoft den Support für IE im Juni 2022 offiziell beendet 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. Es musste vollständig testbar, einfach zu implementieren und weltweit ohne Ausfallzeiten zu implementieren und zu aktualisieren sein, für Mobilgeräte optimiert sein, 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 Analyse unserer Daten haben wir festgestellt, dass eine beträchtliche Anzahl von Geschäften von Kunden stammt, die IE9 oder schlimmer IE11 im Kompatibilitätsmodus verwenden. Diese Zugriffe waren stark auf aufstrebende Märkte und Gebiete 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 fortlaufenden 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 mit CSS-Tricks, die uns dabei helfen, verschiedene Bereiche einer Seite zu benennen, hatten wir ein Layoutsystem, das schlank, für jedes Projekt geeignet und äußerst flexibel ist. Dennoch gab es Kompatibilitätsprobleme, deren Behebung viel Zeit kostete.

Plötzlich befinden wir uns wieder in der Phase der Kosten-Nutzen-Analyse, aber diesmal bei jeder Version von IE und wie bei IE9 ist dies ein Kompromiss zwischen der Unterstützung aller und einer wochenlangen, schmerzhaften Entwicklungszeit für jedes Projekt. Da wir uns sicher sind, dass ein moderner Browser unseren Kunden eine bessere Erfahrung bietet, haben wir unsere Nutzer beim Besuch der Website davon abgehalten, Internet Explorer zu nutzen. Wir haben festgestellt, dass dies in geringen Mengen erfolgreich für aktive Kunden war, die es zur Gewohnheit gemacht hatten, Internet Explorer für ihre Interaktionen mit uns zu öffnen. Diese Nachricht war gut, aber nicht ganz ausreichend, um die Rechnung aufzustellen.

Da die Anzahl der IE-Zugriffe zurückging, hat sich Maersk dazu entschlossen, dem Beispiel vieler anderer Unternehmen zu folgen und den offiziellen Support für IE einzustellen, obwohl die Zahlen immer noch dafür sprechen, ihn zu unterstützen. Warum jetzt?

Eine Website mit einer horizontalen Navigationsleiste.
Startseite von Maersk mit der globalen Navigationskomponente.

Einfach ausgedrückt: Die Webplattform hat sich weiterentwickelt und IE11 kann die Anforderungen nicht erfüllen, die wir an ihn stellen, 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. Es gibt Polyfills, mit denen Sie die meisten Funktionen hier emulieren können, darunter benutzerdefinierte Elemente, ShadyCSS, ShadyDOM und das Element template.

In der Praxis funktionieren diese Polyfills hervorragend für isolierte Komponenten. Wenn jedoch mehrere Komponenten in einer komplexen Anwendung kombiniert werden, kommt IE mit einer weißen Bildschirmzeit von mehreren zehn Sekunden zum Stillstand, während die JavaScript-Laufzeit versucht, den Stilbaum 40 Sekunden lang zu berechnen. Kurz gesagt, die Nutzererfahrung wurde durch die Unterstützung des Browsers erheblich beeinträchtigt.

In der Vergangenheit gab es kleine Unterbrechungen – polyfills, die dem First Paint eine halbe Sekunde hinzufügen konnten, aber nicht viel mehr. Da dies anders war, konnten diese Apps nicht mehr verwendet werden. Polyfills sind bei der Komplexität der modernen Webplattform nur begrenzt einsetzbar.

Und wissen Sie, was passiert ist, seit wir Internet Explorer nicht mehr unterstützen? 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 Gestaltung markenübergreifend. Die Verwendung der Tokens in den einzelnen Dateikomponenten von Vue reduziert außerdem die kognitive Komplexität und verbessert die 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, für viele Dinge. Wir können uns jetzt über die Webplattform informieren.