Co oznaczało zakończenie obsługi przeglądarki Internet Explorer dla klientów i programistów Maersk.com.
Nazywam się Steve Workman i jestem głównym inżynierem w firmie Maersk.com. Maersk jest globalnym liderem w dziedzinie zintegrowanego łańcucha dostaw, który od ponad 118 lat pomaga klientom w przenoszeniu towarów na całym świecie, a od ponad 20 lat umożliwia dokonywanie rezerwacji online. Na początku maja 2022 r. firma @Maersk oficjalnie przestała obsługiwać przeglądarkę Internet Explorer (IE) w systemach przeznaczonych dla klientów. Jednocześnie firma Microsoft oficjalnie zakończyła obsługę IE w czerwcu 2022 r. To już koniec ważnej ery internetu i początek nowej.
Dołączyłem do Maersk w 2018 roku. Pierwszym projektem było utworzenie nowego globalnego paska nawigacyjnego. Rozwiązanie musiało być w pełni funkcjonalne do testowania, łatwe do wdrożenia i aktualizowania na całym świecie bez przestojów, a także dostosowane do urządzeń mobilnych, responsywne, obsługiwane przez wiele marek, konfigurowalne, zlokalizowane na 11 języków... i obsługiwane przez IE9.
W 2018 roku system Windows 7 i domyślna przeglądarka IE9 nadal były bardzo popularne. Systemy Windows 10 i IE11 osiągnęły masę krytyczną dopiero na początku 2020 roku (według licznika statystyk). Z naszych danych wynika, że duża część transakcji pochodzi od klientów korzystających z IE9 lub, co gorsza, IE11 w trybie zgodności. Ruch ten był znacznie nachylony w kierunku rynków wschodzących i w obszarach, gdzie baza klientów Maersk gwałtownie rośnie.
Jeśli menu nawigacyjne nie działa, trudno znaleźć przycisk logowania. Jeśli logowanie nie zadziała, nie będzie można zarezerwować kontenerów i nagle pojawi się poważny problem spowodowany przez starsze przeglądarki.
Aby rozwiązać ten problem, przyjęliśmy progresywne ulepszenia w zakresie nawigacji oraz wszystkich przyszłych aplikacji internetowych. Zrobilibyśmy to, ale mogą być w tym celu znaczną liczbę elementów polyfill i ograniczeń (np. IE nie obsługuje interfejsu API Fetch), ale dla takich przeglądarek dostępne są elementy polyfill odwołujące się do IE10. W przypadku IE9 zakodowaliśmy wywołania XMLHttpRequest w osobnym pliku, by wczytywać się tylko w przypadkach, gdy fetch nie można wypełnić przy użyciu kodu poly.
Gdy nadeszła pora na rezygnację z obsługi IE9, gdy pozostała niewielu klientów, mogliśmy po prostu usunąć ten kod z naszych aplikacji przy minimalnym nakładzie pracy i maksymalnym korzyścią dla użytkowników nowoczesnych przeglądarek.
W miarę postępów transformacji cyfrowej Maersk przebudowaliśmy wiele części witryny w obsługiwanych przez VueJS mikrofrontendach. Vue ma wiele funkcji, które sprawiły, że jest ono przyjazne w przyszłości, a także świetną gotową konfigurację do zaawansowanego potrząsania drzew i optymalizacji pakietów oraz tryb nowoczesny, w którym opracowano 2 wersje aplikacji – jedną korzystającą z najnowszej składni modułu ES dla zawsze aktualnych przeglądarek, a drugą dla starszych aplikacji, które nie obsługują modułów ES6. Ta starsza wersja jest obsługiwana w przeglądarkach takich jak IE i często jest większa o 100 KB w pakiecie polyfill skompresowanym gzip ze względu na brak funkcji w przeglądarce.
Okazało się, że możemy też korzystać z większości nowoczesnych technik tworzenia układu CSS, takich jak siatka CSS, dzięki czemu firma Microsoft rozpoczęła specyfikację już w IE10. Korzystając z autoprefiksu i tego artykułu CSS Tricks, które pomagają nam bardzo dobrze nadawać nazwy różnym obszarom strony, stworzyliśmy lekki system układów, który jest odpowiedni do każdego projektu i bardzo elastyczny. Jednak nadal występowały problemy ze zgodnością, których rozwiązanie wymagało sporo czasu.
Nagle jesteśmy ponownie na etapie analizy korzyści kosztów, ale obecnie w dowolnej wersji IE, tak jak w przypadku IE9, jest to kompromis między zapewnianiem pomocy wszystkim użytkownikom i tygodniom pracochłonnego czasu programowania nad każdym projektem. Jesteśmy przekonani, że nowoczesna przeglądarka będzie dla naszych klientów wygodniejsza. Dlatego zachęciliśmy ich, by odeszli z IE, kiedy odwiedzili naszą witrynę. Okazało się, że pomagało to w niewielkim stopniu w przypadku aktywnych klientów, którzy przyzwyczaili się do otwierania IE, aby nawiązać z nami kontakt. To był dobry przekaz, ale nie na tyle, by liczyć na coś z matematyki.
Gdy liczba wizyt z IE zaprzestała, Maersk zdecydował się pójść za ciosem poprzedników i zakończyć oficjalną obsługę IE. Liczby nadal wskazują, że powinniśmy ją wspierać. Dlaczego teraz?
Mówiąc najprościej, platforma internetowa ruszyła naprzód i IE11 nie jest w stanie robić tego, do czego jest nam potrzebny, nawet w przypadku niewielkiej armii polyfill. Weźmy pod uwagę komponent nawigacji – we współczesnych platformach internetowych jest to element niestandardowy o własnych, zakrytych stylach. Jego działanie opiera się na zmiennych CSS i zapytaniach kontenera, co pozwala kontrolować wszystko w ramach jednego komponentu. Bez tych elementów platformy można całkowicie zmienić styl tych komponentów z poziomu aplikacji, co może spowodować wyciek do innych komponentów lub z powrotem do aplikacji. Istnieją elementy polyfill, które pozwalają emulować większość tych funkcji, w tym elementy niestandardowe, ShadyCSS, ShadyDOM i element template.
W praktyce te polyfill doskonale się sprawdzają w przypadku izolowanych komponentów – ale gdy łączysz wiele komponentów w złożonej aplikacji, IE zatrzymuje się po dziesiątkach sekund białego ekranu, a środowisko wykonawcze JavaScript próbuje obliczyć drzewo stylu dla czterdziestu sekund. Krótko mówiąc, obsługa przeglądarki została poważnie osłabiona.
W przeszłości mieliśmy niewielkie przerwy w działaniu, takie jak wypełnienie polyfill, który wydłużał czas pierwszego wyrenderowania o pół sekundy, ale niewiele więcej. To było coś zupełnie innego i te aplikacje stały się bezużyteczne. Polyfills daje takie możliwości tylko w obliczu złożoności nowoczesnej platformy internetowej.
Wiesz, co się stało od czasu wycofania obsługi IE? Bardzo, bardzo mało. Do tej pory nie odnotowano lawiny zgłoszeń do zespołu obsługi klienta ani negatywnych opinii na jego temat. Nasi inżynierowie są bardziej zadowoleni, a nasze aplikacje mają ścieżkę uaktualniania do wersji Vue 3 (która nie obsługuje IE11, ponieważ obiektu serwera proxy nie można wypełnić wielokropkiem) oraz mniejsze pakiety. Pełna obsługa zmiennych CSS i zmiennych czcionek umożliwia prostsze tworzenie motywów między markami, a możliwość używania tokenów w jednym pliku w Vue zmniejsza też złożoność poznawczej, co zwiększa wygodę programistów.
Z punktu widzenia klientów korzystanie z IE stale spada. IE nie zostało wyłączone z witryny, ale w miarę postępów w coraz gorszej degradacji funkcje i aplikacje przestaną działać. Klienci będą czerpać korzyści z postępów w naszej technologii – uzyskania spójniejszego sposobu korzystania z witryny, ponieważ sprawdzone metody, ułatwienia dostępu i projektowanie są wbudowane w ewoluujący system projektowania oparty na Lit, który z pełną interoperacyjnością z każdą architekturą istniejącą obecnie i w przyszłości.
Z radością zobaczę, jak nowe funkcje platformy internetowej mogą być wykorzystywane w firmie – od zastosowania trybu ciemnego, aby ułatwić korzystanie z systemów statków w nocy, po Web Bluetooth, WebXR i PWA, które zapewniają naszym aplikacjom internetowym interakcję z otaczającym nas światem fizycznym w dowolnych warunkach. Dziękujemy za wiele rzeczy związanych z Internet Explorerem. Teraz możesz swobodnie korzystać z platformy internetowej.
Baner powitalny: Matt Botsford.