Guide ultime pour créer une bibliothèque de composants d'interface utilisateur – Partie 1

La création d'une bibliothèque de composants d'interface utilisateur est un excellent moyen de garantir la cohérence dans toute votre organisation. Mais la construction d'une bibliothèque de composants comporte également un certain nombre de défis organisationnels et technologiques. Dans cet article, vous découvrirez des trucs et astuces qui vous aideront à démarrer le processus.

Chaque entreprise doit disposer d'une bibliothèque standard de composants d'interface utilisateur . Les bibliothèques de composants assurent la cohérence dans toute votre organisation, à la fois visuellement (à quoi ressemblent les applications de votre entreprise) et technologiquement (quels cadres et dépendances les applications de votre entreprise utilisent).

Mais la création d'une bibliothèque de composants d'entreprise est également difficile, car vous devez gérer à la fois des problèmes d'organisation, comme l'obtention de l'autorisation de la direction pour travailler sur des composants, ainsi que des problèmes de développement, comme la détermination des cadres que vous allez utiliser (le cas échéant), et comment allez-vous distribuer les composants aux applications de votre entreprise. ] J'ai passé plus d'une décennie à travailler avec des composants d'interface utilisateur sur le Web, à la fois en tant que membre de l'équipe jQuery UI et maintenant en tant que membre de l'équipe Kendo UI de Progress. Dans cette série d'articles, je partagerai des conseils et des stratégies que j'ai appris qui peuvent vous aider à créer votre propre bibliothèque de composants d'entreprise, que vous construisiez vos propres composants à partir de zéro ou que vous construisiez sur un ensemble existant de composants . Voici ce à quoi vous pouvez vous attendre de cette série:

• Partie 1 – Création d'un plan : (vous êtes ici) Vous apprendrez à planifier une bibliothèque de composants, y compris comment convaincre la direction et vos collègues que la construction d'un la bibliothèque de composants est une bonne idée, et comment sélectionner un framework JavaScript à utiliser.

• Partie 2 – Établissement d'un environnement de développement : (à venir) Vous apprendrez à configurer votre bibliothèque de composants, avec un focus sur la mise en place d'un environnement de développement productif.

• Partie 3 – Construction de composants robustes : (à venir) Vous apprendrez comment construire des composants individuels, y compris une discussion sur la question de savoir si vous devez créer vos propres composants à partir de zéro, ajoutez des dépendances sur des bibliothèques existantes, ou faites une combinaison des deux.

Commençons par voir comment démarrer le processus.

Comment démarrer

Démarrer une nouvelle bibliothèque de composants d'entreprise peut sembler une tâche ardue . Votre objectif final est d'avoir un ensemble de composants que toute votre organisation peut utiliser, mais la plupart des entreprises ont un ensemble disparate d'applications conçues avec une variété de cadres et de technologies différents.

Avec ce défi à l'esprit, ma recommandation est de commencer petit . Choisissez deux ou trois composants que votre entreprise possède déjà (bouton, en-têtes, pieds de page) et créez-les dans une bibliothèque qui existe en dehors de toute application individuelle. (Vous apprendrez le flux de travail que je préfère utiliser pour cela dans la partie 2.)

Pour vous aider à trouver les composants spécifiques à construire, je vous recommande de commencer par faire un inventaire de l'interface qui vous permet de cataloguer chaque permutation des composants utilisés par votre entreprise dans un seul document.

La création d'un inventaire d'interface sert à deux fins. Premièrement, il peut vous aider à reconnaître les composants que vous devez commencer à créer dans votre bibliothèque. (Recherchez des composants simples que de nombreuses applications utilisent.) Mais plus important encore, un inventaire d'interface est un excellent moyen de convaincre la direction que la création d'une bibliothèque de composants en vaut la peine. La raison en est que la plupart des entreprises qui font un inventaire découvrent qu'elles ont un désordre de composants similaires mais différents, et voir 17 permutations de boutons différentes fait beaucoup pour persuader un gestionnaire hésitant de vous donner le temps de développer un ensemble standard de composants.

Comment choisir un JavaSc ript Framework

L'une des parties les plus difficiles de l'écriture de composants pour une organisation entière est de décider du framework JavaScript à utiliser, le cas échéant. Dans les grandes entreprises, il est courant d'avoir des applications construites avec une variété de frameworks frontaux, à la fois parce que les applications d'entreprise ont tendance à rester longtemps, et parce que les développeurs ont des opinions différentes sur ce qu'est le «meilleur» framework.

