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