Comment créer une bibliothèque

L’utilisation d’une bibliothèque de composants accélère votre développement car vous pouvez éviter de repenser et de recoder les mêmes composants. Voici comment démarrer votre propre bibliothèque de composants partagés dans Angular.

En tant que développeurs travaillant dans une entreprise proposant une variété de produits, nous constatons que réutiliser les mêmes composants et styles entre les applications peut s’avérer difficile. La création de notre propre bibliothèque nous aide à réduire la duplication de code et offre une interface fluide et cohérente, ce qui peut augmenter considérablement la productivité de notre équipe. De plus, il garantit une fonctionnalité cohérente dans toutes les applications, ce qui permet d’économiser du temps et des ressources précieuses : plus besoin de traiter les mêmes problèmes dans différentes applications !

La solution idéale à ce problème consiste à créer une bibliothèque partagée permettant une distribution sans effort du code entre les projets. Heureusement, Angular offre une méthode simple pour développer une bibliothèque de partage de composants, de services et d’utilitaires.

Mais la meilleure façon de comprendre comment une bibliothèque nous aide à accélérer notre équipe et à réaliser des projets rapides et cohérents est de montrer un scénario réel.

Scénario

Nous travaillons pour une grande société de logiciels de comptabilité qui doit publier deux nouvelles applications pour les opérations bancaires et l’enregistrement. Les deux applications nécessitent un ensemble de boutons.

Que pouvons-nous faire?

• Créez des boutons identiques pour les applications bancaires et d’enregistrement.
• Partagez le CSS entre les deux applications et dupliquez le composant bouton.
• Assurez-vous de penser à long terme : que se passerait-il si l’entreprise changeait la couleur de sa marque ? Cela devrait être quelque chose que nous devrions pouvoir mettre à jour à l’avenir sans trop de tracas.

Nous pouvons résoudre ce problème en créant une bibliothèque de boutons partagée pour les deux applications. Continuons avec cette solution.

Créer la bibliothèque

Avant de créer la bibliothèque, nous devons configurer un espace de travail qui servira d’emplacement à notre bibliothèque et à nos applications. Pour ce faire, nous pouvons utiliser la CLI Angular et exécuter la commande suivante pour configurer l’espace de travail :

ng new my-company --create-application=false

Cela créera un nouvel espace de travail angulaire sans créer d’application initiale.

C:\Users\dany.paredes\Desktop>ng new my-company --create-application=false
CREATE my-company/angular.json (139 bytes)
CREATE my-company/package.json (993 bytes)
CREATE my-company/README.md (1063 bytes)
CREATE my-company/tsconfig.json (901 bytes)
CREATE my-company/.editorconfig (274 bytes)
CREATE my-company/.gitignore (548 bytes)
CREATE my-company/.vscode/extensions.json (130 bytes)
CREATE my-company/.vscode/launch.json (474 bytes)
CREATE my-company/.vscode/tasks.json (938 bytes)
√ Packages installed successfully.

Une fois la configuration générée dans le répertoire my-company, nous générerons la bibliothèque. Le nom de votre bibliothèque est important, surtout si vous envisagez de la publier ultérieurement dans un registre de packages public comme npm.

Évitez d’utiliser des noms commençant par « ng- » car il s’agit d’un mot-clé réservé utilisé par le framework Angular et ses bibliothèques. Utilisez le préfixe « ngx- » pour indiquer que la bibliothèque peut être utilisée avec Angular.

Après avoir choisi le nom ngx-banana-uiutilisez la commande ng generate library ngx-banana-ui --prefix=banana.

Le –préfixe=banane: change le préfixe de votre composant de <app-my-lib> à <banana-my-component>par défaut.

cd my-company
ng g library ngx-banana-ui --prefix=banana

C:\Users\dany.paredes\Desktop\my-company>ng g library ngx-banana-ui --prefix=banana
CREATE projects/ngx-banana-ui/ng-package.json (162 bytes)
CREATE projects/ngx-banana-ui/package.json (217 bytes)
CREATE projects/ngx-banana-ui/README.md (1033 bytes)
CREATE projects/ngx-banana-ui/tsconfig.lib.json (314 bytes)
CREATE projects/ngx-banana-ui/tsconfig.lib.prod.json (240 bytes)
CREATE projects/ngx-banana-ui/tsconfig.spec.json (273 bytes)
CREATE projects/ngx-banana-ui/src/public-api.ts (183 bytes)
CREATE projects/ngx-banana-ui/src/lib/ngx-banana-ui.module.ts (269 bytes)
CREATE projects/ngx-banana-ui/src/lib/ngx-banana-ui.component.spec.ts (636 bytes)
CREATE projects/ngx-banana-ui/src/lib/ngx-banana-ui.component.ts (214 bytes)
CREATE projects/ngx-banana-ui/src/lib/ngx-banana-ui.service.spec.ts (384 bytes)
CREATE projects/ngx-banana-ui/src/lib/ngx-banana-ui.service.ts (140 bytes)
UPDATE angular.json (1149 bytes)
UPDATE package.json (1070 bytes)
UPDATE tsconfig.json (985 bytes)

