Frontend Nx Darbo Sritis: Monorepo Kūrimas Plečiamoms Aplikacijoms

Šiuolaikiniame sparčiai besivystančiame programinės įrangos kūrimo pasaulyje, didelių frontend aplikacijų kūrimas ir priežiūra gali būti sudėtingi. Priklausomybių valdymas, kodo nuoseklumo užtikrinimas ir kūrimo laiko optimizavimas tampa vis sudėtingesni augant projektams. Monorepo siūlo galingą sprendimą, sujungiant kelis projektus ir bibliotekas į vieną saugyklą. Nx, išmani, plečiama kūrimo sistema, pagerina monorepo kūrimą pažangiais įrankiais ir funkcijomis.

Šis išsamus gidas nagrinėja Nx darbo srities naudojimo privalumus frontend monorepo kūrimui, apimant pagrindines sąvokas, praktinius pavyzdžius ir geriausias praktikas.

Kas yra Monorepo?

Monorepo yra programinės įrangos kūrimo strategija, kai visi projektai ir jų priklausomybės saugomi vienoje saugykloje. Šis požiūris prieštarauja tradiciniam kelių saugyklų (multi-repo) požiūriui, kai kiekvienas projektas turi savo saugyklą.

Pagrindinės Monorepo Savybės:

• Vienintelis tiesos šaltinis: Visas kodas yra vienoje vietoje.
• Kodo dalijimasis ir pakartotinis naudojimas: Lengviau dalytis ir pakartotinai naudoti kodą tarp projektų.
• Supaprastintas priklausomybių valdymas: Priklausomybių valdymas tarp projektų tampa paprastesnis.
• Atominiai pakeitimai: Pakeitimai gali apimti kelis projektus, užtikrinant nuoseklumą.
• Geresnis bendradarbiavimas: Komandoms lengviau bendradarbiauti ties susijusiais projektais.

Kodėl Naudoti Monorepo Frontend Kūrimui?

Monorepo siūlo didelių pranašumų frontend kūrimui, ypač dideliems ir sudėtingiems projektams.

• Geresnis Kodo Dalijimasis: Frontend projektai dažnai dalijasi bendrais UI komponentais, pagalbinėmis funkcijomis ir dizaino sistemomis. Monorepo palengvina kodo dalijimąsi, mažina dubliavimąsi ir skatina nuoseklumą. Pavyzdžiui, dizaino sistemos biblioteka gali būti lengvai bendrinama tarp kelių React aplikacijų toje pačioje darbo srityje.
• Supaprastintas Priklausomybių Valdymas: Priklausomybių valdymas keliuose frontend projektuose gali būti sudėtingas, ypač nuolat besikeičiančioje JavaScript ekosistemoje. Monorepo supaprastina priklausomybių valdymą, centralizuodamas priklausomybes ir suteikdamas įrankius versijų valdymui ir atnaujinimui.
• Pagerintas Kūrimo Našumas: Nx suteikia pažangų kūrimo kešavimą ir priklausomybių analizę, leidžiančią greitesnius ir efektyvesnius kūrimo procesus. Analizuodamas priklausomybių grafiką, Nx gali perkurti tik tuos projektus, kuriuos paveikė pakeitimas, taip žymiai sumažindamas kūrimo laiką. Tai yra labai svarbu didelėms frontend aplikacijoms su daugybe komponentų ir modulių.
• Supaprastintas Refaktorinimas: Refaktorinti kodą keliuose projektuose yra lengviau monorepo aplinkoje. Pakeitimai gali būti atliekami atominėmis operacijomis, užtikrinant nuoseklumą ir mažinant klaidų atsiradimo riziką. Pavyzdžiui, keliose aplikacijose naudojamo komponento pervadinimas gali būti atliktas vienu „commit“ veiksmu.
• Geresnis Bendradarbiavimas: Monorepo skatina geresnį frontend programuotojų bendradarbiavimą, suteikdamas bendrą kodo bazę ir bendrą kūrimo aplinką. Komandos gali lengvai prisidėti prie skirtingų projektų ir dalytis žiniomis bei geriausiomis praktikomis.

Pristatome Nx: Išmani, Plečiama Kūrimo Sistema

