Frontend Monorepo: Upravljanje radnim prostorima pomoću Lerne i Nx

U neprestanom razvoju frontend razvoja, upravljanje velikim i složenim projektima može biti značajan izazov. Tradicionalne postavke s više repozitorija, iako nude izolaciju, mogu dovesti do dupliciranja koda, glavobolja u upravljanju ovisnostima i nedosljednog alata. Tu se ističe arhitektura monorepoa. Monorepo je jedan repozitorij koji sadrži više projekata, često povezanih, koji se grade i verziraju zajedno. Ovaj pristup nudi brojne prednosti, ali učinkovito upravljanje monorepoom zahtijeva specijalizirane alate. Ovaj članak istražuje dva popularna rješenja: Lerna i Nx.

Što je Monorepo?

Monorepo je repozitorij sustava za kontrolu verzija koji sadrži kod za mnoge projekte. Ovi projekti mogu biti povezani ili potpuno neovisni. Ključno je da dijele isti repozitorij. Tvrtke poput Googlea, Facebooka, Microsofta i Ubera uspješno su usvojile monorepoe za upravljanje svojim masivnim bazama koda. Zamislite Google koji pohranjuje gotovo sav svoj kod, uključujući Android, Chrome i Gmail, u jednom repozitoriju.

Prednosti Monorepoa

• Dijeljenje i ponovna upotreba koda: Jednostavno dijelite kod između projekata bez složenih radnih procesa pakiranja i objavljivanja. Zamislite biblioteku sustava dizajna koja se može neprimjetno integrirati u više aplikacija unutar istog repozitorija.
• Pojednostavljeno upravljanje ovisnostima: Upravljajte ovisnostima na jednom mjestu, osiguravajući dosljednost u svim projektima. Ažuriranje ovisnosti zajedničke biblioteke automatski ažurira sve projekte koji ovise o njoj.
• Atomske promjene: Napravite promjene koje obuhvaćaju više projekata u jednom commitu, osiguravajući dosljednost i pojednostavljujući testiranje. Na primjer, refaktoriranje koje utječe i na frontend i na backend može se obaviti atomski.
• Poboljšana suradnja: Timovi mogu lako surađivati na različitim projektima unutar istog repozitorija, potičući dijeljenje znanja i križno-funkcionalni razvoj. Programeri mogu lako pregledavati i razumjeti kod u različitim timovima.
• Dosljedni alati i prakse: Provedite dosljedne standarde kodiranja, pravila lintinga i procese izrade u svim projektima. To poboljšava kvalitetu koda i održivost.
• Pojednostavljeno refaktoriranje: Projekti refaktoriranja velikih razmjera su pojednostavljeni jer je sav povezani kod unutar istog repozitorija. Automatizirani alati za refaktoriranje mogu se koristiti u cijeloj bazi koda.

Izazovi Monorepoa

• Veličina repozitorija: Monorepoi mogu postati vrlo veliki, što potencijalno usporava operacije kloniranja i indeksiranja. Alati poput `git sparse-checkout` i `partial clone` mogu pomoći u ublažavanju ovog problema.
• Vrijeme izrade: Izrada cijelog monorepoa može oduzeti puno vremena, posebno za velike projekte. Alati poput Lerne i Nx nude optimizirane procese izrade kako bi se ovo riješilo.
• Kontrola pristupa: Ograničavanje pristupa određenim dijelovima monorepoa može biti složeno. Potrebno je pažljivo planiranje i implementacija mehanizama kontrole pristupa.
• Složenost alata: Postavljanje i upravljanje monorepoom zahtijeva specijalizirane alate i znanje. Krivulja učenja može biti u početku strma.

Lerna: Upravljanje JavaScript projektima u Monorepou

Lerna je popularan alat za upravljanje JavaScript projektima u monorepou. Optimizira radni proces oko upravljanja repozitorijima s više paketa pomoću Gita i npm-a. Posebno je prikladan za projekte koji koriste npm ili Yarn za upravljanje ovisnostima.

Ključne značajke Lerne

• Upravljanje verzijama: Lerna može automatski verzirati i objavljivati pakete na temelju promjena napravljenih od posljednjeg izdanja. Koristi konvencionalne commite za određivanje sljedećeg broja verzije.
• Upravljanje ovisnostima: Lerna upravlja ovisnostima između paketa, osiguravajući da se paketi unutar monorepoa mogu oslanjati jedni na druge. Koristi symlinking za stvaranje lokalnih ovisnosti.
• Izvršavanje zadataka: Lerna može paralelno izvršavati naredbe u više paketa, ubrzavajući procese izrade i testiranja. Podržava pokretanje skripti definiranih u `package.json`.
• Otkrivanje promjena: Lerna može otkriti koji su se paketi promijenili od posljednjeg izdanja, omogućujući ciljane izrade i implementacije.

Primjer upotrebe Lerne

Ilustrirajmo upotrebu Lerne pojednostavljenim primjerom. Pretpostavimo da imamo monorepo s dva paketa: `package-a` i `package-b`. `package-b` ovisi o `package-a`.

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

