«ВКонтакте» провела одну из самых масштабных технических модернизаций своей веб-версии за последние годы. Соцсеть перевела основные разделы сайта на архитектуру SPA (Single Page Application), благодаря чему интерфейс стал заметно быстрее, а разработчики получили возможность выпускать обновления практически в режиме конвейера.
Под изменения попали самые популярные разделы: лента, профили пользователей, сообщества, мессенджер, друзья, клипы, фотографии и маркет.
Результат оказался вполне измеримым. По данным компании, первая отрисовка страницы ускорилась на 25%, а среднее время перехода между разделами сократилось сразу в 3,5 раза.
Если раньше при открытии нового раздела браузер фактически ждал ответа сервера и только потом показывал страницу целиком, то теперь пользователи сначала видят готовый каркас интерфейса — навигацию, меню и основные элементы, а контент подгружается уже после. Проще говоря, вместо пустого экрана появляется ощущение мгновенного отклика.
Впрочем, изменения коснулись не только пользователей. Вместе с переходом на SPA команда внедрила компонентный подход, связанный с дизайн-системой «ВКонтакте». Теперь новые интерфейсы собираются из готовых элементов — кнопок, окон, меню и других компонентов. Это упрощает разработку и помогает поддерживать единый внешний вид сервиса.
Серьёзно ускорился и процесс выпуска обновлений. Если раньше развёртывание фронтенда занимало больше времени, то теперь деплой выполняется примерно за 20 секунд. При этом веб-версия получает в среднем 6–8 релизов в сутки, а ежедневно в продакшен попадает более сотни мерж-реквестов.
По словам технического директора «ВКонтакте» Юрия Кочаряна, речь идёт не просто о смене архитектуры, а о глубокой перестройке всей веб-платформы.
Интересно, что большинство пользователей, вероятно, даже не заметили самого перехода. Миграция выполнялась постепенно и без радикальных изменений интерфейса. Пока аудитория листала ленту и переписывалась в мессенджере, разработчики фактически пересобрали значительную часть веб-версии соцсети под современный подход к разработке.
