Love, Modular Thinking and Storybook

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 !

Transcript

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