Михаил Подгорный — Frontend платформа: распространяй и властвуй

Transcript

1. Ozon Tech 2022 Frontend платформа: распространяй и властвуй
2. — Участвовал в создании он-лайн «казино» c 2D-играми — Разрабатывал инструменты печати этикеток — Писал движок для нативной читалки книг — Работал над городским проектом с инфографикой — Пилил свой фреймворк в безреактовые времена — Перетаскивал серверный рендер с C# на Node.JS — Уговорил запилить фронтовую платформу в очень крупной компании и я руковожу фронтовой платформой в озоне Меня зовут Михаил Подгорный Оффлайн гости, 
 вы здесь
3. 🍱 Сегодня в меню Зачем нужна унификация и где проходит граница разумного 5 минут Как мы внедряли стандарты 
 и контролировали переход на них 6 минут Как устроена frontend платформа в нашей компании 8 минут Как мы распространяем обновления 
 и как мы их будем распространять 4 минуты Инсайдерская информация 
 о логотипы команды 1 минута
4. Кому будет интересен доклад? Тем, кто не решился Тем, кто решился, но не знает как продать идею Тем, кто решился, продал идею, но пока не приступил Тем, кто решился, продал идею, приступил, но боится что-то упустить Тем, у кого уже есть платформа, но интересно что получилось у нас Тем, кто пользуется нашей платформой Тебе, кто любит красивые доклады
5. Зачем нужна унификация и где проходит граница разумного
6. Зачем нужна унификация и где проходит граница разумного В каком случае это сработает Что унифицировать будем? Примеры выигрыша от унификации Короче зачем 😎
7. С ростом числа проектов растёт актуальность введения стандартов Число 
 проектов Вариативность Без унификации Максимум ограничений В каком случае сработает?
8. Больше проектов — больше унификаций, но можно и переборщить Больше унификаций — больше размер команды платформы Число 
 проектов Число 
 унифицированных 
 сущностей Продуктовая часть 
 «захвачена» платформой Линия разделения 
 ответственности В каком случае сработает?
9. Больше проектов — больше унификаций, но можно и переборщить Больше унификаций — больше размер команды платформы Число 
 проектов Число 
 унифицированных 
 сущностей Продуктовая часть 
 ответственности Продуктовая 
 часть кода Минимальные 
 настройки Всё остальное
10. Code Style Pipeline Фреймворк UiKit Фреймворк для фреймворка Boilerplate Библиотеки Клонирование людей Читаемость чужого кода Контроль над 
 выпускаемым кодом Запуск релизных скриптов Переиспользование UI-компонентов Быстрый старт новых проектов Упрощение найма Возможность расширяться через систему плагинов Массовое обновление дизайна Конфиги Общая сборка для разных сред Единообразный продуктовый код А теперь повторим созданий решение много-много раз, напишем тесты, документацию, начнём регулярно заниматься обновлениями. Кажется можно сэкономить 💰 и ⏱ Образы раздачи статики
11. Быстрее создавать продукт Со стороны разработки можем… Быстро распространять изменения Распределять ответственность Контролировать процессы Уменьшаем риск Bus-фактора В найме это… Программа обучения Упрощение ротации Снижение порога найма Снижать изоляцию А для копании Экономия денег Снижение рисков Но есть один нюанс. Подробнее через 6 минут 😎 Короче зачем?
12. Пара примеров Короче зачем? ⚡ Взаимодействия и поддержка Входной точкой смежных команд, например для RE или Infra, 
 является только одна команда — команда платформы 🚰 Некоторые вещи попросту не просто организовать Например Canary-деплои в NPM-пайплайне или работу с RealTime-конфигами 💅 Легче полировать на масштабе Чтобы сделать самый лучший UiKit, надо не просто сделать свой третий UiKit, надо 
 получать постоянную обратную связь. Которая тем насыщеннее и разнообразние, 
 чем больше твоим UiKit-ом пользуются
13. Как мы внедряли стандарты 
 и контролировали переход на них
14. Как мы внедряли стандарты 
 и контролировали переход на них Порядок действий Этапы внедрения и результат Размер команды
15. Порядок действий Webpack UiKit Monorepo Pipeline UiKit browserlist eslint stylelint nGinx Docker npmrc jestconfig plawright vue nuxt E2E unit package-lock Всё просто. Сначала соберём ингридиенты.
16. Порядок действий Webpack UiKit Monorepo Pipeline UiKit browserlist eslint stylelint nGinx Docker npmrc tsconfig jestconfig plawright vue nuxt E2E unit package-lock
17. Порядок действий Webpack UiKit Monorepo Pipeline UiKit browserlist eslint stylelint nGinx Docker npmrc tsconfig jestconfig plawright vue nuxt E2E unit package-lock Собрать опытных 
 желающих
