Deja de repetir código en tus aplicaciones, ¡Monorepos al rescate!
Alejandro Ñáñez Ortiz, Frontend Engineer @Zapier
@alejandronanez
https://alejandro.dev
El común denominador
Un proyecto de frontend en Github
proyecto/frontend
Aplicación web
El frontend en detalle
Componentes de React (UI)
Componentes con estado
Componentes sin estado
Redux
Redux Store
Action creators
Selectors
Reducers
Utils, API wrappers, Middleware, hooks
API
Data transformation
Redux Middlewares
Hooks
Frontend
Utils
Mientras tanto, el cliente...
Una aplicación móvil...
¿Cómo lo solucionamos?
Separación de conceptos
Opción 1 - no monorepo:
Publicar paquetes a NPM
Agreguemos un nuevo reducer
cd @reactweek/redux
Escribir el nuevo reducer
Escribir pruebas!
¿Pero cómo? ¿Contra qué probar nuestro código?
npm/yarn link
cd @reactweek/web
npm/yarn link @reactweek/redux
Todo “funciona”*
Crear el Pull Request en @reactweek/redux
Merge del Pull Request en @reactweek/redux
npm publish con la nueva versión de @reactweek/redux
Actualizar dependencias en los consumidores
¡11 Pasos!
¡Hay un BUG!
Opción 2 - Monorepos:
:D
Muchos proyectos en un repositorio
Monolito
!==
Monorepo
Estructura de archivos
/package.json
¿Qué hay en cada paquete?
/packages/web
/packages/web/package.json
Paquetes en el monorepo
common
Creemos un store compartido en
/packages/redux/
/packages/redux/store.js
/packages/redux/index.js
/packages/redux/package.json
Importemos el store compartido en /packages/mobile/
/packages/mobile/package.json
/packages/mobile/App.js
Importemos el store compartido en /packages/web/
/packages/web/package.json
/packages/web/src/index.js
Siguientes pasos:
React Native Web
Storybook
Linter & Pruebas unitarias
https://alejandro.dev