Frontend Nx tööruum: Monorepo arendus skaleeritavatele rakendustele

Tänapäeva kiires tarkvaraarenduse maastikul võib suuremahuliste frontend-rakenduste loomine ja haldamine olla keeruline. Sõltuvuste haldamine, koodi järjepidevuse tagamine ja ehitusaegade optimeerimine muutuvad projektide kasvades üha keerulisemaks. Monorepod pakuvad võimsa lahenduse, koondades mitu projekti ja teeki ühte hoidlasse. Nx, nutikas ja laiendatav ehitussüsteem, täiustab monorepo arendust täiustatud tööriistade ja funktsioonidega.

See põhjalik juhend uurib Nx tööruumi kasutamise eeliseid frontend monorepo arenduses, hõlmates põhimõisteid, praktilisi näiteid ja parimaid praktikaid.

Mis on monorepo?

Monorepo on tarkvaraarenduse strateegia, mille puhul kõik projektid ja nende sõltuvused hoitakse ühes hoidlas. See lähenemine vastandub traditsioonilisele mitme hoidla lähenemisele, kus igal projektil on oma hoidla.

Monorepo peamised omadused:

• Üks tõe allikas: Kogu kood asub ühes kohas.
• Koodi jagamine ja taaskasutamine: Lihtsam koodi jagada ja taaskasutada erinevate projektide vahel.
• Lihtsustatud sõltuvuste haldamine: Sõltuvuste haldamine erinevate projektide vahel muutub otsekohesemaks.
• Atomaarsed muudatused: Muudatused võivad hõlmata mitut projekti, tagades järjepidevuse.
• Parem koostöö: Meeskondadel on lihtsam teha koostööd seotud projektides.

Miks kasutada monorepot frontend-arenduses?

Monorepod pakuvad frontend-arenduses olulisi eeliseid, eriti suurte ja keerukate projektide puhul.

• Täiustatud koodijagamine: Frontend-projektid jagavad sageli ühiseid kasutajaliidese komponente, abifunktsioone ja disainisüsteeme. Monorepo hõlbustab koodi jagamist, vähendades dubleerimist ja edendades järjepidevust. Näiteks disainisüsteemi teeki saab hõlpsasti jagada mitme Reacti rakenduse vahel samas tööruumis.
• Sujuvam sõltuvuste haldamine: Sõltuvuste haldamine mitme frontend-projekti vahel võib olla keeruline, eriti pidevalt arenevas JavaScripti ökosüsteemis. Monorepo lihtsustab sõltuvuste haldamist, tsentraliseerides sõltuvused ja pakkudes tööriistu versioonide ja uuenduste haldamiseks.
• Parem ehitamise jõudlus: Nx pakub täiustatud ehitamise vahemälu ja sõltuvuste analüüsi, võimaldades kiiremaid ja tõhusamaid ehitusi. Sõltuvusgraafikut analüüsides saab Nx uuesti ehitada ainult need projektid, mida muudatus mõjutab, vähendades oluliselt ehitusaegu. See on ülioluline suurte frontend-rakenduste puhul, millel on arvukalt komponente ja mooduleid.
• Lihtsustatud refaktoorimine: Koodi refaktoorimine mitme projekti vahel on monorepos lihtsam. Muudatusi saab teha atomaarselt, tagades järjepidevuse ja vähendades vigade tekkimise riski. Näiteks mitmes rakenduses kasutatava komponendi ümbernimetamist saab teha ühe commit'iga.
• Parem koostöö: Monorepo soodustab paremat koostööd frontend-arendajate vahel, pakkudes ühist koodibaasi ja ühist arenduskeskkonda. Meeskonnad saavad hõlpsasti panustada erinevatesse projektidesse ning jagada teadmisi ja parimaid praktikaid.

Tutvustame Nx-i: nutikas ja laiendatav ehitussüsteem

Nx on võimas ehitussüsteem, mis täiustab monorepo arendust täiustatud tööriistade ja funktsioonidega. See pakub standardiseeritud arenduskogemust, parandab ehitamise jõudlust ja lihtsustab sõltuvuste haldamist.

Nx-i peamised funktsioonid:

