Comment développer, utiliser et publier une bibliothèque angulaire sur NPM… mais parfois, cela ne vaut pas la peine!

Angular est un framework JavaScript très populaire et puissant sur lequel on peut créer des applications Web pour servir des millions d'utilisateurs quotidiens. C’est un framework open source de Google et tout le monde peut collaborer. De même, des milliers de packages pour Angular sont disponibles en plug-and-play sur NPM. Ici, dans cet article, nous allons en créer un aussi.

Nous commencerons cet article en tant que tutoriel pour développer une bibliothèque de composants angulaires, la consommer dans un projet CLI angulaire, puis nous le publierons dans le NPM. Ce sera un guide étape par étape.

Ensuite, nous convertirons cette même bibliothèque angulaire en tuyau angulaire et nous détaillerons le moment opportun pour «utiliser les tuyaux par-dessus les modules» et comment les tuyaux peuvent réduire la charge sur l'application. Vous voulez cibler uniquement cette partie? Naviguez aux trois quarts dans l'article.

Les pipes sont beaucoup plus légères, comparées à des bibliothèques tierces, car le coût de JavaScript est beaucoup trop élevé du côté client lorsqu'il est manipulé de manière inefficace. Addy Osmani l'explique dans son dernier article.

Cet article cible deux domaines principaux: Composant angulaire et Tuyaux angulaires (et quand ils valent la peine d’être utilisés).

Bibliothèque de composants angulaires

Nous allons créer une petite bibliothèque de composants qui formatera les grands nombres en un format lisible par l'homme. Par exemple: les statistiques actuelles indiquent que Twitter compte «55138719 abonnés» et que notre bibliothèque le formate en tant que «55,1M abonnés». N’est-ce pas plus intuitif et convivial? Quelques exemples supplémentaires:

  • 37574 -> 37,5K
  • 1222130 -> 1,2 M
  • 12414770 -> 12,4M
  • 19121364128 -> 19.1B

Mise en place du projet

Nous allons utiliser la CLI angulaire comme base de notre développement car il est plus pratique que le clonage du repo angulaire de Github. De plus, nous bénéficierons de l'échafaudage et de la génération automatique de modules, de composants et de tuyaux. * Plus tard, nous utiliserons ce même projet pour le développement de nos composants et de nos tuyaux et nous l'utilisons également comme bac à sable pour tester notre bibliothèque.

Commençons par installer la CLI globalement, puis par lancer le projet.

npm install @ angular / cli -g
ng nouveau formateur de nombres ng

Maintenant que nous avons une structure de base du projet, nous pouvons naviguer dans le dossier de projet «formateur de numéro de numéro» et servir le projet.

ng serve // ​​Navigation vers `localhost: 4200`

Lancement des modules / composants pour la bibliothèque

Maintenant que notre application Angular la plus simple est opérationnelle, ajoutons nos modules et composants personnalisés pour formater les nombres dans un format lisible par l’homme.

ng génère des modules modules / ng-number-formter
ng génère des modules de composant / ng-number-formter

Cette génération automatique créera les fichiers obligatoires pour le développement de modules angulaires. Dans notre cas, ces modules indépendants sont censés être isolés les uns des autres afin que nous puissions les exporter en tant que bibliothèques angulaires autonomes. Il est également judicieux de séparer chaque module des autres, à l’instar du concept de MicroServices.

Les modules dans Angular peuvent être considérés comme des fichiers de configuration qui aideront à référencer nos composants pour qu’ils fassent partie d’un projet Angular. Ces modules sont basés sur des composants, ce qui rend notre application productive et la rend opérationnelle.

Module de formateur de nombres

Ce fichier de module est expressif et dans lequel nous pouvons voir les déclarations et les exportations de notre bibliothèque.

@NgModule ({
    importations: [
        CommonModule
    ],
    déclarations: [
        NgNumberFormatterComponent
    ],
    exportations: [
        NgNumberFormatterComponent
    ]
})

Modèle de formateur de nombres