18. UiKit Фреймворк Репозиторий Генератор Сканер
19. Метрики Утверждение 
 единого дизайна Тестовый 
 проект Создание 
 монорепозитория Публикация 
 пакетов Настройка 
 образов Настройка 
 пайплайнов Линтеры 
 и конфиги Генератор 
 проектов Сканер 
 репозиториев DX Примеры Разделение 
 приложения 
 на пакеты Тестирование 
 результата 
 генерации Конвенция Единый 
 пайплайн Шаблон 
 конечного 
 проекта Beta-версия 
 UI-Kit-a Решения 
 выбраны Рабочее 
 приложение UiKit Фреймворк Репозиторий Генератор Сканер Базовые 
 компоненты
20. Метрики Утверждение 
 единого дизайна Тестовый 
 проект Создание 
 монорепозитория Публикация 
 пакетов Настройка 
 образов Настройка 
 пайплайнов Линтеры 
 и конфиги Генератор 
 проектов Сканер 
 репозиториев DX Примеры Разделение 
 приложения 
 на пакеты Тестирование 
 результата 
 генерации Конвенция Единый 
 пайплайн Шаблон 
 конечного 
 проекта Beta-версия 
 UI-Kit-a Решения 
 выбраны Рабочее 
 приложение UiKit Фреймворк Репозиторий Генератор Сканер Базовые 
 компоненты
21. я 
 Настройка 
 пайплайнов Примеры ирование 
 ультата 
 ерации я Единый 
 пайплайн Введение 
 запретов 
 по конвенции Объединение 
 всех частей, 
 релиз Шаблон 
 конечного 
 проекта Контроль 
 распространения Разделение 
 приложения 
 на пакеты Механизм 
 обновления 
 проектов Написание 
 базовых 
 библиотек Beta-версия 
 UI-Kit-a Рабочее 
 приложение UiKit Фреймворк Репозиторий Генератор Сканер Метрики
22. Метрики Утверждение 
 единого дизайна Тестовый 
 проект Создание 
 монорепозитория Публикация 
 пакетов Настройка 
 образов Настройка 
 пайплайнов Линтеры 
 и конфиги Генератор 
 проектов Сканер 
 репозиториев DX Примеры Тестирование 
 результата 
 генерации Базовые 
 компоненты Конвенция Единый 
 пайплайн Введение 
 запретов 
 по конвенции Объединение 
 всех частей, 
 релиз Шаблон 
 конечного 
 проекта Контроль 
 распространения Разделение 
 приложения 
 на пакеты Механизм 
 обновления проектов Написание 
 базовых 
 библиотек
23. Основные этапы внедрения Формальные ограничения, 
 предупреждения Обязательный 
 пайплайн Частичные технические 
 ограничения 
 Конвенция Готовая сборка и образы 
 Настроенный Pipeline 
 Базовый UiKit Генерация проектов 
 Пакетное обновление 
 Базовые метрики Добавляем 
 самое важное Рекомендации по переходу 
 на библиотеки платформы Единый UiKit 
 Базовые модули и библиотеки 
 Стандартные 
 Аналитика 🎄 2021 июль
24. 🎄 2021 июль Формальные ограничения, 
 предупреждения Обязательный 
 пайплайн Частичные технические 
 ограничения 
 Конвенция Добавляем 
 самое важное Рекомендации по переходу 
 на библиотеки платформы Основные этапы внедрения и первые результаты
25. 🎄 2021 июль % Не на платформе % На платформе Формальные ограничения, 
 предупреждения Обязательный 
 пайплайн Частичные технические 
 ограничения 
 Конвенция Добавляем 
 самое важное Рекомендации по переходу 
 на библиотеки платформы 80% 20% Решение начало 
 рождаться вне 
 платформы
26. 🎄 % Не на платформе % На платформе Формальные ограничения, 
 предупреждения Обязательный 
 пайплайн Частичные технические 
 ограничения 
 Конвенция Добавляем 
 самое важное Рекомендации по переходу 
 на библиотеки платформы 80% 20% 70% 30% Откатка на первых проектах 2021 июль
27. % Не на платформе % На платформе Формальные ограничения, 
 предупреждения Обязательный 
 пайплайн Частичные технические 
 ограничения 
 Конвенция Добавляем 
 самое важное Рекомендации по переходу 
 на библиотеки платформы 80% 20% 70% 30% Конвенция позволила остановить рост 70% 30% 🎄 2021 июль
28. % Не на платформе % На платформе Формальные ограничения, 
 предупреждения Обязательный 
 пайплайн Частичные технические 
 ограничения 
 Конвенция Добавляем 
 самое важное Рекомендации по переходу 
 на библиотеки платформы 80% 20% 70% 30% Инерция white-листа всё 
 ещё приводит к новым проектам 70% 30% 47% 53% 🎄 2021 июль