• Nutikas ehitussüsteem: Nx analüüsib teie projektide sõltuvusgraafikut ja ehitab uuesti ainult mõjutatud projektid, vähendades oluliselt ehitusaegu.
• Koodi genereerimine: Nx pakub koodi genereerimise tööriistu uute projektide, komponentide ja moodulite loomiseks, kiirendades arendust ja tagades järjepidevuse.
• Integreeritud tööriistad: Nx integreerub populaarsete frontend-raamistikega nagu React, Angular ja Vue.js, pakkudes sujuvat arenduskogemust.
• Pluginate ökosüsteem: Nx-il on rikkalik pluginate ökosüsteem, mis laiendab selle funktsionaalsust täiendavate tööriistade ja integratsioonidega.
• Inkrementaalsed ehitused: Nx-i inkrementaalne ehitussüsteem ehitab uuesti ainult selle, mis on muutunud, kiirendades oluliselt arenduse tagasisidetsüklit.
• Arvutuste vahemälu: Nx salvestab kulukate arvutuste, näiteks ehituste ja testide, tulemused vahemällu, parandades veelgi jõudlust.
• Hajutatud ülesannete täitmine: Väga suurte monorepode puhul saab Nx jaotada ülesandeid mitme masina vahel, et ehitusi ja teste paralleelselt teostada.

Nx tööruumi seadistamine frontend-arenduseks

Nx tööruumi seadistamine on lihtne. Saate kasutada Nx CLI-d uue tööruumi loomiseks ning projektide ja teekide lisamiseks.

Eeltingimused:

• Node.js (versioon 16 või uuem)
• npm või yarn

Sammud:

1. Installige Nx CLI:

               npm install -g create-nx-workspace
               
   
                 
                   Copy
                 
               
             

2. Looge uus Nx tööruum:

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

   Teil palutakse valida eelseadistus (preset). Valige eelseadistus, mis vastab teie eelistatud frontend-raamistikule (nt React, Angular, Vue.js).

3. Lisage uus rakendus:

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

   See käsk loob tööruumi uue Reacti rakenduse nimega "my-app".

4. Lisage uus teek:

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

   See käsk loob tööruumi uue Reacti teegi nimega "my-library". Teeke kasutatakse koodi jagamiseks rakenduste vahel.

Oma Nx tööruumi organiseerimine

Hästi organiseeritud Nx tööruum on hooldatavuse ja skaleeritavuse seisukohalt ülioluline. Arvestage oma tööruumi struktureerimisel järgmiste juhistega:

• Rakendused: Rakendused on teie frontend-projektide sisenemispunktid. Need esindavad kasutajale suunatud liideseid. Näideteks on veebirakendus, mobiilirakendus või töölauarakendus.
• Teegid: Teegid sisaldavad taaskasutatavat koodi, mida saab jagada mitme rakenduse vahel. Need on organiseeritud erinevatesse tüüpidesse vastavalt nende funktsionaalsusele.
• Funktsioonide teegid (Feature Libraries): Funktsioonide teegid sisaldavad äriloogikat ja kasutajaliidese komponente konkreetse funktsiooni jaoks. Need sõltuvad tuum- ja kasutajaliidese teekidest.
• Kasutajaliidese teegid (UI Libraries): Kasutajaliidese teegid sisaldavad taaskasutatavaid kasutajaliidese komponente, mida saab kasutada mitmes funktsioonis ja rakenduses.
• Tuumteegid (Core Libraries): Tuumteegid sisaldavad abifunktsioone, andmemudeleid ja muud ühist koodi, mida kasutatakse kogu tööruumis.
• Jagatud teegid (Shared Libraries): Jagatud teegid sisaldavad raamistikust sõltumatut koodi, mida saavad kasutada mitmed rakendused ja teegid, sõltumata frontend-raamistikust (React, Angular, Vue.js). See soodustab koodi taaskasutamist ja vähendab dubleerimist.

Näidiskataloogi struktuur:

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

Koodi jagamine ja taaskasutamine Nx teekidega

Nx teegid on koodi jagamise ja taaskasutamise võti monorepos. Organiseerides oma koodi hästi defineeritud teekidesse, saate hõlpsasti jagada komponente, teenuseid ja abivahendeid mitme rakenduse vahel.

