마이크로 프론트엔드는 독립적으로 소유하고 배포할 수 있는 프론트엔드 애플리케이션으로 구성된 사용자 인터페이스입니다. 이 접근 방식은 Thoughtworks에서 공식적으로 강조했습니다. 2016, and a 2024 설문 조사에서 23.6% respondents가 75.4% 년 2022. State of Frontend 데이터
이 문제를 이미 해결하고 있을 수도 있습니다. 세 개의 제품 팀이 하나의 frontend 저장소에 공유하고 동일한 릴리즈 트레인에 기다리는 경우, 하나의 팀이 체크아웃을 변경하고 다른 팀이 프로필을 업데이트하고 세 번째 팀이 마케팅 페이지를 조정하는 경우에도.
Micro frontend 아키텍처는 제품 영역을 분리하여 팀이 독립적으로 소유, 테스트 및 릴리즈할 수 있도록 합니다. 사용자는 여전히 하나의 애플리케이션을 경험합니다. 이 구분은 중요합니다. Micro frontends는 작은 폴더, 컴포넌트 또는 번들만이 아닙니다. 그들의 중심 목적은 조직적 및 릴리즈 독립성
기술적 경계가 소유권을 명확하게 하도록 지원합니다. 아키텍처는 협調의 병목 현상을 제거할 수 있지만, 런타임 통합, 의존성 관리, 테스트, 보안 및 성능 책임도 추가됩니다.
- 목차
- Micro Frontend 아키텍처의 작동 방식
- Core Micro Frontend 패턴의 비교
- 혜택, 트레이드 오프 및 숨겨진 위험
- 테스트, 배포 및 마이그레이션 연습
- Capacitor와 Electron에서 Micro Frontends 사용
- Micro Frontends를 선택하는 시점
Micro Frontend 개념 이해
한 frontend에서 여러 소유 애플리케이션으로
전통적인 frontend는 일반적으로 하나의 저장소, 하나의 빌드, 하나의 배포 경계를 가지고 있습니다. code가 기능 폴더로 분리되어도, 폴더를 관리하는 팀은 여전히 동일한 PIPELINE과 릴리즈 일정에 의존할 수 있습니다. 한 영역에서 작은 변경이 전체 애플리케이션 빌드, 공유된 회귀 테스트, 모든 팀의 협조를 트리거할 수 있습니다.
브라우저 애플리케이션을 business capabilities로 나누세요 Build a layered test system. 체크아웃 팀은 체크아웃, 프로필 팀은 계정 설정, 마케팅 팀은 홍보 콘텐츠를 소유합니다. 각 슬라이스는 독립적인 코드베이스, 배포 프로세스 및 릴리스 일정으로 구성될 수 있으며, 그 후 shell 또는 구성层를 통해 더 큰 경험으로 통합됩니다.
Martin Fowler는 패턴을 다음과 같이 정의합니다. “an architectural style where independently deliverable frontend applications are composed into a greater whole” 독립적으로 배포 가능한 frontend 애플리케이션들이 더 큰 전체로 구성되는 아키텍처 스타일 그의 기초적인 micro frontends 아키텍처 가이드

