Mini guida su ES6 – Module

Cosa è esattamente un modulo?

In Javascript, il termine “modules” si rifersice a piccole unità indipendenti, a codice riusabile. Sono alla base di tanti Design Patterns di Javascript e sono assolutamente necessari quando si costruisce qualsiasi applicazione sostanziale basata su JavaScript.

In parole povere, i moduli ti aiutano a scrivere codice in un modulo ed esporre solo alcune funzionalità (che siano variabili, funzioni, oggetti) a cui si dovrebbe accedere da altre parti del tuo codice.

JavaScript ha il concetto di modulo già da un bel pò di tempo. Tuttavia, erano integrati tramite librerie esterne e non incorporati nel linguaggio stesso. Il supporto integrato (built-in) dei moduli in Javascript arriva grazie ad ES2015 (ES6).

Per la cronaca, prima della release ES2015, c’erano almeno 3 moduli principali in competizione con gli standard:

• Asynchronous Module Definition (AMD)
• RequireJS Modules
• CommonJS Modules

Ora che abbiamo definito i moduli in Javascript (e come venivano gestiti), l’altra domanda a cui vogliamo rispondere è la seguente: cosa sono i moduli in ES6?

Con i moduli ES6, è possibile concatenare tutti gli script in uno script principale contrassegnandone alcuni come esportazioni, e di conseguenza altri moduli possono importarli.

Quindi per rendere disponibile al mondo esterno un oggetto, una funziona, una classe o una variabile ci basta esportarla e importare dove ne abbiamo bisogno.

Angular 2+ fa un uso “pesante” dei moduli ES6, quindi la sintassi sarà molto familiare a coloro che già lavorano in Angular.

Exporting

È possibile esportare membri uno per uno. Ciò che non viene esportato non sarà disponibile direttamente al di fuori del modulo:

export const myNumbers = [1, 2, 3, 4];
const animals = ['Dog', 'Cat']; // Not available directly outside the module

export function myLogger() {
  console.log(myNumbers, animals);
}

export class Tech {
   constructor() {
     // ...
   }
}

Oppure puoi esportare i membri desiderati in una singola istruzione alla fine del modulo:

export { myNumbers, myLogger, Tech };

Exporting con alias

È possibile anche assegnare un alias ai membri esportati con la parola chiave as:

export { myNumbers, myLogger as Logger, Tech as MyAwesomeModule }

Default export

È possibile definire un’esportazione predefinita con la parola chiave predefinita:

export const myNumbers = [1, 2, 3, 4];
const animals = ['Dog', 'Cat'];

export default function myLogger() {
  console.log(myNumbers, pets);
}

export class Tech {
  constructor() {
    // ...
  }
}

Importing

Anche l’importazione è davvero molto semplice, con la parola chiave import, i membri da importare tra parentesi graffe e quindi la posizione del modulo rispetto al file corrente:

import { myLogger, Tech } from 'app.js';

app.js è l’ipotetico file in cui abbiamo definito i moduli.

Importing con alias

È possibile assegnare un alias al momento dell’importazione:

import Tech as MyAwesomeModule from 'app.js';

Importing “Tutto”

È possibile importare tutto ciò che è importato da un modulo come in questo esempio:

import * as Utils from 'app.js';

Questo ci permette di accedere ai membri del modulo attraverso la notazione dot:

Utils.myLogger();

Importing di un modulo con un “default member”

È possibile importare il ​​membro predefinito dandogli un nome a tua scelta. Nell’esempio seguente Logger è il nome assegnato al membro predefinito importato:

import Logger from 'app.js';

Ed ecco come importare i membri non predefiniti in concomitanza di quello predefinito:

import Logger, { Tech, myNumbers } from 'app.js';

Alcuni vantaggi dell’utilizzo dei moduli:

• Il codice può essere suddiviso in file più piccoli di funzionalità indipendenti.
• Più script possono essere concatenati aumentando così le prestazioni.
• Il debug diventa più facile.
• Qualsiasi codice che fa riferimento a un modulo comprende che si tratta di una dipendenza. Se il file del modulo viene modificato o spostato, il problema è immediatamente evidente.
• I moduli (di solito) aiutano a sradicare i conflitti di denominazione. Ad esempio la funzione sumAll() nel modulo1 non può interferire con la funzione sumAll() nel modulo2. Gli alias sono molto utili in questo caso infatti diventa module1.sumAll() e module2.sumAll().
• I moduli ES6 vengono sempre eseguiti in modalità strict, quindi non è necessario utilizzare ‘use strict’.
• I moduli ES6 ti aiutano a organizzare meglio il tuo codice

Considerazioni

I moduli ES6 sono una delle maggiori funzionalità introdotte nei browser moderni. I moderni framework JavaScript come Angular, Vue JS e React JS utilizzano questa funzionalità.

Dovresti anche sapere che i moduli ES6 non sono supportati in tutti i browser. Per le applicazioni di produzione, transpilers come Webpack e Babel vengono utilizzati per convertire il nostro codice da ES6 a ES5 per garantire la compatibilità tra browser.

Spero questo articolo sia stato utile. Se si, condividilo con i tuoi amici, colleghi o con chi ritieni che possa essere interessato.

PS. Se sei interessato a conoscere in anticipo gli argomenti per i prossimi appuntamenti, ti consiglio di visitare il primo articolo