Masterclass

Arquitectura de un proyecto web basado en monorepo con Joaquín Martí

Cómo organizar un proyecto con dependencias pensando en el futuro.

Joaquín Martí

Desde 15€/mes

01:33:57

Suscríbete para ver la masterclassDesde 15€/mes

Duración total: 01:33:57
Código descargable
Acceso 100% online

Guía práctica sobre cómo estructurar un monorepo: separación en aplicaciones y librerías, control de dependencias, Yarn Workspaces, librerías compartidas, UI y testing.

Qué vas a aprender

1Definición y diferencias entre monorepo y repositorio monolítico
2Separación en capas: aplicaciones finales versus librerías compartidas
3Uso de Yarn Workspaces para orquestar paquetes en un monorepo
4Control y minimización de dependencias para aumentar la durabilidad
5Estructura concreta: apps, libs, playground y configuraciones raíz
6Librerías clave: types, icons, UI, data manager y node-specific
7Patrón de fachada para manejo de estado (encapsulación de Redux Toolkit)
8Flujo de desarrollo: Storybook, playground y tests end-to-end
9Decisión de evitar herramientas adicionales (NX) por simplicidad
10Theming y design tokens funcionales para componentes reutilizables

Explora los capítulos

1. Qué es un monorepo [19:13]

Qué es un monorepo

[00:22]

Compartir código entre equipos de desarrollo.

[01:11]

Aplicaciones separadas en un Monorepo.

[02:39]

Desarrollo de productos con AI o análisis de datos.

[00:39]

Front-end con múltiples lenguajes de programación. 🔥

[02:52]

Tomar decisiones de dependencias para durabilidad del software.

[01:35]

Librerías compartidas para reutilización de funciones, componentes y clases.

[01:34]

Capa de interfaz y manejo de datos son fundamentales.

[02:34]

Entender dependencias clave para durabilidad del software. 🔥

[01:03]

Separación de código de responsabilidades.

[02:00]

Única versión de paquetes en el Monorepo.

[02:44]

2. Yarn para gestionar workspaces [15:59]

Yarn para gestionar workspaces

[00:49]

Yarn Workspaces conecta paquetes internamente. 🔥

[00:48]

Package.json principal define workspaces para aplicaciones.

[01:33]

Scripts personalizados para lanzar todas las aplicaciones.

[02:51]

Mantener repositorio limpio.

[00:25]

Resolución de dependencias en Workspaces.

[04:21]

Mantener dependencias nativas en el Monorepo.

[00:40]

NX compila y ayuda con dependencias 🔥

[00:59]

No se necesita namespace para portabilidad

[03:33]

3. Playground [20:33]

Playground

[05:03]

Cambio de cultura y acceso difícil 🔥

[02:46]

Aplicaciones tienen test end-to-end

[04:51]

Librería de tipos es simple 🔥

[00:06]

Librería de iconos exporta SVGs

[02:38]

Hay aplicación enfocada en métricas conjuntas

[00:28]

Espacio crece en diferentes apps, móviles separados

[04:41]

4. Librerías de datos y UI [37:22]

Librerías de datos y UI

[01:02]

Data Manager trae datos de remotos con GraphQL

[01:36]

Data Manager maneja estado con Redux

[02:43]

Refactor permite High Charts y Apex Charts

[01:22]

Patrón permite cambios sin romper 🔥

[04:25]

Librería UI tiene todos los componentes visuales

[01:52]

Cada componente tiene misma estructura

[02:01]

UI tiene theming con custom props 🔥

[00:22]

Tokens describen uso, no contenido

[03:49]

CSS tiene modo oscuro y media queries

[02:32]

Convenciones en sistema de diseño

[03:51]

Componentes reciben datos y callbacks

[03:05]

Higher component encapsula estado

[05:37]

Proveedor genérico con typescript en desarrollo

[02:06]

Explicación de librerías y aplicaciones

[00:59]

Podrás ver a:

Joaquín Martí

Senior Frontend Developer

Desde 15€/mes