инструменты печати этикеток — Писал движок для нативной читалки книг — Работал над городским проектом с инфографикой — Пилил свой фреймворк в безреактовые времена — Перетаскивал серверный рендер с C# на Node.JS — Уговорил запилить фронтовую платформу в очень крупной компании и я руковожу фронтовой платформой в озоне Меня зовут Михаил Подгорный Оффлайн гости, вы здесь
граница разумного 5 минут Как мы внедряли стандарты и контролировали переход на них 6 минут Как устроена frontend платформа в нашей компании 8 минут Как мы распространяем обновления и как мы их будем распространять 4 минуты Инсайдерская информация о логотипы команды 1 минута
решился, но не знает как продать идею Тем, кто решился, продал идею, но пока не приступил Тем, кто решился, продал идею, приступил, но боится что-то упустить Тем, у кого уже есть платформа, но интересно что получилось у нас Тем, кто пользуется нашей платформой Тебе, кто любит красивые доклады
унификаций — больше размер команды платформы Число проектов Число унифицированных сущностей Продуктовая часть «захвачена» платформой Линия разделения ответственности В каком случае сработает?
унификаций — больше размер команды платформы Число проектов Число унифицированных сущностей Продуктовая часть ответственности Продуктовая часть кода Минимальные настройки Всё остальное
Клонирование людей Читаемость чужого кода Контроль над выпускаемым кодом Запуск релизных скриптов Переиспользование UI-компонентов Быстрый старт новых проектов Упрощение найма Возможность расширяться через систему плагинов Массовое обновление дизайна Конфиги Общая сборка для разных сред Единообразный продуктовый код А теперь повторим созданий решение много-много раз, напишем тесты, документацию, начнём регулярно заниматься обновлениями. Кажется можно сэкономить 💰 и ⏱ Образы раздачи статики
Распределять ответственность Контролировать процессы Уменьшаем риск Bus-фактора В найме это… Программа обучения Упрощение ротации Снижение порога найма Снижать изоляцию А для копании Экономия денег Снижение рисков Но есть один нюанс. Подробнее через 6 минут 😎 Короче зачем?
смежных команд, например для RE или Infra, является только одна команда — команда платформы 🚰 Некоторые вещи попросту не просто организовать Например Canary-деплои в NPM-пайплайне или работу с RealTime-конфигами 💅 Легче полировать на масштабе Чтобы сделать самый лучший UiKit, надо не просто сделать свой третий UiKit, надо получать постоянную обратную связь. Которая тем насыщеннее и разнообразние, чем больше твоим UiKit-ом пользуются
ерации я Единый пайплайн Введение запретов по конвенции Объединение всех частей, релиз Шаблон конечного проекта Контроль распространения Разделение приложения на пакеты Механизм обновления проектов Написание базовых библиотек Beta-версия UI-Kit-a Рабочее приложение UiKit Фреймворк Репозиторий Генератор Сканер Метрики
монорепозитория Публикация пакетов Настройка образов Настройка пайплайнов Линтеры и конфиги Генератор проектов Сканер репозиториев DX Примеры Тестирование результата генерации Базовые компоненты Конвенция Единый пайплайн Введение запретов по конвенции Объединение всех частей, релиз Шаблон конечного проекта Контроль распространения Разделение приложения на пакеты Механизм обновления проектов Написание базовых библиотек
Частичные технические ограничения Конвенция Готовая сборка и образы Настроенный Pipeline Базовый UiKit Генерация проектов Пакетное обновление Базовые метрики Добавляем самое важное Рекомендации по переходу на библиотеки платформы Единый UiKit Базовые модули и библиотеки Стандартные Аналитика 🎄 2021 июль
Частичные технические ограничения Конвенция Добавляем самое важное Рекомендации по переходу на библиотеки платформы Основные этапы внедрения и первые результаты
Формальные ограничения, предупреждения Обязательный пайплайн Частичные технические ограничения Конвенция Добавляем самое важное Рекомендации по переходу на библиотеки платформы 80% 20% Решение начало рождаться вне платформы
предупреждения Обязательный пайплайн Частичные технические ограничения Конвенция Добавляем самое важное Рекомендации по переходу на библиотеки платформы 80% 20% 70% 30% Откатка на первых проектах 2021 июль
предупреждения Обязательный пайплайн Частичные технические ограничения Конвенция Добавляем самое важное Рекомендации по переходу на библиотеки платформы 80% 20% 70% 30% Конвенция позволила остановить рост 70% 30% 🎄 2021 июль
предупреждения Обязательный пайплайн Частичные технические ограничения Конвенция Добавляем самое важное Рекомендации по переходу на библиотеки платформы 80% 20% 70% 30% Инерция white-листа всё ещё приводит к новым проектам 70% 30% 47% 53% 🎄 2021 июль
Конвенция Добавляем самое важное 80% 20% 70% 30% 70% 30% 47% 53% Конвенция позволила остановить рост Инерция white-листа всё ещё приводит к новым проектам Откатка на первых проектах 🎄 2021 июль
дизайном UiKit Удобные обновления Размер команды 😸 😸 4 2021 июль 436+ проектов 😸 5 Выделили группу под UiKit 😸 7 Разделение разработчиков по контексту задач 😸 9 Группа инструментов и группа фреймворка 🎄 😸 15 Дорого или нет?
и слабо зависит от числа проектов Чем раньше согласуете единую дизайн-систему, тем лучше Но с ростом числа проектов будет расти время на поддержку в чатике Скорее всего удобно будет не сразу, это ок
так, чтобы захотелось пользоваться Если разработчику интересно заниматься платформой, он может контрибьютить или перейти в команду платформы White-лист + ETA выручат на первых этапах Удобный UiKit, являющийся стандартом у дизайнеров, является хорошим бустом для перехода
всякого Пайплайн Архитектура приложения E2E тест Варианты шаблона Виды авторизации Режим работы с API Миграции 1.1 1.2 1.3 Тесты много Репозиторий генератора
всякого Пайплайн Архитектура приложения E2E тест Варианты шаблона Виды авторизации Режим работы с API Миграции 1.1 1.2 1.3 Тесты много Репозиторий генератора С образами С пайплйнами NGinx CSP.conf Frontend пайплайн Репозитории RE Базовый пайплайн
всякого Пайплайн Архитектура приложения E2E тест Варианты шаблона Виды авторизации Режим работы с API Миграции 1.1 1.2 1.3 Тесты много Репозиторий генератора 🍱 Модули, библиотеки, конфиги ETCD CSP Logger Service-Mesh DevtoolKit Tracker Keycloak RE RE 🍱 Ui-Kit Тут своя атмосфера
и его бесконечные тесты Пайплайн генератора Тесты генератора Пайплайн пайплайна Пайплайн вариаций конечного приложения Такой же пайплайн будет запускаться у разработчика Для каждого теста конечного пайплайна создаём ветку Тесты поднятого приложения Тесты пакетов Генератор Канареечная публикация пакетов
Генерация и обновление продуктовых проектов Линтеры, тайпинг Используемые библиотеки Запреты и предупреждения E2E, Unit, … SiteSpeed Анализ кода с отправкой в метрики Сборка Контроль Тесты Анализ Монорепа Канарейка Настройки приложения Продуктовое начало
Важно не только генерировать код проекта, но и уметь обновлять его Массовые решения лучше перетестировать, чем недотестировать, тестируем даже пайплайны Продуктовый код должен получить всё необходимое, но достаточное Метрики вам позволят понять чем пользуются, а чем нет, следить за процессом внедрения изменений Пайплайн — отличное место для контроля происходящего
новые версии платформы На сколько популярны какие-то фичи или настройки Как быстро проходят ваши пайплайны или джобы А ещё? и т.д. метрики — класс Данные в срезах направлений и команд, актуально при использовании white-листов Можно анализировать используемые зависимости Изучать тренды производительности приложения
• RealTime-конфиги • ENV-конфиги • Модуль CSP • Работа с Rest API • Работа с GraphQL • Генераторы моделей • OzonID • OzonID JWT • Ozon ESIA Работа с API Основное • UiKit • OzonMaps Тестирование, отладка Тесты • Адвокод: автомокалка • Инструменты для E2E-тестов • Инструменты для Unit-ов Анализ работы • Сбор логов • Сбор ошибок • Sitespeed • Метрики • DevTool Kit • Анализ бандла Отладка
всё что поменялось 📦 Шаг 1. Работа c package.json и package-lock файлами Учимся восстанавливать пользовательские зависимости, возвращать npm к жизни 👮 Шаг 2. Стараемся не трогать без необходимости user-файлы Отделяем всё что можно в зависимости, файлы пользователя не трогаем 🥷 Шаг 3. Учимся вносить изменения точечно В шаблоны добавляем регионы, добавляем иерархию шаблонов, хитро клеим модели 🧪 Шаг 4. Изобретаем миграции Переход от версии к версии осуществляем патчами, точечно меняя то, что необходимо
версию платформы Формируем список проектов к обновлению Источником данных является PromQL-запрос Ticket-77 Ticket-77 Ticket-77 Заводим в Jira эпик и тикеты, оповещаем юзера 🤖 Начинаем автообновление Docker с нужным образом Качаем репозиторий проекта Накатываем наше обновление Создаём MR в наш тикет Следим по метрикам, было ли выполнено обновление 🥇 Закрываем тикет
ozontech
kaonavi
shibuiwilliam
wxyzzz
oracle4engineer
takkuhiro
masuda220
coborinai
watany
prgckwb
lycorptech_jp
miyukki
mhrtech
tammyeverts
aleyda
maltzj
gr2m
palkan
jct
kristinabergwall1
quramy
cassininazir
tomoyanonymous
3n
![[email protected] Внимание! Спасибо за внимание С вами был Подгорный](https://files.speakerdeck.com/presentations/3b22f83313d54049a96fc0d6afd2cc1f/slide_64.jpg){kind=link}