1. Inicijalizirajte Lernu:

lerna init

Ovo stvara `lerna.json` i ažurira korijenski `package.json`. Datoteka `lerna.json` konfigurira ponašanje Lerne.

2. Instalirajte ovisnosti:

npm install
# ili
yarn install

Ovo instalira ovisnosti za sve pakete u monorepou, na temelju datoteka `package.json` u svakom paketu.

3. Pokrenite naredbu u paketima:

lerna run test

Ovo izvršava skriptu `test` definiranu u datotekama `package.json` svih paketa koji je imaju definiranu.

4. Objavite pakete:

lerna publish

Ova naredba analizira povijest commita, određuje koji su se paketi promijenili, povećava njihove verzije na temelju konvencionalnih commita i objavljuje ih na npm (ili odabranom registru).

Konfiguracija Lerne

Datoteka `lerna.json` je srce konfiguracije Lerne. Omogućuje vam da prilagodite ponašanje Lerne, kao što su:

• `packages`: Određuje lokaciju paketa unutar monorepoa. Često postavljeno na `["packages/*"]`.
• `version`: Određuje strategiju verziranja. Može biti `independent` (svaki paket ima svoju verziju) ili fiksna verzija.
• `command`: Omogućuje vam konfiguriranje opcija za određene naredbe Lerne, kao što su `publish` i `run`.

Primjer `lerna.json`:

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

Nx: Pametan, brz i proširiv sustav izrade

Nx je moćan sustav izrade koji pruža napredne značajke za upravljanje monorepoom. Usredotočuje se na inkrementalne izrade, predmemoriranje izračuna i orkestraciju zadataka kako bi značajno poboljšao vrijeme izrade i produktivnost programera. Dok je Lerna prvenstveno usredotočena na upravljanje paketima, Nx pruža sveobuhvatniji pristup upravljanju cijelim radnim procesom monorepoa, uključujući generiranje koda, linting, testiranje i implementaciju.

Ključne značajke Nxa

• Inkrementalne izrade: Nx analizira graf ovisnosti vaših projekata i ponovno gradi samo one projekte koji su se promijenili od posljednje izrade. To dramatično smanjuje vrijeme izrade.
• Predmemoriranje izračuna: Nx predmemorira rezultate zadataka, kao što su izrade i testovi, tako da se mogu ponovno upotrijebiti ako se ulazi nisu promijenili. To dodatno ubrzava razvojne cikluse.
• Orkestracija zadataka: Nx pruža moćan sustav orkestracije zadataka koji vam omogućuje definiranje složenih cjevovoda izrade i njihovo učinkovito izvršavanje.
• Generiranje koda: Nx pruža alate za generiranje koda koji vam mogu pomoći da brzo stvorite nove projekte, komponente i module, slijedeći najbolje prakse i dosljedne standarde.
• Ekosustav dodataka: Nx ima bogat ekosustav dodataka koji podržava različite tehnologije i okvire, kao što su React, Angular, Node.js, NestJS i drugi.
• Vizualizacija grafa ovisnosti: Nx može vizualizirati graf ovisnosti vašeg monorepoa, pomažući vam da razumijete odnose između projekata i identificirate potencijalne probleme.
• Pogođene naredbe: Nx pruža naredbe za pokretanje zadataka samo na projektima na koje utječe određena promjena. To vam omogućuje da usredotočite svoje napore na područja koja trebaju pozornost.

Primjer upotrebe Nxa

Ilustrirajmo upotrebu Nxa pojednostavljenim primjerom. Stvorit ćemo monorepo s React aplikacijom i Node.js bibliotekom.

1. Instalirajte Nx CLI globalno:

npm install -g create-nx-workspace

2. Stvorite novi Nx radni prostor:

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

Ovo stvara novi Nx radni prostor s React aplikacijom. Opcija `--preset=react` govori Nxu da inicijalizira radni prostor s konfiguracijama specifičnim za React.

3. Generirajte biblioteku:

nx generate @nrwl/node:library my-library

Ovo generira novu Node.js biblioteku pod nazivom `my-library`. Nx automatski konfigurira biblioteku i njezine ovisnosti.

4. Izgradite aplikaciju:

nx build my-app

Ovo gradi React aplikaciju. Nx analizira graf ovisnosti i ponovno gradi samo potrebne datoteke.

5. Pokrenite testove:

nx test my-app

Ovo pokreće unit testove za React aplikaciju. Nx predmemorira rezultate testova kako bi ubrzao naknadna pokretanja testova.

6. Pregledajte graf ovisnosti:

nx graph

Ovo otvara web sučelje koje vizualizira graf ovisnosti monorepoa.

Konfiguracija Nxa

Nx je konfiguriran putem datoteke `nx.json`, koja se nalazi u korijenu radnog prostora. Ova datoteka definira projekte u radnom prostoru, njihove ovisnosti i zadatke koji se na njima mogu izvršiti.

Ključne opcije konfiguracije u `nx.json` uključuju:

