Боль при работе с микрофронтендамиВот и прошел месяц моей работы с архитектурой микрофронтендов. Новый подход помог привлечь еще несколько потенциальных клиентов на наш стартап, поэтому руководство довольно сполна. Но не разработчики…
Самой большой болью при работе с архитектурой микрофронтендов является общий код. Как оказалось, если ты “разделываешь” свой большой монолитный проект на микрофронтенды, то замечаешь что абсолютно всё завязано на всём.
Store у всех приложений один, большое количество shared компонентов, да даже axios интерсепторы и синглтон с ролями пользователей шарятся между всеми страницами. А как насчет функций из папки “utils” которые фильтруют данные особым образом? Всё очень завязано, потому что с самого старта работы никто даже не думал про введение новой архитектуры. И весь этот общий код начинает плавно переезжать в отдельные репозитории, и здесь главное быть в адеквате и не перетрудиться.
Первым shared репозиторием стал наш ui-kit, или иначе библиотека компонентов. Во всех репозиториях мы использвовали Material UI, но над некоторыми его компонентами мы надстраивали свои еще более умные компоненты. К примеру у нас был не просто прогресс бар, а крутилка с прогрессом, логотипом компании и градиентной заливкой. И вот если в другом микрофронтенде тебе нужен этот компонент, то тебе нужно перенести его в репозиторий “
companyName/ui-kit”, добавить документацию в storybook, закоммитить изменения, зарелизить новую версию библиотеки и залить её в npm. Нехило как для одного маленького компонента, правда?
Вторым shared репозиторием стала библиотека функций, которая содержала axios с его логикой получения и хранения токена, всяческие
интерсепторы и другие utils функции. И здесь подход был такой же, переносим функции в отдельный репозиторий “
companyName/utils”, добавляем документацию (если нужна), коммитим, релизим новую версию, заливаем в npm.
После того как новая версия готова, ты идешь в свой микрофронтенд и обновляешь этот пакет в package.json. Первые пара недель проходили именно в таком ритме, в постоянных релизах библиотек и головной боли. И пожалуй единственный момент который меня радовал это то что везде используется TypeScript. Поэтому нам не приходилось писать никакие typings чтобы понять какие аргументы принимает та или иная функция, или какого типа передавать props в shared компонент.
В прошлом посте я рассказывал что переезд на новую архитектуру занял 3 недели, но сейчас я могу смело сказать что можете прибавлять еще 3-4 недели на адаптацию и распределение тесно связанного кода по отдельным библиотекам.
Я пошёл дальше воевать с новой архитектурой, и надеяться что у тебя на проекте всё более спокойно, котик 🐈