Что означало прекращение поддержки Internet Explorer для клиентов и разработчиков Maersk.com.
Меня зовут Стив Воркман, и я ведущий инженер Maersk.com . Maersk — мировой лидер в области интегрированной логистики цепочек поставок, помогающий клиентам перевозить товары по всему миру на протяжении 118 лет, с онлайн-бронированием на протяжении более двадцати лет. В начале мая 2022 года @Maersk официально прекратила поддержку Internet Explorer (IE) в своих клиентских системах, вслед за тем, как Microsoft официально прекратила поддержку IE в июне 2022 года. Это конец важной эпохи Интернета и начало новой.
Я присоединился к Maersk в 2018 году, и моим первым проектом было создание новой глобальной навигационной панели. Она должна была быть полностью тестируемой, простой в развертывании и глобальном обновлении без простоев, быть ориентированной на мобильные устройства, отзывчивой, поддерживать несколько брендов, быть настраиваемой, локализованной на 11 языков… и поддерживать IE9.
В 2018 году Windows 7 и ее браузер по умолчанию IE9 все еще были очень популярны, а Windows 10 и IE11 достигли критической массы только в начале 2020 года (согласно счетчику статистики). Рассматривая наши данные, мы обнаружили, что значительный объем торговли исходит от клиентов, использующих IE9 или, что еще хуже, IE11 в режиме совместимости. Этот трафик был значительно переориентирован на развивающиеся рынки и в области, где клиентская база Maersk быстро росла.
Если навигационное меню не работает, сложно найти кнопку входа. Если вход не работает, они не могут бронировать контейнеры, и внезапно у вас возникает большая проблема, вызванная устаревшими браузерами.
Чтобы решить эту проблему, мы заняли позицию прогрессивного улучшения с компонентом навигации и всеми будущими веб-приложениями. Мы бы заставили его «работать», но для этого могут быть значительные полифиллы и ограничения — например, IE не поддерживает Fetch API, но есть полифиллы, которые восходят к IE10, которые мы включаем для этих браузеров. Для IE9 мы закодировали вызовы XMLHttpRequest в отдельном файле, который загружается только в тех случаях, когда fetch не может быть полифиллом.
Когда пришло время прекратить поддержку IE9, когда осталось лишь несколько клиентов, мы смогли просто удалить этот код из наших приложений, приложив минимальные усилия и получив максимальную выгоду для наших пользователей современных браузеров.
По мере продолжения цифровой трансформации Maersk мы перестроили многие части сайта в микро-фронтендах на базе VueJS. Vue имел множество функций, которые делали его дружественным будущему, с отличной предустановленной конфигурацией для расширенного tree-shaking и оптимизации пакетов, в современном режиме , где создаются две версии приложения — одна, использующая новейший синтаксис ES Module для вечнозеленых браузеров, и одна для устаревших приложений, которые не понимают модули ES6. Эта устаревшая версия предоставляется браузерам, таким как IE, и часто на 100 КБ больше в своем сжатом gzip-пакете polyfill просто из-за количества функций, которых не хватает в браузере.
Мы обнаружили, что можем использовать большинство современных методов макетирования CSS, таких как CSS-сетка, благодаря тому, что Microsoft начала спецификацию еще в IE10. С помощью autoprefixer и этой статьи CSS Tricks , которая помогла нам действительно хорошо называть различные области страницы, у нас была система макетирования, которая была легкой, подходящей для любого проекта и чрезвычайно гибкой. Тем не менее, были проблемы с совместимостью, на устранение которых ушло много времени.
Внезапно мы вернулись на стадию анализа затрат и выгод, но для любой версии IE на этот раз, и как и в случае с IE9, это компромисс между поддержкой всех и неделями мучительного времени разработки для каждого проекта. Уверенные в том, что использование современного браузера — лучший опыт для наших клиентов, мы отталкивали наших пользователей от IE, когда они посещали веб-сайт. Мы обнаружили, что это было успешным в небольших количествах для активных клиентов, которые привыкли открывать IE для взаимодействия с нами. Это сообщение было хорошим, но не совсем достаточным, чтобы заставить математику работать.
Поскольку визиты IE сошли на нет, Maersk решила последовать примеру многих других до них и прекратить официальную поддержку IE, хотя цифры по-прежнему говорят о том, что мы должны ее поддерживать. Так почему же сейчас?
Проще говоря, веб-платформа продвинулась, и IE11 не может делать то, что нам нужно, даже с небольшой армией полифиллов. Возьмите компонент навигации — в современном мире веб-платформ это настраиваемый элемент со своими собственными инкапсулированными стилями, управляемый переменными CSS и запросами контейнера, поэтому он контролирует все в одном компоненте. Без этих частей платформы стиль этих компонентов может быть полностью изменен из приложения, и стили могут просочиться в другие компоненты или обратно в приложение. Существуют полифиллы, которые позволят вам эмулировать большинство функций здесь, включая настраиваемые элементы , ShadyCSS , ShadyDOM и элемент шаблона .
На практике эти полифиллы отлично работают для изолированных компонентов, но при объединении нескольких компонентов в сложном приложении IE зависает на десятки секунд с белым экраном, пока среда выполнения JavaScript пытается вычислить дерево стилей сорок второй раз. Короче говоря, пользовательский опыт был серьезно скомпрометирован для поддержки браузера.
Раньше у нас были небольшие перерывы — полифиллы, которые могли добавить полсекунды к первой отрисовке, но не более. Это было по-другому, и эти приложения стали непригодными для использования. Полифиллы могут сделать только то, что нужно, когда они сталкиваются со сложностью современной веб-платформы.
И знаете, что произошло с тех пор, как мы прекратили поддержку IE? Очень, очень мало. Не было лавины тикетов поддержки клиентов или отрицательных отзывов. Наши инженеры стали счастливее, а наши приложения получили возможность обновления до Vue 3 (который не поддерживает IE11, поскольку объект Proxy не может быть полифиллен) и меньшие размеры пакетов. Полная поддержка переменных CSS и переменных шрифтов позволяет упростить тематизацию между брендами, а возможность использовать токены в компонентах Vue с одним файлом также снижает когнитивную сложность, улучшая опыт разработчика.
С точки зрения клиентов использование IE продолжает медленно снижаться. IE не был отключен от сайта, но по мере того, как прогрессивное улучшение превращается в постепенное ухудшение, функции и приложения перестанут работать. Клиенты выиграют от достижений нашей технологии — получая более последовательный опыт работы с сайтом, поскольку лучшие практики, доступность и дизайн заложены в развивающуюся систему дизайна на основе Lit с полной совместимостью с любым фреймворком, который есть сейчас или будет в будущем.
Я с нетерпением жду, как новые функции веб-платформы могут быть использованы в компании — от использования темного режима, чтобы системы судна было легче использовать ночью, до Web Bluetooth , WebXR и PWA , чтобы наши веб-приложения могли взаимодействовать с физическим миром вокруг нас в любых условиях. Спасибо, Internet Explorer, за многое; теперь мы можем свободно догонять веб-платформу.