Frontend Nx Workspace: การพัฒนา Monorepo สำหรับแอปพลิเคชันที่ขยายขนาดได้

ในวงการพัฒนาซอฟต์แวร์ที่รวดเร็วในปัจจุบัน การสร้างและบำรุงรักษาแอปพลิเคชัน frontend ขนาดใหญ่อาจเป็นเรื่องท้าทาย การจัดการ dependencies การรักษาความสอดคล้องของโค้ด และการปรับปรุงเวลาในการ build จะมีความซับซ้อนมากขึ้นเมื่อโปรเจกต์เติบโตขึ้น Monorepos นำเสนอโซลูชันที่มีประสิทธิภาพโดยการรวมหลายโปรเจกต์และไลบรารีไว้ใน repository เดียว Nx ซึ่งเป็นระบบ build ที่ชาญฉลาดและขยายได้ ช่วยเพิ่มประสิทธิภาพการพัฒนา monorepo ด้วยเครื่องมือและฟีเจอร์ขั้นสูง

คู่มือฉบับสมบูรณ์นี้จะสำรวจประโยชน์ของการใช้ Nx workspace สำหรับการพัฒนา frontend แบบ monorepo โดยครอบคลุมแนวคิดหลัก ตัวอย่างการใช้งานจริง และแนวทางปฏิบัติที่ดีที่สุด

Monorepo คืออะไร?

Monorepo คือกลยุทธ์การพัฒนาซอฟต์แวร์ที่โปรเจกต์ทั้งหมดและ dependencies ของมันถูกจัดเก็บไว้ใน repository เดียว แนวทางนี้ตรงกันข้ามกับแนวทาง multi-repo แบบดั้งเดิมที่แต่ละโปรเจกต์มี repository ของตัวเอง

ลักษณะสำคัญของ Monorepo:

• แหล่งรวมความจริงเพียงแห่งเดียว (Single Source of Truth): โค้ดทั้งหมดอยู่ในที่เดียว
• การแชร์และใช้โค้ดซ้ำ (Code Sharing and Reuse): ง่ายต่อการแชร์และนำโค้ดกลับมาใช้ซ้ำในโปรเจกต์ต่างๆ
• การจัดการ Dependency ที่ง่ายขึ้น (Simplified Dependency Management): การจัดการ dependencies ระหว่างโปรเจกต์ต่างๆ ทำได้ตรงไปตรงมามากขึ้น
• การเปลี่ยนแปลงแบบ Atomic (Atomic Changes): การเปลี่ยนแปลงสามารถครอบคลุมหลายโปรเจกต์ได้พร้อมกัน ทำให้มั่นใจได้ถึงความสอดคล้อง
• การทำงานร่วมกันที่ดีขึ้น (Improved Collaboration): ทีมสามารถทำงานร่วมกันในโปรเจกต์ที่เกี่ยวข้องกันได้ง่ายขึ้น

ทำไมต้องใช้ Monorepo สำหรับการพัฒนา Frontend?

Monorepos มีข้อได้เปรียบที่สำคัญสำหรับการพัฒนา frontend โดยเฉพาะสำหรับโปรเจกต์ขนาดใหญ่และซับซ้อน

