TypeScript todo en uno: El Monorepo con sus agravios y ganancias
En este artículo, no voy a comparar monorepo y polyrepo ya que se trata de filosofía. En su lugar, me centraré en la experiencia de construir y evolucionar y asumiré que estás familiarizado con el ecosistema JS/TS.
GaoFounder
Deja de perder semanas en la autenticación de usuarios
Lanza aplicaciones seguras más rápido con Logto. Integra la autenticación de usuarios en minutos y concéntrate en tu producto principal.
Vi el enfoque de monorepo mientras trabajaba para Airbnb, pero era solo para el frontend. Con un profundo amor por el ecosistema de JavaScript y la "feliz" experiencia de desarrollo de TypeScript, empecé a alinear el código de frontend y backend en el mismo idioma hace ~tres años. Fue genial (para contratar) pero no tan genial para desarrollar ya que nuestros proyectos aún estaban dispersos en múltiples repositorios.
Como dice el dicho, “la mejor manera de refactorizar un proyecto es comenzar uno nuevo”. Así que cuando estaba comenzando mi startup hace un año, decidí utilizar una estrategia total de monorepo: poner proyectos de frontend y backend, incluso esquemas de base de datos, en un solo repositorio.
En este artículo, no compararé monorepo y polyrepo ya que se trata de filosofía. En su lugar, me centraré en la experiencia de construir y evolucionar y asumiré que estás familiarizado con el ecosistema JS/TS.
Hablando francamente, soy un fanático de JavaScript y TypeScript. Amo la compatibilidad de su flexibilidad y rigurosidad: puedes retroceder a unknown o any (aunque prohibimos cualquier forma de any en nuestro código), o usar un conjunto de reglas de lint superpuntuales para alinear el estilo de código en todo el equipo.
Cuando hablábamos del concepto de “fullstack” antes, generalmente imaginamos al menos Dos ecosistemas y lenguajes de programación: uno para frontend y uno para backend.
Un día, de repente me di cuenta que podría ser más simple: Node.js es suficientemente rápido (créeme, en la mayoría de los casos, la calidad del código es más importante que la velocidad de ejecución), TypeScript es lo suficientemente maduro (funciona bien en grandes proyectos de frontend), y el concepto de monorepo ha sido practicado por muchos equipos famosos (React, Babel, etc.) - entonces, ¿por qué no combinamos todo el código, desde el frontend hasta el backend? Esto puede hacer que los ingenieros hagan los trabajos sin cambios de contexto en un solo repositorio e implementen una característica completa en (casi) un solo idioma.
Era julio de 2021. Comencé con [email protected] ya que lo he estado usando durante mucho tiempo. Yarn era rápido, pero pronto me encontré con varios problemas con Yarn Workspaces. P.ej., no izando las dependencias correctamente, y toneladas de problemas están etiquetados con “fixed in modern”, que me redirige a la v2 (berry).
"Está bien, estoy actualizando ahora". Dejé de luchar con la v1 y empecé a migrar. Pero la larga guía de migración de berry me asustó, y me di por vencido después de varios intentos fallidos.
Por lo tanto, comenzó la investigación sobre los administradores de paquetes. Pnpm me absorbrió después de una prueba: rápido como yarn, soporte nativo de monorepo, comandos similares a npm, enlaces duros, etc. Lo más importante es que simplemente funciona. Como un desarrollador que quiere empezar con un producto pero NO desarrollar un administrador de paquetes, solo quería agregar algunas dependencias y comenzar el proyecto sin saber cómo funciona un administrador de paquetes o cualquier otros conceptos elegantes.
Basándonos en la misma idea, elegimos a un viejo amigo lerna para ejecutar comandos a través de los paquetes y publicar paquetes de espacio de trabajo.
Es difícil determinar claramente el alcance final de cada paquete al principio. Solo comienza con tu mejor intento de acuerdo con el estado actual, y recuerda que puedes refactorizar siempre durante el desarrollo.
Como estamos adoptando el ecosistema de JavaScript y usando TypeScript como nuestro principal lenguaje de programación, muchas elecciones son directas (basadas en mi preferencia 😊):
koajs para el servicio backend (core): tuve una difícil experiencia usando async/await en express, por lo que decidí usar algo con soporte nativo.
i18next/react-i18next para i18n (frases/ui): me gusta su simplicidad de API y el buen soporte de TypeScript.
Pero ambos producen una sensación extraña durante el desarrollo anterior:
Para ORM: No soy un fanático de los decoradores, y otra capa abstracta de la base de datos causa más esfuerzo de aprendizaje e incertidumbre para el equipo.
Para el generador de consultas: Es como escribir SQL con algunas restricciones (de una buena manera), pero no es SQL real. Por lo tanto, necesitamos usar .raw() para consultas en bruto en muchos escenarios.
Luego vi este artículo: “Deja de usar Knex.js: Usar el constructor de consultas SQL es un antipatrón”. El título parece agresivo, pero el contenido es genial. Me recuerda fuertemente que “SQL es un lenguaje de programación”, y me di cuenta que podría escribir SQL directamente (¡como CSS, cómo pude perderme esto!) para aprovechar el lenguaje nativo y las funciones de la base de datos en lugar de agregar otra capa y reducir el poder.
En conclusión, decidí seguir con Postgres y Slonik (un cliente de Postgres de código abierto), como indica el artículo:
…el beneficio de permitir al usuario elegir entre los diferentes dialectos de la base de datos es marginal y el tiempo extra de desarrollar para varias bases de datos a la vez es significativo.
Otra ventaja de escribir SQL es que podemos usarlo fácilmente como única fuente de verdad de las definiciones de TypeScript. Escribi un generador de código para transpilar esquemas SQL a código de TypeScript que utilizaremos en nuestro backend, y el resultado no se ve mal:
Incluso podemos conectar jsonb con un tipo de TypeScript y procesar la validación de tipo en el servicio de backend si es necesario.
Puedes notarlo, es un diagrama unidireccional, que nos ayudó mucho a mantener una arquitectura clara y la capacidad de expansión mientras el proyecto crece. Además, el código está (básicamente) todo en TypeScript.
Pnpm y lerna están haciendo un trabajo impresionante en las dependencias internas del espacio de trabajo. Usamos el siguiente comando en la raíz del proyecto para agregar paquetes hermanos:
Esto agregará @logto/schemas como una dependencia a @logto/core. Mientras mantiene la versión semántica en package.json de sus dependencias internas, pnpm también puede enlazarlas correctamente en pnpm-lock.yaml. El resultado se verá así:
Tratamos cada paquete en monorepo como “independiente”. Por lo tanto, podemos usar el enfoque estándar para compartir configuraciones, que abarca tsconfig, eslintConfig, prettier, stlyelint, y jest-config. Consulta este proyecto para ver un ejemplo.
Utilizo VSCode para el desarrollo diario, y en resumen, nada es diferente cuando el proyecto está configurado correctamente:
ESLint y Stylelint funcionan normalmente.
Si estás utilizando el plugin ESLint de VSCode, agrega las siguientes configuraciones de VSCode para que respete la configuración de ESLint por paquete (reemplaza el valor de pattern con el tuyo):
husky, commitlint y lint-staged funcionan como se espera.
Estamos utilizando diferentes compiladores para frontend y backend: parceljs para UI (React) y tsc para todos los demás paquetes de TypeScript puros. Recomiendo encarecidamente que pruebes parceljs si aún no lo has hecho. Es un compilador de “cero configuración” que maneja elegantemente diferentes tipos de archivos.
Parcel aloja su propio servidor de desarrollo de frontend, y la salida de producción son solo archivos estáticos. Como nos gustaría montar APIs y SPA bajo el mismo origen para evitar problemas de CORS, la estrategia abajo funciona.
En el entorno de desarrollo, utiliza un simple proxy HTTP para redireccionar el tráfico al servidor de desarrollo de Parcel.
En producción, sirve archivos estáticos directamente.
Puedes encontrar la implementación de la función de middleware de frontend aquí.
Tenemos un script dev en package.json para cada paquete que detecta los cambios de archivos y recompila cuando es necesario. Gracias a lerna, las cosas se vuelven fáciles usando lerna exec para ejecutar scripts de paquetes en paralelo. El script raíz se verá así:
Nuestro equipo ha estado desarrollando bajo este enfoque durante un año, y estamos bastante contentos con él. Visita nuestro repositorio GitHub para ver la última forma del proyecto. Para resumir:
Agravios
Necesidad de familiarizarse con el ecosistema JS/TS
Necesidad de elegir el administrador de paquetes adecuado
Requiere una configuración adicional única
Ganancias
Desarrollar y mantener todo el proyecto en un solo repositorio
Simplificación de los requerimientos de habilidades de codificación
Estilos de código compartidos, esquemas, frases y utilidades
Mejora de la eficiencia de la comunicación
No más preguntas como: ¿Cuál es la definición de la API?
Todos los ingenieros hablan en el mismo lenguaje de programación
CI/CD con facilidad
Usa la misma cadena de herramientas para construir, probar y publicar
Este artículo deja varios temas sin cubrir: Configuración del repositorio desde cero, agregar un nuevo paquete, aprovechar las acciones de GitHub para CI/CD, etc. Sería demasiado largo para este artículo si expando cada uno de ellos. No dudes en comentar y hacerme saber qué tema te gustaría ver en el futuro.
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'%3e%3cg data-look='classic' id='Monorepo' class='cluster'%3e%3crect height='208' width='374.953125' y='112' x='8' style=''/%3e%3cg transform='translate(159.453125%2c 112)' class='cluster-label'%3e%3cforeignObject height='24' width='72.046875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eMonorepo%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_database_Esquemas_0' d='M280.156%2c62L280.156%2c66.167C280.156%2c70.333%2c280.156%2c78.667%2c280.156%2c87C280.156%2c95.333%2c280.156%2c103.667%2c280.156%2c111.333C280.156%2c119%2c280.156%2c126%2c280.156%2c129.5L280.156%2c133'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Frases_N%c3%bacleo_1' d='M84.565%2c191L80.963%2c195.167C77.361%2c199.333%2c70.157%2c207.667%2c68.984%2c215.447C67.811%2c223.227%2c72.668%2c230.454%2c75.097%2c234.067L77.526%2c237.68'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Frases_UI_2' d='M160.361%2c191L168.456%2c195.167C176.55%2c199.333%2c192.74%2c207.667%2c208.285%2c216.332C223.83%2c224.996%2c238.73%2c233.993%2c246.18%2c238.491L253.63%2c242.989'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Esquemas_N%c3%bacleo_3' d='M230.245%2c191L222.543%2c195.167C214.841%2c199.333%2c199.436%2c207.667%2c185.403%2c215.655C171.371%2c223.644%2c158.71%2c231.288%2c152.38%2c235.11L146.049%2c238.933'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_Esquemas_UI_4' d='M301.652%2c191L304.969%2c195.167C308.286%2c199.333%2c314.92%2c207.667%2c316.417%2c215.406C317.913%2c223.145%2c314.272%2c230.291%2c312.451%2c233.863L310.631%2c237.436'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(280.15625%2c 35)' id='flowchart-database-0' class='node default'%3e%3crect height='54' width='229.890625' y='-27' x='-114.9453125' style='' class='basic label-container'/%3e%3cg transform='translate(-84.9453125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='169.890625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eBase de datos Postgres%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(280.15625%2c 164)' id='flowchart-Esquemas-1' class='node default'%3e%3crect height='54' width='135.59375' y='-27' x='-67.796875' style='' class='basic label-container'/%3e%3cg transform='translate(-37.796875%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='75.59375'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eEsquemas%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(107.90625%2c 164)' id='flowchart-Frases-2' class='node default'%3e%3crect height='54' width='108.90625' y='-27' x='-54.453125' style='' class='basic label-container'/%3e%3cg transform='translate(-24.453125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='48.90625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eFrases%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(97.90625%2c 268)' id='flowchart-N%c3%bacleo-3' class='node default'%3e%3crect height='54' width='109.8125' y='-27' x='-54.90625' style='' class='basic label-container'/%3e%3cg transform='translate(-24.90625%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='49.8125'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eN%c3%bacleo%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(295.0546875%2c 268)' id='flowchart-UI-5' class='node default'%3e%3crect height='54' width='76' y='-27' x='-38' style='' class='basic label-container'/%3e%3cg transform='translate(-8%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='16'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eUI%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)