Frontend Monorepo: Gestione di Workspace con Lerna e Nx

Nel panorama in continua evoluzione dello sviluppo frontend, la gestione di progetti ampi e complessi può rappresentare una sfida significativa. Le tradizionali configurazioni multi-repo, pur offrendo isolamento, possono portare a duplicazione del codice, grattacapi nella gestione delle dipendenze e strumenti incoerenti. È qui che brilla l'architettura monorepo. Un monorepo è un singolo repository contenente più progetti, spesso correlati, che vengono costruiti e versionati insieme. Questo approccio offre numerosi vantaggi, ma la gestione efficace di un monorepo richiede strumenti specializzati. Questo articolo esplora due soluzioni popolari: Lerna e Nx.

Cos'è un Monorepo?

Un monorepo è un repository del sistema di controllo della versione che contiene codice per molti progetti. Questi progetti possono essere correlati o completamente indipendenti. La chiave è che condividono lo stesso repository. Aziende come Google, Facebook, Microsoft e Uber hanno adottato con successo i monorepo per gestire le loro enormi codebase. Pensa a Google che archivia quasi tutto il suo codice, inclusi Android, Chrome e Gmail, in un unico repository.

Vantaggi di un Monorepo

• Condivisione e Riutilizzo del Codice: Condividi facilmente il codice tra i progetti senza complessi flussi di lavoro di packaging e pubblicazione. Immagina una libreria di design system che può essere integrata perfettamente in più applicazioni all'interno dello stesso repository.
• Gestione Semplificata delle Dipendenze: Gestisci le dipendenze in un unico posto, garantendo coerenza tra tutti i progetti. L'aggiornamento della dipendenza di una libreria condivisa aggiorna automaticamente tutti i progetti che dipendono da essa.
• Modifiche Atomiche: Apporta modifiche che abbracciano più progetti in un singolo commit, garantendo coerenza e semplificando i test. Ad esempio, un refactoring che influisce sia sul frontend che sul backend può essere eseguito in modo atomico.
• Collaborazione Migliorata: I team possono collaborare facilmente su diversi progetti all'interno dello stesso repository, favorendo la condivisione delle conoscenze e lo sviluppo interfunzionale. Gli sviluppatori possono facilmente navigare e comprendere il codice tra diversi team.
• Strumenti e Pratiche Coerenti: Applica standard di codifica, regole di linting e processi di build coerenti tra tutti i progetti. Ciò migliora la qualità e la manutenibilità del codice.
• Refactoring Semplificato: I progetti di refactoring su larga scala sono semplificati poiché tutto il codice correlato si trova all'interno dello stesso repository. Gli strumenti di refactoring automatizzati possono essere utilizzati su tutta la codebase.

Sfide di un Monorepo

• Dimensione del Repository: I monorepo possono diventare molto grandi, rallentando potenzialmente le operazioni di clonazione e indicizzazione. Strumenti come `git sparse-checkout` e `partial clone` possono aiutare a mitigare questo problema.
• Tempi di Build: La compilazione dell'intero monorepo può richiedere molto tempo, soprattutto per progetti di grandi dimensioni. Strumenti come Lerna e Nx offrono processi di build ottimizzati per affrontare questo problema.
• Controllo degli Accessi: Limitare l'accesso a parti specifiche del monorepo può essere complesso. Sono necessari un'attenta pianificazione e l'implementazione di meccanismi di controllo degli accessi.
• Complessità degli Strumenti: La configurazione e la gestione di un monorepo richiedono strumenti e conoscenze specializzate. La curva di apprendimento può essere ripida inizialmente.

Lerna: Gestione di Progetti JavaScript in un Monorepo

Lerna è uno strumento popolare per la gestione di progetti JavaScript in un monorepo. Ottimizza il flusso di lavoro attorno alla gestione di repository multi-package con Git e npm. È particolarmente adatto per progetti che utilizzano npm o Yarn per la gestione delle dipendenze.

Caratteristiche Principali di Lerna

• Gestione delle Versioni: Lerna può versionare e pubblicare automaticamente i pacchetti in base alle modifiche apportate dall'ultima release. Utilizza conventional commits per determinare il numero di versione successivo.
• Gestione delle Dipendenze: Lerna gestisce le dipendenze tra i pacchetti, assicurando che i pacchetti all'interno del monorepo possano dipendere l'uno dall'altro. Utilizza il symlinking per creare dipendenze locali.
• Esecuzione di Task: Lerna può eseguire comandi su più pacchetti in parallelo, accelerando i processi di build e test. Supporta l'esecuzione di script definiti in `package.json`.
• Rilevamento delle Modifiche: Lerna può rilevare quali pacchetti sono stati modificati dall'ultima release, consentendo build e distribuzioni mirate.

Esempio di Utilizzo di Lerna

Illustriamo l'utilizzo di Lerna con un esempio semplificato. Supponiamo di avere un monorepo con due pacchetti: `package-a` e `package-b`. `package-b` dipende da `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Inizializza Lerna:

