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
Optimizing for Happiness
mojombo
376
70k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
YesSQL, Process and Tooling at Scale
rocio
171
14k
A better future with KSS
kneath
238
17k
Building Your Own Lightsaber
phodgson
104
6.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Why Our Code Smells
bkeepers
PRO
335
57k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
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/