Новый ВТБ Онлайн

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

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

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

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

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

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

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

Все эти решения позволяют нам ускорить приложение, обеспечить единство стиля и подхода к проектированию. При этом пользователи ВТБ Онлайн получают доступ к новым сервисам быстрее и с меньшей задержкой, что улучшает пользовательский опыт и повышает удовлетворенность клиентов.

Система микрофронтов позволяет:

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

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

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

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

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

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

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

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

Наша дизайн-система — одна из лучших на рынке и задает тренды. Сейчас единицы подобных продуктов в мире обладают полной динамичностью и изменяемостью, сохраняя при этом простоту использования для обычных пользователей. 

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

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

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

В цифрах:

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

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

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

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

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