Ouvrez maintenant le fichier ng-number-formatter.component.html dans le dossier app / modules / ng-number-formter et ajoutez la balise span HTML requise. Pour des raisons de style, nous pouvons manipuler le contenu du fichier ng-number-formatter.component.css, mais pour le moment, nous allons l'ignorer et laisser les choses rester aussi simples que possible.

 {{ngNumber}} 

Ici, la variable ngNumber est définie dans le composant associé ng-number-formatter.component.ts. Comme nous allons obtenir le numéro sous forme de chaîne à partir d’un composant parent (dans notre cas, ce serait app.component.ts - nous montrerons comment ces composants sont liés), nous allons formater ce nombre en format lisible par l’homme avec notre ng-number-formatter.component.ts. Ensuite, nous l'afficherons via le modèle HTML auquel nous venons d'ajouter une balise Span.

Composant de formateur de nombre

Ouvrez le fichier ng-number-formatter.component.ts dans le même dossier app / modules / ng-number-formter. Vous pouvez voir qu’il existe déjà du code de base pour le composant. Le modèle que nous venons de modifier est déjà lié dans notre composant.

@Composant({
    sélecteur: 'ng-number-formter',
    entrées: ['ngNumber'],
    templateUrl: './ng-number-formatter.component.html',
    styleUrls: ['./ng-number-formatter.component.css']
})

Ici, le sélecteur: 'ng-number-formter' est une balise personnalisée dont nous, consommateurs de notre bibliothèque, aurons besoin pour référencer notre composant. Ensuite, les entrées: ['ngNumber'] est dans les deux contextes.

Dans notre "composant de formatage de nombre ng" (appelé), il est traité comme une variable qui accepte la chaîne numérique entrante. En revanche, dans «app.component.ts» (l'appelant), il sera traité comme une propriété de notre sélecteur qui enverra la valeur.

Ensuite, templateUrl: '.ng-number-formatter.component.html' et styleUrls: '.ng-number-formatter.component.css' sont ceux qui lient le modèle.

Mettez à jour le fichier avec la logique requise pour la conversion de numéro. Notre modèle n’a pas besoin d’être dans un fichier séparé. Nous pouvons donc le supprimer et l'intégrer directement à notre composant en tant que modèle: ' {{ngNumber}} '. Le Gist suivant montre le contenu complet de notre composant. Comparez les modifications que vous avez apportées et nous passerons ensuite aux étapes suivantes.

Consommation de la bibliothèque de composants angulaires

Pour utiliser une bibliothèque angulaire, vous devez d’abord être référencé dans le module, puis utiliser son formateur de sélecteur de numéro de sélecteur (comme indiqué dans l’onglet de sélecteur de notre composant) dans le modèle.

Il n’ya qu’une différence entre utiliser une bibliothèque tierce dans un projet et utiliser un bac à sable.

1. Notre bibliothèque n'étant pas encore publiée ni répertoriée dans l'annuaire NPM, nous avons besoin de son chemin complet de référence dans le module.

importer {NgNumberFormatterModule} de './modules/ng-number-formatter/ng-number-formatter.module';

2. Et lorsque notre bibliothèque sera publiée et répertoriée dans le répertoire NPM, ce sera avec un lien de référence beaucoup plus simple. Comme ça:

importer {NgNumberFormatterModule} à partir de 'formateur de nombres ng';

Et voici notre étiquette personnalisée pour utiliser notre toute nouvelle bibliothèque:

 
// nombre résultant dans le format beaucoup plus pratique "1.2M"

Emballage et publication dans le MNP

Maintenant que notre module indépendant a été développé et testé dans le cadre du projet Sandbox, nous sommes prêts à partir. Tout d’abord, l’avantage, c’est que ce module est tellement simple et minimal qu’il n’a pas d’autres dépendances. Deuxièmement, c’est bien que notre module soit totalement isolé et qu’il soit facilement branché sur notre composant dans le bac à sable, ce qui le rend prêt à être emballé et publié séparément.

La prochaine étape consiste à l’ouvrir au monde afin que d’autres puissent le télécharger et l’utiliser pour formater des nombres dans leurs applications angulaires.

Pour commencer à empaqueter et à publier notre module de formatage de nombre, nous avons besoin d'un outil de conditionnement qui transformera ce module en une bibliothèque identifiable comme un package NPM. Pour cela, nous avons choisi «ng-packagr», qui transforme vos bibliothèques en format de paquet angulaire. C'est un paquetage NPM construit comme un wrapper sur «Roll-Up», un bundle de modules qui compile le code dans des bibliothèques et des applications.

Continuons maintenant notre processus de développement en installant notre conditionneur dans le contexte de notre projet Sandbox. Nous allons l'enregistrer en tant que dépendance de développement, car nous avons seulement besoin de compiler notre module en tant que bibliothèque identifiable à NPMjs.com.

npm installer ng-packagr --save-dev

L'étape suivante consiste à ajouter deux fichiers manuellement dans notre répertoire de projet, à savoir ng-package.json et public_api.ts.

ng-package.json doit configurer ng-packgr et indiquer au fichier public_api.ts de se préparer pour l'emballage. Voici le contenu:

{
  "$ schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
  }
}

