Guide de développement basé sur les composants

La modularité est l' un des principes clés du développement logiciel depuis les années 1960. L'application de ce principe apporte beaucoup d'utilité à la programmation. La modularité contribue à l'utilisation efficace du principe de séparation des responsabilités, ce qui conduit à une amélioration de la capacité à créer, réutiliser, construire du code.

De nos jours, l'application du principe de modularité dans la conception de logiciels a pris une nouvelle forme, incarnée dans les composants. Il s'agit du développement piloté par composants (CDD). Des bibliothèques et des cadres modernes pour développer des interfaces utilisateur, telles que React , Vue et Angular , ainsi que des outils orientés CDD comme Bit , vous permettent de créer des applications basées sur des composants modulaires. Le programmeur a à sa disposition les modèles et les outils nécessaires pour développer des composants de manière isolée et construire des compositions de composants.


Un composant est un fragment indépendant clairement défini de l'interface d'application. Comme exemples de composants, vous pouvez citer des entités telles que des boutons, des curseurs, des fenêtres pour afficher des messages de discussion. Comprendre les fonctionnalités de CDD et savoir comment appliquer cette approche au développement, nous pouvons utiliser des composants comme base d'applications. Cela, lors de la création de projets logiciels, nous donne tout ce qui est utile, ce qui signifie appliquer les principes de la programmation modulaire.

Si vous regardez attentivement ce qui se passe actuellement dans le domaine des composants Web , vous remarquerez que CDD est en train de devenir une approche standardisée du développement frontend.

Le matériel, dont nous publions la traduction aujourd'hui, est un guide de développement basé sur les composants.

CDD dans le développement de l'interface utilisateur

Travailler sur Bit: créer, isoler, réutiliser et collaborer sur des composants

En termes simples, le développement basé sur les composants consiste à concevoir des applications en créant des blocs de code indépendants à couplage lâche. Chacun d'eux a une interface conçue pour organiser l'interaction avec d'autres parties du système. De nombreux composants, combinés les uns aux autres grâce à la composition, forment une application modulaire.

Par exemple, l'utilisation de CDD dans la création d'applications React signifie qu'ils créent d'abord les composants qui forment la base de l'application, puis procèdent à leur assemblage de parties plus importantes de l'application, telles que des pages entières et de grands blocs de fonctionnalités.

Le CDD est lié à la conception atomique ( voici des informations utiles sur ce sujet) et à l'approche de développement des parties côté client des projets Web, connue sous le nom de « micro frontend ».

CDD aide à décomposer le processus de développement d'un grand projet en processus de développement plus petits pour les composants individuels. Chaque composant est conçu indépendamment du reste de l'application et est créé en tenant compte de la possibilité d'interaction avec d'autres parties du système. Concevoir chaque composant comme une entité indépendante offre au développeur de nombreuses fonctionnalités utiles.

Eddie Osmani a décrit certains des principaux avantages de l'utilisation du CDD. Il les a conçus dans un ensemble de principes appelé FIRST .

Ces principes sont:

• Accélération du développement (développement plus rapide). Le fait que les efforts des développeurs visent à créer des composants séparés permet de créer des parties modulaires de l'application avec des API hautement spécialisées. Cela signifie que les composants peuvent, d'une part, être développés rapidement, et d'autre part, qu'il est plus facile de les amener au niveau de qualité requis par le projet lors de leur développement.
• Simplification du support (maintenance simplifiée). Lorsque vous devez modifier ou mettre à jour une partie d'une application, vous pouvez développer ou mettre à jour un composant, plutôt que de refactoriser une grande partie de l'application. Cela peut être comparé à une procédure médicale, avec une opération sur un organe séparé, remplaçant une opération qui implique une intervention dans presque toutes les parties du corps.
• Meilleures capacités de réutilisation du code. En raison de l'utilisation du principe de séparation des responsabilités, les composants, lors de la création d'une application finie à partir d'eux, peuvent être réutilisés ou étendus. C'est bien mieux que la nécessité de les réécrire encore et encore ( voici le matériel sur ce sujet).
• Amélioration de la capacité à appliquer la méthodologie TDD (Better TDD). Lors du développement de composants modulaires, il est beaucoup plus facile que d'utiliser d'autres approches pour implémenter des tests unitaires visant à vérifier l'étroite fonctionnalité d'un composant. En conséquence, il s'avère qu'il est plus facile de tester de grands systèmes assemblés à partir de composants. Le fait est que lors de l'utilisation d'une approche modulaire, il est plus facile pour un développeur de comprendre de quoi exactement l'une ou l'autre partie du système est responsable.
• Raccourcir les courbes d'apprentissage (Courbes d'apprentissage plus courtes). Lorsqu'un développeur doit gérer un nouveau projet pour lui, il s'avère qu'il est beaucoup plus facile de comprendre l'essence et la structure des composants individuels que de se plonger dans les subtilités de l'ensemble du projet.
• Amélioration des capacités de modélisation des systèmes (meilleure modélisation du système). Lorsque le système est créé à partir de composants modulaires, il devient plus facile pour le développeur de comprendre la structure générale du système, de la comprendre et d'apprendre comment l'influencer.

Outils CDD

Si le développement est basé sur des composants, cela signifie que le programmeur a besoin d'outils spécialisés. Ces outils visent à créer des composants, à les tester, à organiser leur accès général et à soutenir leur collaboration.

En particulier, il est important de concevoir et de tester les composants de manière isolée. Cela leur permet de travailler sous la forme d'unités indépendantes pouvant être utilisées dans l'application. De plus, la prise en charge de la réutilisation des composants et la possibilité de les partager sont importantes. Cela permet à celui qui travaille en équipe sur un grand projet de ne pas réinventer la roue, qui, sous forme de composant, a déjà été inventée par l'un des membres de l'équipe.

Voici quelques outils utiles pour vous aider à organiser votre travail sur des projets de style CDD. Dans l'une des sections suivantes, nous parlerons des architectures de projet recommandées pour la mise en œuvre pratique des principes CDD.

▍Bit: développement individuel et en équipe de composants

Bit est un outil open source , créé essentiellement pour soutenir l'application pratique de la méthodologie CDD. Voici une vidéo sur Bit. Cet outil vous aide à développer des composants, à collaborer sur eux et à créer des projets Web en les utilisant.

Le fait est qu'avec Bit, vous pouvez isoler les composants en cours de développement dans le cadre d'un projet. Dites - dans une application ou une bibliothèque. Bit prend en charge les outils de ligne de commande, il aide à organiser l'encapsulation des composants avec tous leurs fichiers et dépendances. Bit vous permet de développer et de tester des représentations virtuelles de composants encapsulés de manière isolée.

Cela signifie que le composant créé dans l'application peut être équipé de toutes ses dépendances, encapsulé et transformé en une entité qui peut être utilisée et testée en dehors de l'application.

De plus, Bit vous permet d'emballer des composants encapsulés autonomes et d'organiser leur partage à l'aide d' outils cloud . Cela permet aux équipes travaillant sur des projets d'utiliser tous les composants partagés. La communauté Bit compte environ 50 000 développeurs. Leurs efforts ont créé des milliers de composants open source accessibles à tous.


Développement de projet à l'aide de composants encapsulés

Grâce aux capacités de la plateforme cloud, les équipes de développement peuvent installer des composants open source dans leurs applications. Les membres de l'équipe peuvent également proposer aux auteurs de composants des idées d'amélioration des composants en le faisant directement à partir de leur environnement de travail. Bit étend la capacité de Git à suivre et synchroniser les modifications du code source des composants à travers les projets. Cela donne aux développeurs la possibilité de gérer les modifications et les mises à jour des composants.

