為什麼選擇 Storybook？

問題所在

網頁的普遍性正將更多的複雜性推向前端。它始於響應式網頁設計，這將每個使用者介面從一個變成 10 個、100 個、1000 個不同的使用者介面。隨著時間的推移，設備、瀏覽器、無障礙性、效能和非同步狀態等其他要求也堆疊了起來。

像 React、Vue 3 和 Angular 這種以元件驅動的工具可協助將複雜的 UI 分解為簡單的元件，但它們並非萬能。隨著前端的成長，元件的數量也會隨之增加。成熟的專案可能包含數百個元件，產生數千種不同的變化。

更複雜的是，這些 UI 很難除錯，因為它們與業務邏輯、互動狀態和應用程式內容糾纏在一起。

現代前端的廣度讓現有的工作流程不堪負荷。開發人員必須考慮無數的 UI 變化，但卻沒有配備開發或組織所有這些變化。最終導致 UI 更難建置、工作起來不令人滿意且脆弱的情況。

UI multiverse

解決方案

獨立建置 UI

現在，每個 UI 部分都是一個元件。元件的超能力在於您不需要啟動整個應用程式就可以查看它們的渲染方式。您可以透過傳入屬性、模擬資料或偽造事件來獨立渲染特定的變化。

Storybook 打包成一個小型的、僅限於開發的工作坊，與您的應用程式並存。它提供一個獨立的 iframe 來渲染元件，而不會受到應用程式業務邏輯和內容的干擾。這可協助您專注於開發元件的每個變化，即使是難以觸及的邊緣案例。

將 UI 變化擷取為「Stories」

在獨立開發元件變化時，請將其儲存為 Story。Stories是一種宣告式語法，用於提供屬性和模擬資料來模擬元件變化。每個元件可以有多個 Story。每個 Story 都允許您展示該元件的特定變化，以驗證外觀和行為。

您會為細微的 UI 元件變化撰寫 Story，然後在開發、測試和文件中使用這些 Story。

Histogram.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { Histogram } from './Histogram';
 
const meta: Meta<typeof Histogram> = {
  component: Histogram,
};
 
export default meta;
type Story = StoryObj<typeof Histogram>;
 
export const Default: Story = {
  args: {
    dataType: 'latency',
    showHistogramLabels: true,
    histogramAccentColor: '#1EA7FD',
    label: 'Latency distribution',
  },
};

Storybook 會追蹤每個 Story

Storybook 是您的 UI 元件及其 Stories 的互動式目錄。過去，您必須啟動應用程式、導覽至頁面，然後將 UI 扭曲成正確的狀態。這非常浪費時間，並阻礙了前端開發。使用 Storybook，您可以跳過所有這些步驟，直接跳到在特定狀態下處理 UI 元件。

Storybook 在我的專案中扮演什麼角色？

Storybook 以一個小型、僅限開發使用的工作坊形式存在，與您的應用程式並行。您可以透過執行指令來安裝它。

在開發過程中，請在獨立的節點程序中執行它。如果您正在隔離地處理 UI，您唯一需要執行的是 Storybook。

Storybook 是否能與我喜愛的函式庫搭配使用？

Storybook 旨在與業界標準工具和平台整合，以簡化設定。感謝我們積極的開發人員社群，我們取得了顯著的進展。有數百個擴充套件和教學文件，說明如何在各種類型的專案中設定 Storybook。

如果您使用的是利基框架或最近推出的工具，我們可能尚未為其提供整合。請考慮自行建立概念驗證，為社群中的其他人開路。

推薦的 Storybook 工作流程是什麼？

每個團隊都不同，他們的工作流程也是如此。Storybook 的設計是可以逐步採用的。團隊可以逐漸嘗試各項功能，以了解哪些功能最適合他們。

大多數社群成員選擇元件驅動的工作流程。UI 是從「由下而上」的方式隔離開發，從基本元件開始，然後逐步組合以組裝頁面。

隔離建構每個元件，並為其變化撰寫 stories。
將小型元件組合在一起，以實現更複雜的功能。
透過組合複合元件來組裝頁面。
透過連接資料和業務邏輯將頁面整合到您的專案中。

優點

當您為元件撰寫 stories 時，您將免費獲得許多額外的好處。

📝 開發更耐用的 UI

隔離元件和頁面，並將它們的使用案例追蹤為 stories。驗證 UI 中難以觸及的邊緣案例。使用擴充套件來模擬元件所需的一切，例如：上下文、API 請求、裝置功能等。

✅ 更輕鬆地測試 UI，且無不穩定性

Stories 是追蹤 UI 狀態的實用且可重現的方式。在開發期間使用它們來抽樣測試 UI。Storybook 提供用於自動化元件、易用性和視覺測試的內建工作流程。或將 stories 當作測試案例，方法是將它們匯入到其他 JavaScript 測試工具中。

📚 為您的團隊記錄可重複使用的 UI

Storybook 是您 UI 的單一事實來源。Stories 會索引您所有的元件及其各種狀態，讓您的團隊可以輕鬆找到並重複使用現有的 UI 模式。Storybook 也會從這些 stories 中自動產生文件。

📤 分享 UI 實際運作的方式

Stories 顯示 UI 實際運作的方式，而不僅僅是它們應該如何運作的圖片。這可讓所有人瞭解目前生產環境中的內容。發佈 Storybook 以取得隊友的核准。或將它們嵌入到維基、Markdown 和 Figma 中以簡化協作。

🚦自動化 UI 工作流程

Storybook 與您的持續整合工作流程相容。將它作為 CI 步驟加入，以自動化使用者介面測試、與隊友檢閱實作，並取得利害關係人的核准。

撰寫一次 stories，處處重複使用

Storybook 由 Component Story Format 提供支援，這是一個基於 JavaScript ES6 模組的開放標準。這使得 stories 可以在開發、測試和設計工具之間互通。每個 story 都會匯出為 JavaScript 函式，讓您可以將其重複用於其他工具。沒有供應商鎖定。

將 stories 與 Jest 或 Vitest 和 Testing Library 搭配使用，以驗證互動。將它們放入 Chromatic 中進行視覺測試。使用 Axe 稽核 story 的易用性。或使用 Playwright 和 Cypress 測試使用者流程。重複使用可在不增加額外成本的情況下，解鎖更多工作流程。

Storybook 旨在協助您以更高的耐用性和更低的維護成本，更快地開發複雜的 UI。它被數百家領先公司和數千名開發人員使用。