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: dev, design, debug and document your...
Search
Marie-Laure Thuret
September 29, 2017
Programming
0
1k
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
960
La simplicité comme moyen d'être performant, résilient et de réduire le Time To Market.
mlthuret
0
93
Pièges et difficultés du BDD : comment les résoudre ?
mlthuret
1
330
Other Decks in Programming
See All in Programming
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
DataformでPythonする / dataform-de-python
snhryt
0
150
AIのメモリー
watany
12
1.2k
実践!App Intents対応
yuukiw00w
0
110
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
Jakarta EE Meets AI
ivargrimstad
0
570
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
370
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
330
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
950
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
A designer walks into a library…
pauljervisheath
207
24k
GraphQLとの向き合い方2022年版
quramy
49
14k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Become a Pro
speakerdeck
PRO
29
5.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Code Review Best Practice
trishagee
69
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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