È in occasione dell'ultimo Incontro JS-Star, organizzato da JS-Republic, che abbiamo potuto esaminare i principali pacchetti di JavaScript del momento e le loro funzionalità. È ora di fare il punto su questi piccoli strumenti che rendono la vita molto più facile!

Il tema di questa serata è stato la gestione delle dipendenze JavaScript nel 2016, un concetto intrinsecamente legato ai packager JavaScript. La prima domanda che viene quindi, cos'è un packager e cosa porta rispetto a un Gulp o un Grunt?
Con un Gulp o un Grunt devi spesso specificare l'ordine in cui vuoi elaborare le tue risorse di input. Ad esempio devi specificarlo una volta per concatenare i file js, un'altra volta per eseguire i tuoi test e così via...
Mentre alla fine vorremmo solo poter dire che un file A dipende da un file B (come Node.js) e che fornendo solo il file "root" i nostri strumenti sono abbastanza intelligenti da concatenare, scaricare le dipendenze o semplicemente eseguire i test.
E questa è la missione compiuta da strumenti come Webpack, JSPM o Rollup.js che abbiamo avuto il diritto di (ri)scoprire in tre presentazioni top!

Le diverse forme di imballaggio e Webpack

Antonio il Taxi (@ModuloM) introduce l'argomento spiegando in dettaglio le diverse forme di pacchettizzazione JavaScript (vedi video sotto). Ci racconta la storia di Globals e IIFE (Immediately-invoked function expression), poi di CommonJs, il formato Node.js, di AMD lanciato inizialmente da Require.js, UMD il tentativo di conciliare i due precedenti, e infine di il futuro con i moduli ES2015.
In questo stesso video troverete Anthony Giniers (@aginier) ci danno una spiegazione più che gradita per molti di noi sulla configurazione criptica di Webpack !

JSPM

JSPM non è stato tralasciato durante questa serata grazie a Jordane Garnet (@Jo Grenat). Mescolando abilmente la presentazione pratica e quella accademica, è stato in grado di presentarci questo strumento che trarrebbe vantaggio dall'essere conosciuto. Guardare !

RollupJS

Infine la serata si è conclusa con la presentazione di RollupJS di Mathieu Breton (@MatBreton). Questo strumento poco conosciuto vuole essere un progetto sperimentale per promuovere l'uso dei moduli ES6. Questo formato, che sarà il futuro formato del pacchetto JavaScript in futuro, non è ancora ampiamente utilizzato, un esempio sono i file "principali" a cui puntano le librerie Node.js che sono sempre in formato UMD.

Conclusione

Oltre ai vari formati di confezionamento JS, durante questa serata sono emerse continuamente anche due parole: albero che trema
Dietro questo termine si nasconde il processo di rimozione del codice morto (codice non utilizzato) nelle dipendenze JavaScript. Il risultato è una riduzione potenzialmente molto significativa dell'output finale.
Ad esempio un JavaScript che utilizza D3.js e che originariamente fa più di 58ko minimizzato e gzippato può eseguire l'aggiornamento a 8ko con questo processo. (Fonte)
Troverai due pezzi di codice che ti permetteranno di comprendere meglio il concetto. E ve lo diciamo a marzo per il prossimo meetup di JS-Star 😉

//-------------
// main.js
import {cube} from './maths.js';
console.log( cube( 5 ) ); // 125
//-------------
// maths.js
export function square ( x ) {
   return x * x;
}
// This function gets included
export function cube ( x ) {
   return x * x * x;
}

function cube ( x ) {
   return x * x * x;
}
console.log( cube( 5 ) ); // 125