Intro

想做這個主題是因為，在翻閱過去的鐵人賽，「單純」只討論 Storybook 的文章並不多，雖然它的基本觀念並不難理解。

若有更多人知道及理解這個好用的開發工具，並且在專案中應用它，相信能做為團隊協同合作的利器，增加溝通效率，減少溝通障礙。

Living Style Guide - LSG 縮小設計與開發的溝通鴻溝

下圖框起來的地方是 UI設計師 與 前端工程師 在開發團隊的分工

通常 UI設計師 交付 Mockup 視覺稿時，也會決定好 UI Style Guide。下一步就是交由前端工程師根據視覺稿進行開發。

隨著專案的成長及經歷過無數次的需求變更，成品交付時，通常已經與當初的視覺稿有不小程度的落差。

Storybook 是一個「Living Style Guide」，就像是專案當下功能的快照一樣，能夠隨著前端開發程式碼的變動而變化。

前端工程師在開發初期的階段，會依循著 UI Designer 產出的設計規劃做為開發的依據，等到程式元件大概成形時，就可以產出 Living Style Guide 給UI Designer。

UI Designer在專案進入開發時期，也能透過 Living Style Guide 與前端工程師檢視與確認，實際上的畫面開發是否有符合UI設計規範。

透過UI Designer與前端工程師更緊密的協作，從底層開始就相互討論，一層開發完再到下一層，來減少UI設計與最終網頁呈現的落差，以及前端工程師開發完成後必須不斷修改的問題。

What is Storybook

Storybook是一個可以輔助UI組件開發的工具。Storybook的運行不需要依附於專案，它可以被獨立部署為不同於原有專案的靜態網站。因為裡面只有會組件的樣式及操作邏輯，所以不需要擔心因為API及開發環境的問題導至無法操作。

Storybook支援主流的前端框架 - React、Vue、Angular，只要是支援 Component 概念的函式庫及框架皆可以使用。甚至你想使用原生JS的 Web Component，也是可以支援的喲！

Next

接下來的幾天會帶大家 Step-by-Step 的玩轉 Storybook，目前是使用Vue做專案開發，所以會以Vue框架的設定為主。因為也接觸過 Angular，未來也可能會一併放上Angular整合Storybook的方法。

Reference

Storybook 官網

medium-storybookjs-official blog

Using Storybook to Build a Better Product Development Workflow

新UI開發方法論，促進設計師與工程師更緊密的協作

Storybook & Atomic Design

淺談CDD元件驅動開發

Storybook實現元件驅動開發

Storybook說說元件的故事