29. % Не на платформе % На платформе Обязательный 
 пайплайн Конвенция Добавляем 
 самое важное 80% 20% 70% 30% 70% 30% 47% 53% Конвенция позволила остановить рост Инерция white-листа всё 
 ещё приводит к новым проектам Откатка на первых проектах 🎄 2021 июль
30. % Не на платформе % На платформе Обязательный 
 пайплайн Конвенция Добавляем 
 самое важное 2022 Утвержденный дизайном UiKit Удобные 
 обновления 🎄 2021 июль 80% 20% 70% 30% 70% 30% 47% 53% 40% 60% 75% 25%
31. Обязательный 
 пайплайн Конвенция Добавляем 
 самое важное 2022 Утвержденный дизайном UiKit Удобные 
 обновления Размер команды 😸 😸 4 2021 июль 436+ 
 проектов 😸 5 Выделили 
 группу под UiKit 😸 7 Разделение разработчиков 
 по контексту задач 😸 9 Группа инструментов 
 и группа фреймворка 🎄 😸 15 Дорого или нет?
32. Никогда не поздно начать! Потребность в росте команды ограничена 

33. Никогда не поздно начать! Потребность в росте команды ограничена 
 и слабо зависит от числа проектов Чем раньше согласуете единую 
 дизайн-систему, тем лучше Но с ростом числа проектов будет 
 расти время на поддержку в чатике Скорее всего удобно будет не сразу, 
 это ок
34. Кроме мягкой силы и административного ресурса, можно 
 просто… сделать так, чтобы захотелось пользоваться Если разработчику интересно заниматься платформой, 
 он может контрибьютить или перейти в команду платформы White-лист + ETA выручат на первых этапах Удобный UiKit, являющийся стандартом у дизайнеров, 
 является хорошим бустом для перехода
35. Как устроена frontend платформа в нашей компании
36. Как устроена frontend платформа в нашей компании Устройство основного репозитория Тесты, длинною в пять пайплайнов Содержимое коробки Что смотрим в метриках
37. 🍱 Генератор проектов Шаблон Dockerfile nginx.conf Настройки 
 фреймворка Конфиги 
 всякого Пайплайн Архитектура 
 приложения E2E 
 тест Варианты шаблона Виды 
 авторизации Режим работы 
 с API Миграции 1.1 1.2 1.3 Тесты много Репозиторий 
 генератора
38. 🍱 Генератор проектов Шаблон Dockerfile nginx.conf Настройки 
 фреймворка Конфиги 
 всякого Пайплайн Архитектура 
 приложения E2E 
 тест Варианты шаблона Виды 
 авторизации Режим работы 
 с API Миграции 1.1 1.2 1.3 Тесты много Репозиторий 
 генератора С образами С пайплйнами NGinx CSP.conf Frontend пайплайн Репозитории 
 RE Базовый пайплайн
39. 🍱 Генератор проектов Шаблон Dockerfile nginx.conf Настройки 
 фреймворка Конфиги 
 всякого Пайплайн Архитектура 
 приложения E2E 
 тест Варианты шаблона Виды 
 авторизации Режим работы 
 с API Миграции 1.1 1.2 1.3 Тесты много Репозиторий 
 генератора 🍱 Модули, библиотеки, конфиги ETCD CSP Logger Service-Mesh DevtoolKit Tracker Keycloak RE RE 🍱 Ui-Kit Тут своя 
 атмосфера
40. 🍱 Генератор проектов Шаблон Dockerfile nginx.conf Настройки 
 атмосфера 📦 Пакет Пайплайн 
 UiKit
41. 🍱 Генератор проектов Шаблон Dockerfile nginx.conf Настройки 
 фреймворка Конфиги 
 всякого Пайплайн Архитектура 
 приложения E2E 
 тест Варианты шаблона Виды 
 на файловой системе 
 разработчика Репозиторий генератора RE RE 🍱 Ui-Kit Тут своя 

42. 🍱 Генератор проектов Шаблон Dockerfile nginx.conf Настройки 
 UiKit
43. Пайплайн генератора Canary Тесты всего что есть Публикация Репозиторий генератора и его бесконечные тесты Пайплайн 
 генератора Тесты 
 генератора Пайплайн 
 пайплайна Пайплайн вариаций 
 конечного приложения Такой же пайплайн 
 будет запускаться 
 у разработчика Для каждого теста 
 конечного пайплайна 
 создаём ветку Тесты поднятого 
 приложения Тесты 
 пакетов Генератор Канареечная 
 публикация 
 пакетов
44. Продуктовое начало Пайплайн генератора Генератор 📦 Пакеты Генерация 
 и обновление 
 продуктовых 
 проектов
