Добрый день, на связи Дмитрий Захаров, фронтенд-разработчик Росбанка. В этом посте я поделюсь тем, как мы отказались от поддержки Internet Explorer в интернет-клиент-банке для крупного бизнеса. Расскажу, как мы к этому пришли, как организовали процесс и что получилось в результате.
Не секрет, что большинство библиотек (например, Tailwind CSS, который используем мы) и фреймворков последних версий не поддерживают IE вообще. Кто они, как не герои, двигающие прогресс вперед? Но это создает и трудности. В какой-то момент нам пришлось застрять на 11-м Angular, потому что были проблемы с перформансом при обновлении на 12-й, а в 13-м поддержку IE уже убрали. Также во многих библиотеках с поддержкой IE содержались уязвимости. Нужно было что-то с этим делать.
Согласно аналитике, пользователи IE в январе 2022 года составляла 23% от всей аудитории интернет-клиент-банка:
Начинаем есть слона по частям. Для начала мы стали уведомлять пользователей о том, что IE — это, грубо говоря, зло и стоит переходить на более популярные браузеры. После анонса Microsoft о скором прекращении поддержки IE мы усилили давление на пользователей и подготовили инструкции, как менее болезненно сменить браузер. Повесили баннер на логин пользователя. Клиентским менеджерам подготовили скрипт с инструкциями.
Стоит отметить, что сама Microsoft оказала нам существенную поддержку и подготовила «удаление» IE из некоторых своих операционных систем через патч 15 июня 2022. В действительности сначала удаление не происходило, а срабатывал редирект запуска на Edge. Он обеспечивает некоторую совместимость, подобие эмуляции IE, что позволяет в некотором роде заблокировать сам IE.
Примерно к дате патча количество клиентов в IE уменьшилось до 2,2-3% ежедневных пользователей, что, конечно, не могло не радовать. Чтобы переход был максимально мягким и люди не впадали в ступор при виде белого экрана в IE, мы сделали заглушку, которая предлагала возможность скачать новый браузер и предоставляла инструкции по переносу данных.
Но если Microsoft сам блокирует и удаляет IE, зачем нам вообще думать об этом? Дело в том, что не у всех клиентов могут обновляться системы; поэтому они этот патч не получат и могут продолжить пользоваться IE.
Использование Tailwind CSS версии 1.9.x накладывало дополнительные расходы. Библиотека генерировала 12 МБ классов стилей и «вытряхивала» лишние только на этапе сборки. 12 МБ классов в рантайме браузера — достаточно громоздко. Из-за этого растягивалась разработка и сборка: холодный старт приложения, hot reloading и сама сборка занимали существенно больше времени, чем мы могли позволить.
Что нам мешало? Со второй версии в Tailwind CSS полностью отказались от поддержки IE, и поэтому, не убрав поддержку IE в приложении, мы не смогли бы обновиться. Так что после очередного релиза, которые происходят у нас раз в месяц, мы приняли решение.
Сначала мы обновились до Angular 12 и устранили все возникшие проблемы. Затем исправили всё в соответствии с breaking changes библиотек и успешно обновились до версии 13. Далее месяц шла разработка и обкатка, чтобы все команды успели выявить потенциальные проблемы, и затем в начале августа мы вышли в продакшен.
Tailwind CSS тоже был успешно обновлен сразу на третью (последнюю) версию. Со второй версии там существенно переработали процесс: теперь не генерится 12 МБ CSS-кода, а он добавляется on-demand. Как только вы добавили класс CSS из Tailwind CSS, он включается в сборку. То есть к процессу подошли с противоположной стороны: «вытряхивать» неиспользуемые классы больше не надо, поскольку добавляются только те, что используются. Одно маленькое обновление ускорило нашу сборку в 5 раз, а работу всего пайплайна — в 6 раз. Холодная сборка вместо почти двух минут занимает теперь 40–50 секунд. Обычная сборка с 10–15 минут (в зависимости от машины, на которой собирается) ускорилась до 1–2 минут.
По итогам обновления и отказа от поддержки Internet Explorer бандл после gzip-сжатия уменьшился примерно на 700–1000 КБ. На момент выкатки с Angular 13 код уже отдавался в ES2015, что помогало экономить на размере. Было выпилено большое количество полифилов, да и сам Angular тоже не стоит на месте и все лучше справляется с tree-shaking.
Размер бандла до обновления:
Размер бандла после обновления:
Ладно, а результат?
Ни один клиент из-за IE не отвалился. Возможно, кто-нибудь и был недоволен, но до разработки гнев не дошел. Эта история еще раз доказала, как важно работать с клиентами и общаться со стейкхолдерами, чтобы пропушить нужные изменения. Никто не пострадает оттого, что будет нажимать другую иконку браузера на своем рабочем столе. Часто люди просто привыкают к чему-то и потом с трудом принимают необходимость изменений. Но если принимают, то получают evergreen-браузер, который обновляется сам. Для конечного пользователя это гораздо безопасней, чем сидеть в IE, который не обновлялся уже много лет. Это хорошо и для нас как банка, потому что снижает риски от всякого рода зловредного ПО, что может находиться на компьютере.
Конечно, нам еще есть над чем работать — например, улучшать метрики Lighthouse. Но уже от одного отказа от IE выиграли все. Разработчикам больше не надо костылять баги IE, тестировщикам больше не надо тестировать на IE. Да и скорость работы за счет сборки и других факторов увеличилась. Бандл уменьшился, что улучшило работу нашего приложения для конечных пользователей.
Скорость загрузки хоть не напрямую, но прибавила несколько баллов банк-клиенту в рейтинге SUS (System Usability Scale). Все мы помним исследования Google и Amazon о том, что даже сотня миллисекунд влияет на принятие решения о покупке и пользователи охотнее прибегают к сервисам, которые быстро работают. Очки Performance до обновления:
Очки Performance после обновления:
IE также не позволял нам внедрить brotli-сжатие, которое эффективнее gzip работает с текстом и, что важно, быстрее распаковывает его в браузере. Теперь у нас развязаны руки, и внедрение дополнительно ускорит загрузку нашего интернет-клиент-банка. Также мы посматриваем на avif-изображения — как раз недавно в последний Safari TP завезли их нормальную поддержку. Правда, полное отсутствие ее в Edge пока пугает. Возможно, мы придумаем что-нибудь с фолбэком к jpeg для таких случаев, либо просто подождем еще :)
К чему в итоге пришли сегодня? Мы, наверно, единственный крупный банк в России, чей интернет-клиент-банк для крупного бизнеса находится в продакшене на последнем, 15-м Angular (и мы уже готовы к 16-му). Мы отдаем код в ES2022 и используем практически все библиотеки в последних версиях, а также свежайшие LTS-образы nginx и nodejs в сборочном процессе (спасибо нашим девопс-инженерам за помощь в подготовке образов!). Все это не может не радовать наших безопасников и нас самих; поддержка стала проще, а обновления — легче.
Я подробно перечислил всё, что нам дал отказ от IE, чтобы вдохновить тех, кто на это еще не решился. Если вы всё еще поддерживаете Internet Explorer, я желаю вам наладить общение со стейкхолдерами и решиться на отказ от поддержки.
Напоследок — несколько ссылок на другие посты в нашем блоге с историями масштабных изменений: