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 UI components
Search
Marie-Laure Thuret
September 29, 2017
Programming
0
800
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
880
La simplicité comme moyen d'être performant, résilient et de réduire le Time To Market.
mlthuret
0
84
Pièges et difficultés du BDD : comment les résoudre ?
mlthuret
1
280
Other Decks in Programming
See All in Programming
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
460
プールにゆこう
irof
2
120
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.7k
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
150
Java 22 Overview
kishida
1
160
[SF Ruby, March 2024] Rails on Wasm
palkan
0
360
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
330
object-oriented-conference-2024
fuwasegu
8
2.6k
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
513
39k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
320
20k
Teambox: Starting and Learning
jrom
128
8.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
75
41k
Bash Introduction
62gerente
604
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.3k
GitHub's CSS Performance
jonrohan
1023
450k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
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