Cette fragmentation est un problème lorsqu'il s'agit de créer des composants que vous avez l'intention d'utiliser de manière standard dans toute une organisation. Vous avez trois options pour gérer cette situation.

Option 1: Choisissez un framework

Avec cette option, vous construisez tous vos composants avec un seul framework – c'est-à-dire que vous construisez soit tous les composants React, ou tous les composants Angular, ou tous les composants Vue.

Cette option est la plus logique pour les entreprises qui ont soit normalisé sur un seul framework pour toutes leurs applications, soit choisi un seul framework comme option préférée pour le développement de nouvelles applications.

Option 2: Prise en charge de plusieurs frameworks

Avec cette option, vous créez vos composants plusieurs fois, une fois pour chaque framework que vous devez prendre en charge.

Cette option semble mauvaise – ce que le développeur veut écrire quelque chose plusieurs fois? – mais même si vous écrivez des composants plusieurs fois, vous pouvez partager une quantité surprenante de code, comme votre structure de balisage, et le CSS pour styliser vos composants.

Option 3: Écrire des composants indépendants du framework

Avec cette option, vous construisez tous vos composants sans frameworks comme React, Angular ou Vue, et vous construisez à la place vos composants par-dessus les API des composants Web du navigateur.

Bien que cette option semble attrayant – qui ne voudrait pas de composants qui peuvent fonctionner dans n'importe quelle application? – l'inconvénient est que la plupart des développeurs ont beaucoup plus d'expérience de travail avec leur cadre de choix qu'avec des composants Web. Et bien que les composants Web aient parcouru un long chemin au cours de la dernière décennie, ils n'offrent toujours pas la plupart des fonctionnalités que les frameworks comme React, Angular et Vue offrent prêtes à l'emploi.

Making a Framework Decision

The la bonne option pour votre entreprise dépend de votre équipe et des applications que vous prenez en charge. Cela étant dit, je recommande à la plupart des entreprises de commencer par le n ° 1 (choisir un framework), et de passer au n ° 2 (prendre en charge plusieurs frameworks) si nécessaire.

Au fil des ans, j'ai constaté que les développeurs sont plus productifs lorsqu'ils utiliser un framework avec lequel ils sont familiers – alias les développeurs React sont plus productifs lorsqu'ils utilisent des composants React, les développeurs Angular sont plus productifs lorsqu'ils utilisent des composants Angular, etc.

Chez Progress, nous utilisons également cette approche pour Kendo UI. Plus précisément, au lieu d'offrir une interface utilisateur Kendo qui fonctionne avec n'importe quel framework, nous proposons Kendo UI pour jQuery Kendo UI for Angular KendoReact et Kendo UI for Vue —Chacun a été construit à partir de zéro avec leur cadre respectif. Comme vous pouvez l'imaginer, c'est beaucoup de travail, mais nos utilisateurs ont la cohérence nous a dit qu'ils préfèrent les composants spécifiques au framework aux composants indépendants du framework. Et nous pouvons partager une quantité surprenante de code dans tous les frameworks, par exemple Le robuste système de thèmes de Kendo UI fonctionne de la même manière quel que soit le framework JavaScript que vous utilisez.

Si vous avez encore du mal à décider sur un cadre, je vous encourage à réfléchir au type de composants que vous aimez vous-même utiliser. Par exemple, si vous êtes un développeur React qui a besoin d'un sélecteur de date, que vous êtes plus susceptible d'utiliser: un sélecteur de date basé sur un composant Web que vous devez comprendre comment utiliser dans React, ou un sélecteur de date qui a été construit par React développeurs avec des API que vous connaissez?

Parce que je suis convaincu que la création de composants spécifiques au framework est le bon choix, c'est l'approche que vous utiliserez dans le prochain article de cette série. Plus précisément, vous apprendrez à créer une bibliothèque de composants avec l'approche n ° 1 (choisissez un framework), et vous construirez les composants eux-mêmes avec React.

Bien que vous utilisiez React, vous apprendrez à construire une structure de projet qui peut prendre en charge l'approche n ° 2 (prendre en charge plusieurs frameworks), car c'est souvent une nécessité pour les entreprises qui ont des applications construites avec plusieurs frameworks différents.

Prochaines étapes

À ce stade, vous avez décidé d'un une poignée de composants à construire, et vous avez choisi un framework JavaScript avec lequel vous allez construire vos composants. Il est donc temps de commencer à coder!

Dans cette prochaine partie de cette série d'articles, vous apprendrez à créer un environnement de développement pour créer des composants d'interface utilisateur à partir de zéro. Restez à l'écoute 🙂