Share
Embed
Slide 1
Slide 1 text
Storybook
Styleguidist
X
With Component Driven Development
— Phil Lee —
Slide 2
Slide 2 text
Index
I. Mordern Web Front-End
II. Challenges
III. Storybook
IV. Styleguidist
V. Wrap Up
Slide 3
Slide 3 text
— Special thanks to Liam
Slide 4
Slide 4 text
Modern
Web
FrontEnd
Slide 5
Slide 5 text
• Get data from Database
• Generate HTML by data
• Send it
• Get HTML file
• Reder
Traditional Web App
Slide 6
Slide 6 text
• Get data from Database
• Send it
• Get data
• Generate HTML
• Render
Mordern Web App
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
BOOM!!
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
I’ll quit this shit…
Slide 12
Slide 12 text
Component
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Container
(state, logic)
Presenter
(stateless)
Root Container
Presenter Presenter Presenter Presenter Presenter
Container
Presenter
props
props
props
How Components Works
Slide 15
Slide 15 text
How Components Works
Flux
Architecture
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Happy now?
Slide 18
Slide 18 text
NOPE
Slide 19
Slide 19 text
Challenges
Slide 20
Slide 20 text
Component
Independent
Reusable
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Document
Independent
Reusable
State
Dependency
Combined
Components
Routing
Nullable
Component
Hard to understand
Component
dependencies
Slide 23
Slide 23 text
“We can’t focus on UI.”
Slide 24
Slide 24 text
Container
(state, logic)
Presenter
(stateless)
Root Container
Presenter Presenter Presenter Presenter Presenter
Container
Presenter
props
props
props
How Components Works
Slide 25
Slide 25 text
Normalize
Presenter Presenter Presenter Presenter Presenter
Presenter
Presenter Presenter Presenter Presenter Presenter
Presenter
Slide 26
Slide 26 text
Inject state
Fake state
Presenter Presenter Presenter Presenter Presenter
Presenter
Fake state
Fake state Fake state Fake state Fake state
Slide 27
Slide 27 text
“How?”
Slide 28
Slide 28 text
The
UI Development
Environment
Slide 29
Slide 29 text
Storybook
• Build & Test components
• Mature ecosystem(addons)
• Support isolated environment
without application’s requirements
Slide 30
Slide 30 text
Live
Slide 31
Slide 31 text
Living
Document
For UI
Slide 32
Slide 32 text
Styleguidist
• Simplifies creating and maintaining
a UI documentation
• Support isolated environment
without application’s requirements
Slide 33
Slide 33 text
Live
Slide 34
Slide 34 text
WRAP UP
Slide 35
Slide 35 text
Why we should use it
• Tool for UI components
• De-facto standard
• Communication for product team (Design, PM)
• Prevent design/planning specification error
• Easy (without configuration…)
Slide 36
Slide 36 text
Which one is the best?
• It depends on your preference
• Almost same, but slightly different
• Storybook as workshop, Styleguidist as storefront
Slide 37
Slide 37 text
— End
Slide 38
Slide 38 text
https://storybook.js.org
References
https://www.youtube.com/watch?v=jc9xKzdkYDg
https://hyunseob.github.io/2018/01/08/storybook-beginners-guide/
https://www.vobour.com/ܻঘ-झషܻ࠘-react-storybook-ਸ-ాೠ-ஹನք-ѐ
ߊҗ-ഝਊ-ߑߨ-1
https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06
https://vue-styleguidist.github.io/