• การแชร์โค้ดที่ดียิ่งขึ้น: โปรเจกต์ frontend มักจะแชร์ UI components, utility functions และ design systems ร่วมกัน Monorepo ช่วยอำนวยความสะดวกในการแชร์โค้ด ลดการทำซ้ำ และส่งเสริมความสอดคล้อง ตัวอย่างเช่น ไลบรารี design system สามารถแชร์ข้ามแอปพลิเคชัน React หลายตัวภายใน workspace เดียวกันได้อย่างง่ายดาย
• การจัดการ Dependency ที่คล่องตัว: การจัดการ dependencies ในโปรเจกต์ frontend หลายๆ โปรเจกต์อาจเป็นเรื่องท้าทาย โดยเฉพาะกับระบบนิเวศของ JavaScript ที่เปลี่ยนแปลงตลอดเวลา Monorepo ทำให้การจัดการ dependency ง่ายขึ้นโดยการรวมศูนย์ dependencies และมีเครื่องมือสำหรับจัดการเวอร์ชันและการอัปเกรด
• ปรับปรุงประสิทธิภาพการ Build: Nx มีระบบ build caching และการวิเคราะห์ dependency ขั้นสูง ทำให้การ build เร็วและมีประสิทธิภาพมากขึ้น ด้วยการวิเคราะห์ dependency graph, Nx สามารถ build ใหม่เฉพาะโปรเจกต์ที่ได้รับผลกระทบจากการเปลี่ยนแปลง ซึ่งช่วยลดเวลาการ build ได้อย่างมาก นี่เป็นสิ่งสำคัญสำหรับแอปพลิเคชัน frontend ขนาดใหญ่ที่มี components และ modules จำนวนมาก
• การ Refactor ที่ง่ายขึ้น: การ refactor โค้ดข้ามหลายโปรเจกต์ทำได้ง่ายกว่าใน monorepo การเปลี่ยนแปลงสามารถทำได้แบบ atomic ทำให้มั่นใจได้ถึงความสอดคล้องและลดความเสี่ยงในการเกิดข้อผิดพลาด ตัวอย่างเช่น การเปลี่ยนชื่อ component ที่ใช้ในหลายแอปพลิเคชันสามารถทำได้ใน commit เดียว
• การทำงานร่วมกันที่ดีขึ้น: Monorepo ส่งเสริมการทำงานร่วมกันที่ดีขึ้นระหว่างนักพัฒนา frontend โดยการมี codebase ที่ใช้ร่วมกันและสภาพแวดล้อมการพัฒนาที่เป็นหนึ่งเดียว ทีมสามารถมีส่วนร่วมในโปรเจกต์ต่างๆ และแบ่งปันความรู้และแนวทางปฏิบัติที่ดีที่สุดได้อย่างง่ายดาย

ขอแนะนำ Nx: ระบบ Build ที่ชาญฉลาดและขยายได้

Nx เป็นระบบ build ที่ทรงพลังซึ่งช่วยเพิ่มประสิทธิภาพการพัฒนา monorepo ด้วยเครื่องมือและฟีเจอร์ขั้นสูง มันมอบประสบการณ์การพัฒนาที่เป็นมาตรฐาน ปรับปรุงประสิทธิภาพการ build และทำให้การจัดการ dependency ง่ายขึ้น

ฟีเจอร์หลักของ Nx:

• ระบบ Build อัจฉริยะ: Nx วิเคราะห์ dependency graph ของโปรเจกต์ของคุณและ build ใหม่เฉพาะโปรเจกต์ที่ได้รับผลกระทบ ซึ่งช่วยลดเวลาการ build ได้อย่างมาก
• การสร้างโค้ดอัตโนมัติ (Code Generation): Nx มีเครื่องมือสร้างโค้ดสำหรับสร้างโปรเจกต์ใหม่, components, และ modules ซึ่งช่วยเร่งการพัฒนาและรับประกันความสอดคล้อง
• เครื่องมือที่ผสานรวม (Integrated Tooling): Nx ผสานรวมกับ framework frontend ยอดนิยมอย่าง React, Angular, และ Vue.js มอบประสบการณ์การพัฒนาที่ราบรื่น
• ระบบนิเวศของปลั๊กอิน (Plugin Ecosystem): Nx มีระบบนิเวศของปลั๊กอินที่หลากหลายซึ่งขยายฟังก์ชันการทำงานด้วยเครื่องมือและการผสานรวมเพิ่มเติม
• การ Build แบบเพิ่มส่วน (Incremental Builds): ระบบ build แบบ incremental ของ Nx จะ build ใหม่เฉพาะสิ่งที่เปลี่ยนแปลงเท่านั้น ซึ่งช่วยลดระยะเวลาของ feedback loop ในการพัฒนาได้อย่างมาก
• การแคชผลการคำนวณ (Computation Caching): Nx แคชผลลัพธ์ของการคำนวณที่ใช้เวลานาน เช่น การ build และการ test ซึ่งช่วยเพิ่มประสิทธิภาพให้ดียิ่งขึ้น
• การประมวลผลงานแบบกระจาย (Distributed Task Execution): สำหรับ monorepos ขนาดใหญ่มาก Nx สามารถกระจายงานไปยังเครื่องหลายเครื่องเพื่อทำการ build และ test แบบขนานได้

