Playbook

Singleton reacciona entre controles remotos (Singleton Reacciona Entre Controles Remotos)

Singleton React Between Remotes: una lección de producción en operaciones logísticas.

Plataforma Logística Micro Frontend (Federación de Módulos)

Parte 4 de 10

Una serie de paneles de operación logística divididos en controles remotos de shell, autenticación y funciones con Module Federation.

Micro frontend architecture diagram

Reacción Singleton entre controles remotos

Two React sin configuración compartida = infierno de gancho silencioso. Las instancias duplicadas de React rompen los ganchos y el contexto; Los singleton compartidos por la federación evitan tiempos de ejecución duales.```text shared: react + react-dom singleton


## Conceptos en la primera mención```text
📦 Shell (Host)
Remotes'u yükleyen, ortak layout ve üst seviye routing taşıyan uygulama.

📦 Remote
remoteEntry.js üzerinden modül expose eden bağımsız build.

📦 Expose Path
Tüketicilerin import ettiği public modül yolu (ör. auth/Login).

📦 Shared Singleton
React gibi bağımlılıkların tek kopyada çalışmasını zorunlu kılan Federation ayarı.
```Al no poder distinguir estos conceptos, el equipo confunde la interfaz de usuario y el límite de integración.

## Forma del problema

Las instancias duplicadas de React rompen los ganchos y el contexto; Los singleton compartidos por la federación evitan tiempos de ejecución duales.```text
shared: react + react-dom singleton
```## Distinción de empleados

Two React sin configuración compartida = infierno de gancho silencioso.```text
shared: react + react-dom singleton
        ↓
   explicit contract
```## Ubicación rota en producción

El incidente se magnifica cuando se oscurecen los supuestos de contrato o radio/identidad/despliegue. Contrato visible, revocación visible.

## Los enfrentamientos más confusos de este episodio.```text
❌ Her şey tek uygulamada daha güvenli
✓ Sınırlar net değilse tek uygulama daha kırılgandır

❌ Konfigürasyon kodda hardcoded kalsın
✓ Yarıçap, remote URL ve expose path operasyonel kontratlardır

❌ Vendor/API gerçeği UI state'tir
✓ Vendor feed kanıt, ops state karardır

Lista de verificación de su propio sistema

  1. Escriba el límite de propiedad de esta superficie en una oración.
  2. ¿Quién implementa qué cambios de contrato?
  3. ¿Qué muestra la interfaz de usuario en caso de tiempo de espera o retraso del proveedor?
  4. ¿Pruebas escenarios independientes e integrados por separado?
  5. Lista de denegación: ¿hay una filtración del dominio de la empresa/proveedor en el contenido?

Cosas para recordar de esta sección

  1. El contrato debe ser visible: exponer ruta, radio, estado del ticket o URL remota.
  2. La brecha entre la interfaz de usuario y el sistema externo es una decisión de diseño, no un error.
  3. Despliegue independiente significa reversión independiente.

El límite que escondes te encontrará en producción.

FAQ

Frequently asked questions

¿Qué es Shell (host)?

Aplicación que instala controles remotos, tiene un diseño común y enrutamiento de alto nivel.

¿Qué es remoto?

Compilación independiente que expone el módulo a través de remoteEntry.js.

¿Es cierto que "todo es más seguro en una sola aplicación"?

La solicitud única es más frágil si los límites no están claros

¿Qué soluciona esta sección?

Two React sin configuración compartida = infierno de gancho silencioso. Two React sin configuración compartida = infierno de gancho silencioso. Las instancias duplicadas de React rompen los ganchos y el contexto; Los singleton compartidos por la federación evitan tiempos de ejecución duales.

Principios de ingeniería aprendidos

  • Los límites de propiedad y publicación son tan reales como el modelo de dominio.
  • El sistema externo produce evidencia; La situación operativa la decides tú.
  • Gestionar el contrato como un semver; estrenar detalle interior.

Continuar leyendo

Continuar leyendo

Siguiente en la serie

Siguiente en la serie

Misma serie

Paylaş