iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
3
Modern Web

玩轉 Storybook系列 第 1

玩轉 Storybook: Day 01 說明

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說說元件的故事


下一篇
玩轉 Storybook: Day 02 安裝
系列文
玩轉 Storybook30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Vision
iT邦新手 5 級 ‧ 2020-09-20 00:48:52

難得有 Storybook 系列文章!!
我也是 Storybook 愛用者~推薦! 尤其 v6.0 發布更為厲害了!
訂閱起來~~期待你的 30 篇文章/images/emoticon/emoticon37.gif

Vision iT邦新手 5 級 ‧ 2020-09-20 01:00:07 檢舉

v6.0 的釋出,讓前端工程師們的合作開發效率更為提升,能更快速產出 視覺化的組件文件與配置

謝謝訂閱!好想知道你們是怎麼用Storybook配合開發的呀!覺得實務上怎麼使用也是很重要的!

我要留言

立即登入留言