Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Storybook X Styleguidist
Search
Buzzvil
January 02, 2019
0
290
Storybook X Styleguidist
Buzzvil
January 02, 2019
Tweet
Share
More Decks by Buzzvil
See All by Buzzvil
220903_GFS
buzzvil
0
330
Git 해부하기 2 + 3
buzzvil
0
17
Metastable Failure
buzzvil
0
140
Git 해부하기
buzzvil
0
28
Introduction to Plate Solving
buzzvil
0
9
Airbnb Minerva
buzzvil
0
190
Shape up 방법론
buzzvil
0
790
Buzzvil Billing Data Pipeline
buzzvil
0
420
Journey of Dash's release-cycle
buzzvil
0
130
Featured
See All Featured
Atom: Resistance is Futile
akmur
260
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Agile that works and the tools we love
rasmusluckow
325
20k
Making Projects Easy
brettharned
109
5.5k
Done Done
chrislema
178
15k
Gamification - CAS2011
davidbonilla
77
4.6k
Design by the Numbers
sachag
274
18k
It's Worth the Effort
3n
180
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
13
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
RailsConf 2023
tenderlove
8
550
The Language of Interfaces
destraynor
151
23k
Transcript
Storybook Styleguidist X With Component Driven Development — Phil Lee
—
Index I. Mordern Web Front-End II. Challenges III. Storybook IV.
Styleguidist V. Wrap Up
— Special thanks to Liam
Modern Web FrontEnd
• Get data from Database • Generate HTML by data
• Send it • Get HTML file • Reder Traditional Web App
• Get data from Database • Send it • Get
data • Generate HTML • Render Mordern Web App
None
None
BOOM!!
None
I’ll quit this shit…
Component
None
Container (state, logic) Presenter (stateless) Root Container Presenter Presenter Presenter
Presenter Presenter Container Presenter props props props How Components Works
How Components Works Flux Architecture
None
Happy now?
NOPE
Challenges
Component Independent Reusable
None
Document Independent Reusable State Dependency Combined Components Routing Nullable Component
Hard to understand Component dependencies
“We can’t focus on UI.”
Container (state, logic) Presenter (stateless) Root Container Presenter Presenter Presenter
Presenter Presenter Container Presenter props props props How Components Works
Normalize Presenter Presenter Presenter Presenter Presenter Presenter Presenter Presenter Presenter
Presenter Presenter Presenter
Inject state Fake state Presenter Presenter Presenter Presenter Presenter Presenter
Fake state Fake state Fake state Fake state Fake state
“How?”
The UI Development Environment
Storybook • Build & Test components • Mature ecosystem(addons) •
Support isolated environment without application’s requirements
Live
Living Document For UI
Styleguidist • Simplifies creating and maintaining a UI documentation
• Support isolated environment without application’s requirements
Live
WRAP UP
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…)
Which one is the best? • It depends on your
preference • Almost same, but slightly different • Storybook as workshop, Styleguidist as storefront
— End
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/