Nx yra galinga kūrimo sistema, kuri pagerina monorepo kūrimą pažangiais įrankiais ir funkcijomis. Ji suteikia standartizuotą kūrimo patirtį, gerina kūrimo našumą ir supaprastina priklausomybių valdymą.

Pagrindinės Nx Savybės:

• Išmani Kūrimo Sistema: Nx analizuoja jūsų projektų priklausomybių grafiką ir perkuria tik paveiktus projektus, taip žymiai sumažindama kūrimo laiką.
• Kodo Generavimas: Nx teikia kodo generavimo įrankius naujiems projektams, komponentams ir moduliams kurti, taip paspartindamas kūrimą ir užtikrindamas nuoseklumą.
• Integruoti Įrankiai: Nx integruojasi su populiariais frontend karkasais, tokiais kaip React, Angular ir Vue.js, suteikdama sklandžią kūrimo patirtį.
• Įskiepių Ekosistema: Nx turi turtingą įskiepių ekosistemą, kuri praplečia jos funkcionalumą papildomais įrankiais ir integracijomis.
• Inkrementiniai Kūrimai: Nx inkrementinė kūrimo sistema perkuria tik tai, kas pasikeitė, drastiškai pagreitindama kūrimo grįžtamojo ryšio ciklą.
• Skaičiavimų Kešavimas: Nx kešuoja brangių skaičiavimų, tokių kaip kūrimas ir testavimas, rezultatus, dar labiau pagerindamas našumą.
• Paskirstytas Užduočių Vykdymas: Labai didelėms monorepo aplinkoms Nx gali paskirstyti užduotis keliems kompiuteriams, kad lygiagrečiai vykdytų kūrimo ir testavimo procesus.

Nx Darbo Srities Paruošimas Frontend Kūrimui

Nx darbo srities paruošimas yra paprastas. Galite naudoti Nx CLI, kad sukurtumėte naują darbo sritį ir pridėtumėte projektus bei bibliotekas.

Būtinosios Sąlygos:

• Node.js (16 ar naujesnė versija)
• npm arba yarn

Žingsniai:

1. Įdiekite Nx CLI:

               npm install -g create-nx-workspace
               
   
                 
                   Copy
                 
               
             

2. Sukurkite naują Nx darbo sritį:

               npx create-nx-workspace my-frontend-workspace
               
   
                 
                   Copy
                 
               
             

   Jūsų paprašys pasirinkti šabloną. Pasirinkite šabloną, atitinkantį jūsų pageidaujamą frontend karkasą (pvz., React, Angular, Vue.js).

3. Pridėkite naują aplikaciją:

               nx generate @nx/react:application my-app
               
   
                 
                   Copy
                 
               
             

   Ši komanda sukuria naują React aplikaciją pavadinimu „my-app“ darbo srityje.

4. Pridėkite naują biblioteką:

               nx generate @nx/react:library my-library
               
   
                 
                   Copy
                 
               
             

   Ši komanda sukuria naują React biblioteką pavadinimu „my-library“ darbo srityje. Bibliotekos naudojamos dalytis kodu tarp aplikacijų.

Jūsų Nx Darbo Srities Organizavimas

Gerai organizuota Nx darbo sritis yra būtina palaikomumui ir plečiamumui. Apsvarstykite šias gaires, struktūrizuodami savo darbo sritį:

• Aplikacijos: Aplikacijos yra jūsų frontend projektų įėjimo taškai. Jos reprezentuoja vartotojui matomas sąsajas. Pavyzdžiai apima žiniatinklio aplikaciją, mobiliąją aplikaciją arba darbalaukio aplikaciją.
• Bibliotekos: Bibliotekose yra pakartotinai naudojamas kodas, kuriuo galima dalytis tarp kelių aplikacijų. Jos organizuojamos į skirtingus tipus pagal jų funkcionalumą.
• Funkcijų Bibliotekos: Funkcijų bibliotekose yra verslo logika ir UI komponentai konkrečiai funkcijai. Jos priklauso nuo pagrindinių (core) ir UI bibliotekų.
• UI Bibliotekos: UI bibliotekose yra pakartotinai naudojami UI komponentai, kuriuos galima naudoti keliose funkcijose ir aplikacijose.
• Pagrindinės (Core) Bibliotekos: Pagrindinėse bibliotekose yra pagalbinės funkcijos, duomenų modeliai ir kitas bendras kodas, naudojamas visoje darbo srityje.
• Bendrinamos (Shared) Bibliotekos: Bendrinamose bibliotekose yra nuo karkaso nepriklausomas kodas, kurį gali naudoti kelios aplikacijos ir bibliotekos, nepriklausomai nuo frontend karkaso (React, Angular, Vue.js). Tai skatina kodo pakartotinį naudojimą ir mažina dubliavimąsi.

