Storybook: Công Cụ Phát Triển Component UI Độc Lập

Storybook Là Gì?

Storybook là một công cụ mã nguồn mở để xây dựng, viết tài liệu, và kiểm thử UI component cùng các trang, tách biệt khỏi ứng dụng chính của bạn. Nó chạy dev server riêng và load từng component vào một story, tức một file mô tả một trạng thái hay biến thể, theo README. Các renderer cốt lõi được README liệt kê gồm React, Angular, Vue 3, Web Components, HTML, Ember, Svelte, Preact, và React Native, cùng hỗ trợ từ cộng đồng cho Qwik và SolidJS.

Năng Lực Cốt Lõi Cho Phát Triển Component

• ✓Chín renderer cốt lõi theo README: React, Angular, Vue 3, Web Components, HTML, Ember, Svelte, Preact, và React Native.
• ✓Các tích hợp do cộng đồng duy trì mở rộng sang Qwik và SolidJS, được dẫn link trực tiếp từ README.
• ✓Hỗ trợ mobile native cho Android, iOS, và Flutter qua dự án riêng storybookjs/native.
• ✓Một addon API có thể cấu hình. README liệt kê các addon cho kiểm tra khả năng tiếp cận (a11y), ghi log tương tác (actions), backgrounds, tài liệu (docs), truy vấn GraphQL, và kết quả test Jest, cùng nhiều addon khác.
• ✓storybook.new dựng một project ví dụ chạy được ngay trên StackBlitz, không cần cài đặt local.
• ✓Trang showcase Component Encyclopedia dẫn link tới các project thực tế được xây bằng Storybook.
• ✓Hướng dẫn migrate sẵn trong README: người dùng addon info/notes được hướng sang docs, người dùng contexts sang toolbars, người dùng addon-storyshots sang dự án test-runner riêng.

Cách Các Team Dùng Storybook

• •Duy trì một component library dùng chung cho nhiều team sản phẩm, tận dụng addon cho tài liệu và kiểm tra khả năng tiếp cận.
• •Kiểm thử từng trạng thái component riêng lẻ, như loading, error, hay empty, mà không cần dựng lại các màn hình xung quanh trong ứng dụng.
• •Onboard nhà phát triển frontend hay designer mới bằng trang showcase Component Encyclopedia thay vì một bản build ứng dụng đầy đủ.
• •Chuẩn hoá một quy trình component xuyên suốt các dự án React, Vue, Angular, hay Web Components, vì mỗi framework đều là renderer cốt lõi.
• •Mở rộng cùng quy trình dựa trên story sang mobile qua dự án storybookjs/native cho Android, iOS, và Flutter.

Bắt Đầu Với Storybook

README của repository này không liệt kê lệnh cài đặt để thêm Storybook vào một project sẵn có. Nó hướng người đọc tới storybook.js.org để xem tài liệu, và tới storybook.new, nơi dựng một project ví dụ chạy được trên StackBlitz ngay trong trình duyệt, không cần cài đặt gì ở máy local. Với các bước setup project thực tế, hãy coi trang tài liệu là nguồn chính xác thay vì README này. Bản thân README chỉ ghi lại các script dành cho contributor của chính monorepo, gồm yarn start, yarn task, yarn lint, và yarn test, dùng để build và test Storybook chứ không phải để thêm nó vào ứng dụng của bạn.

Mở Rộng Storybook Với Addon Và Ví Dụ

Khả năng mở rộng của Storybook đến từ addon API. README liệt kê a11y để kiểm tra khả năng tiếp cận, actions để ghi log tương tác của component, backgrounds và viewport để test các bối cảnh hiển thị khác nhau, docs để sinh trang tài liệu từ story, graphql để truy vấn một GraphQL server ngay trong story, và jest để xem kết quả unit test cạnh component. README có link tới bảng hỗ trợ addon và framework đầy đủ để kiểm tra tính tương thích trước khi cài một addon. Nếu bạn đang nâng cấp một project cũ, README nêu rõ ba đường migrate: chuyển từ addon info/notes sang docs, từ contexts sang toolbars, và từ addon-storyshots sang dự án test-runner riêng.

Khám Phá Các Công Cụ Phát Triển Component Khác

Câu Hỏi Thường Gặp Về Storybook

Vấn đề mà nó giải quyết

Nhà phát triển frontend muốn sửa một trạng thái cụ thể của component, như trạng thái mở của một dropdown hay khung xương loading của một card, thường phải chạy cả ứng dụng và click qua nhiều màn hình mới đến được đúng trạng thái đó. README của Storybook đóng khung lý do dự án tồn tại quanh việc bỏ qua bước di chuyển đó: mỗi trạng thái component có một file story riêng, được load trực tiếp trong một dev server độc lập, để nhà phát triển hay designer nhảy thẳng đến trạng thái cần sửa thay vì phải dựng lại nó bên trong một ứng dụng đang chạy.

Ai nên dùng — và ai nên bỏ qua

Hãy thử Storybook nếu bạn đang duy trì một component library hay design system trải dài trên nhiều framework, hoặc nếu team của bạn liên tục mất thời gian dựng lại các trạng thái edge-case bên trong một ứng dụng đang chạy. Bỏ qua nếu bạn đang xây một ứng dụng nhỏ với vài component đơn lẻ và không có thư viện dùng chung nào cần viết tài liệu. Chi phí setup addon và viết story sẽ không đáng để bỏ ra ở quy mô đó.

Repo liên quan