‘독립적으로 배포 가능’이라는 단어는 ‘frontend 애플리케이션’보다 더 많은 가치를 지닙니다. 독립적인 배포 경계가 없다면 모듈러 모노리식 대신 마이크로 프론트엔드 시스템이 될 수 있습니다.
스트레스 받은 사무실 직원들이 책을 들고 있는 데스크를 나타내는 사진.
합성된 매장 analogy
이 용어는 브라우저에 대한 마이크로서비스思 想을 확장하는 것으로 연관되었습니다. 2016년 11월 Thoughtworks가 기술 라이다에서 강조한 후로워가 나중에 Assess에서 Trial로, 그리고 Adopt로 문서화 한 진행을 설명하는 패턴의 이동에서부터 시작되었습니다. 웹 개발을 위한 더 나은 실용적인 개요를 위해 Nerdify에서 제공하는 스케일러블한 웹 개발에 대한 비교를 통해 패턴을 이해하는 것이 도움이 됩니다. 이것은 이 플러그인 아키텍처 가이드에서 논의되는 플러그인 아키텍처와 인접한 접근법과 비교하는 것입니다.중요한 교훈은 마이크로 프론트엔드가 모든 인터페이스의 기본적인 업그레이드가 아니라는 것입니다. 팀 경계와 릴리스 경계가 실제로 고통을 일으키면 의미가 있습니다..
만약 독립성이 관리하는 더 많은 계약, 자산, 런타임 실패 모드, 및 운영 도구가 가치가 있다면 비용이 정당화됩니다.
마이크로 프론트엔드 아키텍처는 어떻게 작동하는가?
쉘과 프래그먼트
작동하는 시스템은 일반적으로 앱 쉘 또는 컨테이너 또는 오케스트레이터로 시작됩니다.쉘은 공통 레이아웃을 렌더링하고, 경로를establish, 인증 컨텍스트를 제공하고, 공유 인터페이스 요소인 네비게이션 또는 알림과 같은 요소를 제공합니다.
각 프래그먼트는 독립적으로 관리되는 애플리케이션입니다. 그것은 별도의 저장소에서 살 수 있으며, CI pipeline을 사용할 수 있으며, 자신의 버전을 내보낼 수 있으며, bundle, fragment, 웹 컴포넌트 또는 remote 모듈을 노출할 수 있습니다. shell은 브라우저에서 그 조각들을 합성합니다. 그것은 페이지가 로드될 때 또는 라우트가 그것들을 필요로 할 때입니다.

