"Prom.ua shopping cart workflow as a microfrontend", Danylo Kazymyrov
0 likes254 views
Данный документ описывает внедрение микрофронтенда для решения проблем с модульностью и обновлением больших проектов. Рассматриваются проблемы, такие как зависимость от монолитных приложений и конфликты версий, а также предлагается решение через создание изолированных компонентов и применение SDK для интеграции. Результаты внедрения включают сокращение времени на развертывание, повышение конверсии и независимые релизы.
"Prom.ua shopping cart workflow as a microfrontend", Danylo Kazymyrov
- 2. О чем пойдет речь ◉ Зачем вам микрофронтенд? ◉ Какие проблемы хотели решить ◉ Как мы решили проблемы ◉ Результаты ◉ Планы на будущее 2
- 4. ВАШ БОЛЬШОЙ ПРОЕКТ ПРОСИТСЯ БЫТЬ РАЗБИТЫМ НА МОДУЛИ 1
- 5. У ВАС ЕСТЬ МОДУЛИ, КОТОРЫЕ МОЖНО ПЕРЕИСПОЛЬЗОВАТЬ 2
- 6. ВЫ ХОТИТЕ ИЗОЛИРОВАТЬ МОДУЛИ И ОТДАТЬ ИХ РАЗНЫМ КОМАНДАМ 3
- 8. 8
- 9. НО ОТКАТИТЬ ПРИЛОЖЕНИЕ МОЖНО ТОЛЬКО ЦЕЛИКОМ ВРЕМЯ ДЕПЛОЯ НОВОЙ ВЕРСИИ 2 ЧАСА
- 10. С чем еще мы столкнулись 10 ... можем релизиться только вместе с монолитом … не можем мгновенно откатить изменения … зависим от версий пакетов монолита … используем костыли, чтобы подключить корзину в других приложениях … пишем мутации на чистом JS уже N лет … не можем проверять гипотезы чаще, чем 2 раза в неделю осознали, что ...
- 12. ВСЁ ЛИ ТАК ХОРОШО? ?
- 15. КАК РЕЛИЗИТЬ?
- 18. ВЫ ЖЕ НЕ ЗАБЫЛИ ПРО ПРОБЛЕМЫ КОРЗИНЫ? ?
- 20. Проблема: слишком много корзин 20 корзина попап десктопная корзина в сайдапе мобильная корзина
- 22. alias Koshyk=”Новая корзина” Для удобства, новую корзину будем называть по имени проекта в GitLab - Кошик (Koshyk) 22
- 23. REACT-ПРИЛОЖЕНИЕ KoshykUI ◉ Список корзин ◉ Чекаут ◉ Страница оплаты ◉ Страница “Спасибо за покупку” ◉ Подписка на события аналитики ◉ Предоставляет API корзины 23
- 24. МОБИЛЬНЫЙ КОШИК 24 ◉ Существует на отдельной странице ◉ Сам управляет роутингом и редиректами
- 25. АДАПТИВНЫЙ КОШИК 25 ◉ Используется в десктопной версии сайта ◉ Открывается в сайдапе ◉ Дает основному приложению доступ к API корзины ◉ Роутинг за него выполняет основное приложение
- 26. ПРОБЛЕМА: КОРЗИНА ПОСТОЯННО ПЕРЕЗАГРУЖАЕТСЯ 26 ◉ старая корзина открывается в <iframe/> ◉ после закрытия <iframe/> удаляется из DOM ◉ при открытии <iframe/> все данные загружаются снова
- 27. НЕ ГРУЗИТЬ КОШИК В <iframe/>
- 28. ◉ Поставляем Кошик без HTML-файла ◉ Собираем приложение Webpack-ом и создаем для него манифест ◉ Грузим нужную версию манифеста с CDN и после загружаем бандл ◉ Рендерим Кошик в выделенную ему ноду ◉ Учим Кошик сам показываться и прятаться сбоку экрана ◉ После того как Кошик спрятан, он удаляет свои компоненты ◉ Не очищаем состояние Кошика ◉ Восстанавливаем Кошик существующими данными когда нужно снова его отрисовать КАК ПЕРЕСТАТЬ ГРУЗИТЬ КОШИК В <iframe/> 28
- 29. ПРОБЛЕМА: КОНФЛИКТ ВЕРСИЙ REACT 29 Если запускать React-приложение в React- приложении, то родительский React будет пытаться управлять дочерним, а дочерний будет жаловаться на несоответствие версий
- 30. ЗАПУСКАЕМ ФРОНТЕНД КОРЗИНЫ СО СВОИМ REACT ИЗОЛИРОВАННО
- 32. МИНУСЫ ИМЕТЬ НА СТРАНИЦЕ НЕСКОЛЬКО REACT ◉ Пользователь дважды грузит чанк с react ○ в мобильной версии на странице есть только Кошик, значит React грузится 1 раз ○ На десктопе Кошик грузится после загрузки всего приложения асинхронно, а значит влияет на SEO ○ Vendors chunk делится на редко обновляемые и часто обновляемые зависимости (определяется эмпирически). Оба кешируются на клиенте ○ Webpack federation
- 33. ПРОБЛЕМА: ДУБЛИРОВАНИЕ ЛОГИКИ 33 ◉ За операции над корзиной отвечает выделенная команда разработки ◉ Она поддерживает логику работы с корзиной в каждом проекте, где есть корзина ◉ Корзина подключается в проект путем copy-paste папки /cartList
- 34. ОБЩИЙ КОД ИНТЕГРАЦИИ С КОРЗИНОЙ ВЫНОСИМ В SDK
- 35. SDK для Кошика, koshyk-react- context ◉ Доступ к операциям над корзиной ◉ Управление KoshykUI 35
- 37. Взаимодействие с KoshykUI 37 KoshykUI React Создание и вызов отрисовки Инкапсуляция и управление State (redux) Store controller Оповещение о событиях в стейте API Pub/Su b Оповещение о UI событиях Вызов методов контроллера хранилища, соответствующих полученному события Вызов разрешенных методов стейта, через создание событий Оповещение о событиях в приложении SDK instance of KoshykUI Events Pub/Su b Prom.ua
- 38. Работа с SDK 38
- 39. Пример взаимодействия Prom.ua и корзины 39 prom.ua koshyk-react-context koshykUI Нажатие на кнопку добавить в корзину Проксирование запроса в KoshykUI addProduct() dispatch(ADD_PRODUCT) API вызов Мутация состояния notify(CALL_ADD_PRODUCT_SUCCESS) Обновление локального состояния Обновление данных в React context Ререндер компонентов, использующих данные из контекста notify(ADD_PRODUCT_SUCCESS) Отправка данных в аналитику Оповещение подписчиков аналитики
- 40. ПРОБЛЕМА: ФРОНТЕНД КОРЗИНЫ ДОРОГО ГРУЗИТЬ 40 Сайдап корзины отображается если: ◉ Покупатель нажал на иконку корзины ◉ Покупатель добавил что-то в корзину Зачем каждый раз грузить KoshykUI?
- 41. ЛЕНИВО ГРУЗИМ KoshykUI ТОЛЬКО КОГДА ОН ОТОБРАЖАЕТСЯ
- 42. ОПТИМИЗАЦИЯ ЗАГРУЗКИ KoshykUI ◉ В SDK реализован операции, которые могут выполняться без UI корзины ○ Кол-во товаров в корзине ○ Проверка наличия товара в корзине ○ Добавление товара в корзину ○ Вызов открытия корзины ◉ Пока KoshykUI не загружен, операции над корзиной выполняются реализацией методов в SDK Но ведь логика работы мутаций реализована в KoshykUI?
- 43. ПРОБЛЕМА: СИНХРОНИЗАЦИЯ ДАННЫХ Мутации в KoshykUI должны влиять на UI основного приложения Товар удалили из UI корзины
- 44. ПОСЛЕ ЗАГРУЗКИ KoshykUI, SDK ПРОКСИРУЕТ ВЫЗОВЫ API НА ВЫЗОВЫ API KoshykUI
- 46. ПРОБЛЕМА: АНАЛИТИКА 46 ◉ Самая распространенная задача - покрыть что-то аналитикой ◉ В зависимости от основного приложения-интегратора, аналитика может меняться ◉ Аналитику может менять разработчик из другой команды ◉ Как избавить Кошик от привязки к конкретному интегратору?
- 47. НЕ ХРАНИМ АНАЛИТИКУ В РЕПОЗИТОРИИ КОШИКА
- 48. ВЫНЕСЕНИЕ АНАЛИТИКИ ◉ В KoshykUI нет отправки событий в Google Analytics ◉ KoshykUI оповещает о событиях внутри себя через Pub/Sub ◉ Ответственность за отправку событий в аналитику несет интегратор
- 50. ПРОБЛЕМА: ПРОВЕРКА ГИПОТЕЗ 50 Как быстро проверять гипотезы? Гипотезы бывают: ◉ об изменениях в UI ◉ об изменениях в логике ◉ об изменениях в флоу
- 51. АБ-тесты
- 52. АБ-тесты 52 ◉ Для легких АБ-тестов (можно обойтись несколькими if- ами) ○ в рамках одной версии приложения делаем if+флаг ◉ Для глобальных АБ-тестов (изменения в флоу/логике/UI) ○ делаем новую версию, и включаем на % пользователей
- 53. ПРОБЛЕМА: ПОЛИТИКА РЕЛИЗОВ 53 ◉ Как одновременно поддерживать несколько версий приложений? ◉ Как чинить проблемы в версиях, если master-ветка сильно отличается? ◉ Как реализовать механизм переключения версий?
- 54. ИСПОЛЬЗУЕМ SemVer: ДЛЯ НОВЫХ ФИЧ СОЗДАЕМ МИНОРНУЮ ВЕРСИЮ, ДЛЯ ФИКСОВ - ПАТЧ ВЕРСИЮ
- 55. 55 A B C master C release-v1.2.0 Tag v1.2.0 D E Tag v1.2.2 Не готово к релизу J Tag v1.2.1 Версионирование KoshykUI G очень важный фикс G cherry-pick только фикса
- 56. E G 56 A B C master C release-v1.2.0 Tag v1.2.0 D H F Tag v1.2.1 F release-v1.3.0 D Tag v1.3.0 J F Tag v1.3.1 F F важный фикс
- 58. ПРОБЛЕМА: ТЕСТИРОВАНИЕ КОШИКА 58 Как тестировщикам проверять версии, без необходимости поднимать проект локально?
- 59. На каждый коммит в master собираем проект и обновляем его в дев окружении
- 60. 60 A B master C release-v1.2.0 Tag v1.2.0 D E Tag v1.2.2 G J G Tag v1.2.1 latest C latest-v1.2.x v1.2.0 v1.2.1 v1.2.2 Теги статики KoshykUI
- 61. ПРОБЛЕМА: А ЧЕГО ТАК СЛОЖНО? 61 А ЧЕГО ТАК СЛОЖНО? © QA Lead
- 62. АВТОМАТИЗИРУЕМ!
- 63. CI для коммитов в master 63 Сборка docker image если package.json был изменен ESLint, Prettier, TS, анализ бандла вебпак Мануальное обновление переводов Мануальное создание минорной версии из коммита Сборка новой версии dev latest с текущего коммита Обновление на новую версию dev latest
- 64. CD для релиза 64 Сборка docker image для тега Сборка dev+prd статики и сохранение в docker- registry Обновление prd статики в CDN Обновление dev статики в CDN обновление NPM пакета с тайпингами KoshykUI Автоматически обновление prd canary версии на только что собранную
- 66. Docker multi stage build для статики Окружение, в котором могут запускаться тесты и может вестись разработка Чистый docker-image с единственной папкой /assets, Хранится в registry, может быть использован повторно для обновления статики в CDN builder assets Копирование статики с предыдущего этапа в контейнер с загрузчиком в S3 s3_uploader
- 67. ПРОБЛЕМА: КАК УЗНАТЬ О ПРОБЛЕМАХ РАНЬШЕ, ЧЕМ УЗНАЕТ СУППОРТ? 67 ◉ О проблемах старой корзины команда узнавала из сообщений суппорта или автотестов ◉ Суппорт узнавал о проблемах из сообщений пользователей ◉ Поскольку корзина - критически важный функционал, то хочется узнавать о багах быстрее, чем мы потеряем бюджет новогоднего корпоратива
- 68. РЕШЕНИЕ: ПОКРЫВАЕМ КОШИК МЕТРИКАМИ И ВЕШАЕМ АЛЕРТЫ
- 70. 70 Kibana
- 71. 71 Sentry
- 72. Результаты 4
- 73. Что нам дала наша реализация? 73 ИЗОЛИРОВАННОСТЬ Независимые релизы Мгновенное переключение версий Cutting-edge зависимости Типизация API SDK для интеграции с React приложениями Сокрытие деталей работы с бекендом за публичным интерфейсом SDK МОНИТОРИНГ Prometheus метрики Graphana dashboard + alerts Sentry Независимые автотесты ИНТЕГРИРУЕМОСТЬ Минималистичный SDK для интеграции SemVer Canary+stable
- 74. 10 минут Время доставки изменений на prod после тестов +5% Рост конверсии в заказ, для зарегистрированных пользователей 99.8% Сессий пользователей без ошибок (рост +6%) 74
- 77. 77 ◉ Запустить Кошик на десктопе на 100% ◉ Адаптивный чекаут ◉ Webpack module federation ◉ Разделение бандлов (ES5 и ES6) и загрузка подходящего ◉ Создание универсального модуля-загрузчика для микрофронтенда внутри Prom.ua (на очереди чат) TODO
- 78. ИСТОЧНИКИ ИНФОРМАЦИИ 78 ◉ https://micro-frontends.org ◉ https://dou.ua/lenta/articles/micro-frontend ◉ https://martinfowler.com/articles/micro-frontends.html ◉ https://single-spa.js.org ◉ https://www.mosaic9.org ◉ https://www.luxoft.com/blog/lcameroon/answering-single-page- application-challenges-with-micro-front-end-architecture/
- 79. Ваши вопросы? Мои контакты ◉ Telegram @danylkaaa ◉ Linkedin danylo-kazymyrov Cпасибо! 79