การตั้งค่า Nx Workspace สำหรับการพัฒนา Frontend

การตั้งค่า Nx workspace นั้นตรงไปตรงมา คุณสามารถใช้ Nx CLI เพื่อสร้าง workspace ใหม่และเพิ่มโปรเจกต์และไลบรารีได้

ข้อกำหนดเบื้องต้น:

• Node.js (เวอร์ชัน 16 หรือใหม่กว่า)
• npm หรือ yarn

ขั้นตอน:

1. ติดตั้ง Nx CLI:

               npm install -g create-nx-workspace
               
   
                 
                   Copy
                 
               
             

2. สร้าง Nx workspace ใหม่:

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

   คุณจะถูกขอให้เลือก preset ให้เลือก preset ที่ตรงกับ framework frontend ที่คุณต้องการ (เช่น React, Angular, Vue.js)

3. เพิ่มแอปพลิเคชันใหม่:

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

   คำสั่งนี้จะสร้างแอปพลิเคชัน React ใหม่ชื่อ "my-app" ภายใน workspace

4. เพิ่มไลบรารีใหม่:

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

   คำสั่งนี้จะสร้างไลบรารี React ใหม่ชื่อ "my-library" ภายใน workspace ไลบรารีใช้สำหรับแชร์โค้ดข้ามแอปพลิเคชัน

การจัดระเบียบ Nx Workspace ของคุณ

Nx workspace ที่จัดระเบียบอย่างดีมีความสำคัญต่อการบำรุงรักษาและการขยายขนาด พิจารณาแนวทางต่อไปนี้เมื่อจัดโครงสร้าง workspace ของคุณ:

• แอปพลิเคชัน (Applications): แอปพลิเคชันคือจุดเริ่มต้นของโปรเจกต์ frontend ของคุณ ซึ่งเป็นส่วนติดต่อกับผู้ใช้ ตัวอย่างเช่น เว็บแอปพลิเคชัน, แอปพลิเคชันมือถือ, หรือแอปพลิเคชันเดสก์ท็อป
• ไลบรารี (Libraries): ไลบรารีประกอบด้วยโค้ดที่สามารถนำกลับมาใช้ใหม่และแชร์ข้ามแอปพลิเคชันต่างๆ ได้ ไลบรารีถูกจัดเป็นประเภทต่างๆ ตามฟังก์ชันการทำงาน
• ไลบรารีประเภทฟีเจอร์ (Feature Libraries): ไลบรารีประเภทฟีเจอร์ประกอบด้วย business logic และ UI components สำหรับฟีเจอร์เฉพาะ โดยจะขึ้นอยู่กับไลบรารีประเภท core และ UI
• ไลบรารีประเภท UI (UI Libraries): ไลบรารีประเภท UI ประกอบด้วย UI components ที่สามารถนำกลับมาใช้ใหม่ได้ในหลายฟีเจอร์และแอปพลิเคชัน
• ไลบรารีประเภท Core (Core Libraries): ไลบรารีประเภท Core ประกอบด้วย utility functions, data models, และโค้ดทั่วไปอื่นๆ ที่ใช้ทั่วทั้ง workspace
• ไลบรารีที่ใช้ร่วมกัน (Shared Libraries): ไลบรารีที่ใช้ร่วมกันประกอบด้วยโค้ดที่ไม่ขึ้นกับ framework (framework-agnostic) ซึ่งสามารถใช้ได้โดยหลายแอปพลิเคชันและไลบรารีโดยไม่คำนึงถึง framework frontend (React, Angular, Vue.js) สิ่งนี้ส่งเสริมการใช้โค้ดซ้ำและลดการทำซ้ำ

