Component-Led Checklist

Đánh giá mức độ trưởng thành của kiến trúc component-led trong dự án frontend của bạn.

Tổng câu hỏi
13
Đã trả lời
0
Điểm Yes
0
Lớp 1

Primitive Layer

0 / 5
P1 Có atomic components không?

Button, Input, Icon, Badge... được tách thành unit nhỏ nhất, không phụ thuộc business logic.

P2 Có design token không?

Color, spacing, typography, border-radius... được định nghĩa tập trung thay vì hardcode rải rác.

P3 Có documented component không?

Mỗi component có props documentation, usage example, hoặc ít nhất là JSDoc comment đầy đủ.

P4 Có cấu trúc thư mục rõ ràng không?

Components được tổ chức theo nhóm (atoms, molecules...) hoặc theo domain, không để lẫn lộn.

P5 Có accessibility cơ bản không?

ARIA labels, keyboard navigation, focus management được áp dụng ít nhất ở các primitive component.

Lớp 2

Composite Layer

0 / 4
C1 Có Storybook hoặc tương đương không?

Component playground để develop, review và test UI độc lập với ứng dụng chính.

C2 Có variant management không?

Size, color, shape variants được quản lý qua props/config thống nhất, không duplicate CSS class.

C3 Có composition pattern không?

Components có thể kết hợp linh hoạt qua children, slots, render props thay vì inheritance cứng nhắc.

C4 Có visual regression test không?

Screenshot/snapshot test để phát hiện thay đổi UI không mong muốn khi refactor hoặc update dependency.

Lớp 3

Feature Layer

0 / 4
F1 Tách business logic ra khỏi UI không?

Custom hooks, services, hoặc stores xử lý data/logic; component chỉ lo render và user interaction.

F2 Có isolation test cho feature không?

Feature components được test độc lập bằng mock data/API, không phụ thuộc toàn bộ ứng dụng.

F3 Có lazy loading / code splitting không?

Feature modules được load theo nhu cầu, không bundle tất cả vào một chunk duy nhất.

F4 Có error boundary / fallback UI không?

Lỗi ở một feature không làm crash toàn bộ app; có UI fallback thân thiện thay vì màn hình trắng.

Kết quả đánh giá

0
/ 13 điểm
Chưa bắt đầu 0%
0 4 9 13
Hãy bắt đầu trả lời để xem kết quả
Trả lời các câu hỏi ở trên để đánh giá mức độ component-led của dự án bạn.
Primitive
0/5
Composite
0/4
Feature
0/4
Component-Led Architecture Maturity Checklist — v1.0