Näide: Kasutajaliidese komponendi jagamine

Oletame, et teil on nupu komponent, mida soovite jagada mitme Reacti rakenduse vahel. Saate luua kasutajaliidese teegi nimega "ui" ja paigutada nupu komponendi sellesse teeki.

1. Looge kasutajaliidese teek:

               nx generate @nx/react:library ui
               
   
                 
                   Copy
                 
               
             

2. Looge nupu komponent:

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

3. Implementeerige nupu 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. Eksportige nupu komponent teegist:

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

5. Kasutage nupu komponenti rakenduses:

               // 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
                 
               
             

Teeke kasutades saate tagada, et teie kasutajaliidese komponendid on kõigis rakendustes järjepidevad. Kui uuendate nupu komponenti kasutajaliidese teegis, uuendatakse automaatselt kõik rakendused, mis seda komponenti kasutavad.

Sõltuvuste haldamine Nx tööruumides

Nx pakub võimsaid tööriistu projektide ja teekide vaheliste sõltuvuste haldamiseks. Saate sõltuvusi selgesõnaliselt määratleda iga projekti või teegi `project.json` failis.

Näide: Sõltuvuse deklareerimine

Oletame, et teie rakendus "my-app" sõltub teegist "core". Saate selle sõltuvuse deklareerida "my-app" `project.json` failis.

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

              
                Copy
              
            
          

Sõltuvusi selgesõnaliselt deklareerides saab Nx analüüsida teie tööruumi sõltuvusgraafikut ja ehitada uuesti ainult mõjutatud projektid, kui mõni sõltuvus muutub. See parandab oluliselt ehitamise jõudlust.

Ehitamise jõudluse optimeerimine Nx-iga

Nx-i nutikas ehitussüsteem ja arvutuste vahemälu võimalused parandavad oluliselt ehitamise jõudlust. Siin on mõned näpunäited ehitamise jõudluse optimeerimiseks oma Nx tööruumis:

• Analüüsige sõltuvusgraafikut: Kasutage käsku `nx graph`, et visualiseerida oma tööruumi sõltuvusgraafikut. Tuvastage potentsiaalsed kitsaskohad ja optimeerige oma projekti struktuuri sõltuvuste vähendamiseks.
• Kasutage arvutuste vahemälu: Nx salvestab kulukate arvutuste, näiteks ehituste ja testide, tulemused vahemällu. Veenduge, et arvutuste vahemälu on teie `nx.json` failis lubatud.
• Käivitage ülesandeid paralleelselt: Nx saab ülesandeid käivitada paralleelselt, et kasutada mitut protsessori tuuma. Kasutage lippu `--parallel`, et ülesandeid paralleelselt käivitada.
• Kasutage hajutatud ülesannete täitmist: Väga suurte monorepode puhul saab Nx jaotada ülesandeid mitme masina vahel, et ehitusi ja teste paralleelselt teostada.
• Optimeerige oma koodi: Optimeerige oma koodi ehitusaegade lühendamiseks. Eemaldage kasutamata kood, optimeerige pilte ja kasutage koodi jagamist (code splitting), et vähendada oma kimpude (bundles) suurust.

Testimine Nx tööruumides

Nx pakub integreeritud testimisvahendeid ühiktestide, integratsioonitestide ja täielike (end-to-end) testide käivitamiseks. Saate kasutada käsku `nx test`, et käivitada testid kõigi tööruumi projektide või konkreetse projekti jaoks.

Näide: Testide käivitamine

            nx test my-app
            

              
                Copy
              
            
          

See käsk käivitab kõik testid rakenduse "my-app" jaoks.

Nx toetab populaarseid testimisraamistikke nagu Jest, Cypress ja Playwright. Saate konfigureerida oma testimiskeskkonna iga projekti `project.json` failis.

Pidev integratsioon ja pidev tarnimine (CI/CD) Nx-iga

Nx integreerub sujuvalt populaarsete CI/CD süsteemidega nagu GitHub Actions, GitLab CI ja Jenkins. Saate kasutada Nx-i käsurealiidest, et automatiseerida ehitusi, teste ja juurutamisi oma CI/CD konveieril.