ตัวอย่างโครงสร้างไดเรกทอรี:

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

การแชร์และใช้โค้ดซ้ำด้วย Nx Libraries

Nx libraries คือกุญแจสำคัญในการแชร์และใช้โค้ดซ้ำใน monorepo ด้วยการจัดระเบียบโค้ดของคุณเป็นไลบรารีที่กำหนดไว้อย่างดี คุณสามารถแชร์ components, services, และ utilities ข้ามแอปพลิเคชันต่างๆ ได้อย่างง่ายดาย

ตัวอย่าง: การแชร์ UI Component

สมมติว่าคุณมี button component ที่ต้องการแชร์ข้ามแอปพลิเคชัน React หลายตัว คุณสามารถสร้างไลบรารี UI ชื่อ "ui" และวาง button component ไว้ในไลบรารีนี้

1. สร้างไลบรารี UI:

               nx generate @nx/react:library ui
               
   
                 
                   Copy
                 
               
             

2. สร้าง button component:

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

3. เขียนโค้ด button component:

               // 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. ส่งออก button component จากไลบรารี:

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

5. ใช้ button component ในแอปพลิเคชัน:

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

ด้วยการใช้ไลบรารี คุณสามารถมั่นใจได้ว่า UI components ของคุณมีความสอดคล้องกันในทุกแอปพลิเคชัน เมื่อคุณอัปเดต button component ในไลบรารี UI ทุกแอปพลิเคชันที่ใช้ component นั้นจะได้รับการอัปเดตโดยอัตโนมัติ

การจัดการ Dependency ใน Nx Workspaces

Nx มีเครื่องมือที่มีประสิทธิภาพสำหรับการจัดการ dependencies ระหว่างโปรเจกต์และไลบรารี คุณสามารถกำหนด dependencies ได้อย่างชัดเจนในไฟล์ `project.json` ของแต่ละโปรเจกต์หรือไลบรารี

ตัวอย่าง: การประกาศ Dependency

สมมติว่าแอปพลิเคชัน "my-app" ของคุณขึ้นอยู่กับไลบรารี "core" คุณสามารถประกาศ dependency นี้ในไฟล์ `project.json` ของ "my-app" ได้

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

              
                Copy
              
            
          

ด้วยการประกาศ dependencies อย่างชัดเจน Nx สามารถวิเคราะห์ dependency graph ของ workspace ของคุณและ build ใหม่เฉพาะโปรเจกต์ที่ได้รับผลกระทบเมื่อ dependency เปลี่ยนแปลง ซึ่งช่วยปรับปรุงประสิทธิภาพการ build ได้อย่างมาก

การปรับปรุงประสิทธิภาพการ Build ด้วย Nx

ระบบ build อัจฉริยะและความสามารถในการแคชผลการคำนวณของ Nx ช่วยปรับปรุงประสิทธิภาพการ build ได้อย่างมาก นี่คือเคล็ดลับบางประการสำหรับการปรับปรุงประสิทธิภาพการ build ใน Nx workspace ของคุณ:

