История одного рефакторинга, или как до vk.com добрались фронтенд-разработчики

31 января 2019 в Новосибирске прошёл второй митап из серии VK Tech Talks, на котором Илья Таратухин выступил со своим докладом на тему рефакторинга.

Для начала немного терминологии, которая будет использована в статье:

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

Fullstack-разработчик — это специалист, который в одиночку способен создать с нуля веб-приложение, одинаково хорошо справляется и с клиентской (frontend), и серверной (backend) частями.

Javascript (JS) — язык программирования общего назначения, с помощью которого страницы сайтов становятся интерактивными, и как правило, выполняется на стороне клиента.

В начале своего доклада Илья кратко рассказал историю развития vk.com как коммерческого продукта с точки зрения frontend-разработчика. В то время на проекте работало меньше 10 человек.

Докладчик также затронул итоги развития проекта на 2008 год:

2010-2011 года — этап перевода VK на Single Page Application (SPA, суть которого в максимальном переносе функциональности на сторону клиента). С этого момента начинается время SPA. Тогда в компании над продуктом работало всего лишь 10-20 fullstack-разработчиков.

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

Примерно в это же время появляется Gulp. Gulp — это таск-менеджер для автоматического выполнения часто используемых задач, написанный на JavaScript.

Здесь стоит упомянуть про решение Ajax Layout. Что делает Ajax Layout? — Он позволяет при смене раздела не обновлять всю страницу целиком, а оставить интерфейс навигации в покое и заменить только контентную часть страницы. Также он скачивает содержимое основного блока и при переходе между страницами докачивает необходимые в данной ситуации скрипты, стили и переводы. Помимо этого, Ajax Layout сбрасывает различные локальные переменные, чтобы потерять контекст текущего раздела и перейти к разделу, на который пользователь совершил переход.

На этом этапе в дело вступает Static Manager, являющийся дополнением Ajax Layout и умеющий выгружать необходимые стили и скрипты для текущего раздела. Когда Static Manager понимает, что весь список статитки, которые его попросили загрузить, загружен, он передаёт AL сигнал о том, что пора переключать раздел.

Благодаря этим инструментам можно удобно пользоваться сложными js-компонентами.

Подведём итоги SPA:

Перейдём к современному приложению. В 2016 году появился курс на серьёзное углубление в работу frontend. С новой эпохой появились и новые технологии:

Сейчас во ВКонтакте порядка 20 frontend- и 60-100 fullstack-разработчиков.

Разберёмся подробнее в спецификации JavaScript — ES6:

Существует большое множество самых разных технологий. Как все внедрить в проект и не убить его?

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

Когда вы переходите на новые технологии, вам необходимо проследить, чтобы вы не писали «по-старому». Справиться с этим помогает Линтер:

При рефакторинге не стоит забывать про сборщика js-ошибок.

Как внедрять Webpack?

Разработчики смотрят на React как на view-библиотеку и используют его в местах, где нужен чисто клиентский рендер.

React используется активно в разделе сообщений, на нём частично написаны истории, также на нём активно пишет рекламная команда.

Как быть дальше? Как продолжать совершенствовать продукт?

Давайте ещё раз вспомним инструменты, которые нам пригодились:

Вот и всё!

Посмотреть полную версию доклада можно в трансляции мероприятия:

Автор: Сергей Котов
Корректор: Арсений Метелев