Что означало прекращение поддержки 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 было множество функций, которые сделали его дружелюбным к будущему: от отличной предустановленной конфигурации для расширенного встряхивания деревьев и оптимизации пакетов до современного режима , в котором создаются две версии приложения, одна из которых использует новейший синтаксис модуля ES для вечнозеленых браузеров. и один для устаревших приложений, которые не понимают модули ES6. Эта устаревшая версия обслуживается такими браузерами, как IE, и в пакете полифилов, сжатом gzip, часто на 100 КБ больше просто из-за количества функций, которые отсутствуют в браузере.
Мы обнаружили, что можем также использовать большинство современных методов макетирования 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, за многое; теперь мы можем свободно догонять веб-платформу.
Изображение героя Мэтта Ботсфорда .