Escalabilidad y decisiones

Arquitectura

Componentización, diseño por features, microfrontends y trade-offs que se esperan de un Senior.

6 temas claveJunior → SeniorVersión 1
Progreso0%
0 de 6 dominados
★★★★★Mid → Senior🔥 Fundamental

Componentización y separación de responsabilidades

Un buen componente tiene una responsabilidad coherente, API clara y ownership de estado bien definido.

10–15 min
🟢 Base🟡 Entrevista🔴 Senior

Qué debes entender

Un buen componente tiene una responsabilidad coherente, API clara y ownership de estado bien definido.

Cómo funciona

Separar presentación y lógica es útil cuando reduce acoplamiento, no como regla mecánica para crear archivos diminutos.

Ejemplo

<ProductCard product={product} onAdd={addToCart} />

Pregunta típica

¿Cómo decides cuándo dividir un componente?

Respuesta Senior

Cuando hay una responsabilidad independiente, reutilización real, límites de cambios distintos o pruebas más claras; no solo por número de líneas.

Repasar

Volver arriba ↑
★★★★★Senior🔥 Escalabilidad

Arquitectura por features

Organizar por dominio agrupa componentes, hooks, API y tests que cambian juntos. Reduce dependencias horizontales globales.

10–15 min
🟢 Base🟡 Entrevista🔴 Senior

Qué debes entender

Organizar por dominio agrupa componentes, hooks, API y tests que cambian juntos. Reduce dependencias horizontales globales.

Cómo funciona

Los límites deben impedir imports arbitrarios entre features y exponer una API pública pequeña.

Ejemplo

features/checkout/{components,api,hooks,index.ts}

Pregunta típica

¿Por qué feature-first escala mejor que carpetas por tipo?

Respuesta Senior

Porque las personas trabajan por capacidad de negocio; reduce navegación y acoplamiento entre carpetas globales de components/services/hooks.

Repasar

Volver arriba ↑
★★★★★Senior🔥 Pregunta conceptual

SOLID aplicado a Front End

SOLID son heurísticas para gestionar cambio y dependencias. En Front End se expresan con composición, contratos y límites, no copiando patrones de backend literalmente.

10–15 min
🟢 Base🟡 Entrevista🔴 Senior

Qué debes entender

SOLID son heurísticas para gestionar cambio y dependencias. En Front End se expresan con composición, contratos y límites, no copiando patrones de backend literalmente.

Cómo funciona

Dependency inversion significa que la lógica de alto nivel depende de abstracciones: por ejemplo, inyectar un cliente en vez de importar fetch directamente.

Ejemplo

createCheckout({ paymentGateway })

Pregunta típica

¿Cómo aplicas Open/Closed en React?

Respuesta Senior

Prefiero composición y slots: extender comportamiento mediante props/componentes en vez de editar un componente con múltiples condicionales por cada caso.

Repasar

Volver arriba ↑
★★★★★Senior🔥 Vacante

Microfrontends y Module Federation

Microfrontends dividen ownership y despliegue por dominio. Module Federation puede cargar módulos remotos en runtime, pero añade coordinación de versiones y operación.

10–15 min
🟢 Base🟡 Entrevista🔴 Senior

Qué debes entender

Microfrontends dividen ownership y despliegue por dominio. Module Federation puede cargar módulos remotos en runtime, pero añade coordinación de versiones y operación.

Cómo funciona

El costo incluye UX consistente, dependencias compartidas, observabilidad, routing y fallos parciales. No es una solución a componentes grandes.

Ejemplo

shell → remote checkout → remote account

Pregunta típica

¿Cuándo NO usarías microfrontends?

Respuesta Senior

Con un equipo pequeño, una sola cadencia y bajo conflicto organizacional. Un monolito modular suele ser más simple y rápido.

Repasar

Volver arriba ↑
★★★★★Mid → Senior🔥 Alto valor

Design systems y accesibilidad

Un design system combina tokens, componentes, patrones y gobernanza. No es solo una librería visual.

10–15 min
🟢 Base🟡 Entrevista🔴 Senior

Qué debes entender

Un design system combina tokens, componentes, patrones y gobernanza. No es solo una librería visual.

Cómo funciona

La API debe permitir composición sin abrir inconsistencias. Accesibilidad y theming deben integrarse desde la base.

Ejemplo

<Button variant="primary" loading>Guardar</Button>

Pregunta típica

¿Cómo evitarías que un design system bloquee al producto?

Respuesta Senior

Roadmap compartido, escape hatches documentados, contribución federada, métricas de adopción y versionado predecible.

Repasar

Volver arriba ↑
★★★★★Senior🔥 Senior real

ADRs, trade-offs y evolución

Arquitectura es elegir compromisos bajo restricciones. Un ADR conserva contexto, decisión y consecuencias para evitar debates circulares.

10–15 min
🟢 Base🟡 Entrevista🔴 Senior

Qué debes entender

Arquitectura es elegir compromisos bajo restricciones. Un ADR conserva contexto, decisión y consecuencias para evitar debates circulares.

Cómo funciona

Una buena decisión incluye reversibilidad, costo operacional, impacto en equipos y señales para revisarla.

Ejemplo

ADR: adoptar Redux Toolkit para workflow X

Pregunta típica

¿Qué hace Senior una respuesta de arquitectura?

Respuesta Senior

Explicitar requisitos, opciones, trade-offs, riesgos, plan incremental y cómo medir si la decisión funciona.

Repasar

Volver arriba ↑