Storybook 6 : du changement et de nouvelles possibilités

Si vous connaissez déjà cet outil vous pouvez passer directement au paragraphe : Les changements.

Qu’est-ce que c’est ?

Storybook est un projet open-source que vous trouverez sur Github ici
Il s’agit d’un package npm qui vise à faciliter la vie des designers et développeurs web et qui cible les professionnels dans cette version 6.

Une fois installé, vous avez un serveur de développement qui tourne en dehors de votre projet en lançant la commandenpm run storybook. Il permet de tester le rendu des composants web de manière isolée, c’est-à-dire sans devoir lancer l’application complète sur laquelle vous travaillez.

Comment ça marche ?

L’outil prend la forme d’un catalogue de cas d’utilisation appelées stories dans lequel vous écrivez des scenarii avec vos composants afin de pouvoir les tester dans différentes configurations ou avec différentes données d’entrée.

Pour cela il s’appuie sur un fichier de configuration qui permet de parcourir le projet pour trouver les composants et les stories à afficher ainsi que les différents plugins que vous pouvez utiliser.

L’intérêt

Storybook est le bac-à-sable pour composants UI favori d’une grande partie de la communauté des développeurs web.

Il est utilisé pour résoudre plusieurs problématiques :

• Générer et partager facilement la documentation

On peut lancer un build pour en produire une version statique et la versionner afin de la publier sur un site web ou un wiki. Cela permet de centraliser la documentation technique qui sera consultée par l’équipe de développement pour faire une présentation des changements d’une nouvelle version ou en tant que support dans le processus d’onboarding d’un nouvel employé.

• Naviguer dans les bibliothèques de composants

Il peut être utilisé sur un projet de bibliothèque de composants pour montrer facilement les cas d’utilisations et les rendus possibles. Grâce aux différentes options affichées dans chaque page, on peut facilement tester le rendu obtenu en changeant des données d’entrée ou le style CSS par exemple.

L’écosystème

De nombreux frameworks web modernes sont supportés (React, Angular, React Native, Vue, Svelte, Html et beaucoup d’autres). L’outil est extensible, vous pouvez créer vos propres addons. Il existe de nombreux addons officiels maintenus par la communauté.

Les addons apportent de nombreuses fonctionnalités intéressantes :

• Tests de l’accessibilité de vos composants
• Edition interactive des propriétés
• Passage des tests automatiques avec screenshots
• Documentation automatique
• Bouchonnage des API
• Internationalisation
• Changement des thèmes visuels à la volée

Il est alors très facile de voir le rendu obtenu dans les différentes étapes d’un processus métier.

Les changements

Dans cette version majeure il y a quelques changements notables :

• Le changement le plus attendu est la réduction drastique de la configuration nécessaire. Vous utilisez votre stack sans configuration à ajouter et vous pouvez personnaliser celle-ci plus facilement. Ainsi il n’y a plus de configuration spécifique à ajouter pour utiliser Typescript
• Storybook Args: Auto-génération des controls interactifs
• Harmonisation des propriétés avec les différents frameworks supportés
• Possibilité d’utiliser les stories tel quel dans les tests unitaires avec Jest
• Compatibilité avec les autres addons (docs, toolbar) et compatiblité avec les outils de design qui supportent la nouvelle API de storybook
• Composition: Possibilité d’inclure des “storybooks” provenant d’un autre projet et permettant de naviguer entre les composants sans sortir du storybook
• Support de yarn 2, le manager de package nouvelle génération
• Server —pour le rendu coté serveurs de certains composants.

Documentation

Pour cette nouvelle version toute la documentation du projet a été revue. La version 6 est totalement rétro-compatible avec la version 5. Il suffit de suivre le guide de migration officiel pour mettre à jour votre version et profiter de toutes les nouvelles possibilités.

L’adoption

L’utilisation de storybook continue de s’étendre dans la communauté web. Actuellement il est utilisé par 50 000 dépôts publics sur github et le package npm est téléchargé 7 millions de fois par mois. C’est l’un des 10 projets open-source en croissance en 2019 selon Github. Il réunit maintenant 1000 contributeurs et 50 000 étoiles.

Conclusion

Il y a encore beaucoup à dire sur la nouvelle version de ce projet. Ceci n’est qu’une mise en bouche !

Je prépare une série d’articles sur la version 6 de storybook et sur les concepts généraux qui y sont liés et les nouvelles possibilités qui sont offertes aux développeurs web.

Si vous voulez que je fasse des articles sur des points précis ou sur les sujets qui vous intéressent n’hésitez pas à me l’écrire dans les commentaires !

PS: Ceci est mon premier article sérieux sur cette plate-forme. Si vous avez lu jusque là j’espère qu’il vous a plû.

J’ai lancé la publication Open Gazette dans laquelle je vais réunir tous les articles que j’écrirai sur l’open-source et le développement web.

N’hésitez pas à la suivre si vous voulez lire mes prochains articles. Bon dév’ !