경계가 유용한 것은 팀들이 그것에 의존할 수 있을 때입니다. shell과 각 프래그먼트는 명시적인 계약이 필요합니다. 그것은 마운트 동작, 라우트 소유권, 로딩 상태, 오류 처리, 디자인 토큰, 접근성 기대치, 및 지원되는 의존성 버전을 포함합니다.
실용적인 규칙: 계약과 시각적 기본 요소를 의도적으로 공유하십시오. 런타임 구현 세부 사항을 단지 두 팀이 현재 동일한 프레임워크를 사용한다는 이유로 공유하지 마십시오.
모노리즘을 재현하지 않는 커뮤니케이션
프래그먼트들은 때때로 서로에게 커뮤니케이션을 해야 합니다. 체크아웃 슬라이스는 사용자가 로그인했음을 알리고, 프로필 슬라이스는 계정 업데이트된 이벤트를 내보낼 수 있습니다. 팀들은 커스텀 브라우저 이벤트, 공유된 스토어, URL 매개 변수, 또는 주입된 서비스를 사용할 수 있습니다.
모든 옵션은 다음과 같은 다른 결합 프로파일을 만듭니다:
- 커스텀 이벤트 소유권을 분리하지만 팀들은 이벤트 이름, 페이로드 형태, 및 타이밍을 문서화해야 합니다.
- 공유된 스토어 조정된 상태를 단순화하지만, 그것은 중앙 의존성 그래프를 재현할 수 있습니다.
- URL 매개 변수 네비게이션 및 공유 상태에 대해 잘 작동하지만 모든 상호 작용에 적합하지는 않다.
- 인젝션된 서비스 제어된 기능을 제공하지만 shell이 서비스 계약을 유지해야 한다.
shell은 전체 애플리케이션에 속하는 것만 조정해야 한다. 만약 모든 프래그먼트의 상태와 비즈니스 규칙에 책임이 있다면 분산된 모놀리식이 되고 배포 프로세스가 더 복잡해진다.
Fowler가 문서화 한 역사적 진행은 왜 패턴이 마이크로서비스와 비교되는지 설명한다. 두 접근법은 소유권과 배포를 분리하지만 마이크로 프런트엔드는 브라우저 인터페이스에 independency를 적용한다. 현재 도구에서 모듈 연합 사용 싱글 스파가 라이프 사이클 기반 애플리케이션 등록을 원하는 팀이 있는 경우 오케스트레이션 옵션으로 남아 있다.
예를 들어, 체크아웃 팀은 결제 흐름 수정을 릴리스할 수 있다. 카탈로그 팀은 카탈로그 프래그먼트의 릴리스 속도에 영향을 받지 않도록 계속 개발할 수 있다. shell은 런타임 구성에 따라 승인된 슬라이스를 로드하기 때문에 independent 배포 경계, 비주얼 컴포넌트의 분리된 모습이 아님, 이 아키텍처의 주요 이점이다.
팀이 주변 플랫폼을 평가할 때도 고려해야 하는 것은 프런트엔드 시스템의 애플리케이션 인프라because repositories and frameworks alone won’t provide reliable composition.
비교하는 Core Micro Frontend 패턴
모든 마이크로 프론트엔드 문제를 해결하는 단일 통합 메커니즘이 없기 때문에, 격리, 통신, 의존성 공유, 브라우저 동작, 운영 소유권을 비교하여 가장 최신 도구를 선택하는 대신 선택하세요.
| 패턴 | 격리 | 페이지/영역: Capgo Builder / 네이티브 클라우드 빌드 제품 페이지. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. 보이는 곳: 페이지 네이티브-빌드.astro. 메시지 키 `native_build_v2_trust_iso_lbl` (네이티브 빌드 V2 Trust Iso Lbl). | 통합 모델 | 공유 의존성 | 성능 |
|---|---|---|---|---|---|
| 페이지/영역: 홈 페이지 문제/해결 섹션. 역할: 섹션 또는 페이지 제목. 보이는 곳: 페이지 프리미엄-서포트.astro. 메시지 키 `ps_help_performance_title` (Ps Help Performance Title). | 최적의 선택 | 프레임 | 강력한 프로세스 및 문서 격리 | 로드 및 통신 오버헤드가 추가될 수 있습니다. | 신뢰할 수 없는, 오래된, 또는 매우 분리된 경험 |
| 웹 컴포넌트 | 캡슐화된 요소와, 사용되는 경우, Shadow DOM 스타일링 | 쉘에 의해 마운트되는 커스텀 요소 | 공유된 디자인 토큰 및 브라우저 API | 종종 예측할 수 있지만 컴포넌트의 무게에 따라 달라질 수 있습니다. | 프레임워크의 유연성을 필요로 하는 표준 지향 팀 |
| 모듈 연합 | 런타임 격리 정도가 중간 | 런타임에 로드되고 마운트되는远程 모듈 | explicitly negotiated 또는 bundled 의존성 | 속도 개선과 중복 제거가 제어되는 경우 | Independent release를 지원하는 밀접한 통합 애플리케이션 |
| single-spa | complete isolation 모델 대신 오케스트레이션 경계 | 애플리케이션 등록을 위한 라이프 사이클 훅 | 애플리케이션과 루트 구성에 따라 | 로드 규칙과 프레임워크 구성에 따라 | 라우트 기반 활성화로 멀티 프레임워크 오케스트레이션 |
Iframes
이프레임은 이 비교에서 가장 강력한 경계를 제공한다. 내장된 애플리케이션은 자신의 문서, 스타일, 자바스크립트 환경을 가지고 있기 때문에 주최 페이지의 DOM을 의도적으로 변형하지 않는다. 교차 창 메시징은 제어된 통신 경로를 생성할 수 있다.
이러한 분리 때문에 이프레임은 레거시 시스템, 파트너 경험, 또는 유지해야 하는 별도의 콘텐츠에 유용하다. 비용은 반응형 레이아웃, 내비게이션, 접근성, 포커스 관리, 공유 인증에 나타난다. 체크아웃 이프레임은 주최 애플리케이션과 내장된 애플리케이션 간에 신중히 협력하지 않으면 외래 표면처럼 느껴질 수 있다.
웹 컴포넌트
웹 컴포넌트는 브라우저 표준을 사용하여 모든 팀이 동일한 프레임워크를 채택할 필요가 없습니다. 커스텀 엘리먼트는 안정적인 마운팅 표면을 정의하고, Shadow DOM은 스타일 누출을 제한할 수 있습니다. 셸은 여전히 애플리케이션 라우팅, 로딩 상태, 오류 경계, 공유 디자인 토큰을 처리해야 합니다.
이 옵션은 팀이 브라우저가 모든 슬라이스에 대한 애플리케이션 런타임을 로드하지 않도록 프레임워크의 유연성을 원할 때 잘 작동합니다. 자동으로 의존성 크기, 상태 통신, 또는 관리를 해결하지는 않습니다. 커스텀 엘리먼트는 여전히 큰 애플리케이션을 포함할 수 있으며 자신의 운영 복잡성을 가지고 있습니다.
모듈 연합
Webpack 5에서 소개된 모듈 연합은 런타임에 컴파일된 모듈을 원격 엔트리에서 로드합니다. 이는 공유 컴포넌트와 협조된 네비게이션을 iframe과 비교해 더 자연스럽게 느껴지게 합니다.
이 편리함은 책임을 부여합니다. 팀은 호환된 노출 인터페이스, 공유 의존성의 규칙, 원격 버전 관리, 원격이 로드되지 못할 때 복구 계획이 필요합니다. 모노리틱과 마이크로서비스 아키텍처의 차이 provides useful context for separating deployment independence from simple code decomposition.
싱글 스파
single-spa는 프레임워크에 독립적인 오케스트레이터로 작동합니다. 팀은 애플리케이션과 라이프사이클 훅을 등록하고, 루트 구성이 경로나 다른 조건에 따라 활성화합니다. 다양한 프레임워크로 빌드된 애플리케이션을 조정할 수 있지만, 계약, 의존성 정책, 성능 지출, 보안 제어의 필요성을 제거하지는 않습니다.
팀은 이러한 메커니즘을 결합할 수 있습니다. 예를 들어, single-spa 루트는 경로를 조정할 수 있고, Module Federation은 원격 모듈을 제공하고, 웹 컴포넌트는 공개 마운팅 표면을 정의할 수 있습니다. 이러한 combination은 강력할 수 있지만, 추가된 layer당 개발자가 이해하고 테스트해야 하는 동작의 수는 증가합니다.
장점과 단점, 숨겨진 위험
크기
| 장점 | 단점 / 숨겨진 위험 | 팀 자율성 |
|---|---|---|
| 팀은 비즈니스 슬라이스를 종단에서 종단으로 소유합니다. | 팀은 별도의 pipeline을 유지하고, on-call 소유권, 및 릴리스 규율을 유지해야 합니다. | 배포 |
| 프래그먼트는 전체 인터페이스를 재빌드하지 않고도 배포할 수 있습니다. | 장점과 단점, 숨겨진 위험 | 배포 버전이 비원자적이 되므로, 상호 불일치하는 버전이 운영 환경에서 만나게 됩니다. |
| 실패 분리 | 원격 서버가 실패하더라도 대체로 fallback을 통해 포함할 수 있습니다. | 오류 경계가 좋지 않으면, 네비게이션 또는 중요한 여행이 사용할 수 없게 됩니다. |
| 성능 | 컨텍스트: 홈페이지 문제/해결 섹션. 역할: 섹션 또는 페이지 제목. 보이는 곳: 페이지 premium-support.astro. 메시지 키 `ps_help_performance_title` (Ps Help Performance Title). | More requests, duplicated framework code, and remote initialization can hurt runtime performance |
| 더 많은 요청, 중복된 프레임워크 __CAPGO_KEEP_0__, 및 원격 초기화가 런타임 성능에 악영향을 미칠 수 있습니다. | 기술 선택 | 팀은 경계가 허용되는 곳에서 다른 프레임워크를 사용할 수 있습니다. |
| 디버깅, 접근성, 디자인 일관성 및 채용이 혼합 스택에서 어려워집니다. | 보안 | The shell may execute remote code that it hasn’t adequately verified |
| Governance | 공통 표준은 일관된 제품을 보장할 수 있습니다 | 디자인 시스템, 의존성 규칙, 계약 및 플랫폼 지원은 지속적인 협조가 필요합니다 |
성능 청구서
Independent slices usually produce separately built assets. Without careful loading rules, the browser may request more files, initialize more code, or download duplicate framework dependencies. Performance guidance for micro frontends emphasizes on-demand loading, careful dependency sharing, module-level caching, and failure isolation.
실용적인 디자인은 기존 애플리케이션의 기준선으로 시작합니다. 경로 시작, 번들 구성, 원격 로딩, 초기화 및 사용자에게 보이는 실패를 측정한 후, 쉘과 각 높은 교통량의 슬라이스에 대한 예산을 설정합니다. 느슨한 로딩은만약 애플리케이션이 긴 원격 모듈의 연쇄에 대한 крит적 여행을 막지 않는다면 도움이 됩니다.
보안의 틈새
원격 모듈은 자동으로 안전하지 않습니다. 쉘은 실행하지 않은 code을 실행할 수 있고, 프론트엔드 경계는 API 또는 토큰 서비스의 인증을 대체하지 않습니다. 보안에 중점을 둔 마이크로 프론트엔드 분석 trust, signing, integrity checks, 및 authorization이 디자인에 주목을 받기 전에 팀이 런타임 code을 배포하기 전에 왜 신뢰, 서명, 무결성 검사 및 인증이 중요하다는 것을 강조합니다.
버전 차이는 또 다른 위험의 클래스를 생성합니다. 프래그먼트는 단독으로 작동할 수 있지만 다른 쉘 버전, 공유 라이브러리, 디자인 토큰 세트 또는 이벤트 페이로드와 만날 때 실패합니다. Nx의 아키텍처 지침 identifies coordination, environment configuration, application efficiency, and reusability as continuing challenges.
아키텍처는 조정에서 회의를 삭제하지 않습니다. 아키텍처는 조정에서 계약, 자동화, 관찰성, 그리고 통치로 조정의 방식을 바꿉니다.
팀도 공유 의존성의 명확한 소유권, 접근성 검토, 인시던트 대응, 그리고 롤백 결정이 필요합니다. 만약 nobody가 플랫폼 layer를 소유하지 않으면, 각 제품 팀은 구성 방식을 다르게 해결하고, 사용자는 결과하는 불일치로 하나의 깨진 애플리케이션을 경험합니다.
Testing Deployment and Migration Practices
Testing은 애플리케이션의 실행 방식을 반영해야 합니다. 프래그먼트가 자신의 단위 테스트를 통과해도, 셸이 제공하는 변경된 경로, 예상치 못한 인증 상태, 또는 다른 공유 의존성으로 인해 프래그먼트가 실패할 수 있습니다.
Build a layered test system
각 프래그먼트에 대한孤立된 테스트부터 시작합니다. 이 테스트는 렌더링, 비즈니스 규칙, 키보드 동작, 로딩 상태, 그리고 로컬 오류 처리를 검증합니다. 이 테스트는 풀 셸이 필요하지 않습니다.
계약 테스트는 그 위에 있습니다. 계약 테스트는 셸과 프래그먼트 간의 인터페이스를 검증합니다. 이에는 마운트 입력, 경로 패턴, 전송 이벤트, 예상된 페이로드, 인증 가정, 그리고 폴백 동작이 포함됩니다. 계약 테스트는 프로덕션 전에 하나의 팀이 다른 팀이 소비하는 인터페이스를 변경하면 실패해야 합니다.
쉘 통합 테스트는 실제 프래그먼트 아티팩트를 로드하는 대표적인 구성에서 수행됩니다. 이 테스트는 라우팅, 인증 전환, 공유 네비게이션, 로딩 실패, 버전 Combination을 포함하여 모든 경로를 커버해야 합니다. 종단 간 테스트는 상위에 위치해야 하며, 사용자가 제품을浏览, 로그인, 체크아웃을 완료하는 여러 독립적으로 전달되는 슬라이스를 통해 완전한 여행을 검증합니다.