• `projects`: Definira projekte u radnom prostoru i njihovu konfiguraciju, kao što su njihov korijenski direktorij i ciljevi izrade.
• `tasksRunnerOptions`: Konfigurira pokretač zadataka, koji je odgovoran za izvršavanje zadataka i predmemoriranje njihovih rezultata.
• `affected`: Konfigurira kako Nx određuje koji su projekti pogođeni promjenom.

Primjer `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: Koju odabrati?

I Lerna i Nx izvrsni su alati za upravljanje frontend monorepoima, ali zadovoljavaju malo drugačije potrebe. Evo usporedbe koja će vam pomoći da odaberete pravu za svoj projekt:

Značajka	Lerna	Nx
Fokus	Upravljanje paketima	Sustav izrade i orkestracija zadataka
Inkrementalne izrade	Ograničeno (zahtijeva vanjske alate)	Ugrađeno i visoko optimizirano
Predmemoriranje izračuna	Ne	Da
Generiranje koda	Ne	Da
Ekosustav dodataka	Ograničeno	Opširno
Krivulja učenja	Niža	Viša
Složenost	Jednostavnija	Složenija
Slučajevi upotrebe	Projekti prvenstveno usredotočeni na upravljanje i objavljivanje npm paketa.	Veliki i složeni projekti koji zahtijevaju optimizirano vrijeme izrade, generiranje koda i sveobuhvatan sustav izrade.

Odaberite Lernu ako:

• Prvenstveno trebate upravljati i objavljivati npm pakete.
• Vaš je projekt relativno male do srednje veličine.
• Više volite jednostavniji alat s nižom krivuljom učenja.
• Već ste upoznati s npm i Yarn.

Odaberite Nx ako:

• Trebate optimizirano vrijeme izrade i inkrementalne izrade.
• Želite mogućnosti generiranja koda.
• Zahtijevate sveobuhvatan sustav izrade s orkestracijom zadataka.
• Vaš je projekt velik i složen.
• Spremni ste uložiti vrijeme u učenje moćnijeg alata.

Možete li koristiti Lernu s Nx?

Da, Lerna i Nx mogu se koristiti zajedno. Ova kombinacija omogućuje vam da iskoristite mogućnosti upravljanja paketima Lerne dok istovremeno iskorištavate optimizirani sustav izrade i orkestraciju zadataka Nxa. Nx se može konfigurirati kao pokretač zadataka za Lernu, pružajući inkrementalne izrade i predmemoriranje izračuna za pakete kojima upravlja Lerna.

Najbolje prakse za upravljanje Frontend Monorepoom

Bez obzira odaberete li Lernu ili Nx, slijeđenje najboljih praksi ključno je za uspješno upravljanje frontend monorepoom:

• Uspostavite jasnu strukturu projekta: Organizirajte svoje projekte logično i dosljedno. Koristite jasan sustav imenovanja za pakete i biblioteke.
• Provedite dosljedne standarde kodiranja: Koristite linters i formatere kako biste osigurali dosljedan stil koda u svim projektima. Alati poput ESLint i Prettier mogu se integrirati u vaš radni proces.
• Automatizirajte procese izrade i testiranja: Koristite CI/CD cjevovode za automatizaciju procesa izrade, testiranja i implementacije. Mogu se koristiti alati poput Jenkins, CircleCI i GitHub Actions.
• Implementirajte pregled koda: Provedite temeljite preglede koda kako biste osigurali kvalitetu koda i održivost. Koristite pull requestove i alate za pregled koda.
• Pratite vrijeme izrade i performanse: Pratite vrijeme izrade i metrike performansi kako biste identificirali uska grla i područja za poboljšanje. Nx pruža alate za analizu performansi izrade.
• Dokumentirajte strukturu i procese svog monorepoa: Stvorite jasnu dokumentaciju koja objašnjava strukturu vašeg monorepoa, alate i tehnologije koji se koriste i razvojne radne procese.
• Usvojite konvencionalne commite: Koristite konvencionalne commite za automatizaciju procesa verziranja i izdavanja. Lerna podržava konvencionalne commite odmah po instalaciji.

Zaključak

Frontend monorepoi nude značajne prednosti za upravljanje velikim i složenim projektima, uključujući dijeljenje koda, pojednostavljeno upravljanje ovisnostima i poboljšanu suradnju. Lerna i Nx moćni su alati koji vam mogu pomoći da učinkovito upravljate frontend monorepoom. Lerna je odličan izbor za upravljanje npm paketima, dok Nx pruža sveobuhvatniji sustav izrade s naprednim značajkama poput inkrementalnih izrada i generiranja koda. Pažljivim razmatranjem potreba vašeg projekta i slijeđenjem najboljih praksi, možete uspješno usvojiti frontend monorepo i iskoristiti njegove prednosti.

Ne zaboravite uzeti u obzir čimbenike kao što su iskustvo vašeg tima, složenost projekta i zahtjevi za performansama pri odabiru između Lerne i Nxa. Eksperimentirajte s oba alata i pronađite onaj koji najbolje odgovara vašim specifičnim potrebama.

Sretno s vašim monorepo putovanjem!