Storybook with Angular

Angular Taiwan meetup#8
livestream video:
https://www.facebook.com/ming.little.14/videos/2592180044136269/
Demo source code:
https://github.com/changda0616/ngst

Transcript

1. Storybook with Angular Let components tell the story.
2. – 剛進入團隊的菜⿃鳥 “請問⼀一下，⽬目前有沒有共⽤用的元件？”
3. – 剛進入團隊的菜⿃鳥 “x，這麼多屬性到底會讓元件長怎樣？”
4. – 已經在專案中許久的前端 “這個元件有很多屬性調整，例例如：...”
5. – 已經在專案中許久的前端 “這個共⽤用元件感覺有很多坑”
6. – 前端 A “你是不是改到那個對話框，所以按鈕的顏⾊色都不⼀一樣了了？”
7. – 前端 B “我的確有改，但應該不會影響到你吧！”
8. – 於是因為這個專案相當複雜，流程間環環相扣，兩兩位前端花了了 30 分鐘才到了了問 題的⾴頁⾯面，嘗試理理解該元件出問題的場景 “…”
9. – 後來來問題還沒解完，有⼈人不⼩小⼼心按到重整，於是... “…”
10. – 老闆 “氣氣氣氣氣”
11. • 沒有⽂文件 • 沒有有效的⽂文件 • 商業邏輯的交織下，無法清楚理理解元件的功能 • 沒有團隊⽂文化
12. Storybook
13. –Storybook “Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.”
15. Live Example airbnb/react-dates
16. Storybook With Angular • Automatically • npx -p @storybook/cli sb init --type angular • Manually • https://storybook.js.org/docs/guides/guide-angular/ #manual-setup
17. Storybook With Angular • Simple Component • Nested Component • Regression Testing • chromatic
18. Storybook With Angular • Add-on • viewports - Component in different medias • knobs - Dynamically interact with components • storysource - View the source code • … • Add-on support list
19. Storybook With Angular • ref • Storybook • Storybook for Angular • Storybook for Angular Tutorial • A Storybook with Angular • Building Components with Angular and Storybook • How to Test Storybook Components in Angular Applications • chromatic
20. Build your own story! – Chad, share with love <3