Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Construire sa bibliothèque de composants avec S...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Jean-Phi Baconnais Jean-Phi Baconnais
August 10, 2021
Programming
34
0

Construire sa bibliothèque de composants avec Storybook

Avatar for Jean-Phi Baconnais

Jean-Phi Baconnais

August 10, 2021

More Decks by Jean-Phi Baconnais

See All by Jean-Phi Baconnais
Et si GitLab Duo devenait votre nouvel ami codeur imaginaire ?
Avatar for Jean-Phi Baconnais jeanphibaconnais
0
51
🗄️Et si vous mettiez à disposition vos jobs de CI/CD sur une étagère ?
Avatar for Jean-Phi Baconnais jeanphibaconnais
0
45
Touraine Tech - Késako, il crée son propre runner GitLab quand il démarre son environnement de dev Gitpod
Avatar for Jean-Phi Baconnais jeanphibaconnais
0
180
L'open source rendu beaucoup plus accessible avec Gitpod 🫶
Avatar for Jean-Phi Baconnais jeanphibaconnais
0
140
GitLab 💚 Kubernetes
Avatar for Jean-Phi Baconnais jeanphibaconnais
1
53
_France_DevOps__-_20023-06-06_-_GitLab_Cloud_Seed_____le_déploiement_de_votre_application_sur_Google_Cloud_sans_difficulté.pdf
Avatar for Jean-Phi Baconnais jeanphibaconnais
0
45
Késako ⁉, il crée son propre runner GitLab quand il démarre son environnement de dev Gitpod : 🤯
Avatar for Jean-Phi Baconnais jeanphibaconnais
0
140
Cloud Seed 🌱- le voyage extraordinaire promis par GitLab pour déployer rapidement votre application sur GCP
Avatar for Jean-Phi Baconnais jeanphibaconnais
0
390
L'open source ? Vous allez voir, ce n'est pas que du développement
Avatar for Jean-Phi Baconnais jeanphibaconnais
0
87

Other Decks in Programming

See All in Programming
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
160
わからない話を追いかけたら、プログラミング言語を作る側にいた
Avatar for ydah ydah
3
570
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
Avatar for Shota Nemoto shorty5121
0
280
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
Avatar for ternbusty ternbusty
1
180
ALB ログから Trace を気合で繋げる技術
Avatar for Hayato Kawai fohte
7
790
まだ間に合う！今年の夏こそSchemeのマクロ展開器を完全理解！
Avatar for Masanori Ogino omasanori
0
580
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
700
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
5
1.8k
信頼性の目標を誰も求めてない
Avatar for Shuma shubox
0
430
Detecting Compromised CI with eBPF and Cilium Tetragon
Avatar for Liz Rice lizrice
0
280
いまどきの Codex で開発する visionOS アプリの開発スタイルについて
Avatar for kazuhiro hara karad
0
170
AIに既存システムを理解させる技術　～レガシーを見捨てないハーネスエンジニアリング入門～
Avatar for Ochtum ochtum
0
180

Featured

See All Featured
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
360
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
4.6M
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
430
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
240
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
310
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.3k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.3k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
420
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k

Transcript

  1. Construire sa bibliothèque de composants avec Storybook

  2. @JPhi_Baconnais

  3. Pourquoi ?

  4. Pour moi le front, c’est 👉 https://unsplash.com/@thomascouillard

  5. https://unsplash.com/@whoishimesh Quand on arrive sur un projet ...

  6. None

  7. Construire une bibliothèque de composants

  8. Isolation des composants

  9. Définition et visualisation des différents état des composants

  10. Visualisation de l’aspect responsive

  11. Démo

  12. Ok pour le dév et ?


  13. Partager des composants

  14. Storybook BBC

  15. Des modules complémentaires Tests de non-régression visuelle Add-on

  16. None

  17. Merci @JPhi_Baconnais https://storybook.js.org/ https://storybook.js.org/tutorials/