Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Storybook: dev, design, debug and document your UI components
Marie-Laure Thuret
September 29, 2017
Programming
0
610
Storybook: dev, design, debug and document your UI components
Marie-Laure Thuret
September 29, 2017
Tweet
Share
More Decks by Marie-Laure Thuret
See All by Marie-Laure Thuret
JGiven, enfin une réelle documentation vivante
mlthuret
1
840
La simplicité comme moyen d'être performant, résilient et de réduire le Time To Market.
mlthuret
0
75
Pièges et difficultés du BDD : comment les résoudre ?
mlthuret
1
250
Other Decks in Programming
See All in Programming
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
240
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
100
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
120
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
130
#JJUG_CCC 「サポート」は製品開発? - JDBCライブラリ屋さんが実践する攻めのテクニカルサポートとJavaエンジニアのキャリアについて -
cdataj
0
410
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
4
520
Airflowはすごいぞ!
hankehly
0
370
Springin‘でみんなもクリエイターに!
ueponx
0
130
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.6k
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
manfredsteyer
PRO
0
120
[DC SF 2022] Hitchhiking through Jetpack Compose
jossiwolf
2
160
Seleniumでイキってたらサーバを絞め落としかけてた話
kenfujita
0
360
Featured
See All Featured
Six Lessons from altMBA
skipperchong
14
1.4k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Atom: Resistance is Futile
akmur
255
20k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Ruby is Unlike a Banana
tanoku
91
9.2k
A Philosophy of Restraint
colly
192
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
How to train your dragon (web standard)
notwaldorf
58
3.9k
Robots, Beer and Maslow
schacon
152
7.1k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Transcript
September 2017 Storybook: Design, Develop, Document and Debug your React
UI components Marie-Laure Thuret
Thanks to our sponsors!
MARIE-LAURE THURET Developer at @mlthuret
@mlthuret A UI component often relies on several states
@mlthuret A simple pagination component
@mlthuret currentPage pagePadding showNext showPrevious showLast numberOfPages showFirst A simple
pagination component
@mlthuret expect buttons to be disabled currentPage = 1 currentPage
= 6 and nbPages = 6 A simple pagination component
@mlthuret How do we make sure they are ? well
documented
@mlthuret isolated environment to quickly develop and design your components
thanks to hot reloading
@mlthuret Muhammed Thanish https://github.com/storybooks/ Arunoda Susiripala
@mlthuret Introducing a new maintainers team
@mlthuret Design Develop Document Debug Discuss Development Lifecycle
@mlthuret Getting Started Easy to install Ready for iterating quickly
$getStorybook
@mlthuret Storybook interface
@mlthuret List of the stories Storybook interface
@mlthuret Storybook interface Stories kind List of the stories
@mlthuret Stories Stories kind List of the stories Storybook interface
@mlthuret Actions and add- on panels Storybook interface
@mlthuret Component view Storybook interface
@mlthuret Demo
@mlthuret API First
@mlthuret Create live documentation
@mlthuret Create live documentation Document style and behaviour
@mlthuret How can I use a component? Create live documentation
@mlthuret Examples
@mlthuret How do we make sure the documentation ? never
breaks
@mlthuret We need to add tests
@mlthuret Testing markup through snapshot testing Storyshots
@mlthuret Tests are your application’s specifications
@mlthuret Explicit behaviour by adding tests next to your stories
Specs add-on
@mlthuret Tests are failing if differences are spotted between two
components pictures Visual regression testing
@mlthuret Visual regression testing
@mlthuret Visual regression testing
@mlthuret Demo
@mlthuret what about maintenance ?
@mlthuret Debug and enhance Small environment to debug efficiently Entry
point to start when adding a new feature
@mlthuret Communicate with others
@mlthuret Communicate with others When submitting a Pull Request
@mlthuret When opening issues Communicate with others
@mlthuret When an external contributor fixes a bug Communicate with
others
@mlthuret Design Develop Document Debug Discuss Iterate quickly Live documentation
Add specifications through tests Create a styleguide Share stories Entry points Isolated environment Hot reloading Expose props Isolate bugs Storybook contribution during the developer journey
@mlthuret Why adopt Storybook ?
@mlthuret Universal Storybook
@mlthuret Universal Storybook ReactJS React Native VueJS Angular
@mlthuret Demo
@mlthuret It’s up to you to create what’s missing The
add-on API
@mlthuret Add-ons from the community And a lot of others…
Material-UI Readme Background Internationalisation Specs
@mlthuret Roadmap Playground add-on Theming ability Add-on API refactoring See
multiple stories in 1 preview Responsive and multi-device viewports preview Automatic story detection
Thanks! MARIE-LAURE THURET Developer at @mlthuret