Bit stocke une arborescence complète des dépendances des composants. Cela donne au développeur la possibilité d'apprendre comment la mise à jour d'un composant peut affecter les composants dépendants, ce qui peut être «cassé» dans un projet lorsque des modifications sont apportées à un composant. Cela signifie que grâce à Bit, le programmeur a à sa disposition un environnement complet pour organiser le développement basé sur les composants, vous permettant de créer des composants, de les tester et d'organiser un travail conjoint sur eux et leur utilisation conjointe.


Capacités cloud dans CDD

Une autre caractéristique utile de Bit est que cette plate-forme permet aux équipes de développement non seulement de travailler avec leurs composants à l'aide d'une interface unique, mais également d'utiliser d'autres composants présentés dans le domaine public et d'interagir avec les auteurs de ces composants.

Les concepteurs d'interfaces, les représentants des projets clients ainsi que les programmeurs peuvent, au cours d'un travail conjoint sur des projets, utiliser des outils visuels communs. Cela comble le fossé entre les concepteurs et les programmeurs. De plus, il convient de noter que dans cette situation, non seulement les concepteurs et les programmeurs en bénéficient, mais aussi les utilisateurs finaux d'applications qui rencontrent moins d'hétérogénéités et d'erreurs. Ici , ici et ici , voici quelques documents sur divers aspects de l'utilisation de Bit.

▍Développement et recherche de composants d'interface utilisateur: StoryBook et Styleguidist

StoryBook et Styleguidist sont des environnements pour développer rapidement des éléments d'interface utilisateur à l'aide de React. Ces deux projets sont d'excellents outils pour accélérer le développement de composants.

Livre de contes

StoryBook est un environnement pour développer rapidement des composants d'interface utilisateur. Il vous permet de travailler avec la bibliothèque de composants, de visualiser les différents états des composants, de vous engager dans le développement interactif et les tests de composants.


Travailler chez StoryBook

StoryBook aide à concevoir des composants indépendamment de l'application. Cela permet d'améliorer la réutilisabilité des composants et améliore la testabilité des composants.

À l'aide de StoryBook, vous pouvez afficher les composants stockés dans la bibliothèque et expérimenter leurs propriétés en ligne. Les modifications apportées au composant immédiatement, sans recharger la page, sont visualisées. Voici quelques exemples de composants créés dans le StoryBook.

Il existe différents plugins qui peuvent accélérer le développement de composants à l'aide de StoryBook. Cela vous permet de réduire le temps écoulé entre la modification du code du composant et la formation de sa représentation visuelle. Il convient de noter que StoryBook, en plus de React, prend également en charge React Native et Vue.js.

Guide de style React

React Styleguidist est un environnement de développement de composants. Cet environnement contient un serveur de développement qui prend en charge un démarrage à chaud. Il dispose également d'un système de gestion de style interactif qui affiche les propTypes composants et fournit aux développeurs des exemples modifiables d'utilisation de composants basés sur des fichiers .md.


Guide de style React

Cette plateforme prend en charge JavaScript ES6, Flow et TypeScript. Elle peut, sans paramètres supplémentaires, travailler avec l'application Create React. Styleguidist a la possibilité de créer automatiquement la documentation des composants. Cela permet à ce système de jouer le rôle d'un portail de documentation visuelle pour les composants sur lesquels une équipe travaille.

Si vous êtes intéressé par des projets comme StoryBook et Styleguidist, vous voudrez peut-être jeter un œil au projet React Live , qui est développé par Formidable.

Différence entre StoryBook et Styleguidist

Tout en travaillant avec un StoryBook, un programmeur écrit des «histoires» dans des fichiers JavaScript. Lorsqu'il travaille avec Stuleguidist, il écrit des «exemples» dans les fichiers Markdown. Alors qu'un StoryBook ne montre qu'une seule variation d'un composant à la fois, Styleguidist peut afficher plusieurs variations de différents composants. StoryBook est idéal pour analyser les différents états des composants, et Styleguidist est idéal pour générer de la documentation sur les composants et démontrer les capacités des composants.

Décisions architecturales utilisées à l'aide de la méthodologie CDD