Katalogų Struktūros Pavyzdys:

my-frontend-workspace/
├── apps/
│   ├── my-app/
│   │   ├── src/
│   │   │   ├── app/
│   │   │   │   ├── app.tsx
│   │   │   │   └── app.module.css
│   │   │   └── main.tsx
│   │   └── project.json
│   └── my-other-app/
│       └── ...
├── libs/
│   ├── feature-my-feature/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── feature-my-feature.tsx
│   │   └── project.json
│   ├── ui/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── button/
│   │   │           └── button.tsx
│   │   └── project.json
│   ├── core/
│   │   ├── src/
│   │   │   └── lib/
│   │   │       └── api.ts
│   │   └── project.json
│   └── shared/
│       ├── src/
│       │   └── lib/
│       │       └── date-formatter.ts
│       └── project.json
├── tools/
│   └── generators/
├── nx.json
├── package.json
└── tsconfig.base.json

Kodo Dalijimasis ir Pakartotinis Naudojimas su Nx Bibliotekomis

Nx bibliotekos yra raktas į kodo dalijimąsi ir pakartotinį naudojimą monorepo aplinkoje. Organizuodami savo kodą į gerai apibrėžtas bibliotekas, galite lengvai dalytis komponentais, paslaugomis ir pagalbinėmis funkcijomis tarp kelių aplikacijų.

Pavyzdys: Dalijimasis UI Komponentu

Tarkime, turite mygtuko komponentą, kuriuo norite dalytis tarp kelių React aplikacijų. Galite sukurti UI biblioteką pavadinimu „ui“ ir įdėti mygtuko komponentą į šią biblioteką.

1. Sukurkite UI biblioteką:

               nx generate @nx/react:library ui
               
   
                 
                   Copy
                 
               
             

2. Sukurkite mygtuko komponentą:

               nx generate @nx/react:component button --project=ui
               
   
                 
                   Copy
                 
               
             

3. Implementuokite mygtuko komponentą:

               // libs/ui/src/lib/button/button.tsx
   import styles from './button.module.css';
   
   interface ButtonProps {
    text: string;
    onClick: () => void;
   }
   
   export function Button({ text, onClick }: ButtonProps) {
    return (
    
    {text}
    
    );
   }
   
   export default Button;
               
   
                 
                   Copy
                 
               
             

4. Eksportuokite mygtuko komponentą iš bibliotekos:

               // libs/ui/src/index.ts
   export * from './lib/button/button';
               
   
                 
                   Copy
                 
               
             

5. Naudokite mygtuko komponentą aplikacijoje:

               // apps/my-app/src/app/app.tsx
   import { Button } from '@my-frontend-workspace/ui';
   
   function App() {
    return (
    
   
    
   Welcome to My App
     alert('Clicked!')} />
    
    );
   }
   
   export default App;
               
   
                 
                   Copy
                 
               
             

Naudodami bibliotekas, galite užtikrinti, kad jūsų UI komponentai būtų nuoseklūs visose aplikacijose. Atnaujinus mygtuko komponentą UI bibliotekoje, visos aplikacijos, kurios jį naudoja, bus automatiškai atnaujintos.

Priklausomybių Valdymas Nx Darbo Srityse

Nx suteikia galingus įrankius priklausomybių valdymui tarp projektų ir bibliotekų. Galite aiškiai apibrėžti priklausomybes kiekvieno projekto ar bibliotekos `project.json` faile.

Pavyzdys: Priklausomybės Deklaravimas

