JavaScript Module, ovvero come strutturare il codice per il futuro

Quando si parla di JavaScript generalmente ci troviamo di fronte due categorie di persone: da una parte troviamo chi è estasiato dal poter imparare qualcosa di nuovo da questo linguaggio mentre dall’altra troviamo chi ormai si è stancato di tutte le librerie e tecniche che sono uscite in questi anni. Qualsiasi sia la tua fazione, il mio consiglio è continuare a leggere e a breve capirai il perché!

Come abbiamo anche scoperto qualche articolo fa, il linguaggio Javascript con la sintassi EcmaScript 2015 si è evoluto moltissimo in quest’ultimo periodo e ha integrato al suo interno molte delle caratteristiche che hanno reso famose librerie come Undescrore.js e Lodash.

Proprio come ti dicevo nell’articolo che ti ho collegato precedentemente, Underscore.js è stata la prima libreria che ha incluso delle funzionalità innovative nella scrittura di codice JavaScript, novità che sono state successivamente implementate nella nuova sintassi. Giusto per citarne alcune, anche se non identiche, metodi come each, find, map hanno trovato vita all’interno di ES2015 con nomi come forEach, find e map.

Ripeto, per quanto la loro sintassi e comportamento possano differenziare, avere queste funzioni interne a JavaScript è sicuramente un gradevole aiuto.

Ma la nuova sintassi di JavaScript, a partire da ES2015, non ha ampliato soltanto il numero delle proprie funzioni e metodi ma ha permesso anche di sviluppare un codice molto più strutturato che ci permetterà non soltanto di organizzare il nostro lavoro ma anche di incrementare le prestazioni dei nostri siti web e delle SPA.

L’uso delle Singole Page Application, in particolar modo, ha richiesto l’implementazione di diverse soluzioni per la realizzazione di una specifica funzionalità e anche se con JavaScript è possibile condividere delle librerie e farle lavorare tra loro, grazie ai JavaScript Module siamo in grado di richiamare soltanto una piccola porzione di codice senza dover appesantire la nostra applicazione di codice che non viene eseguito.

Che cosa è un JavaScript Module?!?

Precedentemente abbiamo parlato di librerie come Underscore.js e Lodash, ma volendo anche jQuery, che grazie al loro utilizzo possiamo estendere le capacità del nostro codice andando a fare affidamento a quelle appena incluse.

Il problema di questo approccio è che per ogni singola caratteristica con la quale lavoriamo ce ne sono altre centinaia inutilizzate che vanno ad appesantire il nostro codice. Invece utilizzando i moduli, quelli scritti bene in particolar modo, possiamo avere blocchi di codice indipendenti che possono essere aggiunti, rimossi o mescolati come meglio crediamo.

