Storybook: "Showroom linh kiện" giúp UI hết bị lệch khi nhiều người và AI cùng code

Mỗi người một kiểu nút, AI thì tự chế thêm — UI lệch dần là chuyện tất yếu. Storybook biến toàn bộ component thành một showroom chuẩn duy nhất, cài xong trong 10 phút.

Storybook: "Showroom linh kiện" giúp UI hết bị lệch khi nhiều người và AI cùng code

Storybook là một công cụ mã nguồn mở miễn phí, cho phép bạn dựng và xem từng thành phần giao diện — nút bấm, bảng dữ liệu, popup — riêng lẻ trong một môi trường tách biệt, không dính gì tới backend hay logic nghiệp vụ của ứng dụng. Sức mạnh thật sự của nó nằm ở chỗ: Storybook trở thành cuốn catalogue chính thức duy nhất cho toàn bộ component mà team bạn đang có. Đó chính là thứ giúp giao diện không bị lệch dần khi nhiều người (hoặc một trợ lý AI) cùng viết code UI một lúc.

Nếu bạn từng nghĩ "UI của tụi mình cứ mỗi chỗ một kiểu vì ai cũng tự chế nút riêng, kể cả AI" — bài này viết cho bạn.

Storybook là gì? (nói cho dễ hiểu)

Hãy tưởng tượng một showroom ô tô, nhưng thay vì trưng bày xe hoàn chỉnh thì trưng bày từng linh kiện.

Thay vì phải ráp xong cả chiếc xe mới biết vô-lăng cầm có đã tay không, bạn đặt vô-lăng, ghế ngồi và bánh xe mỗi thứ lên một bệ trưng bày riêng. Bạn xem kỹ, chỉnh sửa, duyệt. Xong xuôi rồi mới lắp vào xe thật.

Storybook chính là cái showroom đó cho giao diện ứng dụng của bạn. Mỗi UI component có một bệ riêng, và bạn có thể tới xem nó mà không cần khởi động cả ứng dụng.