Näide: GitHub Actions töövoog

Siin on näide GitHub Actionsi töövoost, mis ehitab, testib ja juurutab teie Nx tööruumi:

            # .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
              
            
          

See töövoog käivitab järgmised ülesanded:

• Lintimine: Käivitab linterid mõjutatud projektidel.
• Testimine: Käivitab testid mõjutatud projektidel.
• Ehitamine: Ehitab mõjutatud projektid.

Nx pakub käsku `affected`, mis võimaldab käivitada ülesandeid ainult nendel projektidel, mida muudatus on mõjutanud. See vähendab oluliselt teie CI/CD konveieri täitmisaega.

Parimad praktikad frontend Nx tööruumi arenduses

Siin on mõned parimad praktikad frontend-rakenduste arendamiseks Nx-iga:

• Järgige ühtset kodeerimisstiili: Kasutage koodivormindajat nagu Prettier ja linterit nagu ESLint, et tagada ühtne kodeerimisstiil kogu tööruumis.
• Kirjutage ühikteste: Kirjutage ühiktestid kõigile oma komponentidele, teenustele ja abivahenditele, et tagada koodi kvaliteet ja vältida regressioone.
• Kasutage disainisüsteemi: Kasutage disainisüsteemi, et tagada järjepidevus oma kasutajaliidese komponentides.
• Dokumenteerige oma kood: Dokumenteerige oma kood põhjalikult, et teistel arendajatel oleks seda lihtsam mõista ja hooldada.
• Kasutage versioonihaldust: Kasutage versioonihalduseks Giti ja järgige ühtset harustrateegiat.
• Automatiseerige oma töövoog: Automatiseerige oma töövoog CI/CD-ga, et tagada, et teie kood on alati testitud ja automaatselt juurutatud.
• Hoidke sõltuvused ajakohased: Uuendage regulaarselt oma sõltuvusi, et saada kasu uusimatest funktsioonidest ja turvapaikadest.
• Jälgige jõudlust: Jälgige oma rakenduste jõudlust ja tuvastage potentsiaalsed kitsaskohad.

Nx-i edasijõudnute kontseptsioonid

Kui olete Nx-i põhitõdedega tuttav, saate uurida mõningaid edasijõudnute kontseptsioone, et oma arendustöövoogu veelgi täiustada:

• Kohandatud generaatorid: Looge kohandatud generaatoreid uute projektide, komponentide ja moodulite loomise automatiseerimiseks. See võib oluliselt vähendada arendusaega ja tagada järjepidevuse.
• Nx pluginad: Arendage Nx pluginaid, et laiendada Nx-i funktsionaalsust kohandatud tööriistade ja integratsioonidega.
• Module Federation: Kasutage Module Federation'it, et ehitada ja juurutada oma rakenduse iseseisvaid osi eraldi. See võimaldab kiiremaid juurutamisi ja suuremat paindlikkust.
• Nx Cloud: Integreerige Nx Cloudiga, et saada täiustatud ehitamise ülevaateid, hajutatud ülesannete täitmist ja kaugvahemälu.

Kokkuvõte

Nx tööruumid pakuvad võimsat ja tõhusat viisi frontend monorepode haldamiseks. Kasutades Nx-i täiustatud tööriistu ja funktsioone, saate parandada koodi jagamist, ehitamise jõudlust ja arendajate koostööd, mille tulemuseks on skaleeritavad ja hooldatavad frontend-rakendused. Nx-i omaksvõtmine võib sujuvamaks muuta teie arendusprotsessi ja avada teie meeskonnale märkimisväärse tootlikkuse kasvu, eriti keerukate ja suuremahuliste projektide kallal töötades. Kuna frontend-maastik areneb pidevalt, on monorepo arenduse meisterdamine Nx-iga muutumas frontend-inseneride jaoks üha väärtuslikumaks oskuseks.

See juhend on andnud põhjaliku ülevaate frontend Nx tööruumi arendusest. Järgides parimaid praktikaid ja uurides edasijõudnute kontseptsioone, saate avada Nx-i täieliku potentsiaali ja luua hämmastavaid frontend-rakendusi.