[clickToTweet tweet=”Usare moduli #JavaScript è un po’ come lavorare con i parziali di #Sass, incredibilmente utile!” quote=”Usare moduli #JavaScript è un po’ come lavorare con i parziali di #Sass, incredibilmente utile!”]

Con un occhio di riguardo alle prestazioni questa caratteristica aiuta incredibilmente anche noi sviluppatori perché siamo molto più coscenti delle risorse che stiamo usando e di quelle che dovremo utilizzare. Però ho paura che tu abbia qualche dubbio sull’utilità dei moduli, ecco perché prima di proseguire voglio rispondere alla seguente domanda.

Perché usare moduli JavaScript?

Personalmente penso che rispondere a questa domanda sia un po’ come rispondere a qualcuno che ti chiede “Perché dovrei tenere aggiornate le mie conoscenze?”

Non voglio dire che praticamente sono la stessa cosa ma i moduli JavaScript sono una funzionalità incredibilmente utile che possiamo utilizzare all’interno del nostro codice senza (in futuro) la necessità di utilizzare nessuna libreria.

Però capisco che avere una risposta che praticamente recita: devi imparare i moduli perché fanno parte della nuova sintassi JavaScript. Non è una di quelle motivazioni che ci spingono veramente all’azione. Ecco perché ho deciso di riassumere i tre motivi principali per i quali ritengo che tu debba imparare a usare i moduli JavaScript:

• Mantenibilità – già dalla sua definizione ti ho detto che un modulo JavaScript è una porzione di codice autonoma che non richiede assolutamente niente da parte di altre porzioni di codice presente nella tua applicazione. Quindi modificare un singolo modulo non aggiunge alcun tipo di complessità nel nostro codice e non ci richiede di andare a modificare tutte le istanze presenti all’interno di distinti file.
• Namespace – da che mondo e mondo dovresti sapere che condividere delle variabili all’interno di tutta l’applicazione è un errore da principianti e che può portare a risultati inaspettati. Grazie ai moduli possiamo creare un ambiente privato all’interno del quale utilizzare tutte le variabili che necessitiamo senza preoccuparci di future incompatibilità.
• Riusabilità – avere la possibilità di riutilizzare il nostro codice in modo semplice e intuitivo ci permette di salvare moltissimo tempo che altrimenti andrebbe sprecato per le modifiche da applicare. Diciamo per esempio che stai creando due temi WordPress e nel secondo inserisci una porzione di codice (magari per una finestra modale) che è presente nel primo, adesso se cambia qualcosa dovrai aggiornare entrambi i file.

Ci sono molti altri benefici che lo sviluppo di codice JavaScript modulare ha portato, come per esempio la semplicità che si ha nel collaborare su progetti complessi. Questo concetto viene sfruttato molto bene anche dalle recenti librerie JavaScript, come per esempio Vue.js, ma quello che mi interessa fare nel resto di questo articolo è spiegarti come fare per creare, includere, modificare e lavorare con i moduli di questo linguaggio.

Fin qua tutto sembra interessante e sono sicuro che anche tu non vedi l’ora di utilizzare queste nuove caratteristiche nel lavoro quotidiano, ma da come ti puoi immaginare dall’andamento di questa frase al giorno d’oggi i nostri browser non sono ancora in grado di gestire al meglio queste strutture e dovremo aspettare ancora un po’ di tempo per essere sicuri che i moduli scritti con la sintassi ES2015 siano compatibili.

Allo stesso tempo non ti devi preoccupare di niente perché anche se in questo articolo andrò avanti descrivendo come sia possibile creare e utilizzare i moduli descrivendo la sintassi ES2015 negli ultimi anni sono nati strumenti, detti transpiler o transcompiler, che ci permettono di tradurre automaticamente la sintassi moderna in una comprensibile anche dai browser più datati.

Torneremo successivamente con un futuro articolo dove ti spiegherò nel dettaglio come organizzare il tuo lavoro per far svolgere automaticamente queste operazioni.

Come si crea un modulo JavaScript, un esempio pratico

Eccoci giunti alla parte pratica di questo articolo, fino a ora abbiamo capito l’utilità di questi elementi e non vediamo l’ora di utilizzarli nel nostro codice. C’è da dire che la creazione di un modulo è diventata incredibilmente semplice con la nuova sintassi perché fino a non troppo tempo fa dovevamo fare affidamento alle IIFE (immediately-invoked function expression) per fare in modo di creare uno scopo specifico per il nostro codice, in questo modo non avremmo avuto problemi con il codice JavaScript che era stato già caricato ed eseguito dai nostri browser.

Ogni modulo che creiamo deve essere esportato e reso disponibile agli altri script, per fare questo si usa la nuova parola chiave export grazie alla quale possiamo distinguere i nostri moduli in due tipi: con il Default Export o con il Named Export.

Default Export

Facendo riferimento alla definizione che abbiamo dato precedentemente di un modulo, ovvero che grazie a queste strutture possiamo definire dei blocchi di codice in grado di svolgere una singola funzionalità in modo del tutto autonomo, puoi ben capire che il tipo di esportazione denominato Default Export è il più comune di tutti.

Per comprenderne la sintassi non ci resta altro che fare un piccolo esempio:

export default function(){     
	console.log('Ciao Mondo!!!'); 
}

Diciamo che per la lettura di questo articolo hai preparato una nuova cartella chiamata modulejs/ all’interno della quale hai inserito il file index.html e una cartella js/. Dentro quest’ultima inseriremo tutti i file JavaScript che verranno utilizzati nel progetto. Seguendo questa distinzione non devi far altro che creare un file test.js e inserire il codice che ti ho appena presentato.

Congratulazioni, hai creato il tuo primo modulo!

Soltanto con queste tre righe di codice sei stato in grado di creare il tuo primo modulo. Se hai dubbi sulla sua utilità ti do completamente ragione, in fin dei conti questo modulo non fa altro che mostrare un messaggio di log all’interno della nostra console, ma resta con me ancora per qualche secondo e ti mostrerò quanto sia comodo poter lavorare con queste nuove strutture.

Esportato il modulo, adesso abbiamo bisogno di un file che sia in grado di importarlo.

Come ti dicevo prima, al momento il caricamento effettivo può essere raggiunto soltanto da transpiler perché al momento non esiste ancora alcun browser in grado di gestirlo (neanche le specifiche JavaScript hanno ancora trovato uno standard per questa operazione).

Senza farci fermare da questi aspetti tecnici, scopriamo intanto come sia possibile caricare un modulo JavaScript all’interno di un altro file secondo la sintassi ES2015. Per fare questo dobbiamo per prima cosa creare un nuovo file js/main.js e inserire al suo interno quanto segue:

import testMod from './test';

Ci sono diverse cose interessanti che avvengono all’interno di questa singola riga di codice:

• per prima cosa possiamo osservare l’utilizzo della nuova parola chiave import che ci permette, appunto, di importare il codice presente in un modulo
• possiamo rinominare il nostro modulo, nell’esempio gli abbiamo dato il nome di testMod
• all’interno dei singoli apici definiamo il percorso in cui è possibile trovare il modulo e possiamo omettere l’estensione .js, anche se la sua presenza non comporterà alcun problema

Adesso che il modulo è stato caricato non dobbiamo far altro che utilizzare il codice presente al suo interno, per eseguirlo non dobbiamo far altro che utilizzarlo con il nome che gli abbiamo appena assegnato:

import testMod from './test'; 
testMod();

Ecco fatto! Se il tuo browser fosse in grado di gestire in piena autonomia i moduli a questo punto troveresti all’interno della tua console la scritta: Ciao Mondo!!!

Named Export

Con i precedenti esempi abbiamo scoperto come sia possibile utilizzare la funzionalità export all’interno di JavaScript ma anche se è molto più comodo avere ogni modulo specifico per un preciso compito, almeno a livello organizzativo, allo stesso tempo non siamo affatto obbligati a farlo.

Questo perché con gli export possiamo passare qualsiasi tipo di dato: sia questo un Oggetto, una Funzione, una Stringa, un valore Booleano ecc… Praticamente il limite che avevamo con il precedente esempio era il fatto che non eravamo in grado di esportare più valori all’interno di un singolo modulo, ma con le Named Export la musica cambia!

Se vuoi seguire passo passo gli esempi che ti sto per fare ti consiglio di creare un file test2.js all’interno del quale andremo a inserire le Named Export per scoprire da vicino il loro funzionamento.

export const PI = 3.14; 

export function area(r){     
	return r * r * PI; 
} 

export function circ(r){     
	return 2 * r * PI; 
}

I calcoli matematici presenti in questo modulo sono incredibilmente semplici, seguendo la nuova sintassi ES2015 abbiamo creato una costante e successivamente la utilizziamo all’interno dei calcoli che vengono sfruttati per conoscere la circonferenza e l’area di un cerchio. Come puoi notare da solo in questo contesto la parola chiave default è stata omessa perché non c’è più alcun bisogno di utilizzarla dato che possiamo fare affidamento ai nomi della variabile e delle funzioni.

Torniamo adesso sul nostro main.js e scopriamo come sia possibile importare questo codice nella nostra applicazione:

import { area, circ } from './test2';

Grazie alle parentesi graffe siamo stati in grado di importare nel nostro file le funzionalità che abbiamo descritto all’interno del modulo, cosa interessante da notare è che non abbiamo importato la costante PI che avevamo creato perché essendo utilizzata soltanto all’interno del modulo non abbiamo bisogno di importarla anche nel nostro script.

Con un browser in grado di caricare in autonomia i moduli JavaScript avremmo potuto scrivere quanto segue e lasciare che sia l’utente a fornirci i dati per eseguire i calcoli di area e circonferenza:

import { area, circ } from './test2'; 

let raggio = prompt("Quanto è grande il raggio?"); 

//Calcolo l'area 
console.log( area(raggio) ); 

//Calcolo la circonferenza 
console.log( circ(raggio) );

Se però hai provato a eseguire questo codice senza alcun transpiler aprendo la console non avrai altro messaggio se non questo: SyntaxError: import declarations may only appear at top level of a module.

Perché non possiamo caricare i nostri moduli?

Prima di concludere questo articolo vorrei affrontare velocemente questo problema perché posso capire che tu ti senta un po’ “fregato” da questa lettura, hai investito il tuo tempo per apprendere qualcosa che non puoi ancora utilizzare? La risposta onesta è  sì, al momento non possiamo utilizzare nativamente questa sintassi però ci sono molte soluzioni che ci permettono di utilizzarla e lasciare che sia il computer a trasformare successivamente la nostra sintassi.

Per rendere le cose ancora più complicate, dato che negli ultimi anni il linguaggio JavaScript viene utilizzato sia client-side sia che server-side, bisogna stare attenti anche a quale tipo di ecosistema ci stiamo affacciando.

Nel primo caso, quando sviluppiamo un’applicazione client-side che viene eseguita nel browser la tecnologia di punta prende il nome di AMD (Asynchronous Module Definition) e viene utilizzata da RequireJS, una libreria che permette di scrivere codice modulare senza l’uso di transpiler. Se invece desideri scrivere codice JavaScript server-side, facendo affidamento quindi a Node.js per esempio, puoi usare qualcosa di ancora molto più potente che prende il nome di CommonJS e che permette di fare molto di più oltre che caricare i moduli che vuoi utilizzare.

Insomma, comprendo che la cosa può essere alquanto confusa se letta da questo punto di vista e in fin dei conti negli ultimi anni intorno al linguaggio JavaScript c’è stata veramente un sacco di confusione però al tempo stesso voglio assicurarti che se continuerai a leggere i nostri articoli andremo man mano a definire meglio questo argomento.

Infatti il nostro scopo è quello di aiutarti a restare al passo con i trend di questo settore e di approfondire soltanto le tecniche che sono state abbracciate dal maggior numero di persone in modo tale che anche per te sia semplice poter entrare nel mercato del lavoro e mantenere la tua professionalità il più a lungo possibile.

Conclusioni

Questo articolo introduttivo sui JavaScript Module è giunto al termine e spero veramente che tu abbia beneficiato delle conoscenze che hai incontrato in questo testo.

È vero, probabilmente non è ancora un codice che possiamo inserire direttamente nei nostri file e vederne il risultato nel browser però manca veramente poco e grazie ai transpiler, Babel è il più famoso di tutti, possiamo scrivere tranquillamente questo codice e lasciare che l’applicazione traduca per noi la sintassi ES2015 con la più compatibile ES5.

Se sei interessato ad approfondire quest’ultimo argomento e pensi che possa essere utile avere un nuovo articolo (e magari un video) dove ti descrivo per filo e per segno come sia possibile utilizzare Babel per scrivere la nuova sintassi ES2015 ti invito ad aggiungere il tuo commento qua in basso e farmi conoscere il tuo interesse.