릴리즈 표면을 제어합니다.
버전 매니페스트를 사용하여 쉘이 로드하는 정확한 프래그먼트 아티팩트를 식별할 수 있습니다. 매니페스트는 또한 원격 릴리즈가 오류를 일으킬 때 운영자에게 알려진 좋은 버전을 고정할 수 있는 장소를 제공합니다.
유용한 제어 요소는 다음과 같습니다:
- 기능 플래그: 내부 사용자 또는 선택된 경로에 새로운 프래그먼트를 활성화하여 광범위한 노출 전에 테스트합니다.
- 캐니 디릴리: 오류, 로딩 실패, 주요 비즈니스 액션을 모니터링하는 동안 새로운 아티팩트로 제한된 사용자에게 지시합니다.
- 관찰 가능한 번들: 로그, 추적, 클라이언트 오류에 릴리즈 식별자를 추가하여 실패하는 프래그먼트를 식별할 수 있는 팀에게 알려줍니다.
- 롤백 경로: 이전 호환성 있는 아티팩트를 유지하고 재버전을 운영적인 동작으로 만들 수 있도록 하세요. 수동적으로 다시 빌드하는 것이 아닌.
팀은 shell과 fragment를 함께 프로덕션 환경에서 테스트해야 합니다. 성공적인 로컬 실행은 사용자가 올바르게 동작하는지 확인하기 위해 콘텐츠 전달 경로, 캐시, 인증 토큰, 또는 원격 매니페스트가 올바르게 동작하는지 확인하는 데 충분하지 않습니다. 배포 자동화 관행 반복 가능한 승격 및 롤백 워크플로우를 지원할 수 있지만, 아키텍처는 명확한 소유권이 필요합니다.
한 도메인을 한 번에 이동하세요
스트англ러 마이그레이션은 모노리틱에서 새로운 프래그먼트로 하나의 기능을 이동시키는 반면 나머지는 변경되지 않습니다. 기능 토글은 병렬 실행을 지원하여 팀이 새로운 경로와 기존 Implementation을 비교할 수 있도록 허용합니다. 그 후 새로운 경로가 기본 경로가 되도록 만듭니다.
판매용 애플리케이션을 고려해 보세요. 카탈로그, 계정, 체크아웃 팀이 각각 별도로 있습니다. shell은 네비게이션 및 인증을 소유하고 있으며 카탈로그 팀은 제품 브라우징을 소유하고 있으며 계정 팀은 프로필 설정을 소유하고 있으며 체크아웃 팀은 카트 및 결제 흐름을 소유합니다. 각 팀은 자신의 아티팩트를 발행하고 contract 테스트는 경로 및 이벤트 계약을 보호합니다.
낮은 위험 도메인부터 시작하여 플래그 뒤에 발행하고 실제 여행을 통해 관찰하세요. 확장하기 전에 팀이 도메인을 배포, 진단, 롤백할 수 있어야 합니다. 이는 전체 조직이 릴리스를 조정해야 하는 것을 피하기 위해.
Capacitor와 Electron에서 Micro Frontends를 사용하세요
A Capacitor 또는 Electron 애플리케이션은 브라우저 셸에 또 다른 셸을 추가합니다. Capacitor은 웹 code을 네이티브 모바일 WebView 내에 배치합니다. 반면 Electron은 웹 code을 데스크톱 렌더러 프로세스 내에서 실행합니다. 두 경우 모두 앱은 런타임에 선택한 프론트엔드 아티팩트를 로드하는 데 사용할 수 있는 로컬 셸을 로드할 수 있습니다. 로컬 셸은 로컬 프론트엔드 아티팩트를 로드하는 대신 모든 인터페이스 변경을 네이티브 바이너리 내에埋어둘 필요가 없습니다.
그런 배치가 유용한 릴리스 분할을 만듭니다. 네이티브 기능, 권한 및 브리지를 포함한 code은 설치된 애플리케이션과 함께 유지됩니다. 그러나 계정, 도움말, 카탈로그 또는 설정과 같은 웹 소유 표면은 별도의 배포 경로를 따를 수 있습니다. 셸은 여전히 프래그먼트의 원천을 결정하고, 승인된 버전을 결정하고, fetch 또는 검증 단계가 실패할 경우 애플리케이션이 수행해야 하는 작업을 결정해야 합니다.
실시간 업데이트 및 롤백
실시간 업데이트 시스템은 프론트엔드 아티팩트를 릴리스 가능한 소프트웨어로 다루어야 합니다. 그것은 서명된 번들을 전달해야 하며, 활성화 전에 서명된 번들을 검증하고, 스테이지드 롤아웃을 위한 릴리스 채널을 지원하고, 다음 런칭 시 업데이트를 적용하는 대신 활성 세션을 중단하지 않고, 자동 롤백 보호를 제공하며, 원자적 재귀를 통해 이전에 알려진 좋은 상태로 되돌릴 수 있어야 합니다.
이러한 제어는 자연스럽게 마이크로 프론트엔드 전달에 매핑됩니다. 모바일 또는 데스크톱 셸은 매니페스트를 고정하고, 호환 가능한 프래그먼트를 가져와, 서명된 프래그먼트를 검증하고, 완전한 번들을 사용할 수 있을 때만 활성화할 수 있습니다. 다음 런칭 시 실패가 감지되면 업데이터는 사용자에게 부분 업데이트된 인터페이스를 남기지 않고 이전에 알려진 좋은 상태로 되돌릴 수 있습니다.
Capgo는 이 배달 모델의 하나입니다. CapacitorJS 및 Electron 앱을 위한 API의 실시간 업데이트 플랫폼은 서명된 웹 번들을 배포하고, 특정 채널을 지원하며, 다음 런칭 시 업데이트를 적용하고, 로그, 버전 기록, 채택 및 실패 메트릭, 롤백 보호, CI/CD 통합 및 __CAPGO_KEEP_2__를 제공합니다. native bridge를 고려하는 팀은 native bridge의 작동 방식을 이해해야 합니다. Capacitor는 웹과 native code을 연결하는 방법을 이해해야 합니다..