Le travail dans le style de CDD signifie que lors du développement d'applications, les composants sont créés en premier. De plus, ces composants doivent être aussi indépendants les uns des autres que possible. Cela signifie que le développeur ne crée pas seulement un «ensemble de composants». Il implémente également le soi-disant système de conception de composants d'interface utilisateur.

Les composants peuvent être créés à la fois dans le cadre de l'application elle-même (c'est-à-dire dans le même projet, référentiels) et sous la forme d'un projet distinct (référentiel) - sous la forme d'une bibliothèque de composants.

Des outils comme Bit vous permettent d'isoler et d'encapsuler des composants. Cela donne au développeur de nombreuses opportunités pour créer, tester, réutiliser des composants et leur permettre d'être finalisés n'importe où - quel que soit l'endroit où ils ont été créés.

Si nous disons que l'utilisation de CDD prévoit le développement de composants sous la forme de la première étape de travail sur un projet, cela implique également que les composants ont tendance à les rendre adaptés à une utilisation répétée. Cela vous permet de les appliquer lors de la création de diverses applications. Par conséquent, le développeur doit savoir exactement comment il doit procéder pour créer de tels composants. Il n'y a rien de pire que de passer six mois à créer une bibliothèque que, finalement, personne n'utilisera. Malheureusement, cela se produit avec de nombreuses équipes.

Pourquoi créer une bibliothèque de composants?

Je vais être honnête avec vous: les référentiels Git n'ont pas été conçus en tenant compte de la possibilité d'y stocker du code de composants atomiques, qui devrait être partagé dans divers projets. Pour résoudre ce problème, les gestionnaires de packages ne conviennent pas. Les deux ont été créés, ce qui est compréhensible, pour prendre en charge les référentiels de code. Les composants ne sont pas des référentiels.


Partager un composant dans divers projets

C'est pourquoi, si vous avez besoin de prendre un composant d'une application et de l'utiliser dans une autre application, vous devez créer un nouveau référentiel. Afin de vous éviter le travail inutile de création d'un référentiel séparé pour chacun de ces composants, la plupart des équipes créent un référentiel partagé conçu pour stocker 20 à 30 composants.

Lorsque vous utilisez un outil comme Bit, la bibliothèque de composants en tant que telle n'a pas besoin de l'être. Ces outils vous permettent de télécharger un composant de l'application vers le cloud et de l'implémenter dans d'autres projets. Si nous comparons ce schéma de travail avec des référentiels traditionnels, nous pouvons dire que c'est quelque chose comme comparer un CD de musique et Spotify. Certes, si vous êtes proche de l'idée de développer et d'utiliser des bibliothèques de composants, les capacités de plates-formes telles que Bit et StoryBook vous permettront de travailler avec des bibliothèques.

Lors de la conception d'une bibliothèque, vous devez prendre plusieurs décisions clés. Ci-dessous seront considérés quelques principes importants qui vous aideront à cela. Le point principal de ces principes est que votre tâche consiste à créer des composants indépendants. Les étapes restantes du travail sur le projet ressemblent à l'assemblage du constructeur Lego. Si le principe du développement de composants indépendants n'est pas respecté, un jour vous risquez de rencontrer des problèmes. Les problèmes commenceront lorsque quelqu'un aura besoin de quelque chose de différent de ce qui se trouve dans la bibliothèque. En fait, lorsque cela se produit, les équipes cessent d'utiliser les bibliothèques de composants.

Supposons que vous décidiez de créer une bibliothèque de composants. Si tel est le cas, nous vous proposons quelques conseils qui vous aideront à cet égard.

7 principes pour développer des bibliothèques CDD de qualité

