系列文章
玩轉 Storybook: Day 21 Wire in data - Angular & ngxs
Container and Presentational 官網的程式碼架構，會把元件分成二種類型-容器型(Container)及表現型(Presentation...
玩轉 Storybook: Day 22 Construct a screen - Angular
在前面的單元，我們已經完成了開發單一元件Task，也完成了複合元件 TaskList，也把 TaskList 拆分為容器型(TaskListComponent)...
玩轉 Storybook: Day 23 DocsPage and Doc Blocks
DocsPage 介紹 Storybook Docs 是預設的 Addons，不需要做設定就可以使用。它可以整合元件裡的Stories、文字描述、程式註解、參數...
玩轉 Storybook: Day 24 MDX
MDX 若要更詳細的整理 Storybook 文件，可以使用 Markdown 語法搭配 JSX 的格式 - MDX。 有二種使用 MDX 方法 Story...
玩轉 Storybook: Day 25 將 Storybook 持續部署
Exporting as a static app 首先要把寫好的Stories相關檔案，都打包成靜態可部署的檔案。 打包的語法如下 // package.js...
玩轉 Storybook: Day 26 Design System for Developers - Intro、Architecture、Build
Introduction 目前較具規模的公司，像是 Airbnb / Uber / Microsoft，為了保持旗下不同網站一致的使用者體驗，會遵循著 Desi...
玩轉 Storybook: Day 27 Design System for Developers - Review、Test
單一真值來源 或 單點故障 Single Source of Truth (SSOT) 單一真值來源 Single Points of Failure (SP...
玩轉 Storybook: Day 28 Design System for Developers - Document
通過 Storybook Docs 推動 Design System 的採用 Design System為整個組織的利益相關者服務，因此我們需要教其他人如何從經...
玩轉 Storybook: Day 29 Design System for Developers - Distribute
在整個組織中發佈 Design System 從架構的角度來看，Design System 如同 lodash、moment 一樣，可做為專案開發過程的 dep...
玩轉 Storybook: Day 30 總結 & 學習資源
根據研究指出，重用程式碼可以節省42–81％的時間，並提高生產力 40％。易於共享UI元件的Design System在開發團隊中越來越流行。 Design S...