ВТБ Онлайн еще быстрее

1. Реализовать технологию микрофронтов (Микрофронт — это отделяемый кусок интерфейса).

2. Реализовать технологию CDN (CDN — это географически распределенная сеть серверов, на которых хранятся копии нужного контента).

3. Повысить скорость разработки с помощью дизайн-системы, конструкторов и единых подходов к проектированию интерфейсов. 

4. Повысить скорость загрузки ВТБ Онлайн в регионах.

5. Повысить скорость разработки и доставки обновлений до пользователей ВТБ Онлайн.

Внедрение микрофронтенд-архитектуры, собственной дизайн-системы и CDN позволили ускорить разработку и раскатку обновлений как на тестовые контуры, так и на прод, сократить объем тестирования, скорость сборки интерфейсов и срок доставки обновлений до пользователя ВТБ Онлайн.

В цифрах: 

1. Тираж обновлений сократился с 18 дней до 3-8, в зависимости от сложности доработки. 

2. Скорость загрузки главной страницы ВТБ Онлайн увеличилась на 35% за счет перехода на микрофронт и проведения рефакторинга кода.

3. Скорость загрузки ВТБ Онлайн в регионах увеличилась до 22%.

4. Дизайн-система является собственной разработкой — с ней можно взаимодействовать с помощью любых инструментов Figma/Pixso/аналоги.

5. С помощью архитектуры дизайн-системы сократили разработку макетов в 4 раза, при этом макеты можно масштабировать на любые платформы, не затрачивая дополнительного ресурса.

Технологический стек: ТypeScript, Webpack, Module Federation, Babel, Swc, React, Redux, React Query, открытый стандарт API-браузера, Node.js, Astra Linux, дизайн-система от ВТБ Omega

Перед ВТБ стояли следующие вызовы:

1. Разработкой ВТБ Онлайн занимается 200+ продуктовых команд.

2. Аудитория ВТБ Онлайн составляет 22 000 000+ клиентов и требует высокого качества клиентского опыта.

3. Необходимость обеспечения бесперебойного высокого качества сервисов 24/7.

4. Необходимость учитывать особенности разных платформ и девайсов, под которые нужна адаптация.

5. Потребовалась трансформация процесса разработки и релизного процесса ВТБ Онлайн: каждая команда ведет разработку в собственном репозитории и выводит обновления на прод (сервер) в рамках собственного релизного процесса.

6. Потребовалось провести рефакторинг кода приложения и разработать новый подход к код-ревью: каждая команда несет ответственность за качество разрабатываемого кода.

Веб-версией и приложением ВТБ Онлайн пользуются более 22 млн клиентов. Каждый день количество пользователей, новых сервисов и функций только растет, в связи с чем стала снижаться производительность и уровень контроля качества кода. При этом релизы выходили медленно — от реализации доработки до ее выхода на всех клиентов могло проходить 2-3 недели. 

Перед нами встала задача найти такое решение, чтобы в короткие сроки наладить процесс выпуска новых функций, улучшить скорость разработки и загрузки ВТБ Онлайн. Этим решением стал переход на CDN, микрофронтенд-архитектуру и собственную дизайн-систему банка. 

Что нам предстояло сделать?

1. Реализовать технологию микрофронтов, которая позволит:

• Уйти от одного приложения, в котором все команды делают свои доработки. Теперь наше приложение — это набор маленьких блоков, каждым из которых владеет отдельная команда.

• Работать над различными частями приложения независимо друг от друга, что позволяет использовать различные технологии и фреймворки.

• Масштабироваться независимо друг от друга, а также легко удалять и добавлять микрофронтенды в зависимости от потребностей приложения.

• Повысить отказоустойчивость и надежность приложения за счет отсутствия влияния отказа одной части на работу других частей. 

1. Реализовать технологию CDN, которая позволит:

• Уменьшить задержки: пользователи получают доступ к новым функциям быстрее, т.к. он доставляется с ближайшего сервера.

• Повысить производительность: распределение нагрузки между несколькими серверами помогает избежать перегрузки и обеспечивает стабильную работу.

• Увеличить доступность: CDN обеспечивает высокую доступность контента, даже если один из серверов выходит из строя.

1. Разработать собственную дизайн-систему, которая позволить в короткие сроки собирать интерфейсы разной сложности с адаптацией под любое устройство.

Благодаря новому подходу к разработке архитектуры динамических дизайн-систем, удалось сделать решение, позволяющее быстро адаптироваться для вывода интерфейса на любой поверхности, будь то пользовательское приложение, внутренняя ARM-система или банкоматы, используя богатые возможности темизации любого элемента и параметра буквально в несколько кликов. 

Помимо архитектуры внедрили новые инструменты сборки интерфейсов, которые позволяют сократить время проектирования до 4 раз, сохраняя при этом высокий уровень консистентности вне зависимости от уровня дизайнера, будь то начинающий специалист (junior) или профессионал высокого уровня (senior).

Теперь нет единого приложения, где все части взаимосвязаны и могут влиять друг на друга. Вместо него есть набор небольших независящих друг от друга частей, встроенных в хост (каркас для встройки всех микрофронтов). При этом изолированный код не влияет на другие части приложения, за счет чего повышается качество и надежность приложения в целом.

ВТБ Онлайн доступен клиентам по всей России и за пределами страны. На ноябрь 2024 охват аудитории проекта составляет более 22 млн пользователей.