Tarkime, jūsų aplikacija „my-app“ priklauso nuo bibliotekos „core“. Šią priklausomybę galite deklaruoti „my-app“ `project.json` faile.

            // apps/my-app/project.json
{
 "name": "my-app",
 "projectType": "application",
 ...
 "implicitDependencies": ["core"]
}
            

              
                Copy
              
            
          

Aiškiai deklaruodamas priklausomybes, Nx gali analizuoti jūsų darbo srities priklausomybių grafiką ir perkurti tik paveiktus projektus, kai pasikeičia priklausomybė. Tai žymiai pagerina kūrimo našumą.

Kūrimo Našumo Optimizavimas su Nx

Nx išmani kūrimo sistema ir skaičiavimų kešavimas žymiai pagerina kūrimo našumą. Štai keletas patarimų, kaip optimizuoti kūrimo našumą jūsų Nx darbo srityje:

• Analizuokite Priklausomybių Grafiką: Naudokite `nx graph` komandą, kad vizualizuotumėte savo darbo srities priklausomybių grafiką. Nustatykite galimas kliūtis ir optimizuokite savo projekto struktūrą, kad sumažintumėte priklausomybes.
• Naudokite Skaičiavimų Kešavimą: Nx kešuoja brangių skaičiavimų, tokių kaip kūrimas ir testavimas, rezultatus. Įsitikinkite, kad skaičiavimų kešavimas yra įjungtas jūsų `nx.json` faile.
• Vykdykite Užduotis Lygiagrečiai: Nx gali vykdyti užduotis lygiagrečiai, kad išnaudotų kelis procesoriaus branduolius. Naudokite `--parallel` vėliavėlę, kad vykdytumėte užduotis lygiagrečiai.
• Naudokite Paskirstytą Užduočių Vykdymą: Labai didelėms monorepo aplinkoms Nx gali paskirstyti užduotis keliems kompiuteriams, kad lygiagrečiai vykdytų kūrimo ir testavimo procesus.
• Optimizuokite Savo Kodą: Optimizuokite savo kodą, kad sutrumpintumėte kūrimo laiką. Pašalinkite nenaudojamą kodą, optimizuokite paveikslėlius ir naudokite kodo padalijimą (code splitting), kad sumažintumėte savo paketų dydį.

Testavimas Nx Darbo Srityse

Nx teikia integruotus testavimo įrankius vienetų, integracijos ir „end-to-end“ testams vykdyti. Galite naudoti `nx test` komandą, kad vykdytumėte testus visiems darbo srities projektams arba konkrečiam projektui.

Pavyzdys: Testų Vykdymas

            nx test my-app
            

              
                Copy
              
            
          

Ši komanda vykdo visus aplikacijos „my-app“ testus.

Nx palaiko populiarius testavimo karkasus, tokius kaip Jest, Cypress ir Playwright. Galite konfigūruoti savo testavimo aplinką kiekvieno projekto `project.json` faile.

Nuolatinė Integracija ir Nuolatinis Diegimas (CI/CD) su Nx

Nx sklandžiai integruojasi su populiariomis CI/CD sistemomis, tokiomis kaip GitHub Actions, GitLab CI ir Jenkins. Galite naudoti Nx komandinės eilutės sąsają, kad automatizuotumėte kūrimo, testavimo ir diegimo procesus savo CI/CD konvejeryje.

Pavyzdys: GitHub Actions Darbo Eiga

Štai GitHub Actions darbo eigos pavyzdys, kuris kuria, testuoja ir diegia jūsų Nx darbo sritį:

            # .github/workflows/ci.yml
name: CI

on:
 push:
 branches: [main]
 pull_request:
 branches: [main]

jobs:
 build:
 runs-on: ubuntu-latest

 steps:
 - uses: actions/checkout@v3
 with:
 fetch-depth: 0
 - uses: actions/setup-node@v3
 with:
 node-version: 16
 cache: 'npm'
 - run: npm ci
 - run: npx nx affected --target=lint --base=origin/main --head=HEAD
 - run: npx nx affected --target=test --base=origin/main --head=HEAD --watchAll=false
 - run: npx nx affected --target=build --base=origin/main --head=HEAD
            

              
                Copy
              
            
          

Ši darbo eiga vykdo šias užduotis:

• Linting: Vykdo „linter'ius“ paveiktuose projektuose.
• Testavimas: Vykdo testus paveiktuose projektuose.
• Kūrimas: Kuria paveiktus projektus.

Nx suteikia `affected` komandą, kuri leidžia vykdyti užduotis tik tiems projektams, kuriuos paveikė pakeitimas. Tai žymiai sutrumpina jūsų CI/CD konvejerio vykdymo laiką.

Geriausios Praktikos Kuriant su Frontend Nx Darbo Sritimi

Štai keletas geriausių praktikų, kuriant frontend aplikacijas su Nx:

• Laikykitės Nuoseklaus Kodavimo Stiliaus: Naudokite kodo formatuotoją, pvz., Prettier, ir „linter'į“, pvz., ESLint, kad visoje darbo srityje būtų taikomas nuoseklus kodavimo stilius.
• Rašykite Vienetų Testus: Rašykite vienetų testus visiems savo komponentams, paslaugoms ir pagalbinėms funkcijoms, kad užtikrintumėte kodo kokybę ir išvengtumėte regresijų.
• Naudokite Dizaino Sistemą: Naudokite dizaino sistemą, kad užtikrintumėte nuoseklumą tarp savo UI komponentų.
• Dokumentuokite Savo Kodą: Išsamiai dokumentuokite savo kodą, kad kitiems programuotojams būtų lengviau jį suprasti ir prižiūrėti.
• Naudokite Versijų Kontrolę: Naudokite Git versijų kontrolei ir laikykitės nuoseklios šakojimo strategijos.
• Automatizuokite Savo Darbo Eigą: Automatizuokite savo darbo eigą su CI/CD, kad užtikrintumėte, jog jūsų kodas visada yra testuojamas ir diegiamas automatiškai.
• Atnaujinkite Priklausomybes: Reguliariai atnaujinkite savo priklausomybes, kad pasinaudotumėte naujausiomis funkcijomis ir saugumo pataisymais.
• Stebėkite Našumą: Stebėkite savo aplikacijų našumą ir nustatykite galimas kliūtis.

Pažangios Nx Koncepcijos

Kai įprasite prie Nx pagrindų, galite išnagrinėti keletą pažangių koncepcijų, kad dar labiau pagerintumėte savo kūrimo darbo eigą:

• Individualūs Generatoriai: Kurkite individualius generatorius, kad automatizuotumėte naujų projektų, komponentų ir modulių kūrimą. Tai gali žymiai sumažinti kūrimo laiką ir užtikrinti nuoseklumą.
• Nx Įskiepiai: Kurkite Nx įskiepius, kad praplėstumėte Nx funkcionalumą individualiais įrankiais ir integracijomis.
• Modulių Federacija (Module Federation): Naudokite Modulių Federaciją, kad kurtumėte ir diegtumėte nepriklausomas savo aplikacijos dalis atskirai. Tai leidžia greitesnius diegimus ir didesnį lankstumą.
• Nx Debesis (Nx Cloud): Integruokite su Nx Cloud, kad gautumėte pažangias kūrimo įžvalgas, paskirstytą užduočių vykdymą ir nuotolinį kešavimą.

Išvada

Nx darbo sritys suteikia galingą ir efektyvų būdą valdyti frontend monorepo. Pasinaudodami pažangiais Nx įrankiais ir funkcijomis, galite pagerinti kodo dalijimąsi, kūrimo našumą ir programuotojų bendradarbiavimą, o tai lemia plečiamas ir lengvai prižiūrimas frontend aplikacijas. Nx pritaikymas gali supaprastinti jūsų kūrimo procesą ir atverti didelius produktyvumo privalumus jūsų komandai, ypač dirbant su sudėtingais ir dideliais projektais. Kadangi frontend pasaulis toliau vystosi, monorepo kūrimo su Nx įgūdžiai tampa vis vertingesni frontend inžinieriams.

Šis gidas pateikė išsamią frontend Nx darbo srities kūrimo apžvalgą. Laikydamiesi geriausių praktikų ir nagrinėdami pažangias koncepcijas, galite atskleisti visą Nx potencialą ir kurti nuostabias frontend aplikacijas.