En savoir plus sur les projets dans Angulaire.

La commande « ng generate » crée le dossier « projects/my-lib » dans votre espace de travail, qui contient un composant et un service dans un NgModule avec le public-api.ts pour exporter l’API de la bibliothèque correspondante.

La CLI génère un fichier public-api.ts dans votre dossier bibliothèque. Il s’agit d’un fichier essentiel car tout ce qui est exporté à partir de ce fichier est rendu public lorsque votre bibliothèque est importée dans une application en utilisant le ngx-banana-ui.module pour exposer les services et les composants.

Les boutons

Une fois la configuration en place, nous pouvons générer le composant bouton à l’aide d’Angular/CLI en exécutant ng g c components/button commande.

PS C:\Users\dany.paredes\Desktop\my-company\projects\ngx-banana-ui\src\lib> ng g c components/button       
CREATE projects/ngx-banana-ui/src/lib/components/button/button.component.html (21 bytes)
CREATE projects/ngx-banana-ui/src/lib/components/button/button.component.spec.ts (599 bytes)
CREATE projects/ngx-banana-ui/src/lib/components/button/button.component.ts (205 bytes)
CREATE projects/ngx-banana-ui/src/lib/components/button/button.component.css (0 bytes)
UPDATE projects/ngx-banana-ui/src/lib/ngx-banana-ui.module.ts (481 bytes)

Comme tout autre composant angulaire, nous pouvons ajouter des propriétés et des styles. Ouvrez le fichier bouton.component.css et ajoutez le style suivant :

.button {
  background-color:#0a0a23;
  color: #fff;
box-sizing: border-box;
display: inline-block;
border: 0;
border-radius: 10px;
padding: 15px;
min-height: 30px;
min-width: 120px;
opacity: 0.8;


cursor: pointer;
text-align: center;
font-size: 1rem;
line-height: 1.2;
transition: opacity 0.3s ease;
}

.button:hover {
  opacity: 1;
}

Puisque nous visons à créer un bouton d’étiquette personnalisable, ajoutez une propriété d’entrée au composant :

import {Component, Input} from '@angular/core';

