• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • Le développement piloté par les composants est une excellente stratégie pour accélérer le développement des frontends et des interfaces utilisateur. L'utilisation de composants permet la réutilisation et simplifie la construction, les tests et la modularisation des applications.

    Dans les petites applications, les listes de composants en cours d'utilisation peuvent être facilement gérées - vous n'avez pas besoin d'un outil spécifique pour maintenir ces listes autre que votre propre mémoire. Mais lorsque les applications et les équipes de développement augmentent en nombre et en complexité, le nombre et la complexité des composants augmentent également, au point où vous avez besoin d'une aide pour suivre les composants et maintenir la cohérence dans vos interfaces utilisateur.

    Pour adopter le développement piloté par les composants pour les projets de taille moyenne à grande, vous avez besoin d'un outil capable de gérer les bibliothèques de composants, de les documenter, de les présenter et de permettre leur développement indépendamment des applications qui les utilisent.

    Ce besoin de gestion et de catalogage des composants est heureusement résolu par une nouvelle classe d'outils qui visent directement à accélérer le développement et la documentation des interfaces utilisateurs et des frontends. Ces outils prennent en charge différentes bibliothèques, différents dialectes JavaScript et divers Frameworks JavaScript pour le développement de l'interface utilisateur, comme Angular, Réagir, et Vue.

    En outre, certains des outils de gestion de composants servent également à générer des guides de style frontaux.

    Que sont les guides de style dans le domaine du développement front-end ?

    Ce sont des collections en direct de tous les éléments de l'interface utilisateur d'une application en cours de développement. Ces guides présentent non seulement des listes de composants, mais incluent également des exemples fonctionnels et testables. Ils proposent également des extraits de code de chaque composant, que les développeurs peuvent copier et coller dans leur propre code. En règle générale, les guides de style incluent des composants d'interface utilisateur courants, tels que des boutons, des icônes, des menus de navigation, des éléments de saisie de formulaire et des superpositions modales.

    Vous trouverez ci-dessous des revues des outils qui émergent en tant que leaders dans le segment des outils de développement et de documentation de composants d'interface utilisateur.

    Storybook

    Livre de contes est un outil populaire pour développer des composants frontaux et d'interface utilisateur qui vous permet de travailler sans vous soucier des dépendances spécifiques à l'application. Il propose un bac à sable pour créer l'interface utilisateur de manière isolée, en dehors de l'application en cours de développement. Cela permet le développement d'états et de cas limites difficiles à atteindre, ce qui entraîne des améliorations significatives de la réutilisabilité des composants, de la testabilité et de la vitesse de développement.

    Il facilite également l'interaction avec les concepteurs UX, simplifiant la tâche de visualiser les composants existants et d'identifier ceux qui doivent être créés.

    Storybook prend en charge une variété de frameworks JavaScript, notamment React, Angular, Vue, Svelte, Web Components et plus d'une douzaine d'autres. Les cas d'utilisation créés dans Storybook peuvent être enregistrés en tant qu'histoires en JavaScript simple, pour être examinés pendant le développement, les tests et le contrôle qualité.

    L'outil dispose d'un vaste écosystème d'extensions qui permet l'intégration avec les outils de développement, facilitant la personnalisation du flux de travail et l'automatisation des tests et de la documentation. Par exemple, le module complémentaire Docs permet d'écrire Markdown/MDX pour générer des sites personnalisables pour les bibliothèques de composants et les systèmes de conception.

    Styleguidist

    Guide de style peut être classé comme un générateur de guide de style vivant, mais sa fonctionnalité est proche de celle d'un serveur d'environnement de développement pour les composants d'interface utilisateur. Les guides de style créés avec Styleguidist affichent les propriétés des composants et affichent des exemples d'utilisation modifiables basés sur des fichiers de démarques (.md). L'outil est compatible avec les dialectes JavaScript tels que ES6, Flow et TypeScript.

    Les documents générés automatiquement permettent à Styleguidist de fonctionner comme un portail de documentation pour tous les composants, qui est disponible pour toute l'équipe de développement. Il simplifie également la création et la maintenance du site de documentation de l'interface utilisateur, qui comprend le catalogue des composants de l'interface utilisateur. Il permet également de créer des pages de démarques et d'importer des composants d'interface utilisateur.

    La documentation centralisée dans Styleguidist permet d'économiser beaucoup de temps et d'efforts sur les grands projets, mais des ressources doivent être allouées pour maintenir la documentation à jour. Sinon, vous pouvez tomber dans un problème appelé mortalité des guides de style, qui se produit lorsque la documentation devient obsolète, que les développeurs cessent de l'utiliser et que l'utilité des guides de style est tout simplement perdue.

    Il est courant que Styleguidist soit utilisé avec Storybook, car leurs points forts sont complémentaires : Storybook peut être utilisé pour créer des composants et écrire des histoires pour suivre les modifications, tandis que Styleguidist peut être utilisé pour documenter des composants à l'aide de Markdown.

    Bit

    Bit est un framework/référentiel distribué et extensible - alias référentiel monorepo ou multi-paquets - de composants d'interface utilisateur, qui peut être utilisé comme infrastructure pour créer des applications selon la méthodologie Component Driven Development (CDD). Avec cette méthodologie, Bit vise à accélérer les processus de construction, de test et de maintenance, en raccourcissant considérablement les cycles de développement d'applications et en améliorant la qualité des applications.

    Au lieu de créer les composants dans le cadre de l'application, Bit permet de les développer en dehors de l'application, puis de les utiliser pour composer les applications de bas en haut. À leur tour, les composants peuvent être réutilisés dans de nombreuses applications différentes, créant une sorte de marché de composants disponible pour toute une équipe de développement. En conséquence, vous obtenez des applications extensibles, dont les fonctionnalités peuvent être modifiées en ajoutant ou en supprimant simplement des composants.

    Bit est compatible avec React, Vue et Bibliothèques angulaires. Il est basé sur une philosophie d'espace de travail, où les espaces de travail sont utilisés pour développer et composer des composants. Cette façon de travailler vous permet de créer des applications de manière distribuée, mais avec une expérience de type monolithique. L'interface utilisateur des espaces de travail de Bit permet de développer et de gérer visuellement des composants en toute simplicité.

    React Cosmos

    Réagir Cosmos est un environnement de développement conçu pour créer des interfaces utilisateur évolutives et de haute qualité. Il vous permet de développer des composants React de manière isolée et de créer des bibliothèques de composants d'interface utilisateur. Il peut être utilisé pour réduire considérablement les temps de développement, soit par des tests de régression visuels instantanés, soit par des intégrations qui peuvent être personnalisées en fonction de vos besoins.

    React Cosmos utilise une philosophie basée sur des appareils de composants qui vous permet de marquer vos états en définissant des exemples d'entrées. Le regroupement des appareils de composants vous permet d'en créer une bibliothèque, que React Cosmos expose sous une interface utilisateur élégante spécialement conçue pour rendre votre temps plus productif.

    Pour faire son travail, React Cosmos s'insère dans votre pipeline de build afin qu'il puisse comprendre votre code source. Cela signifie que vous pouvez utiliser l'outil quel que soit le dialecte JS que vous utilisez pour écrire votre code, que ce soit Flow, TypeScript ou autres. Cela signifie également que vous devez parfois ajouter des options dans certaines configurations pour que l'intégration fonctionne.

    Comme son nom l'indique, React Cosmos fonctionne exclusivement avec React, en se concentrant sur quelques aspects du développement de l'interface utilisateur, mais avec le plus haut niveau de détail.

    React Developer Tools

    Proposé par Facebook, cet outil fonctionne comme un plug-in Chrome, vous permettant d'inspecter les hiérarchies de composants React dans les outils de développement de Chrome. Il est également disponible en tant que module complémentaire pour le navigateur Firefox.

    Outils de développement React vous permet d'inspecter et de modifier l'état et les propriétés d'un composant lorsque vous naviguez dans l'arborescence de la hiérarchie des composants de votre application. Cette forme interactive de développement vous donne la possibilité de voir comment les modifications apportées à un composant affectent les autres, afin que vous puissiez assembler correctement la structure de vos composants d'interface utilisateur et obtenir une séparation appropriée entre eux.

    Lorsque vous installez React Developer Tools dans votre navigateur, vous obtenez deux nouveaux onglets, l'un appelé Composants et l'autre appelé Profiler. Le premier vous montre les composants React racine qui ont été rendus sur la page, ainsi que les sous-composants rendus par eux. En sélectionnant l'un des composants dans l'arborescence, vous pouvez inspecter et modifier ses propriétés et son état dans le volet de droite. À l'aide du fil d'Ariane, vous pouvez inspecter les ancêtres du composant sélectionné. L'onglet Profiler est utilisé pour enregistrer les informations sur les performances.

    Docz

    Le processus de documentation du code est probablement celui que les codeurs détestent le plus. Peut-être même plus que de lire les rapports de bogues qu'ils reçoivent des testeurs. Cependant, un site de documentation constamment mis à jour est essentiel pour réduire le temps de développement, car il évite que les mêmes composants ne soient réécrits encore et encore, et avec des fonctionnalités différentes à chaque fois.

    Docz vise à simplifier autant que possible le processus de documentation et de mise à jour des sites de documentation afin que les développeurs ne perdent pas de temps qu'ils pourraient utiliser pour terminer les applications plus rapidement. Avec Docz, vous pouvez facilement écrire et publier une documentation interactive de votre code, en créant des fichiers MDX qui mettent en valeur ses vertus. En conséquence, vous obtenez un site prêt pour la production avec un rechargement en direct, qui s'actualise dans son intégralité chaque fois qu'un fichier change.

    Si vous aimez l'API, vous pouvez explorer ces outils pour créer une belle documentation API.

    Cela ne fait que commencer

    En plus des outils examinés ici, il existe de nombreux autres projets d'outils pour cataloguer, gérer et documenter des composants, tels que Carte Blanche, Atellier, Bluekit, entre autres. Beaucoup d'entre eux sont encore en version bêta, tandis que d'autres sont des projets non maintenus, mais il vaut la peine de les connaître et de les garder sur le radar car ils peuvent offrir des qualités qui peuvent considérablement raccourcir les temps de développement de logiciels.

    De nombreuses grandes entreprises modernes – y compris Shopify, Atlassian, IBM, Spotify et AirBNB adoptent des systèmes de conception basés sur des outils qui accélèrent le développement et la documentation des composants de l'interface utilisateur. Cependant, vous n'avez pas besoin d'attendre d'être une grande entreprise pour adopter ces outils. Il est préférable de commencer à les utiliser lorsque vous avez un catalogue minimal de composants à maintenir. Vous pouvez vous familiariser avec eux afin de ne pas être pris au dépourvu lorsque votre liste de composants s'allonge et qu'il devient trop coûteux de commencer à l'organiser.