Masterclass

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

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

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

Descripción de la masterclass

Joaquín Martí nos muestra el código de una aplicación real basada en monorepos.

Un Monorepo se refiere a un enfoque de gestión de código en el que todos los proyectos y componentes de software se almacenan en un solo repositorio, lo que permite que los equipos de desarrollo compartan el mismo código desde una ubicación centralizada. Esta estructura se ha convertido en una alternativa popular a los repositorios divididos en varios proyectos.

¿Cómo funciona un Monorepo?

En un Monorepo, todos los proyectos y componentes de software están almacenados en una sola ubicación. La capa de interfaz, los componentes de UI y las librerías de manejo de datos son fundamentales en este enfoque de gestión de código. Además, el Monorepo permite separar el código de responsabilidad para poder cambiar piezas y dependencias sin afectar el resto.

Este enfoque también tiene una única versión de todos los paquetes, separados entre aplicaciones y librerías. Para manejar las dependencias y compilar aplicaciones, se utiliza Yarn.

Pruebas y validación con Playground

El equipo utiliza Playground para hacer pruebas de validación de formularios y variaciones de formularios sin la necesidad de crear una nueva página en la web de producción. Esto les permite hacer cambios y ajustes a los formularios sin afectar el funcionamiento de la página web.

Bibliotecas de UI, tipos e iconos

Además, el equipo trabaja con bibliotecas de UI, bibliotecas de tipos y bibliotecas de iconos. Las bibliotecas de UI permiten al equipo utilizar componentes predefinidos para construir la interfaz de usuario de una aplicación de forma más rápida y sencilla.

Las bibliotecas de tipos ayudan a mantener la integridad del código y evitar errores en la programación. Finalmente, las bibliotecas de iconos brindan al equipo una variedad de iconos que pueden ser utilizados en la interfaz de usuario de la aplicación.

Podrás ver a:

Joaquín Martí

Senior Frontend Developer

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