La recherche est effectuée par Marielle
Lorsqu'il s'agit d'accélérer le processus de développement de logiciels, un outil fiable c'est généralement tout ce qu'il faut. Storybook JS est la référence en matière de gestion du code JavaScript !
Si votre équipe est à la recherche d'une outil facile à utiliser avec un large éventail de fonctionnalités, Storybook JS est la réponse. Il peut aider les développeurs à construire plus rapidement et plus efficacement en leur permettant de créer rapidement de nombreux composants d'interface utilisateur isolés.
Ce blogue vous permet de plonger plus profondément dans les avantages, les limites et les applications pratiques de Storybook JS. Alors, commençons !
Qu'est-ce que Storybook ?
Storybook n'est pas seulement un atelier d'interface utilisateur. C'est un terrain de jeu créatif pour construire des composantes et des pages d'interface utilisateur dans un isolement glorieux ! Utilisé par des milliers d'équipes à travers le monde, c'est l'outil ultime pour le développement, les tests et la documentation de l'interface utilisateur.
Et le plus beau, c'est qu'il est open-source et totalement gratuit ! Il s'agit d'un logiciel libre et entièrement gratuit !
Il fournit un bac à sable pour la création, la visualisation et la documentation des composants de l'interface utilisateur et permet aux développeurs de voir comment tous les composants se présenteront et se comporteront dans différents états, ce qui facilite la détection et la correction des problèmes dès le début du processus de développement.
Essentiellement, Storybook est utilisé par les développeurs d'applications frontales et les concepteurs de développer des composants plus rapidement, d'améliorer la qualité de leur code et d'assurer la cohérence de l'aspect et de la convivialité de l'ensemble de l'application.
Il facilite le développement d'états insaisissables et de cas limites sans qu'il soit nécessaire d'exécuter l'ensemble de l'application. Il peut être adopté progressivement et s'intègre aux outils standard de l'industrie.
5 avantages de l'utilisation de Storybook
De nombreux développeurs frontaux se tournent maintenant vers Storybook pour son large éventail d'avantages. Cependant, chaque organisation devra planifier les exigences de son projet avant d'utiliser Storybook pour ses besoins uniques.
Voici quelques-uns de ses avantages :
Offre des composants d'interface utilisateur plus durables
Storybook permet de développer rapidement des composants d'interface utilisateur isolés et des pages et de suivre leurs cas d'utilisation sous forme d'histoires. Vérifier les cas limites de l'interface utilisateur difficiles à atteindre. Utilisez des modules complémentaires pour simuler tout ce dont un composant a besoin - contexte, demandes d'API, caractéristiques de l'appareil, etc.
Tester les interfaces utilisateur avec moins d'efforts et sans déperdition
Les histoires sont un moyen pragmatique et reproductible de suivre les états de l'interface utilisateur. Utilisez-les pour faire des tests ponctuels de l'interface utilisateur au cours de votre processus de développement. Storybook offre des flux de travail intégrés pour les tests automatisés d'accessibilité, d'interaction et visuels. Vous pouvez également utiliser les histoires comme cas de test en les important dans d'autres outils de test JavaScript.
Documente facilement les composants de l'interface utilisateur pour que votre équipe puisse les réutiliser.
Storybook est la source unique de vérité pour votre interface utilisateur. Les histoires indexent tous vos composants et leurs différents états, ce qui permet à vos développeurs frontaux de trouver et de réutiliser facilement les modèles d'interface utilisateur existants dans plusieurs histoires. Storybook génère aussi automatiquement de la documentation à partir de ces histoires.
Montre comment fonctionne l'interface utilisateur
Les histoires montrent comment les interfaces utilisateur fonctionnent réellement, et pas seulement une image de la façon dont elles sont censées fonctionner. Cela permet à tout le monde de rester aligné sur ce qui est actuellement en production. Publiez les Storybook pour obtenir l'approbation de vos coéquipiers. Vous pouvez également les intégrer dans des Wikis, Markdown et Figma pour rationaliser la collaboration.
Automatiser le processus de développement de l'interface utilisateur
Storybook est compatible avec votre flux de travail d'intégration continue. Ajoutez-le comme étape d'intégration continue pour automatiser les tests d'interface utilisateur, réviser la mise en œuvre avec les coéquipiers et obtenir l'approbation des parties prenantes.
4 Inconvénients de l'utilisation de Storybook
Malgré ses nombreux avantages, Storybook présente également quelques inconvénients que les développeurs doivent prendre en compte avant de l'utiliser.
Vous trouverez ci-dessous les limites de la création de projets à l'aide de Storybook :
Longue installation initiale
L'initialisation de Storybook pour un projet peut prendre beaucoup de temps, surtout pour les projets complexes et de grande envergure. Il peut être difficile de comprendre comment tout s'imbrique, et il faut du temps, de la concentration et des efforts pour obtenir la bonne configuration.
Intégration limitée
Bien que Storybook puisse s'intégrer à de nombreux cadres et bibliothèques frontaux, il se peut qu'il ne soit pas compatible avec tous les outils et systèmes de conception. Si vous utilisez une bibliothèque ou d'autres cadres qui ne sont pas pris en charge par Storybook, vous devrez peut-être chercher une solution de rechange.
Plusieurs besoins en ressources
L'exécution de Storybook peut nécessiter beaucoup de ressources, en particulier pour les grands projets, et peut nécessiter des ressources supplémentaires pour maintenir une performance optimale. De plus, apporter des changements aux composantes peut prendre plus de temps que prévu en raison de la quantité de travail nécessaire.
Ajoute un niveau de complexité supplémentaire
Bien que Storybook offre de nombreux avantages, il peut également ajouter une autre couche de complexité au processus de développement de l'interface utilisateur. Il peut être difficile de s'assurer que les composants développés dans Storybook correspondent au comportement des composants dans l'application finale.
Comment Storybook aide les concepteurs et les développeurs
Le nœud du problème est que les concepteurs et les développeurs utiliser différents outils. Vous finissez par devoir transmettre des informations manuellement. Et si quelque chose ne va pas, cela peut devenir compliqué. Heureusement, Storybook résout ce problème en fournissant une source unique de vérité sur les systèmes de conception et l'interface utilisateur - les concepteurs et les développeurs voient la même chose.
Storybook relie des composants codés dans des frameworks JavaScript tels que React à des outils de conception tels que Figma. Cela vous permet de repérer les incohérences plus tôt dans le processus et de vous assurer que les conceptions et le code se reflètent l'un l'autre. De plus, vous pouvez ensuite publier votre Storybook pour faciliter la révision de l'interface utilisateur et consolider les commentaires dans un emplacement centralisé.
Grâce aux composants réutilisables, les développeurs et les concepteurs disposent d'une structure commune. Les équipes décomposent une page en ses éléments constitutifs et créent des variantes de chaque composant pour s'adapter aux différents états de l'interface utilisateur.
Les développeurs utilisent Storybook pour développer des composants d'interface utilisateur et capturer leurs états en tant que histoires. En revanche, les concepteurs modélisent ces états comme variantes de composants dans Figma. Storybook relie les deux, ce qui facilite grandement les transferts.
Le processus commence par l'assemblage par les concepteurs d'une grille de variantes, souvent appelée feuille d'autocollants.
En tant que développeur, votre objectif est de veiller à ce que l'interface utilisateur codée corresponde à la conception originale. Le fait d'avoir les conceptions et l'interface utilisateur réelle côte à côte facilite grandement la construction selon les spécifications.
Storybook's Design Addon vous permet d'intégrer des fichiers Figma directement dans Storybook.
Il s'agit de fichiers en direct que vous pouvez inspecter. Si le concepteur apporte des modifications, vous les verrez immédiatement.
De même, le Plugin Storybook Connect permettra aux concepteurs d'intégrer des histoires en direct dans Figma. Il leur sera ainsi plus facile de mettre à jour les dessins en fonction de ce qui se passe dans la production.
Comment installer Storybook et écrire des histoires
Utilisez le CLI Storybook pour l'installer en une seule commande. Exécutez cette commande dans le répertoire racine de votre projet existant :
npx storybook@latest init
Note : storybook init n'est pas fait pour les projets vides. Il a besoin d'être installé dans un projet qui est déjà configuré avec un framework pour qu'il fonctionne.
En fonction de votre cadre, tout d'abord, créer votre application puis vérifiez que tout fonctionne en lançant le programme :
npm run storybook
Il démarrera Storybook localement et affichera l'adresse. Selon la configuration de votre système, il ouvrira automatiquement l'adresse dans un nouvel onglet du navigateur, et vous serez accueilli par un écran de bienvenue.
Écrire des histoires
Pour commencer, créez un répertoire "stories" dans votre dossier components. Vous pouvez également consulter les guides d'installation pour Create React App et Guides d'installation des livres d'histoires pour plus d'informations.
l'exportation par défaut qui contient :
- composant - le composant lui-même
- titre - comment regrouper ou catégoriser le composant dans la barre latérale de Storybook
- tags - pour générer automatiquement de la documentation pour nos composants
- excludeStories- informations supplémentaires requises par l'histoire mais qui ne doivent pas être rendues dans Storybook
- argTypes - spécifie les args comportement dans chaque histoire
Rattraper les problèmes d'accessibilité
Les tests d'accessibilité consistent à vérifier le rendu du DOM à l'aide d'outils automatisés en fonction d'un ensemble d'heuristiques basées sur les critères suivants WCAG et d'autres bonnes pratiques acceptées par l'industrie. Ils constituent la première ligne d'assurance qualité et détectent les violations flagrantes des règles d'accessibilité. Ils veillent à ce qu'une application soit utilisable par le plus grand nombre, y compris les personnes souffrant de handicaps tels que les déficiences visuelles, les problèmes d'audition et les troubles cognitifs.
Le livre d'histoire comprend un addon d'accessibilité.
Exécutez la commande suivante pour installer l'addon :
yarn add -dev @storybook/addon-a11y
Ensuite, mettez à jour votre fichier de configuration Storybook pour l'activer :
Automatiser les tests avec le programme d'exécution des tests
Grâce à la fonction de lecture de Storybook, nous avons pu contourner notre problème, en nous permettant d'interagir avec notre interface utilisateur et de vérifier rapidement comment elle réagit si nous mettons à jour nos tâches - ce qui permet de conserver une interface utilisateur cohérente sans effort manuel supplémentaire.
La bonne nouvelle, c'est que c'est possible ! Storybook's testeur nous permet justement de le faire. Il s'agit d'un service public autonome alimenté par Dramaturge-qui exécute tous nos tests d'interaction et détecte les histoires non abouties.
Exécutez la commande suivante pour l'installer :
yarn add -dev @storybook/test-runner
Ensuite, mettez à jour vos scripts package.json et ajoutez une nouvelle tâche de test :
{
"scripts" : {
"test-storybook" : "test-storybook"
}
}
Enfin, avec votre Storybook en marche, ouvrez une nouvelle fenêtre de terminal et exécutez la commande suivante :
test du fil - livre d'histoires -regard
Intégrations / Addons
Storybook offre une vaste gamme de modules complémentaires qui peuvent être utilisés pour étendre ses fonctionnalités et améliorer le processus de test et de débogage. Par exemple, le module complémentaire "storybook-addon-jest" permet aux développeurs d'exécuter des tests Jest dans Storybook, et le module complémentaire "storybook-addon-chromatic" permet aux développeurs de tester les composants dans différents environnements et appareils.
Vérifier ici les modules complémentaires les plus populaires et un guide d'installation.
Publier le Storybook dans un espace de travail partagé pour signature
Avant d'expédier, vous voudrez inviter les concepteurs à revoir l'interface utilisateur pour vous assurer qu'elle est correcte et obtenir le commentaire "LGTM-Expédiez-le ! GitHub agit comme un espace de travail basé sur le cloud où les réviseurs assignés peuvent laisser des commentaires et approuver des demandes d'extraction pour votre code. Chromatique, par l'équipe de Storybook, offre un service similaire, mais pour votre interface utilisateur. Il vous aide à recueillir des commentaires sur l'interface utilisateur en l'édition votre livre d'histoire.
Chromatic s'intègre dans votre pipeline CI. Il publie automatiquement votre Storybook lorsqu'une Pull Request est créée. Vous pouvez alors assigner des réviseurs qui peuvent commenter et demander des ajustements sur les changements qui ne sont pas tout à fait corrects. Pensez-y comme à une revue de code mais pour vos tests d'interface utilisateur.
Pour conclure, lorsque vous confiez des conceptions au développement, placez les conceptions à côté de la mise en œuvre. Dans Storybook, utilisez la fonction Design Addon. Dans Figma, utilisez la fonction Plugin Storybook Connect.
Lorsque vous passez en revue le développement avec les concepteurs, publiez votre Storybook dans un espace de travail partagé tel que Chromatique. Votre équipe dispose ainsi d'un point de référence actualisé où elle peut laisser des commentaires, obtenir un retour d'information et désigner des réviseurs.
Conclusion
Storybook est un outil puissant pour React, React Native, Vue, Angular, Svelte et bien d'autres frameworks. Il dispose d'une communauté de développeurs florissante et d'une multitude de modules complémentaires. Cette introduction ne fait qu'effleurer les possibilités et la productivité de la construction d'interfaces utilisateur durables. En fournissant un environnement centralisé pour développer et tester des composants d'interface utilisateur, Storybook rationalise le processus de développement, réduisant le temps et les efforts nécessaires pour développer des composants de haute qualité.
Plongez dans leurs ressources utiles :
- Documentation officielle sur les livres d'histoires contient la documentation de l'API, des liens vers la communauté et la galerie des addons.
- Test de l'interface utilisateur met en évidence les meilleures pratiques en matière de flux de travail utilisées par les équipes à forte vélocité chez Twilio, Adobe, Peloton et Shopify.
- Manuel des tests visuelsUn livre électronique gratuit de 31 pages permet d'approfondir l'utilisation de Storybook pour tester visuellement des composants.
Besoin d'embaucher des designers UI/UX pour votre projet ?
Une application est aujourd'hui le reflet de sa conception. Une bonne expérience utilisateur fait la différence entre une application qui est utilisée et une autre qui ne l'est pas. Embaucher un Concepteur UI/UX peut aider votre projet à atteindre son plein potentiel.
Chez StarTechUP, nous nous occupons de tout, de la conception au prototypage, en passant par la fabrication de produits. mobile native pour que vous n'ayez à vous soucier de rien. Nos concepteurs expérimentés créeront quelque chose d'unique et de puissant qui répondra à toutes vos exigences.
Si vous avez besoin d'aide pour créer react mobile apps, applications webou tout autre solutions logiciellesn'hésitez pas à nous contacter. Nous avons une équipe de professionnels prêts à relever le défi et à construire quelque chose dont vous pouvez être fier !
Prenez contact avec nous aujourd'hui pour commencer !
