La pratica della creazione di librerie create ad-hoc per le nostre applicazioni è spesso utilizzata nei processi di sviluppo back-end, per suddividere i vari contesti applicativi, es. domain, repository, contract, DTO.

Negli applicativi che si occupano del front-end, al concetto di libreria viene spesso associato il sinonimo di pacchetto che offre funzionalità. Esempi classici sono jQuery, lodash, moment.js, underscore che forniscono out-of-the-box metodi per manipolare dati o il DOM con prestazioni ottimali, senza dover 'reinventare la ruota'.

Esiste anche un altro gruppo di librerie, più comuni nel mondo dei framework UI (Angular, React, Vue.js), le quali possono contenere sia funzionalità che componenti standard, come modali, card, tabelle dinamiche, ecc.

In questo articolo, invece, costruiremo un tipo di libreria che potrà essere sia una libreria di metodi e funzionalità, ma che potremo usare come aggregatrice di servizi e componenti utilizzati da una nostra applicazione e poterli nel caso riutilizzare all'interno di un'altra applicazione.

Gli esempi si struttureranno sopra un'applicazione e una libreria Angular utilizzando Angular-CLI, ma il concetto può essere rapportato ad un qualsiasi altro framework front-end.

Creare una libreria

Prima di poter procedere con la creazione della libreria creiamo, nel caso voglia sviluppare una nuova applicazione, un nuovo workspace utilizzando Angular-CLI.

Utilizziamo il comando ng new my-app per creare il nuovo workspace, all'interno del quale possiamo trovare la nostra applicazione nella cartella src.

Spostandoci all'interno del workspace ed eseguendo il comando ng generate library my-app-lib --prefix=mal si creerà una nuova cartella projects all'interno della quale troveremo la libreria appena creata my-app-lib. Importante notare è l'argomento --prefix=mal che consentirà di impostare il prefisso "mal" come default selector per i componenti es: .

Struttura della libreria

Navigando nella cartella della libreria possiamo notare la presenza di alcuni file comuni a ogni progetto Angular come i due file contenenti i settings per il tsconfig.*.json e il file tslint.json nel quale si può osservare l'imposizione del prefisso mal come prefisso di componenti e direttive.

Altro file conosciuto è package.json, con una singola variante: essendo questa una libreria, i pacchetti necessari internamente verranno forniti dall'applicazione che la implementerà, questo per garantire la creazione di un bundle il più leggero possibile. Per questo motivo ogni libreria necessaria verrà inserità sotto le peerDependencies.

Verrano inoltre creati i setting che consentiranno di configurare il bundling della libreria eseguita da ng-packagr.

Il file src/public_api.ts sarà il punto di ingresso della libreria, all'interno di esso esporteremo tutti i componenti che vorremo rendere pubblici, questi componenti sono dichiarati all'interno della cartella src/lib.

Per compilare la libreria possiamo utilizzare il comando ng build my-app-lib, ma come è possibile puntare alla build tramite un nome 'alias' senza aver la necessità di inserire il path relativo? La spiegazione è presto detta: grazie al comando "ng generate .." all'interno del file angular.json tra i progetti è stata aggiunta la nostra libreria con tutte le specifiche necessarie.

Utilizzare la libreria

Per utilizzare la libreria possiamo andare nella nostra app, e dove necessario, ad esempio nel file app.module.ts, importare il modulo esportato in precedenza e inserirlo nell'array degli import.

Ma questa scrittura dovrebbe far sorgere un dubbio: per utilizzare una libreria esterna i passaggi obbligati sono: lanciare il comando npm intall , mentre in questo caso non utilizziamo nessun processo di installazione. Il motivo, come per il processo di build, è da attribuire alle funzionalità della CLI, la quale, al momento della creazione della libreria, all'interno del file tsconfig.json, inserisce degli alias che puntano alla cartella compilata della libreria.

Questa configurazione fa si che, se in un futuro si voglia pubblicare la libreria sul registro npm, basterà rimuovere la configurazione precedente e procedere con il comando npm install , senza dover cambiare alcunchè nel codice perchè i riferimenti continueranno a essere validi.

Creare nuovi componenti ed esportarli automaticamente grazie al modulo

Per poter creare nuovi componenti possiamo utilizzare gli schematics inserendo tra gli argomenti il puntatore alla nostra libreria con il comando ng generate component custom-component --project=my-app-lib.

Questo componente verrà automaticamente aggiunto al modulo all'interno della libreria e sarà da subito utilizzabile tramite selector all'interno delle pagine HTML. Se si vorrà invece avere la possibilità di creare delle istanze della classe component, è obbligatorio inserire il componente tra gli export all'interno del file src/public_api.ts.

Da ricordare che, ogni volta che modifichiamo la libreria, per avere riscontri sull'applicazione dovremo rilanciare la build, oppure aggiungere l'argomento --watch al processo di build. In questo modo, con il comando ng build my-app-lib --watch il task resterà in ascolto sui file utilizzati della libreria e aggiornerà il pacchetto nella directory in automatico.

Conclusioni

Grazie ald Angular-CLI molti settaggi interni del progetto sono stati standardizzati e le procedure per la creazione di una libreria sono state rese molto più 'dev-friendly'. Grazie alla creazione di una libreria in cui inserire la nostra logica di business, come servizi, eventuali endpoint, store/action/reducer o componenti comuni, è possibile consentirne il riutilizzo in una applicazione parallela che vada a sopperire a una possibile mancanza all'interno dell'applicazione principale: rimanendo nel contesto Angular è possibile creare un'applicazione per l'utilizzo tramite browser e accostare un'applicazione Ionic che verrà distribuita su piattaforme mobile, limitando il più possibile la duplicazione del codice e delle logiche di businness. Altro esempio può essere la creazione di una versione 'lite' della piattaforma, che deve fornire le stesse funzionalità ma con un layout più minimale.