Я всегда задавался вопросом, как были построены большие веб -приложения! Я обнаружил секрет некоторое время назад, и это стало моей страстью. После того, как я испытал преимущества и боли в использовании микрофронтаций в масштабе, я решил документировать это путешествие и поделиться некоторыми из «лучших практик».
Это самоуверенный список лучших практик при разработке приложений, которые следуют за схемой микрофиндентов. Каждое «правило» должно быть рассмотрено, а его преимущества/недостатки оцениваются по вашему конкретному варианту использования.
Нулевая связь между микрофронтациями
Чтобы достичь преимуществ этой архитектуры, следует избегать случайной связи как можно больше; Это разблокирует гибкость и масштабируемость, которую может предложить шаблон микрофиндента, а также в будущем защищает ваши приложения, позволяя постепенно обновлять или в будущем полном переписывании частей вашего приложения.
Каждый микрофиндент должен быть в состоянии отображать изоляцию или внутри приложения контейнера. Требуемые данные должны быть загружены каждым микрофиндом и избегать водопадов данных.
Делать:
✅ Поделитесь библиотеками, которые можно поменять, не влияя на другие микрофронтации. ✅ Загрузите все данные, необходимые для визуализации.
Не надо:
❌ Иметь централизованные данные о хранилище/обмене различными микрофронтациями. ❌ Поделитесь библиотеками, которые находятся в активном развитии.
Отдельные кодовые базы
Каждый микрофиндент должен иметь свою собственную кодовую базу, и контроль версий по выбору не должен оказывать никакого влияния на то, как проект разрабатывается или развернут. Наличие всех проектов в рамках одного монорепо или отдельных репозиториев в порядке.
Делать:
✅ Используйте Monorepos. ✅ Используйте отдельные репо.
Каждый микрофиндент должен быть развернут независимо
Каждый микрофиндент должен иметь свой собственный конвейер CI/CD и иметь возможность развернуться к производству по требованию без каких-либо зависимостей от других микрофронтаж. Обычным антипаттерном, которого следует избегать, является «очередью развертывания ада», где различные микрофронтации настолько тесно связаны, что их необходимо развернуть в определенном порядке, чтобы избежать нарушения применения.
Делать:
✅ Имеют отдельные трубопроводы CI/CD. ✅ Выпуск по требованию.
Не надо:
❌ есть графики выпуска. ❌ Имеют дополнительные/последовательные развертывания, которые требуют предыдущих версий.
Микро-фронтенции должны быть проверены независимо
Поскольку микрофронтации необходимы для отображения независимо, а также внутри приложения контейнера, имеет смысл также проверить их независимо, используя модульные и интеграционные тесты для обоих сценариев.
Делать:
✅ Иметь единичные и интеграционные тесты для каждого визуализации микрофиндента в изоляции. ✅ Запустите интеграционные тесты для микрофиндов, рендеринга внутри контейнерных приложений как часть сквозного тестирования.
Микро-фронтенции должны быть версированы
Когда новая микрофронат будет развернута для производства, предыдущая версия не должна быть удалена, а новая версия должна быть помечена номером версии с использованием семантических версий или аналогичной. Это зависит от приложений контейнеров, чтобы решить, какую конкретную версию конкретной микрофронтенции использовать (управляется) или всегда использовать последнюю версию (Evergreen).
Делать:
✅ Используйте семантическую версию. ✅ Используйте конкретную версию или «Последняя».
Не надо:
❌ Требовать глобального развертывания для изменения версий. ❌ Удалить предыдущие версии.
Минимальное общение.
Коммуникация между микро-фронтенциями должна быть минимальной и простой, что, как можно больше избегать глобальных государств и структурных решений.
Если два или более микрофинганы разделяют множество сообщений, чтобы обеспечить свою минимальную функциональность, они могут быть слишком тесно связаны, и они могут поделиться достаточно сходной целью, чтобы они были интегрированы в одну.
Делать:
✅ Сообщите сообщения маленькими и простыми. ✅ Избегайте карт состояния и коммуникации, если это возможно.
Не надо:
❌ Обмен государством. ❌ Имеют ненужное общение.
CSS должен быть охвачен
CSS, загруженные из одного микрофроннального, не должны влиять на других.
Делать:
✅ Область ваши CSS. ✅ Используйте библиотеку CSS-in-JS или пространства имен (например, модули CSS).
Не надо:
❌ Используйте Global CSS.
Окончательные рекомендации
✅ Попробуйте создать автономные команды. ✅ Постарайтесь организовать свои микрофронтации вокруг бизнес-функциональности. ✅ Повторное использование – хороший «побочный эффект», а не цель. ❌ Не заставляйте этот архитектурный стиль только потому, что он «новый». ❌ Вам не нужно несколько фреймворков JavaScript. ❌ Вам не нужна «структура микрофинтента». ❌ Микро-фронтенции не должны быть «микро».
Оригинал: “https://dev.to/infoxicator/rules-of-micro-frontends-3njg”