lerna init

Questo crea `lerna.json` e aggiorna il `package.json` radice. Il file `lerna.json` configura il comportamento di Lerna.

2. Installa le Dipendenze:

npm install
# or
yarn install

Questo installa le dipendenze per tutti i pacchetti nel monorepo, in base ai file `package.json` in ciascun pacchetto.

3. Esegui un Comando su Tutti i Pacchetti:

lerna run test

Questo esegue lo script `test` definito nei file `package.json` di tutti i pacchetti che lo hanno definito.

4. Pubblica i Pacchetti:

lerna publish

Questo comando analizza la cronologia dei commit, determina quali pacchetti sono stati modificati, aumenta le loro versioni in base ai conventional commits e li pubblica su npm (o sul tuo registro scelto).

Configurazione di Lerna

Il file `lerna.json` è il cuore della configurazione di Lerna. Ti consente di personalizzare il comportamento di Lerna, come ad esempio:

• `packages`: Specifica la posizione dei pacchetti all'interno del monorepo. Spesso impostato su `["packages/*"]`.
• `version`: Specifica la strategia di versionamento. Può essere `independent` (ogni pacchetto ha la propria versione) o una versione fissa.
• `command`: Ti consente di configurare le opzioni per comandi Lerna specifici, come `publish` e `run`.

Esempio di `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Sistema di Build Intelligente, Veloce ed Estensibile

Nx è un potente sistema di build che fornisce funzionalità avanzate per la gestione dei monorepo. Si concentra su build incrementali, caching computazionale e orchestrazione delle attività per migliorare significativamente i tempi di build e la produttività degli sviluppatori. Mentre Lerna si concentra principalmente sulla gestione dei pacchetti, Nx fornisce un approccio più completo alla gestione dell'intero flusso di lavoro del monorepo, inclusi la generazione di codice, il linting, i test e la distribuzione.

Caratteristiche Principali di Nx

• Build Incrementali: Nx analizza il grafo delle dipendenze dei tuoi progetti e ricostruisce solo i progetti che sono stati modificati dall'ultima build. Ciò riduce drasticamente i tempi di build.
• Caching Computazionale: Nx memorizza nella cache i risultati delle attività, come build e test, in modo che possano essere riutilizzati se gli input non sono stati modificati. Ciò accelera ulteriormente i cicli di sviluppo.
• Orchestrazione delle Attività: Nx fornisce un potente sistema di orchestrazione delle attività che ti consente di definire pipeline di build complesse ed eseguirle in modo efficiente.
• Generazione di Codice: Nx fornisce strumenti di generazione di codice che possono aiutarti a creare rapidamente nuovi progetti, componenti e moduli, seguendo le migliori pratiche e standard coerenti.
• Ecosistema di Plugin: Nx ha un ricco ecosistema di plugin che supporta varie tecnologie e framework, come React, Angular, Node.js, NestJS e altro ancora.
• Visualizzazione del Grafo delle Dipendenze: Nx può visualizzare il grafo delle dipendenze del tuo monorepo, aiutandoti a comprendere le relazioni tra i progetti e identificare potenziali problemi.
• Comandi Affected: Nx fornisce comandi per eseguire task solo sui progetti interessati da una specifica modifica. Ciò ti consente di concentrare i tuoi sforzi sulle aree che necessitano di attenzione.

Esempio di Utilizzo di Nx

Illustriamo l'utilizzo di Nx con un esempio semplificato. Creeremo un monorepo con un'applicazione React e una libreria Node.js.

1. Installa Nx CLI Globalmente:

npm install -g create-nx-workspace

2. Crea un Nuovo Workspace Nx:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Questo crea un nuovo workspace Nx con un'applicazione React. L'opzione `--preset=react` dice a Nx di inizializzare il workspace con configurazioni specifiche per React.

3. Genera una Libreria:

nx generate @nrwl/node:library my-library

Questo genera una nuova libreria Node.js chiamata `my-library`. Nx configura automaticamente la libreria e le sue dipendenze.

4. Compila l'Applicazione:

nx build my-app

Questo compila l'applicazione React. Nx analizza il grafo delle dipendenze e ricostruisce solo i file necessari.

5. Esegui i Test:

nx test my-app

Questo esegue gli unit test per l'applicazione React. Nx memorizza nella cache i risultati dei test per accelerare le successive esecuzioni dei test.

6. Visualizza il Grafo delle Dipendenze:

nx graph

Questo apre un'interfaccia web che visualizza il grafo delle dipendenze del monorepo.

Configurazione di Nx

Nx è configurato tramite il file `nx.json`, che si trova nella radice del workspace. Questo file definisce i progetti nel workspace, le loro dipendenze e le attività che possono essere eseguite su di essi.

Le opzioni di configurazione chiave in `nx.json` includono:

• `projects`: Definisce i progetti nel workspace e la loro configurazione, come la loro directory radice e gli obiettivi di build.
• `tasksRunnerOptions`: Configura il task runner, che è responsabile dell'esecuzione dei task e della memorizzazione nella cache dei loro risultati.
• `affected`: Configura come Nx determina quali progetti sono interessati da una modifica.

Esempio di `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx: Quale Scegliere?

