Frontend Nx Workspace: Monorepo vývoj pro škálovatelné aplikace

V dnešním rychle se rozvíjejícím prostředí vývoje softwaru může být vytváření a údržba rozsáhlých frontendových aplikací náročná. Správa závislostí, zajištění konzistence kódu a optimalizace doby sestavení se stávají stále složitějšími, jak projekty rostou. Monorepos nabízejí výkonné řešení konsolidací více projektů a knihoven do jednoho úložiště. Nx, inteligentní a rozšiřitelný systém sestavení, vylepšuje vývoj monorepo pomocí pokročilých nástrojů a funkcí.

Tato komplexní příručka zkoumá výhody používání Nx workspace pro frontend monorepo vývoj a pokrývá klíčové koncepty, praktické příklady a osvědčené postupy.

Co je Monorepo?

Monorepo je strategie vývoje softwaru, kde jsou všechny projekty a jejich závislosti uloženy v jednom úložišti. Tento přístup je v kontrastu s tradičním multi-repo přístupem, kde má každý projekt své vlastní úložiště.

Klíčové charakteristiky Monorepo:

• Jediný zdroj pravdy: Veškerý kód se nachází na jednom místě.
• Sdílení a opětovné použití kódu: Snazší sdílení a opětovné použití kódu napříč projekty.
• Zjednodušená správa závislostí: Správa závislostí napříč projekty se stává jednodušší.
• Atomické změny: Změny mohou zasahovat do více projektů, což zajišťuje konzistenci.
• Vylepšená spolupráce: Týmům se snadněji spolupracuje na souvisejících projektech.

Proč používat Monorepo pro Frontend vývoj?

Monorepos nabízejí významné výhody pro frontend vývoj, zejména u velkých a komplexních projektů.

• Vylepšené sdílení kódu: Frontend projekty často sdílejí běžné UI komponenty, pomocné funkce a designové systémy. Monorepo usnadňuje sdílení kódu, snižuje duplikaci a podporuje konzistenci. Například knihovnu designového systému lze snadno sdílet napříč více React aplikacemi ve stejném workspace.
• Zjednodušená správa závislostí: Správa závislostí napříč více frontend projekty může být náročná, zejména s neustále se vyvíjejícím JavaScript ekosystémem. Monorepo zjednodušuje správu závislostí centralizací závislostí a poskytováním nástrojů pro správu verzí a upgradů.
• Vylepšený výkon sestavení: Nx poskytuje pokročilé ukládání sestavení do mezipaměti a analýzu závislostí, což umožňuje rychlejší a efektivnější sestavení. Analýzou grafu závislostí může Nx znovu sestavit pouze projekty ovlivněné změnou, což výrazně zkracuje dobu sestavení. To je klíčové pro velké frontend aplikace s mnoha komponentami a moduly.
• Zjednodušené refaktorování: Refaktorování kódu napříč více projekty je v monorepo snazší. Změny lze provádět atomicky, což zajišťuje konzistenci a snižuje riziko zavlečení chyb. Například přejmenování komponenty používané ve více aplikacích lze provést jedním commitem.
• Lepší spolupráce: Monorepo podporuje lepší spolupráci mezi frontend vývojáři tím, že poskytuje sdílenou kódovou základnu a společné vývojové prostředí. Týmy mohou snadno přispívat do různých projektů a sdílet znalosti a osvědčené postupy.

Představujeme Nx: Inteligentní a rozšiřitelný systém sestavení

Nx je výkonný systém sestavení, který vylepšuje vývoj monorepo pomocí pokročilých nástrojů a funkcí. Poskytuje standardizované vývojové prostředí, zlepšuje výkon sestavení a zjednodušuje správu závislostí.

Klíčové vlastnosti Nx:

• Inteligentní systém sestavení: Nx analyzuje graf závislostí vašich projektů a znovu sestaví pouze ovlivněné projekty, což výrazně zkracuje dobu sestavení.
• Generování kódu: Nx poskytuje nástroje pro generování kódu pro vytváření nových projektů, komponent a modulů, což urychluje vývoj a zajišťuje konzistenci.
• Integrované nástroje: Nx se integruje s populárními frontend frameworky, jako jsou React, Angular a Vue.js, a poskytuje bezproblémové vývojové prostředí.
• Plugin ekosystém: Nx má bohatý plugin ekosystém, který rozšiřuje jeho funkčnost o další nástroje a integrace.
• Inkrementální sestavení: Inkrementální systém sestavení Nx znovu sestaví pouze to, co se změnilo, což drasticky urychluje vývojovou zpětnou vazbu.
• Ukládání výpočtů do mezipaměti: Nx ukládá do mezipaměti výsledky náročných výpočtů, jako jsou sestavení a testy, což dále zlepšuje výkon.
• Distribuované provádění úloh: Pro velmi velké monorepos může Nx distribuovat úlohy na více počítačů, aby paralelně zpracovával sestavení a testy.