1. Normes À quelles normes de développement adhérez-vous lors de la création de votre bibliothèque? Où sont situés les composants? Où sont situés les tests? Et les styles? Quelle pile technologique utilisez-vous? Par exemple, prévoyez-vous d'utiliser TypeScript? Comment les composants sont-ils divisés? Le composant «Table», par exemple, est-il composé de «Lignes» et de «Cellules»? Le panneau avec des onglets est-il composé d'onglets distincts (les mêmes questions peuvent-elles être posées par rapport à d'autres entités similaires)? Je suppose que vous avez déjà compris le sens de cette recommandation. Il est également très important d'inclure les concepteurs dans le processus de formation des normes. Cela garantira que la bibliothèque est suffisamment flexible et répondra aux exigences de conception qui pourraient apparaître à l'avenir.
2. Stylisation. Comment prévoyez-vous de styliser les composants? Lierez-vous le code CSS correspondant à chaque composant? Dans l'affirmative, que se passe-t-il lorsqu'un concepteur doit modifier quelque chose uniquement pour une application distincte qui utilise un composant? Peut-être que pour améliorer la séparation des composants des styles, il vaut la peine d'utiliser des bibliothèques qui implémentent CSS dans la technologie JS ? Peut-être que cela vaut la peine de chercher une autre approche du style? Par exemple, en utilisant Bit, vous pouvez mettre en surbrillance des sujets en tant que composants séparés. Ces rubriques peuvent être appliquées à des composants qui implémentent une sorte de logique. Cela vous permet de créer des applications dans lesquelles la conception et la logique sont combinées exactement selon les besoins du développeur. Voici un exemple de l'extrême flexibilité des systèmes construits selon le principe de modularité.
3. Test. Comment allez-vous tester les composants inclus dans la bibliothèque? Utiliser Jest et Enzyme? La sélection d'une bonne combinaison d'outils de test des composants doit être envisagée avec toute responsabilité. Cela permettra à ces outils de vous aider à mettre en œuvre la méthodologie CDD. Un mauvais choix d'outils gênera le travail. Les tests unitaires sont bons. Mais ils doivent vérifier les API fonctionnelles des composants, pas les détails de leur implémentation. L'intégration et les tests de bout en bout sont tout aussi importants que les tests unitaires. La méthodologie TDD fonctionne bien lorsqu'elle est appliquée dans des projets utilisant CDD.
4. Processus d'assemblage du code. Le code doit être compilé. Comment allez-vous organiser le processus de construction de code pour votre bibliothèque? Comment les versions seront-elles mises en œuvre? Envisagez-vous simplement de copier le code de l'application et de le coller dans la bibliothèque (probablement en le modifiant un peu)? Allez-vous définir des configurations d'assemblage pour chaque composant (Lerna) et appliquer les mécanismes appropriés au code avant de le publier? Envisagez-vous d'utiliser, disons, le bit déjà mentionné plus d'une fois afin de personnaliser les processus de construction qui s'appliquent à tous (ou à chacun) des composants? Si vous compliquez trop le processus d'assemblage, il deviendra plus difficile de vous engager dans le développement, la modularité du projet se détériorera. La courbe d'apprentissage requise pour participer au développement deviendra trop abrupte.
5. Gestion du code. À qui appartient la bibliothèque? Dans les organisations assez grandes, il existe souvent des équipes de développeurs front-end et, parfois, d'architectes. Ils créent un produit appelé «bibliothèque partagée». D'autres équipes de développement front-end créent des applications à l'aide de bibliothèques similaires. Avec ce schéma d'interaction, il est très important d'utiliser un système qui vous permet de trouver facilement les composants nécessaires (Bit, Storybook). Plus important, peut-être, est le mécanisme par lequel les utilisateurs de composants peuvent proposer des améliorations de composants. S'il n'y a pas de tels mécanismes dans l'organisation, alors les équipes d'utilisateurs des composants ne voudront pas associer leurs applications à la bibliothèque et attendre que leur PR soit accepté, ce qu'elles pourraient bien ne pas attendre. Pas besoin de forcer les programmeurs à faire quoi que ce soit. Il est nécessaire d'établir une coopération saine. Si vous ne vous efforcez pas, personne n'utilisera la bibliothèque. Les programmeurs vont simplement copier et coller le code, et personne ne fera rien à ce sujet. De plus, ce sera votre erreur. Si vous travaillez dans une petite équipe, déterminez clairement qui gère le code. Même si personne n'est impliqué dans la base de code tout le temps, sélectionnez quelques spécialistes qui prendront en charge ce code. Le reste fera des relations publiques - tout comme sur GitHub.
6. Recherche de composants. La bibliothèque n'apportera pas beaucoup d'avantages si les programmeurs ne peuvent pas trouver les composants dont ils ont besoin, ne peuvent pas apprendre comment ces composants fonctionnent et ne peuvent pas les utiliser dans leur code. Bit a les capacités intégrées qui aident les développeurs à trouver des composants. En plus de cette plate-forme (ou à la place de celle-ci), vous pouvez utiliser les capacités de StoryBook ou une sorte de propre solution. La plate-forme Codesandbox peut fournir certains avantages pour résoudre les problèmes liés à la sélection des composants et à l'utilisation de la documentation pour eux.
7. Organisation de collaboration sur les composants. Que se passe-t-il lorsqu'un développeur (peut-être d'une autre équipe, ou même d'un autre pays) doit changer quelque chose lié à un composant de votre bibliothèque? A-t-il besoin d'approfondir la création d'un PR pour votre bibliothèque et, en croisant les doigts, d'attendre les résultats? Pour de nombreux développeurs, c'est trop compliqué, ils ne le feront pas même si vous essayez de les influencer d'une manière ou d'une autre. Ce sera beaucoup mieux si vous utilisez une certaine plateforme qui simplifie la collaboration sur les projets.

N'oubliez pas qu'une bibliothèque n'est qu'un référentiel qui existe afin de faciliter le partage de composants dans divers projets. Les bibliothèques ne évoluent pas très bien, le code qu'elles contiennent devient obsolète, elles souffrent de divers problèmes. Il pourrait être préférable de fournir simplement un accès direct aux composants destinés au partage, en utilisant une sorte de plate-forme cloud.

Avantages de l'équipe CDD

Les équipes qui utilisent le principe CDD bénéficient d'un développement accéléré, d'une réutilisation accrue du code, d'un TDD amélioré et d'une interface de conception cohérente.

Les programmeurs peuvent écrire du code avec accès aux composants déjà écrits et travailler ensemble pour apporter des modifications aux composants. Le développement de nouvelles fonctionnalités ou applications se résume à la personnalisation et à l'extension des composants de base. De plus, cela permet d'éviter les erreurs qui ne se trouvent qu'en production.

Le partage de code signifie, entre autres, la réduction de la quantité de code qui doit être prise en charge. Cela permet aux programmeurs de se concentrer sur la création de quelque chose de nouveau. Lorsque les applications sont développées sur la base de composants, cela standardise le travail car tout le monde utilise une seule base de blocs de construction d'applications. L'approche par composants contribue également à la flexibilité du travail.

Certaines équipes signalent que leurs flux de travail sont devenus jusqu'à 60% plus rapides grâce à l'utilisation de composants modulaires basés sur des systèmes de conception mis en œuvre sous forme d'ensembles de composants React. Certaines organisations ont constaté que grâce à l'introduction de CDD, elles peuvent supprimer environ 30% du code de leurs bases de code.

Des entreprises telles que Uber, Airbnb, Shopify et d'autres introduisent une approche par composants.

Résumé

Personnellement, je ne suis pas surpris que l'utilisation du CDD améliore l'efficacité du développement logiciel. Selon Brad Frost, auteur du livre sur la conception atomique, la modularité et la composition sont les concepts les plus importants en biologie, en économie et dans de nombreux autres domaines. La modularité de l'application au développement logiciel donne rapidité, fiabilité, facilité de développement. Il favorise la réutilisation des entités, améliore la testabilité et l'extensibilité du code. La modularité donne au développeur la possibilité d'utiliser la composition lors de la création de systèmes complexes. Tout cela affecte très bien le processus et les résultats du développement d'applications.

Chers lecteurs! Utilisez-vous la méthodologie CDD lorsque vous travaillez sur vos projets?