public_api.ts est le fichier qui sera composé d'une seule ligne exportant le module angulaire récemment développé.

exportation * de './src/app/modules/ng-number-formatter/ng-number-formatter.module'

Une fois les deux fichiers créés, nous enregistrerons la commande ng-packagr dans le fichier package.json de notre projet d'application et nous activerons également la propriété "private": false pour le répertoire NPM. Continuez et mettez à jour vos fichiers afin que nous puissions continuer pour la publication.

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "peluche": "ng peluche",
  "e2e": "ng e2e",
  "packagr": "ng-packagr -p ng-package.json"
},
"privé": faux

Maintenant que ng-packagr est enregistré en tant que commande, nous pouvons continuer à compresser notre module en tant que paquet reconnaissable pour le répertoire NPM. Cela compile notre module basé sur TypeScript en JavaScript exécutable dans le dossier dist. Ensuite, nous naviguons vers le dossier dist et exécutons le packaging final en tant que bibliothèque de composants autonome.

npm run packagr
cd dist
NPM Pack

C’est tout sur votre ordinateur local - le moment est venu de le rendre public. Pour cela, nous avons besoin d’un compte sur https://www.npmjs.com/. Continuez et inscrivez-vous, puis nous exécuterons les deux dernières commandes pour que notre bibliothèque soit accessible au public.

Connexion à NPM via un outil de ligne de commande / terminal:

login npm

Publier sur NPM:

npm publier

Voillllaaaaaaaaaaaaaaaaaaaaaaaaaa !!!

Votre colis est en place et disponible comme celui-ci. :)

Comment les autres utiliseront votre bibliothèque dans leur projet

Cela se produira de la même manière que dans notre fichier app.component.ts de notre projet Sandbox, mais en réalité, il est un peu plus simple. Nous avons seulement besoin du module le plus simple référençant directement avec le nom. Les trois étapes suivantes doivent être exécutées l'une après l'autre: Installation, Importation du module, à l'aide du sélecteur.

// Installation
npm install ng-number-formter --save
// Importer le module
importer {BrowserModule} de '@ angular / platform-browser';
importer {NgModule} de '@ angular / core';
importer {AppComponent} depuis './app.component';
importer {NgNumberFormatterModule} à partir de 'formateur de nombres ng';
@NgModule ({
    déclarations: [
        AppComponent
    ],
    importations: [
        BrowserModule,
        NgNumberFormatterModule
    ],
    fournisseurs: [],
    bootstrap: [AppComponent]
})
classe d'exportation AppModule {}
// sélecteur
 

Pour plus d'informations, recherchez le package «ng-number-formter» dans le répertoire NPM!

Et le code avec dans le "Projet Sandbox" sur Github!

Pipes angulaires et quand les utiliser comme alternative

Maintenant que tout est fait, passons à la deuxième partie de l’article. Nous examinerons d’abord le besoin de canaux dans les applications angulaires, puis nous convertirons la bibliothèque de formateur de nombres NG en un canal de formateur de nombres.

Le | symbole près de la touche Entrée du clavier

Qu'est-ce qu'une pipe? Pipe est une représentation simple “| ”Dans le modèle de tout module de l’application angulaire. Les pipes sont généralement dédiées à la réalisation de tâches simples: la plus courante d'entre elles est le formatage des horodatages ou de la version Unix Date en format lisible par l'homme au format Jour / Mois / Année. Tels que les suivants:

1533679976 à 08/07/2018
1533679976 dans mar., 07 août 2018

La façon dont cela est fait est à l'intérieur de la balise HTML. Par exemple:

 {{1533679976 | date}} 

Le séparateur "| ”Obligera Angular à interpréter le code HTML interne de la balise Span avant de la restituer à l'écran.

Les tubes sont préférés aux modules dans certains scénarios en raison du coût de JavaScript. Ce coût concerne la taille de la mémoire, le temps de téléchargement, la latence, le temps de rendu des éléments et le temps écoulé avant l'interactivité de la page. Ce ne sont là que quelques éléments à prendre en compte lorsque vous avez une application / un site Web intensif en JavaScript.

Les bibliothèques tierces peuvent être lourdes, chargées de dizaines d'autres dépendances (telles que des bibliothèques basées sur d'autres bibliothèques) qui peuvent désinstaller votre application. Cela peut également affecter votre classement dans les résultats de recherche Google, car le temps nécessaire au chargement de la page reste l’un des principaux indicateurs permettant de calculer votre index de recherche sur Google.

Dans le contexte de la bibliothèque Ng-Number-Formatter, la bibliothèque est déjà compressée et, dans sa forme minimale, disponible sans aucune dépendance externe. Par conséquent, si vous avez un tuyau alternatif pour cela, il sera également presque de la même taille sur le disque. Vous pouvez accéder à votre dossier de projet dans lequel vous avez utilisé npm install ng-number-formateur --save et vérifier que la taille totale de la bibliothèque dans le dossier node_modules est d’environ 70 Ko, y compris l’environnement de test du bac à sable.

Avant de commencer le didacticiel relatif au tuyau de formateur de nombres angulaires, j'aimerais noter que vous devez bien connaître vos dépendances avant de choisir un add-on ou un plug-in tiers. Ensuite, lors de leur intégration dans votre projet, vous pouvez planifier en conséquence.

Un package NPM avec de nombreux packages dépendants est un fardeau. Image

Pipe formateur de nombres angulaires

À partir de maintenant, nous connaissons tous le déroulement d'une application angulaire. Ainsi, cette dernière partie n’est qu’un survol du sujet en tant que feuille de triche avec les commandes de terminal et le code minimum requis pour le module de formage de nombres angulaires!

Nous allons commencer avec la commande échafaudage pour la génération de tuyaux, puis nous allons enregistrer et importer notre tuyau nouvellement généré dans le composant parent. Enfin, nous allons l’utiliser dans notre modèle.
* à partir d'ici… la mise en œuvre est assez expressive. À votre santé!

// tuyau générateur
ng générer des tuyaux / formateur de nombres angulaires
// Importer dans le module
importer {BrowserModule} de '@ angular / platform-browser';
importer {NgModule} de '@ angular / core';
importer {AppComponent} depuis './app.component';
importer {AngularNumberFormatterPipe} de './pipes/angular-number-formatter.pipe';
@NgModule ({
    déclarations: [
        AppComponent,
        AngularNumberFormatterPipe
    ],
    importations: [
        NavigateurModule
    ],
    fournisseurs: [],
    bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

et enfin en utilisant le tuyau de formateur de nombre dans le modèle:

 {{1533679976 | angularNumberFormatter}} 

C’est tout pour cet article! J'espère que cela vous aidera et vous permettra de publier des dizaines de bibliothèques et des tonnes de pipes pour la communauté.

Voulez-vous connaître la combinaison de l'Internet des objets et de l'industrie 4.0? Voici un extrait de ma thèse de maîtrise https://medium.com/coinmonks/micro-services-pipeline-for-an-industrial-internet-of-things-a8cdd67f1eb9.
Il s’agit d’une implémentation de Micro-Services Pipeline basée sur Message Queuing d’Apache Kafka, Streaming Engine d’Apache Spark et Data Lake de MongoDB. Donnez-lui une lecture!
Vous pouvez trouver / suivez-moi @ok_ansari. À la vôtre, Omer Kalim Ansari