45. Пайплайн генератора Генератор 📦 Продуктовый репозиторий Пайплайн Продуктовый 
 код Генерация 
 и обновление 
 продуктовых 
 проектов Линтеры, тайпинг 
 Используемые библиотеки 
 Запреты и предупреждения E2E, Unit, … 
 SiteSpeed Анализ кода 
 с отправкой в метрики Сборка Контроль Тесты Анализ Монорепа Канарейка Настройки 
 приложения Продуктовое начало
46. Пайплайн генератора Генератор Продуктовое начало Продуктовые репы Сканируем код 
 репозитория 
 в момент релиза 
 из Pipeline-а 
 ☀ Сканируем кодовую 
 базу по ночам Строим метрики Добавляем данные 
 по командам 
 и направлениям
47. Пайплайн генератора Генератор Почти всё сразу Продуктовые репы Наши метрики Важно не только генерировать 
 код проекта, но и уметь 
 обновлять его Массовые решения лучше 
 перетестировать, чем недотестировать, 
 тестируем даже пайплайны Продуктовый код должен 
 получить всё необходимое, 
 но достаточное Метрики вам позволят понять чем пользуются, 
 а чем нет, следить за процессом внедрения 
 изменений Пайплайн — отличное место 
 для контроля происходящего
48. Метрики платформы Число проектов, просто приятно посмотреть Процесс перехода на новые версии платформы На сколько популярны какие-то фичи или настройки Как быстро проходят ваши пайплайны или джобы А ещё? и т.д. метрики — класс Данные в срезах направлений и команд, актуально 
 при использовании white-листов Можно анализировать используемые зависимости Изучать тренды производительности приложения
49. Разработка Так что в коробке? • Service-mesh • Version Validator • RealTime-конфиги • ENV-конфиги • Модуль CSP • Работа с Rest API • Работа с GraphQL • Генераторы моделей • OzonID • OzonID JWT • Ozon ESIA Работа с API Основное • UiKit • OzonMaps Тестирование, отладка Тесты • Адвокод: автомокалка • Инструменты для E2E-тестов • Инструменты для Unit-ов Анализ работы • Сбор логов • Сбор ошибок • Sitespeed • Метрики • DevTool Kit • Анализ бандла Отладка
50. Как мы распространяем обновления 
 и как мы их будем распространять
51. Встреча с обновлением Предупреждение в пайплайне или 
 оповещение Ticket-777 Заводит руками тикет, создаёт ветку Запускает инструмент обновлений, 
 проверяет результат и отправляет в ветку Через метрики мы наблюдаем за процессом
52. Встреча с обновлением Разработчик видит предупреждение 
 проверяет результат и отправляет в ветку Через метрики мы наблюдаем за процессом Эта часть точно 
 должна быть удобной
53. Делаем удобнее 🗿 Каменный век Просто перезаписать на файловой системе всё что поменялось 📦 Шаг 1. Работа c package.json и package-lock файлами Учимся восстанавливать пользовательские зависимости, возвращать npm к жизни 👮 Шаг 2. Стараемся не трогать без необходимости user-файлы Отделяем всё что можно в зависимости, файлы пользователя не трогаем 🥷 Шаг 3. Учимся вносить изменения точечно В шаблоны добавляем регионы, добавляем иерархию шаблонов, хитро клеим модели 🧪 Шаг 4. Изобретаем миграции Переход от версии к версии осуществляем патчами, точечно меняя то, что необходимо
54. Встреча с обновлением Разработчик видит предупреждение 
 проверяет результат и отправляет в ветку Через метрики мы наблюдаем за процессом
55. Встреча с обновлением Разработчик видит предупреждение 
 в пайплайне или в процессе разработки Ticket-777 Заводит руками тикет, создаёт ветку Запускает инструмент обновлений, 
 должна быть удобной
56. Ручной труд сделал из человека Автоматизатора 📦 Выпускаем свежую 
 версию платформы Формируем 
 список проектов 
 к обновлению Источником данных 
 является PromQL-запрос 
 Ticket-77 Ticket-77 Ticket-77 Заводим в Jira 
 эпик и тикеты, 
 оповещаем 
 юзера 🤖 Начинаем автообновление Docker с нужным 
 образом Качаем репозиторий 
 проекта Накатываем наше 
 обновление Создаём MR в наш 
 тикет Следим по метрикам, 
 было ли выполнено обновление 🥇 Закрываем 
 тикет
57. Hemidall Ticket-77 Ticket-77 Ticket-77 Разработчик проверяет корректность MR-а Обновляйтесь с комфортом
58. Привет, я Гоша. И сегодня я 
 расскажу вам почему на логотипе платформы изображён бонсай
63. rest in peace
64. Аккуратная 
 мягкая 
 нашивка Стильный 
 металлический 
 значок Завидная 
 ачивка 
 на стаффе
65. mpodgorniy@ozon.ru Внимание! 
 Спасибо за внимание С вами был Подгорный Михаил