Соцсеть перевела основные разделы vk.com на архитектуру SPA. Это позволило ускорить загрузку интерфейса на 25% и упростило выпуск обновлений.
Переход на SPA стал частью большой технологической трансформации ВКонтакте. Команда обновила фронтенд-архитектуру веб-версии сервиса и перевела на новую технологическую основу ключевые пользовательские сценарии: ленту, профили, сообщества, мессенджер, друзей, клипы, фотографии, маркет. После перехода показатели производительности улучшились: первая отрисовка страницы ускорилась на 25%, а среднее время перехода между разделами уменьшилось в 3,5 раза.
До перехода на новую архитектуру многие сценарии в веб-версии работали по классической модели: при открытии раздела страница ожидала серверный ответ и только после этого полностью отрисовывалась на экране. Теперь ВКонтакте быстрее показывает пользователю структуру страницы — например, шапку, навигацию и каркас раздела, — а затем наполняет её контентом. Благодаря этому пользователи раньше начинают взаимодействовать с сервисом и не сталкиваются с пустым экраном при переходах.
Обновление затронуло не только пользовательский интерфейс, но и внутренние процессы разработки. В рамках перехода на SPA команда интегрировала в веб-версию компонентный подход, связанный с дизайн-системой ВКонтакте. Теперь новые интерфейсы можно собирать из готовых компонентов: кнопок, модальных окон, навигационных элементов и других блоков. Это снижает объём ручной вёрстки, помогает поддерживать единый визуальный стиль и ускоряет разработку новых функций.
Новая архитектура позволила командам выпускать веб-обновления быстрее: время деплоя фронтенда сократилось до 20 секунд. Релизы происходят в среднем 6–8 раз в сутки; в продакшене ежедневно появляется более 100 мерж‑реквестов.
«Переход на SPA — это не просто изменение архитектуры, а большая и сложная инженерная работа, которую мы выполнили в короткие сроки. Веб‑версия стала заметно отзывчивее, а платформа — гибче для дальнейшего роста. Новый компонентный подход и независимый деплой фронтенда дают нам возможность быстрее выпускать фичи, безопасно экспериментировать и масштабировать продуктовые сценарии», — прокомментировал Юрий Кочарян, технический директор ВКонтакте.
Переход реализовывался поэтапно и незаметно для пользователей: интерфейс сохранил привычный вид, в то время как команды последовательно модернизировали внутреннюю технологическую платформу. Это дало возможность параллельно продолжать запуск новых продуктовых фич и переводить разделы веб‑версии на современную архитектуру.
ссылка на оригинал статьи https://habr.com/ru/articles/1043220/