Des projets de plus en plus nombreux, des équipes qui s’accroissent et des stacks Front de plus en plus difficiles à maintenir et à réutiliser… Et si la solution tenait en seulement quelques conventions et un outil ? Au travers de nos galères, découvrez comment nous en sommes arrivés à mettre en place Storybook dans (presque) tous nos projets et quelles solutions nous employons aujourd’hui pour simplifier nos échanges, faciliter l’intégration et développer plus rapidement nos projets numériques !

1. @DavidEndico
Love, modular
thinking and
Storybook
C O N F É R E N C E
1

2. G R A P H I C D E S I G N E R ᆞ U I / U X D E S I G N E R ᆞ F R O N T D E V E L O P E R
David Endico
@DavidEndico 2

3. Les graines de la discorde
C O N T E X T E
@DavidEndico 3

4. L E S G R A I N E S D E L A D I S C O R D E
@DavidEndico 4
Beaucoup
de projets
��
Beaucoup de
méconnaissance
��
Beaucoup
de Personnes
��

5. Beaucoup de Projets
● Beaucoup de composants et de logiques malgré des
librairies et frameworks
● Don’t make me code twice - Pas mal de composants
recréés ou pouvant être mutualisés
@DavidEndico 5
L E S G R A I N E S D E L A D I S C O R D E
��

6. Beaucoup de personnes
● Manque de visibilité sur les composants disponibles
(composants existants, recréés ou à développer)
● Manque de communication sur l’utilité,
le fonctionnement et la portée des composants
@DavidEndico 6
L E S G R A I N E S D E L A D I S C O R D E
��

7. Beaucoup de méconnaissance
● Mauvaise connaissance et usages des outils
disponibles (langages, librairies…)
● Manque de recul sur les composants créés
(incomplets, limités ou non-testés)
@DavidEndico 7
L E S G R A I N E S D E L A D I S C O R D E
��

8. @DavidEndico 8
🤔

9. @DavidEndico 9

10. Modular Thinking
R É F L E X I O N S
@DavidEndico 10

11. C’est découper des trucs
compliqués pour en faire de
petits trucs simples
E N G R O S
@DavidEndico 11

12. @DavidEndico 12
Atomic Design

13. @DavidEndico 13
Atomic Design

14. From dust to development
P R O C E S S
@DavidEndico 14

15. COMMUNICATION
@DavidEndico 15
● Travail de co-conception
(Développeurs, designers,
clients, qu’importe !)
● Partager les informations
clés : besoins, cibles et
contextes
● Tout le monde est
UX Designer

16. MAQUETTES
@DavidEndico 16
● Traduire visuellement les
origines du projet
● Ce sont des abstractions !
● Réfléchir aux
composants, leurs
portées, leurs états
● Définir les langages,
frameworks et librairies

17. STYLEGUIDE
@DavidEndico 17
● Lister les composants et
leurs variantes
● Définir les usages et les
contextes d’utilisations
● Réfléchir à la structure
des composants, à leur
complexité et à leur
intégration

18. Et pourquoi pas un Design System ?
P R O C E S S
@DavidEndico 18

19. DESIGN SYSTEM
@DavidEndico 19
● Bibliothèque de
composants centralisant
l’information
● Référentiel UI, UX
et technique
● Effet bac à sable

20. M O D U L A R T H I N K I N G
@DavidEndico 20
La recette d’un bon composant
SIMPLE
�� ♻
RÉUTILISABLE EXPLICITE
��

21. Raise your weapon
S O L U T I O N
@DavidEndico 21

22. R A I S E Y O U R W E A P O N
STORYBOOK
@DavidEndico 22

23. R A I S E Y O U R W E A P O N
STORYBOOK
● Complémentaire de l’application
● Disponible pour Angular, React, Vue,
ReactNative, Polymer...
● Archi-simple et rapide
● Adaptable à tous vos besoins et process
● Simplifie le workflow de développement
● Addons et communauté
@DavidEndico 23

24. @DavidEndico 24

25. @DavidEndico 25

26. Live coding
@DavidEndico 26

27. @DavidEndico 27

28. @DavidEndico 28

29. @DavidEndico 29

30. @DavidEndico 30

31. ● Apporte consistance et homogénéité au
travers de toute l’application
● Simplifie et accélère le workflow de
conception et de mise en place
● Plébiscite une conception plus
collaborative entre les membres du projet
● Établit un vocabulaire commun entre tous
les développeurs, anciens comme
nouveaux
● Apporte un support de documentation et d’
éducation au reste de l’équipe
● Permet des tests plus simples (browsers,
devices, performances, accessibilité…)
CONCLUSION
@DavidEndico 31

32. Thank you
A N Y Q U E S T I O N S ?
@DavidEndico 32