• วิเคราะห์ Dependency Graph: ใช้คำสั่ง `nx graph` เพื่อแสดงภาพ dependency graph ของ workspace ของคุณ ระบุจุดคอขวดที่อาจเกิดขึ้นและปรับโครงสร้างโปรเจกต์ของคุณเพื่อลด dependencies
• ใช้ Computation Caching: Nx จะแคชผลลัพธ์ของการคำนวณที่ใช้เวลานาน เช่น การ build และการ test ตรวจสอบให้แน่ใจว่าได้เปิดใช้งาน computation caching ในไฟล์ `nx.json` ของคุณ
• รัน Tasks แบบขนาน: Nx สามารถรัน tasks แบบขนานเพื่อใช้ประโยชน์จาก CPU cores หลายตัว ใช้แฟล็ก `--parallel` เพื่อรัน tasks แบบขนาน
• ใช้ Distributed Task Execution: สำหรับ monorepos ขนาดใหญ่มาก Nx สามารถกระจาย tasks ไปยังเครื่องหลายเครื่องเพื่อทำการ build และ test แบบขนานได้
• ปรับปรุงโค้ดของคุณ: ปรับปรุงโค้ดของคุณเพื่อลดเวลาการ build ลบโค้ดที่ไม่ได้ใช้ ปรับขนาดรูปภาพ และใช้ code splitting เพื่อลดขนาดของ bundles ของคุณ

การทดสอบใน Nx Workspaces

Nx มีเครื่องมือทดสอบที่ผสานรวมสำหรับการรัน unit tests, integration tests, และ end-to-end tests คุณสามารถใช้คำสั่ง `nx test` เพื่อรัน tests สำหรับทุกโปรเจกต์ใน workspace หรือสำหรับโปรเจกต์ที่ระบุ

ตัวอย่าง: การรัน Tests

            nx test my-app
            

              
                Copy
              
            
          

คำสั่งนี้จะรัน tests ทั้งหมดสำหรับแอปพลิเคชัน "my-app"

Nx รองรับ testing frameworks ยอดนิยมอย่าง Jest, Cypress, และ Playwright คุณสามารถกำหนดค่าสภาพแวดล้อมการทดสอบของคุณในไฟล์ `project.json` ของแต่ละโปรเจกต์ได้

Continuous Integration และ Continuous Deployment (CI/CD) ด้วย Nx

Nx ผสานรวมกับระบบ CI/CD ยอดนิยมอย่าง GitHub Actions, GitLab CI, และ Jenkins ได้อย่างราบรื่น คุณสามารถใช้ command-line interface ของ Nx เพื่อทำให้การ builds, tests, และ deployments เป็นไปโดยอัตโนมัติใน CI/CD pipeline ของคุณ

ตัวอย่าง: GitHub Actions Workflow

นี่คือตัวอย่างของ GitHub Actions workflow ที่ทำการ build, test, และ deploy 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
              
            
          

Workflow นี้จะรัน tasks ต่อไปนี้:

• Linting: รัน linters บนโปรเจกต์ที่ได้รับผลกระทบ
• Testing: รัน tests บนโปรเจกต์ที่ได้รับผลกระทบ
• Building: Build โปรเจกต์ที่ได้รับผลกระทบ

Nx มีคำสั่ง `affected` ซึ่งช่วยให้คุณรัน tasks เฉพาะบนโปรเจกต์ที่ได้รับผลกระทบจากการเปลี่ยนแปลงเท่านั้น ซึ่งช่วยลดเวลาการทำงานของ CI/CD pipeline ของคุณได้อย่างมาก

แนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนา Frontend Nx Workspace

นี่คือแนวทางปฏิบัติที่ดีที่สุดบางประการสำหรับการพัฒนาแอปพลิเคชัน frontend ด้วย Nx:

• ปฏิบัติตามสไตล์การเขียนโค้ดที่สอดคล้องกัน: ใช้ code formatter อย่าง Prettier และ linter อย่าง ESLint เพื่อบังคับใช้สไตล์การเขียนโค้ดที่สอดคล้องกันทั่วทั้ง workspace ของคุณ
• เขียน Unit Tests: เขียน unit tests สำหรับ components, services, และ utilities ทั้งหมดของคุณเพื่อรับประกันคุณภาพของโค้ดและป้องกัน regressions
• ใช้ Design System: ใช้ design system เพื่อรับประกันความสอดคล้องของ UI components ของคุณ
• จัดทำเอกสารโค้ดของคุณ: จัดทำเอกสารโค้ดของคุณอย่างละเอียดเพื่อให้นักพัฒนาคนอื่นๆ เข้าใจและบำรุงรักษาได้ง่ายขึ้น
• ใช้ Version Control: ใช้ Git สำหรับ version control และปฏิบัติตามกลยุทธ์การแตกสาขา (branching strategy) ที่สอดคล้องกัน
• ทำให้ Workflow ของคุณเป็นอัตโนมัติ: ทำให้ workflow ของคุณเป็นอัตโนมัติด้วย CI/CD เพื่อให้แน่ใจว่าโค้ดของคุณได้รับการทดสอบและ deploy โดยอัตโนมัติเสมอ
• อัปเดต Dependencies ให้ทันสมัย: อัปเดต dependencies ของคุณเป็นประจำเพื่อรับประโยชน์จากฟีเจอร์ล่าสุดและการแก้ไขด้านความปลอดภัย
• ตรวจสอบประสิทธิภาพ: ตรวจสอบประสิทธิภาพของแอปพลิเคชันของคุณและระบุจุดคอขวดที่อาจเกิดขึ้น

แนวคิด Nx ขั้นสูง

เมื่อคุณคุ้นเคยกับพื้นฐานของ Nx แล้ว คุณสามารถสำรวจแนวคิดขั้นสูงบางอย่างเพื่อปรับปรุง workflow การพัฒนาของคุณให้ดียิ่งขึ้น:

• Custom Generators: สร้าง generators ที่กำหนดเองเพื่อทำให้การสร้างโปรเจกต์, components, และ modules ใหม่เป็นไปโดยอัตโนมัติ ซึ่งสามารถลดเวลาในการพัฒนาและรับประกันความสอดคล้องได้อย่างมาก
• Nx Plugins: พัฒนา Nx plugins เพื่อขยายฟังก์ชันการทำงานของ Nx ด้วยเครื่องมือและการผสานรวมที่กำหนดเอง
• Module Federation: ใช้ Module Federation เพื่อ build และ deploy ส่วนต่างๆ ของแอปพลิเคชันของคุณอย่างอิสระ ซึ่งช่วยให้การ deploy เร็วขึ้นและมีความยืดหยุ่นมากขึ้น
• Nx Cloud: ผสานรวมกับ Nx Cloud เพื่อรับข้อมูลเชิงลึกเกี่ยวกับการ build ขั้นสูง, การประมวลผลงานแบบกระจาย, และ remote caching

บทสรุป

Nx workspaces เป็นวิธีที่มีประสิทธิภาพและประสิทธิผลในการจัดการ frontend monorepos ด้วยการใช้ประโยชน์จากเครื่องมือและฟีเจอร์ขั้นสูงของ Nx คุณสามารถปรับปรุงการแชร์โค้ด, ประสิทธิภาพการ build, และการทำงานร่วมกันของนักพัฒนา ซึ่งส่งผลให้ได้แอปพลิเคชัน frontend ที่สามารถขยายขนาดและบำรุงรักษาได้ การนำ Nx มาใช้สามารถปรับปรุงกระบวนการพัฒนาของคุณและปลดล็อกประสิทธิภาพการทำงานที่เพิ่มขึ้นอย่างมีนัยสำคัญสำหรับทีมของคุณ โดยเฉพาะอย่างยิ่งเมื่อทำงานในโปรเจกต์ที่ซับซ้อนและมีขนาดใหญ่ ในขณะที่วงการ frontend ยังคงพัฒนาต่อไป การเชี่ยวชาญการพัฒนา monorepo ด้วย Nx กำลังกลายเป็นทักษะที่มีค่ามากขึ้นสำหรับวิศวกร frontend

คู่มือนี้ได้ให้ภาพรวมที่ครอบคลุมของการพัฒนา frontend Nx workspace ด้วยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดและสำรวจแนวคิดขั้นสูง คุณสามารถปลดล็อกศักยภาพสูงสุดของ Nx และสร้างแอปพลิเคชัน frontend ที่น่าทึ่งได้