Nastavení Nx Workspace pro Frontend vývoj

Nastavení Nx workspace je jednoduché. K vytvoření nového workspace a přidání projektů a knihoven můžete použít Nx CLI.

Předpoklady:

• Node.js (verze 16 nebo novější)
• npm nebo yarn

Kroky:

1. Nainstalujte Nx CLI:

               npm install -g create-nx-workspace
               
   
                 
                   Copy
                 
               
             

2. Vytvořte nový Nx workspace:

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

   Budete vyzváni k výběru předvolby. Vyberte předvolbu, která odpovídá vašemu preferovanému frontend frameworku (např. React, Angular, Vue.js).

3. Přidejte novou aplikaci:

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

   Tento příkaz vytvoří novou React aplikaci s názvem "my-app" v rámci workspace.

4. Přidejte novou knihovnu:

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

   Tento příkaz vytvoří novou React knihovnu s názvem "my-library" v rámci workspace. Knihovny se používají pro sdílení kódu napříč aplikacemi.

Organizace vašeho Nx Workspace

Dobře organizovaný Nx workspace je klíčový pro udržovatelnost a škálovatelnost. Při strukturování workspace zvažte následující pokyny:

• Aplikace: Aplikace jsou vstupní body vašich frontend projektů. Reprezentují uživatelské rozhraní. Příklady zahrnují webovou aplikaci, mobilní aplikaci nebo desktopovou aplikaci.
• Knihovny: Knihovny obsahují opakovaně použitelný kód, který lze sdílet napříč více aplikacemi. Jsou uspořádány do různých typů na základě jejich funkčnosti.
• Feature Libraries: Feature knihovny obsahují obchodní logiku a UI komponenty pro konkrétní funkci. Závisejí na core a UI knihovnách.
• UI Libraries: UI knihovny obsahují opakovaně použitelné UI komponenty, které lze použít napříč více funkcemi a aplikacemi.
• Core Libraries: Core knihovny obsahují pomocné funkce, datové modely a další běžný kód, který se používá v celém workspace.
• Shared Libraries: Shared knihovny obsahují framework-agnostický kód, který lze použít více aplikacemi a knihovnami bez ohledu na frontend framework (React, Angular, Vue.js). To podporuje opětovné použití kódu a snižuje duplikaci.

Příklad struktury adresářů:

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

Sdílení a opětovné použití kódu s Nx Knihovnami

Nx knihovny jsou klíčem ke sdílení a opětovnému použití kódu v monorepo. Uspořádáním kódu do dobře definovaných knihoven můžete snadno sdílet komponenty, služby a utility napříč více aplikacemi.

Příklad: Sdílení UI komponenty

Řekněme, že máte button komponentu, kterou chcete sdílet napříč více React aplikacemi. Můžete vytvořit UI knihovnu s názvem "ui" a umístit button komponentu do této knihovny.

1. Vytvořte UI knihovnu:

               nx generate @nx/react:library ui
               
   
                 
                   Copy
                 
               
             

2. Vytvořte button komponentu:

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

3. Implementujte button komponentu:

               // 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. Exportujte button komponentu z knihovny:

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

5. Použijte button komponentu v aplikaci:

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

Správa závislostí v Nx Workspaces

Nx poskytuje výkonné nástroje pro správu závislostí mezi projekty a knihovnami. Závislosti můžete definovat explicitně v souboru `project.json` každého projektu nebo knihovny.

Příklad: Deklarování závislosti

Řekněme, že vaše aplikace "my-app" závisí na knihovně "core". Tuto závislost můžete deklarovat v souboru `project.json` aplikace "my-app".

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

              
                Copy
              
            
          

Deklarováním závislostí explicitně může Nx analyzovat graf závislostí vašeho workspace a znovu sestavit pouze ovlivněné projekty, když se závislost změní. To výrazně zlepšuje výkon sestavení.

Optimalizace výkonu sestavení s Nx

Inteligentní systém sestavení Nx a možnosti ukládání výpočtů do mezipaměti výrazně zlepšují výkon sestavení. Zde je několik tipů pro optimalizaci výkonu sestavení ve vašem Nx workspace:

• Analyzujte graf závislostí: Použijte příkaz `nx graph` k vizualizaci grafu závislostí vašeho workspace. Identifikujte potenciální úzká místa a optimalizujte strukturu projektu, abyste snížili závislosti.
• Používejte ukládání výpočtů do mezipaměti: Nx ukládá do mezipaměti výsledky náročných výpočtů, jako jsou sestavení a testy. Ujistěte se, že ukládání výpočtů do mezipaměti je povoleno ve vašem souboru `nx.json`.
• Spouštějte úlohy paralelně: Nx může spouštět úlohy paralelně, aby využil více jader CPU. Použijte příznak `--parallel` ke spouštění úloh paralelně.
• Používejte distribuované provádění úloh: Pro velmi velké monorepos může Nx distribuovat úlohy na více počítačů, aby paralelně zpracovával sestavení a testy.
• Optimalizujte svůj kód: Optimalizujte svůj kód, abyste zkrátili dobu sestavení. Odstraňte nepoužívaný kód, optimalizujte obrázky a použijte rozdělení kódu ke snížení velikosti vašich balíčků.

