Frontend в Sportmaster Lab
Всем привет! Меня зовут Сергей, я руководитель направления фронтенд-разработки. Во времена, когда профильные офлайн конференции были чем-то обыденным, у нас были бейджики: название компании — «Спортмастер», — имя и фамилия. Если к нам подходили коллеги из других компаний, то при взгляде на эти бейджики они удивлялись: ведь «Спортмастер» — это магазины, продающий спортивный инвентарь, причем тут IT?
Немногие знают, что «Спортмастер» объединяет целую группу компаний, в которую входят Ostin, FunDay и другие. За поддержание работы всей этой машины отвечает подразделение SMLab, где трудится почти полторы тысячи человек. Из них где-то 400 это разработчики и 25–30 фронтендеры. Все остальные занимаются ИТ-поддержкой производства, логистики, финансов, и сюда же входят департаменты веб-разработки, обеспечения качества и многие другие.
Все наши разработчики занимаются примерно тем же самым, чем и коллеги в других больших компаниях: разработкой новых и поддержкой старых систем. У нас очень большой стек технологий, а также большой скоуп приложений, которые мы поддерживаем и разрабатываем. На наших плечах лежит разработка и поддержка таких сайтов: Спортмастер, Ostin, FunDay, Columbia, Fila, Demix, UrbanVibes. Ко всему этому у нас большой плацдарм внутренней автоматизации. В общем, для разработчиков есть где развернутся, на прокачке своих навыков.
Внутренняя кухня
Как я уже говорил разработчиков в нашем подразделении около 400 человек, чтобы эффективно управлять таким большим подразделением, два года назад в компании запустили процесс трансформации. Сейчас мы работаем по Agile, в настоящее время у нас около 30 продуктовых команд, а ожидается до 100, которые разрабатывают и сопровождают свои проекты. В каждой команде представлены разнообразные компетенции: бизнес, аналитики, разработчики, тестировщики, автоматизаторы, методологи. Мы создали специальный портал, на котором отслеживаем метрики команд, а методологи, в свою очередь, помогают командам настраивать потоки. Как только команда становится достаточно самостоятельной, то методологи переключаются на помощь другим командам.
Frontend в хорошем его понимании зародился в SMLab года два-три назад. До этого был зоопарк фреймворков, большое количество разнообразных библиотек таких как knockout, jquery. Все это накладывало много ограничений на разработку, поиск новых сотрудников и ротацию между проектами.
Первое, что мы сделали, разобрали все ПО компании, из чего они состоят и на чем написаны, и сделали технологический радар, благодаря которому в настоящее время мы контролируем список доступных технологий в компании. У нас существуют четкие правила заведения новой технологии в список доступных. Если нужно завести новую технологию в радар, формируется RND, набирается команда специалистов, которая будет проводит данное исследование. По результатам команда создает презентацию технологии и формирует документацию по RND и далее защищает ее на техническом комитете. Если комитет решает, что технология важна для дальнейшего развития то она расширяет скоуп доступных технологий по компании.
Также мы провели большое исследование по выбору фреймворка для всей компании, в результате которого был выбран Vue. Теперь новое ПО пишется на нем, а все старое постепенно переписывается.
Для всего «Спортмастера» в целом мы используем более 200 систем, которые автоматизируют всю внутреннюю деятельность компании. Например, мы автоматизировали весь бизнес-процесс мерчендайзинга: процесс выкладки товаров в магазине, проверку и прочее. Сейчас работаем над автоматизацией фотостудий и колл-центра, в этой сфере задействовано очень много людей.
Весь e-commerce в «Спортмастере» делится на две большие группы:
Первая группа — это сайты-гиганты: такие как Спортмастер и Остин, а вторая это группа не менее важных сайтов, но с гораздо меньшими нагрузками такие как FunDay и группа сайтов монобрендов.
Ostin стал самым первым гигантом, который был полностью написан на новых технологиях NodeJS, Vue, SSR, Kotlin и т.д. и вышел в продакшн. Текущая версия сайта «Спортмастер» была написана приблизительно 4 года назад. Сейчас идет разработка новой версии 3.0 на новых технологиях с новым дизайном, и скоро она заменить старый. Аналогичная ситуация и с сайтом Funday из второй группы, в настоящее время идет активная разработка сайта используя новый стек, вскоре увидим новый сайт.
Группа сайтов монобрендов стала второй итерацией разработки сайтов на новом стеке. Я был временно внедрен в команду на стадии ее формирования и занимал позицию тимлида, в настоящее время я вышел из команды и продолжаю работать с командой с позиции куратора.
Сайты монобрендов
Небольшая предыстория. До перехода в ИТ я работал в бизнесе около 5 лет. Я не раз сталкивался с только что созданным программным обеспечением, от которого было ощущение, что программисты пишут его исключительно для себя. И тогда пришел к выводу, что продукт должен быть удобным для всех: и для пользователей снаружи, и для всех участников процесса разработки изнутри.
Когда настал черед сайтов монобрендов. За месяц до, собственно, начала разработки мы с командой отправились изучать сайты, которые уже были созданы другими компаниями, и вывели две основные проблемы.
Во-первых, компании пренебрегают метриками пользователя: мы замечали, что, например, карточка товара открывается 20 секунд, любой фильтр применяется 10–15 секунд. То есть получается не покупка, а борьба с сайтом какая-то.
Во-вторых, это проблемы с отображением сайта на мобильных устройствах. Они все кривые.
Поэтому, когда пришел наш черед, первым делом мы занялись созданием компонентной схемы, нарисовали все блоки и связи, которые должны были быть, и дальше начали работать над оптимизацией каждого блока в отдельности и его связей с другими блоками. С бэкендом мы договорились, что вся логика, работа с микросервисами, вычисления, необходимые агрегации и прочее ложится на их плечи, а фронт занимаемся отображением и логикой взаимодействия с пользователями.
Благодаря этому мы минимизировали размер ответа и существенно стандартизировали API, что позволяет команде легче ориентироваться в процессе и в хорде работами над новым функционалом мы очень быстро договариваемся о контракте.
Вторым глобальным делом мы обсудили и договорились в команде как мы работаем со статикой приложения. Статика не раз доставляла нам проблемы на других проектах, когда внезапно становилась не управляема и ее размер исчислялся в гигабайтах. В общем, договорились отказаться от этой папки: ее будет автоматически генерировать и собирать наше приложение. Проекту уже около года, и вся статика весит не больше 30 Мб.
Когда мы дошли до верстки, мы решили вести разработку так, чтобы не было дублирования кода — верстали, чтобы можно было адаптировать под разные устройства. Seo-специалисты проделали большую работу по этому вопросу, рассказали, какие блоки seo-зависимые, а какие нет. Мы выделили критический CSS. Все эти минимальные действия привели к тому, что страничка на сайте монобренда весит в среднем не больше 20Кб и открывается практически мгновенно.
Были и неожиданные результаты. На старте проекта мы начали составлять документацию не в том виде, как все ее обычно пишут, со списком компонентов и перечислением их функций. Мы документировали вообще все: команды запуска, зависимости, окружения, код-стайлы и т.п. И делали все это, по большому счету, только для себя. Но когда все только начиналось, в проекте было пять человек, а сейчас их 20.
И теперь нам гораздо проще вводить новых сотрудников в курс дела — просто даём им на пару дней изучить документацию, после чего они вполне готовы самостоятельно идти и заниматься боевыми задачами.