native shell에서 변경 사항
native wrapper는 브라우저 전용 애플리케이션에遇할 수 없는 제약을 도입합니다:
- 연결성: 장치가 오프라인일 때, 프래그먼트가 사용할 수 없으므로, shell은 캐시된 아티팩트 또는 로컬 폴백을 필요로합니다.
- 호환성: 웹 번들이 설치된 바이너리가 지원하지 않는 native bridge 동작에 의존할 수 있습니다.
- 보안: remote code는 애플리케이션 컨텍스트에서 인증, 무결성 검사 및 권한 부여가 필요합니다.
- 복구: shell이 무효한 패키지를 거부하고 즉시 저장 배포가 필요하지 않으면서도 작동하는 버전을 복원할 수 있어야 합니다.
- 세션 안전성: 결제나 양식 흐름 중 업데이트를 진행하면 불일치된 상태가 발생할 수 있으므로 다음 런칭 활성화가 현재 작업을 중단하는 것보다 안전합니다.
이 모델은 배포 플랫폼이 원자적 활성화와 세부 릴리스 메트릭을 제공할 때 롤백 강화가 강화됩니다. 그러나 팀이 웹 독립성이 네이티브 호환성 계획을 제거한다고 가정하면 아키텍처가 복잡해집니다. 네이티브 셸은 계약 경계가 남아 있으며 모든 프래그먼트는 그것을 존중해야 합니다.
마이크로 프런트엔드 사용하기
마이크로 프런트엔드를 사용할 때 Independent 배포가 실질적인 요구 사항일 때여러 팀이 분리된 제품 표면을 소유하고 있거나, 장기적인 마이그레이션 기간 동안 레거시 및 새로운 인터페이스가 공존해야 할 때, 또는 기술 다양성이 단일 빌드가 깨끗하게 처리할 수 없는 프레임워크 경계를 정당화할 때
다음과 같은 경우 피해야 합니다.
작은 팀이 한 개의 프런트엔드를 편안하게 소유할 수 있는 경우
- 도메인이 광범위한 가변 상태를 공유하는 경우 또는 조직이 신뢰할 수 있는 CI, 관찰성, 계약 테스트, 롤백 절차가 없을 때, 분산 인터페이스는 그런 기반 위에서만 자율성을 제공합니다. 그러나 그것은 실패의 장소가 더 많아집니다.
- 경계: 쉘과 슬라이스가 안정적인 계약을 통해 통신할 수 있나요?
- 릴리즈 필요: 팀이独立적으로 배포할 필요가 있나요?
- 운영 준비 상태: 프래그먼트를 모니터링, 테스트, 핑, 롤백할 수 있나요?
- 사용자 가치: 분할이 성능이나 일관성을 손상시키지 않고 배달을 개선할 수 있나요?
헬프 콘텐츠나 설정과 같은 낮은 위험 영역에서 시작하세요. 마운트 계약, 경로 소유권, 이벤트, 디자인 토큰, 기본 동작, 버전 정책을 정의하세요. 기능 플래그 뒤로 배포하고 추가된 번들 및 로딩 비용을 측정하고 새로운 채널, 매니페스트, 의존성 규칙, 롤백 경로를 문서화하세요.
마이크로 프론트엔드는 조직 및 릴리즈 독립성을 위한 도구입니다. 릴리즈 문제가 작다면 모듈러 모노리식이 더 좋은 답변이 될 수 있습니다. 조정 문제가 크고 지속적이라면 신중하게 관리되는 마이크로 프론트엔드 아키텍처는 팀에게 자율성을 제공할 수 있습니다.
If you’re evaluating micro frontends for a Capacitor or Electron product, Capgo Capgo에서 signed web bundles를 통제된 채널을 통해 전달할 수 있고, 다음 런칭 시 업데이트를 활성화하고 롤백 보호를 통해 복구할 수 있습니다. Capgo의 전달, 관찰성, 및 API 옵션을 검토하기 전에 프래그먼트 릴리스 프로세스를 설계하기 전에 방문하세요.