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
360
Storybook X Styleguidist
Buzzvil
January 02, 2019
Tweet
Share
More Decks by Buzzvil
See All by Buzzvil
220903_GFS
buzzvil
0
420
Git 해부하기 2 + 3
buzzvil
0
32
Metastable Failure
buzzvil
0
200
Git 해부하기
buzzvil
0
44
Introduction to Plate Solving
buzzvil
0
29
Airbnb Minerva
buzzvil
0
280
Shape up 방법론
buzzvil
0
900
Buzzvil Billing Data Pipeline
buzzvil
0
520
Journey of Dash's release-cycle
buzzvil
0
150
Featured
See All Featured
Site-Speed That Sticks
csswizardry
3
370
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Bash Introduction
62gerente
610
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Making Projects Easy
brettharned
116
6k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Designing Experiences People Love
moore
139
23k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Visualization
eitanlees
146
15k
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/