Testování v Nx Workspaces

Nx poskytuje integrované nástroje pro testování pro spouštění unit testů, integračních testů a end-to-end testů. Můžete použít příkaz `nx test` ke spouštění testů pro všechny projekty ve workspace nebo pro konkrétní projekt.

Příklad: Spouštění testů

            nx test my-app
            

              
                Copy
              
            
          

Tento příkaz spustí všechny testy pro aplikaci "my-app".

Nx podporuje populární testovací frameworky, jako jsou Jest, Cypress a Playwright. Své testovací prostředí můžete konfigurovat v souboru `project.json` každého projektu.

Kontinuální integrace a kontinuální nasazení (CI/CD) s Nx

Nx se bezproblémově integruje s populárními CI/CD systémy, jako jsou GitHub Actions, GitLab CI a Jenkins. Rozhraní příkazového řádku Nx můžete použít k automatizaci sestavení, testů a nasazení ve vašem CI/CD pipeline.

Příklad: GitHub Actions Workflow

Zde je příklad GitHub Actions workflow, který sestavuje, testuje a nasazuje váš Nx workspace:

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

Tento workflow spouští následující úlohy:

• Linting: Spouští linters na ovlivněných projektech.
• Testování: Spouští testy na ovlivněných projektech.
• Sestavování: Sestavuje ovlivněné projekty.

Nx poskytuje příkaz `affected`, který vám umožňuje spouštět úlohy pouze na projektech, které byly ovlivněny změnou. To výrazně snižuje dobu provádění vašeho CI/CD pipeline.

Osvědčené postupy pro Frontend Nx Workspace vývoj

Zde je několik osvědčených postupů pro vývoj frontend aplikací s Nx:

• Dodržujte konzistentní styl kódování: Použijte formátovač kódu, jako je Prettier, a linter, jako je ESLint, abyste vynutili konzistentní styl kódování v celém workspace.
• Pište unit testy: Pište unit testy pro všechny své komponenty, služby a utility, abyste zajistili kvalitu kódu a zabránili regresím.
• Používejte designový systém: Používejte designový systém, abyste zajistili konzistenci napříč svými UI komponentami.
• Dokumentujte svůj kód: Důkladně dokumentujte svůj kód, aby bylo pro ostatní vývojáře snazší jej pochopit a udržovat.
• Používejte správu verzí: Používejte Git pro správu verzí a dodržujte konzistentní strategii větvení.
• Automatizujte svůj workflow: Automatizujte svůj workflow pomocí CI/CD, abyste zajistili, že váš kód je vždy testován a nasazován automaticky.
• Udržujte závislosti aktuální: Pravidelně aktualizujte své závislosti, abyste mohli využívat nejnovější funkce a bezpečnostní záplaty.
• Monitorujte výkon: Monitorujte výkon svých aplikací a identifikujte potenciální úzká místa.

Pokročilé Nx koncepty

Jakmile se seznámíte se základy Nx, můžete prozkoumat některé pokročilé koncepty, abyste dále vylepšili svůj vývojový workflow:

• Vlastní generátory: Vytvářejte vlastní generátory pro automatizaci vytváření nových projektů, komponent a modulů. To může výrazně zkrátit dobu vývoje a zajistit konzistenci.
• Nx Pluginy: Vyvíjejte Nx pluginy, abyste rozšířili funkčnost Nx o vlastní nástroje a integrace.
• Module Federation: Používejte Module Federation k sestavování a nasazování nezávislých částí vaší aplikace odděleně. To umožňuje rychlejší nasazení a větší flexibilitu.
• Nx Cloud: Integrujte se s Nx Cloud, abyste získali pokročilé přehledy sestavení, distribuované provádění úloh a vzdálené ukládání do mezipaměti.

Závěr

Nx workspaces poskytují výkonný a efektivní způsob správy frontend monorepos. Využitím pokročilých nástrojů a funkcí Nx můžete zlepšit sdílení kódu, výkon sestavení a spolupráci vývojářů, což vede k škálovatelným a udržovatelným frontend aplikacím. Osvojení Nx může zefektivnit váš vývojový proces a odemknout významné zvýšení produktivity vašeho týmu, zejména při práci na složitých a rozsáhlých projektech. Jak se frontend prostředí neustále vyvíjí, zvládnutí vývoje monorepo s Nx se stává stále cennější dovedností pro frontend inženýry.

Tato příručka poskytla komplexní přehled vývoje frontend Nx workspace. Dodržováním osvědčených postupů a prozkoumáním pokročilých konceptů můžete odemknout plný potenciál Nx a vytvářet úžasné frontend aplikace.