Về mặt kỹ thuật: Storybook chạy một trang web nhỏ của riêng nó (mặc định ở http://localhost:6006) để render component ở trạng thái isolated — tức là không cần backend, không cần màn hình đăng nhập, không phải bấm qua năm trang mới tới được cái nút bạn đang sửa.

Giao diện Storybook hiển thị component Button ở khung canvas giữa, danh sách story ở sidebar bên trái, và panel Controls bên dưới để chỉnh từng thuộc tính trực tiếp Toàn bộ ý tưởng gói gọn trong một màn hình: component ở giữa, danh sách các trạng thái bên trái, và các thuộc tính chỉnh được ở dưới cùng. (Nguồn: Storybook Docs)

"Story" là gì?

Một story là một trạng thái đã được lưu lại của một component. Chỉ vậy thôi.

Định nghĩa chính thức từ team Storybook: "A story captures the rendered state of a UI component." — tức là một story ghi lại đúng cái mà component hiển thị ra ở một trạng thái cụ thể.

Ví dụ một component bảng dữ liệu (Data Table / Records) có thể có bốn story:

Story Hiển thị cái gì
Default Bảng với dữ liệu bình thường
Loading Hiệu ứng skeleton / spinner khi đang tải
Empty Không có dữ liệu — hiện thông báo "No data"
Dark Vẫn bảng đó nhưng ở giao diện nền tối

Bạn chỉ viết một lần. Từ đó về sau, ai cũng có thể bấm xem cả bốn trạng thái trong vài giây — không cần cố tình làm hỏng API chỉ để xem màn hình lỗi trông ra sao.

File story nằm ngay cạnh component mà nó mô tả:

components/
├─ Button/
│  ├─ Button.tsx
│  ├─ Button.stories.tsx

File .stories.tsx chính là cái bảng tên trong showroom cho Button.tsx. Storybook tự tìm thấy nó, bạn không phải khai báo ở đâu cả.

Tại sao bạn nên quan tâm?

Đây là năm thứ Storybook thực sự mang lại.

1. Dựng UI được ngay cả khi backend chưa xong

Frontend thường bị kẹt vì phải chờ API. Với Storybook, bạn nhét dữ liệu giả thẳng vào component, nên hôm nay bạn hoàn thiện xong giao diện, tuần sau nối dữ liệu thật cũng chẳng sao.

2. Chặn hiện tượng UI bị lệch — kể cả khi AI tự chế

Đây là điểm quan trọng nhất, và cũng là lý do Storybook trở nên thiết yếu trong thời AI viết phần lớn code cho chúng ta.

Khi năm người (hoặc một người cộng thêm một trợ lý AI) đều cần một cái nút, mà không có chỗ nào rõ ràng để tra xem nút đã tồn tại chưa, thì ai cũng tự đẻ ra một cái mới. Sáu tháng sau bạn có mười một cái nút hơi khác nhau và không ai biết cái nào mới đúng chuẩn.

Storybook giải quyết bằng cách làm Single Source of Truth — nguồn chuẩn duy nhất. Trước khi viết component mới, người ta mở Storybook lên kiểm tra xem đã có sẵn chưa. Thường là có rồi.

⚠️ Cách này chỉ hiệu quả nếu cả team thật sự coi Storybook là chỗ tra cứu. Nếu mọi người vẫn viết component mà không thèm mở ra xem, Storybook chỉ thành thêm một thư mục code bị lãng quên. Hãy đưa câu "check Storybook chưa?" vào quy trình code review.

Và khi một thay đổi nào đó làm vỡ giao diện, tính năng visual testing của Storybook sẽ bắt được — nó so ảnh chụp trước và sau rồi chỉ đúng chỗ bị xê dịch:

Panel Visual Tests của Storybook đánh dấu một component có thay đổi về hình ảnh, kèm phần khác biệt để lập trình viên duyệt hoặc từ chối Visual testing đánh dấu từng pixel bị thay đổi và bắt con người xác nhận — nhờ vậy một thay đổi UI ngoài ý muốn không thể lọt lên production. (Nguồn: Storybook Docs)

3. Tài liệu sống, không bao giờ lỗi thời

Một file Figma hay một trang wiki mô tả component sẽ lạc hậu ngay khi ai đó sửa code. Storybook thì không thể lạc hậu — vì nó render chính code hiện tại.

Nghĩa là designer, Product Owner, hay một dev mới vào hôm qua chỉ cần mở một đường link là thấy toàn bộ component của sản phẩm, ở mọi trạng thái, đúng như nó đang thật sự trông như vậy hôm nay.

4. Kiểm tra các trường hợp éo le trong vài giây

Text quá dài. Danh sách rỗng. Màn hình điện thoại bé xíu. Dark mode. Bình thường bạn phải đi lùng dữ liệu thật để tái hiện từng ca. Trong Storybook, bạn chỉ cần sửa giá trị ở panel Controls và xem component phản ứng ngay lập tức.

Panel Controls của Storybook mở rộng, hiển thị từng thuộc tính của component dưới dạng ô nhập liệu kèm kiểu dữ liệu và giá trị mặc định Mỗi thuộc tính biến thành một ô nhập liệu — không cần sửa code vẫn thử được giá trị mới. (Nguồn: Storybook Docs)

5. Designer và developer cuối cùng cũng nói chung một ngôn ngữ

Designer mở Storybook lên là so được component đã code với thiết kế Figma đặt cạnh nhau. Tranh cãi được giải quyết bằng cách nhìn vào hàng thật, thay vì cãi nhau qua một tấm ảnh chụp màn hình.

Bạn cần chuẩn bị gì

Một checklist ngắn:

⚠️ Kiểm tra phiên bản Node trước bằng node -v. Nếu nó in ra thứ gì đó bắt đầu bằng v18, hãy nâng cấp trước khi làm tiếp — đây là nguyên nhân số một khiến việc cài đặt thất bại.

Bước 1: Cài Storybook

Mở terminal ngay trong thư mục dự án và chạy:

npm create storybook@latest

Lệnh này tải Storybook về, tự nhận diện dự án của bạn dùng framework nào, ghi cấu hình vào thư mục .storybook/ mới, và sinh sẵn vài story mẫu để bạn có cái mà xem ngay.

Nó sẽ hỏi bạn vài câu khi cài. Cứ để mặc định là ổn.

Bước 2: Khởi động lên

npm run storybook

Lệnh này bật trang web Storybook và tự mở http://localhost:6006 trên trình duyệt.

Bạn sẽ thấy: một trang có sidebar bên trái liệt kê các component mẫu, một khung xem trước to ở giữa, và panel addons ở phía dưới.

⚠️ Nếu trình duyệt báo không vào được trang, khả năng cao là có thứ khác đang chiếm cổng 6006. Storybook thường sẽ tự chọn cổng khác và in ra ở terminal — hãy đọc dòng thông báo trong terminal thay vì mặc định là 6006.

Bước 3: Viết story đầu tiên

Tạo file tên Button.stories.tsx ngay cạnh Button.tsx, rồi dán đoạn này vào:

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary: Story = {
  args: {
    label: '😄👍😍💯',
  },
};

Nói cho dễ hiểu: khối meta ở trên cùng báo cho Storybook biết file này nói về component nào. Mọi thứ được export bên dưới — Primary, Secondary — sẽ thành một mục trong sidebar. Còn object args chỉ đơn giản là các props mà bạn muốn truyền cho phiên bản đó.

Định dạng này có tên riêng: CSF (Component Story Format). Nó là cú pháp module JavaScript bình thường, nên chẳng có ngôn ngữ mới nào phải học cả.

Bạn sẽ thấy: lưu file lại, hai mục mới hiện ra dưới Button trong sidebar. Không cần khởi động lại.

Bước 4: Thêm những trạng thái quan trọng

Giờ thêm các trạng thái mà người ta hay quên thiết kế. Vẫn file đó, thêm export:

export const Loading: Story = {
  args: { label: 'Saving…', loading: true },
};

export const Disabled: Story = {
  args: { label: 'Button', disabled: true },
};

Mỗi export mới là một story mới. "Kệ trưng bày" của component đầy dần lên như vậy đó — mỗi trạng thái một export, không cần logic cao siêu gì.

Panel Controls của Storybook đang đổi thuộc tính variant của component qua các giá trị chuỗi có sẵn Đổi variant trong panel Controls là component render lại ngay — đây là cách bạn soi hết mọi trạng thái hiển thị chỉ trong vài giây. (Nguồn: Storybook Docs)

Bước 5: Biến story thành bài test

Đây là phần đa số mọi người bỏ lỡ. Mỗi story bạn viết ra vốn dĩ đã là một ca kiểm thử — Storybook có thể chạy chúng tự động và báo cho bạn biết component có bị crash, hiển thị sai, hay vi phạm quy tắc accessibility hay không.

Bạn có thể bật các tính năng kiểm thử ngay khi cài:

npm create storybook@latest --features docs test a11y

Lệnh này thêm ba thứ: docs sinh trang tài liệu cho từng component, test chạy story của bạn như test tự động, còn a11y kiểm tra component theo các quy tắc accessibility (độ tương phản, thiếu nhãn, điều hướng bằng bàn phím).

Panel accessibility của Storybook liệt kê các lỗi phát hiện được trên một component, kèm quy tắc bị vi phạm và phần tử liên quan Addon accessibility tự động rà mọi story và chỉ rõ quy tắc nào bị vi phạm, ở đâu. (Nguồn: Storybook Docs)

Dưới đây là một video ngắn từ chính đội bảo trì Storybook, đi qua toàn bộ quy trình kiểm thử UI tự động:

📺 How to Test UI AUTOMATICALLY — Storybook and Chromatic (Chromatic — đội đang bảo trì Storybook)

Bạn vừa làm được gì

FAQ

Dự án nhỏ có cần Storybook không? Có lẽ không, nếu bạn làm một mình một thứ dùng ngắn hạn. Nó chỉ thật sự đáng công khi có người thứ hai — hoặc một trợ lý AI — bắt đầu viết code UI, vì đó là lúc component bắt đầu bị nhân bản lung tung.

Storybook có làm ứng dụng chậm đi không? Không. Nó là công cụ phát triển tách riêng, không bao giờ đi kèm tới người dùng cuối. Bundle production của bạn không thay đổi gì.

Có phải viết story cho mọi component không? Không. Hãy bắt đầu với những component được dùng lại nhiều nhất — button, input, card, table. Đó là chỗ sự thiếu nhất quán gây thiệt hại nhiều nhất. Phần còn lại bổ sung dần.

Storybook có ngăn được AI tự chế component mới không? Tự thân nó thì không — nó là cuốn catalogue, không phải cái barie. Nhưng nó cho AI (và cho đồng đội của bạn) một danh sách rõ ràng những gì đã có sẵn, đúng thứ context cần thiết để tái sử dụng thay vì phát minh lại. Trỏ công cụ AI của bạn vào Storybook thì tình trạng trùng lặp giảm hẳn.

Chi phí thế nào? Bản thân Storybook miễn phí và mã nguồn mở. Một vài dịch vụ đi kèm dạng hosted — như Chromatic để chạy visual testing trên cloud — là dịch vụ trả phí, nhưng bạn không cần chúng vẫn hưởng được phần lợi ích cốt lõi.

Nguồn tham khảo

#Storybook #FrontendDevelopment #DesignSystem #UIComponents #React #WebDevelopment #AICoding #DeveloperTools

✍️ Tác giả: Do Ngoc Hoan Founder of CookConnects.ca & Wizy.ca. Kết nối khoảng cách giữa thuật toán tiên tiến và thực thi kinh doanh. Tôi viết cho những founder kỹ thuật muốn mở rộng tầm ảnh hưởng bằng AI và kỹ thuật vững chắc.

← Blog