@Component({
  selector: 'banana-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {
  @Input() label = 'Accept';
}

Enfin, ajoutez le balisage HTML :

<button class="button">{{label}}</button>

Parfait, nous avons déjà configuré le bouton. Ensuite, nous devons exporter le composant bouton dans le fichier public-api.ts.

Construire la bibliothèque

Nous allons d’abord créer un bundle dans le dossier dist pour construire notre bibliothèque Angular en exécutant la commande ng build ngx-banana-ui.

PS C:\Users\dany.paredes\Desktop\my-company\projects> ng build ngx-banana-ui
Building Angular Package

------------------------------------------------------------------------------
Building entry point 'ngx-banana-ui'
------------------------------------------------------------------------------
√ Compiling with Angular sources in Ivy partial compilation mode.
√ Generating FESM2020
√ Generating FESM2015
√ Copying assets
√ Writing package manifest
√ Built ngx-banana-ui

------------------------------------------------------------------------------
Built Angular Package
 - from: C:\Users\dany.paredes\Desktop\my-company\projects\ngx-banana-ui
 - to:   C:\Users\dany.paredes\Desktop\my-company\dist\ngx-banana-ui
------------------------------------------------------------------------------

Build at: 2023-04-23T15:36:34.716Z - Time: 2888ms

Cette commande créera un dossier dist ; dans ce dossier, notre bibliothèque compilée est stockée.

Publier en tant que package local

Comme nous avons déjà construit la bibliothèque, nous devons maintenant la créer en tant que package npm pour le gestionnaire de packages npm. Une fois cela fait, nous pouvons le publier dans le registre du gestionnaire de packages de nœuds locaux.

Nous irons donc chez nous dist/ngx-banana-ui/ dossier et exécutez la commande npm pack:

C:\Users\dany.paredes\Desktop\my-company\dist\ngx-banana-ui>npm pack
npm notice
npm notice package: ngx-banana-ui@1.2.3
npm notice === Tarball Contents ===
npm notice 1.0kB README.md
npm notice 2.4kB esm2020/lib/components/button/button.component.mjs
npm notice 1.7kB esm2020/lib/ngx-banana-ui.component.mjs
npm notice 2.8kB esm2020/lib/ngx-banana-ui.module.mjs
npm notice 1.5kB esm2020/lib/ngx-banana-ui.service.mjs
npm notice 512B  esm2020/ngx-banana-ui.mjs
npm notice 981B  esm2020/public-api.mjs
npm notice 4.2kB fesm2015/ngx-banana-ui.mjs
npm notice 4.0kB fesm2015/ngx-banana-ui.mjs.map
npm notice 4.2kB fesm2020/ngx-banana-ui.mjs
npm notice 4.0kB fesm2020/ngx-banana-ui.mjs.map
npm notice 123B  index.d.ts
npm notice 315B  lib/components/button/button.component.d.ts
npm notice 298B  lib/ngx-banana-ui.component.d.ts
npm notice 527B  lib/ngx-banana-ui.module.d.ts
npm notice 247B  lib/ngx-banana-ui.service.d.ts
npm notice 828B  package.json
npm notice 198B  public-api.d.ts
npm notice === Tarball Details ===
npm notice name:          ngx-banana-ui
npm notice version:       1.2.3
npm notice filename:      ngx-banana-ui-1.2.3.tgz
npm notice package size:  5.7 kB
npm notice unpacked size: 29.8 kB
npm notice shasum:        93acb4890e0523a754e17ca02bb917a0046324a7
npm notice integrity:     sha512-Le0XCo3OuXbEj[...]CmfAMUJyMO+xQ==
npm notice total files:   18
npm notice
ngx-banana-ui-1.2.3.tgz

Cela créera le package ngx-banana-ui-1.2.3.tgz et la publication locale sera terminée ! Désormais, nous pouvons utiliser cette bibliothèque dans n’importe quelle application Angular. Essayons rapidement d’installer la bibliothèque dans une autre application Angular.

Installation et enregistrement de la bibliothèque

C’est maintenant un moment amusant, consommez la bibliothèque, mais d’abord, créez une nouvelle application à l’aide de la CLI angulaire.

ng new bank

Ensuite, copiez le fichier ngx-banana-ui-1.2.3.tgz à la racine de l’application bancaire.

Ensuite, installez la bibliothèque en exécutant npm i ngx-banana-ui-1.2.3.tgz.

C:\Users\dany.paredes\Desktop\bank>npm i ngx-banana-ui-1.2.3.tgz

added 1 package, removed 1 package, and audited 910 packages in 2s

95 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Importez le NgxBananaUiModule dans l’AppModule dans le fichier app.module.ts.

Remplacez le HTML par défaut et utilisez les composants.

<div class="container">

  <div class="example">
    Button with a custom message<banana-button label="Amazing Button Library" />

    The default message button: <banana-button />
  </div>
</div>

Fait!! Notre application utilise notre bibliothèque avec des boutons incroyables !

Et après?

Cet exemple montre comment créer une bibliothèque avec un seul bouton. Cependant, une bibliothèque est plus qu’un simple bouton ; il doit offrir une gamme de composants. Au-delà de la simple fourniture de composants, plusieurs aspects cruciaux doivent être pris en compte lors de la construction d’une bibliothèque robuste et flexible pour notre organisation.

Pour créer votre propre bibliothèque, vous devez vous occuper d’autres points tels que :

• Distribution: Dans notre scénario, nous utilisons une version locale, mais nous souhaiterons peut-être autoriser notre entreprise à installer à l’aide d’un package npm à partir d’Internet.
• Thème: Permettre à nos consommateurs de modifier les couleurs de nos boutons, alertes ou composants. Nous devrions leur fournir une méthode pour modifier facilement ces couleurs.
• Organisation: Nous devons organiser la manière d’installer et d’importer les composants. Par exemple, nous devons utiliser des composants sans obliger nos consommateurs à installer de nombreux composants s’ils n’en ont besoin que d’un seul. Par conséquent, nous devrions diviser nos composants en packages plus petits à installer.

Ouais, c’est une belle aventure et ce n’est que le début. Vous pouvez gagner du temps en utilisant une bibliothèque prédéfinie comme Interface utilisateur Kendo pour angulaire.

Conclusion

Nous avons beaucoup appris sur la création d’un espace de travail, le développement d’une bibliothèque, l’exposition de l’API et son intégration dans une application. Cela a été une aventure vraiment enrichissante.

Dans le prochain article, nous découvrirons comment créer un thème et publier notre bibliothèque sur npm.