Sia Lerna che Nx sono strumenti eccellenti per la gestione dei frontend monorepo, ma soddisfano esigenze leggermente diverse. Ecco un confronto per aiutarti a scegliere quello giusto per il tuo progetto:

Funzionalità	Lerna	Nx
Focus	Gestione dei Pacchetti	Sistema di Build e Orchestrazione delle Attività
Build Incrementali	Limitato (richiede strumenti esterni)	Integrato e altamente ottimizzato
Caching Computazionale	No	Sì
Generazione di Codice	No	Sì
Ecosistema di Plugin	Limitato	Esteso
Curva di Apprendimento	Inferiore	Superiore
Complessità	Più Semplice	Più Complesso
Casi d'Uso	Progetti focalizzati principalmente sulla gestione e pubblicazione di pacchetti npm.	Progetti ampi e complessi che richiedono tempi di build ottimizzati, generazione di codice e un sistema di build completo.

Scegli Lerna se:

• Hai principalmente bisogno di gestire e pubblicare pacchetti npm.
• Il tuo progetto è di dimensioni relativamente piccole o medie.
• Preferisci uno strumento più semplice con una curva di apprendimento inferiore.
• Hai già familiarità con npm e Yarn.

Scegli Nx se:

• Hai bisogno di tempi di build ottimizzati e build incrementali.
• Desideri funzionalità di generazione di codice.
• Richiedi un sistema di build completo con orchestrazione delle attività.
• Il tuo progetto è ampio e complesso.
• Sei disposto a investire tempo nell'apprendimento di uno strumento più potente.

È Possibile Utilizzare Lerna con Nx?

Sì, Lerna e Nx possono essere utilizzati insieme. Questa combinazione ti consente di sfruttare le funzionalità di gestione dei pacchetti di Lerna beneficiando al contempo del sistema di build ottimizzato e dell'orchestrazione delle attività di Nx. Nx può essere configurato come un task runner per Lerna, fornendo build incrementali e caching computazionale per i pacchetti gestiti da Lerna.

Best Practice per la Gestione dei Frontend Monorepo

Indipendentemente dal fatto che tu scelga Lerna o Nx, seguire le best practice è fondamentale per gestire con successo un frontend monorepo:

• Stabilisci una Struttura di Progetto Chiara: Organizza i tuoi progetti in modo logico e coerente. Utilizza una chiara convenzione di denominazione per pacchetti e librerie.
• Applica Standard di Codifica Coerenti: Utilizza linters e formatters per garantire uno stile di codice coerente tra tutti i progetti. Strumenti come ESLint e Prettier possono essere integrati nel tuo flusso di lavoro.
• Automatizza i Processi di Build e Test: Utilizza pipeline CI/CD per automatizzare i processi di build, test e distribuzione. È possibile utilizzare strumenti come Jenkins, CircleCI e GitHub Actions.
• Implementa Revisioni del Codice: Conduci revisioni approfondite del codice per garantire la qualità e la manutenibilità del codice. Utilizza pull request e strumenti di revisione del codice.
• Monitora i Tempi di Build e le Prestazioni: Tieni traccia dei tempi di build e delle metriche di prestazioni per identificare i colli di bottiglia e le aree di miglioramento. Nx fornisce strumenti per l'analisi delle prestazioni di build.
• Documenta la Struttura e i Processi del Tuo Monorepo: Crea una documentazione chiara che spieghi la struttura del tuo monorepo, gli strumenti e le tecnologie utilizzate e i flussi di lavoro di sviluppo.
• Adotta Conventional Commits: Utilizza conventional commits per automatizzare i processi di versionamento e rilascio. Lerna supporta conventional commits out of the box.

Conclusione

I frontend monorepo offrono vantaggi significativi per la gestione di progetti ampi e complessi, tra cui la condivisione del codice, la gestione semplificata delle dipendenze e una migliore collaborazione. Lerna e Nx sono strumenti potenti che possono aiutarti a gestire efficacemente un frontend monorepo. Lerna è un'ottima scelta per la gestione dei pacchetti npm, mentre Nx fornisce un sistema di build più completo con funzionalità avanzate come build incrementali e generazione di codice. Considerando attentamente le esigenze del tuo progetto e seguendo le best practice, puoi adottare con successo un frontend monorepo e raccoglierne i benefici.

Ricorda di considerare fattori come l'esperienza del tuo team, la complessità del progetto e i requisiti di prestazioni quando scegli tra Lerna e Nx. Sperimenta con entrambi gli strumenti e trova quello che meglio si adatta alle tue esigenze specifiche.

Buona fortuna con il tuo viaggio nel monorepo!