6.4 KiB
Bài tập: Khám phá các công cụ phát triển web hiện đại
Hướng dẫn
Hệ sinh thái phát triển web bao gồm hàng trăm công cụ chuyên biệt giúp các nhà phát triển xây dựng, kiểm tra và duy trì ứng dụng một cách hiệu quả. Nhiệm vụ của bạn là nghiên cứu và hiểu các công cụ bổ sung cho những công cụ đã được đề cập trong bài học này.
Nhiệm vụ của bạn: Chọn ba công cụ mà chưa được đề cập trong bài học này (tránh chọn trình soạn thảo mã, trình duyệt hoặc công cụ dòng lệnh đã được liệt kê). Tập trung vào các công cụ giải quyết các vấn đề cụ thể trong quy trình làm việc phát triển web hiện đại.
Đối với mỗi công cụ, cung cấp:
- Tên công cụ và danh mục (ví dụ: "Figma - Công cụ thiết kế" hoặc "Jest - Framework kiểm thử")
- Mục đích và lợi ích - Giải thích trong 2-3 câu lý do tại sao một nhà phát triển web sẽ sử dụng công cụ này và những vấn đề mà nó giải quyết
- Liên kết tài liệu chính thức - Cung cấp liên kết đến tài liệu chính thức hoặc trang web của công cụ (không chỉ các trang hướng dẫn)
- Ngữ cảnh thực tế - Đề cập một cách mà công cụ này phù hợp với quy trình làm việc chuyên nghiệp
Các danh mục công cụ gợi ý
Hãy xem xét khám phá các công cụ từ những danh mục sau:
| Danh mục | Ví dụ | Chức năng |
|---|---|---|
| Công cụ Build | Vite, Webpack, Parcel, esbuild | Gộp và tối ưu hóa mã cho sản xuất với máy chủ phát triển nhanh |
| Framework kiểm thử | Vitest, Jest, Cypress, Playwright | Đảm bảo mã hoạt động chính xác và phát hiện lỗi trước khi triển khai |
| Công cụ thiết kế | Figma, Adobe XD, Penpot | Tạo mockup, prototype và hệ thống thiết kế một cách hợp tác |
| Nền tảng triển khai | Netlify, Vercel, Cloudflare Pages | Lưu trữ và phân phối website với CI/CD tự động |
| Quản lý phiên bản | GitHub, GitLab, Bitbucket | Quản lý thay đổi mã, hợp tác và quy trình dự án |
| Framework CSS | Tailwind CSS, Bootstrap, Bulma | Tăng tốc việc tạo kiểu với thư viện thành phần dựng sẵn |
| Trình quản lý gói | npm, pnpm, Yarn | Cài đặt và quản lý thư viện mã và các phụ thuộc |
| Công cụ hỗ trợ tiếp cận | axe-core, Lighthouse, Pa11y | Kiểm tra thiết kế bao gồm và tuân thủ WCAG |
| Phát triển API | Postman, Insomnia, Thunder Client | Kiểm tra và tài liệu hóa API trong quá trình phát triển |
Yêu cầu định dạng
Đối với mỗi công cụ:
### [Tool Name] - [Category]
**Purpose:** [2-3 sentences explaining why developers use this tool]
**Documentation:** [Official website/documentation link]
**Workflow Integration:** [1 sentence about how it fits into development process]
Hướng dẫn chất lượng
- Chọn công cụ hiện tại: Chọn các công cụ được duy trì tích cực và được sử dụng rộng rãi vào năm 2025
- Tập trung vào giá trị: Giải thích lợi ích cụ thể, không chỉ những gì công cụ làm
- Ngữ cảnh chuyên nghiệp: Xem xét các công cụ được sử dụng bởi các nhóm phát triển, không chỉ các cá nhân làm việc tự do
- Lựa chọn đa dạng: Chọn công cụ từ các danh mục khác nhau để thể hiện sự đa dạng của hệ sinh thái
- Liên quan hiện đại: Ưu tiên các công cụ phù hợp với xu hướng và thực hành tốt nhất trong phát triển web hiện nay
Tiêu chí đánh giá
| Xuất sắc | Tốt | Cần cải thiện |
|---|---|---|
| Giải thích rõ lý do tại sao các nhà phát triển sử dụng từng công cụ và những vấn đề mà nó giải quyết | Giải thích công cụ làm gì nhưng thiếu một số ngữ cảnh về giá trị của nó | Liệt kê công cụ nhưng không giải thích mục đích hoặc lợi ích của chúng |
| Cung cấp liên kết tài liệu chính thức cho tất cả các công cụ | Cung cấp hầu hết liên kết chính thức với 1-2 trang hướng dẫn | Chủ yếu dựa vào các trang hướng dẫn thay vì tài liệu chính thức |
| Chọn các công cụ hiện tại, được sử dụng chuyên nghiệp từ các danh mục đa dạng | Chọn công cụ tốt nhưng giới hạn về sự đa dạng trong danh mục | Chọn công cụ lỗi thời hoặc chỉ từ một danh mục |
| Thể hiện sự hiểu biết về cách các công cụ phù hợp với quy trình làm việc phát triển | Thể hiện một số hiểu biết về ngữ cảnh chuyên nghiệp | Chỉ tập trung vào tính năng của công cụ mà không có ngữ cảnh quy trình làm việc |
💡 Mẹo nghiên cứu: Tìm kiếm các công cụ được đề cập trong các tin tuyển dụng cho nhà phát triển web, kiểm tra các khảo sát phổ biến của nhà phát triển, hoặc khám phá các phụ thuộc được sử dụng bởi các dự án mã nguồn mở thành công trên GitHub!
Tuyên bố miễn trừ trách nhiệm:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI Co-op Translator. Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.