React Tool chain: ES6, Babel, Node.js

Nella nostra avventura alla scoperta di React e degli elementi che la compongono, abbiamo esaminato numerosi esempi di codice, facendo spesso ricorso alla sintassi JSX. Tutti gli esempi sono funzionanti ed eseguibili direttamente nel browser, questo grazie all'importazione dello script che contiene il transpiler di Babel, che rende la sintassi JSX comprensibile al browser traducendola "al volo".

Il transpiling? Meglio farlo offline

Questo tipo di approccio è l'ideale per chi muove i primi passi e vuole essere pronto a scrivere codice in pochi secondi. Tuttavia, non è la strada consigliabile quando si vuole iniziare a progettare un'applicazione da utilizzare in un ambiente di produzione.

Le motivazioni principali sono le seguenti:

• Lo script che contiene il transpiler di Babel (o di un suo sostituto) tende a essere voluminoso, nell'ordine dei megabyte, e pertanto rappresenta una risorsa non trascurabile da scaricare ogni volta che un utente accede alla nostra applicazione.
• Il processo di compilazione richiede tempo, quindi aggiunge un "overhead" alla pagina la quale richiede più CPU e più tempo per poter sottoporre il codice scritto al transpiler affinché sia interpretabile dal browser.
• È necessario eseguire la compilazione ogni volta che si accede alla pagina, poiché la cache del browser può memorizzare tutt'al più lo script originale, che dovrà essere sottoposto al transpiler ogni volta che è necessario scaricarlo ed eseguirlo.

Usare Babel in locale ci permette di aggirare in un colpo solo tutti i problemi evidenziati. Sottoponendo il nostro codice al transpiler prima di rilasciare l'applicazione, otteniamo script pronti all'uso e già trasformati per poter essere eseguiti dal browser, senza dover nemmeno più pubblicare lo script del transpiler. Tutto ciò è possibile, grazie a Node.JS!

Uso di Node.JS con React

Node.js è un runtime per l'esecuzione di codice JavaScript basato sul motore V8, lo stesso su cui si basa l'interprete JavaScript di Google Chrome, celebre in modo particolare per le sue performance. È un prodotto open source disponibile per tutti i sistemi operativi più diffusi ed è scaricabile gratuitamente.

Per istruzioni su come installare il runtime sul proprio sistema e come eseguire applicazioni JavaScript sfruttando il motore V8 rimando alla lettura della guida Node.js.

Bisogna chiarire che in questo caso utilizziamo Node.js in locale, per potenziare il nostro ambiente di sviluppo allo scopo di produrre e ottimizzare pagine HTML, fogli di stile e script JavaScript delle nostre SPA che potranno poi essere ospitati su qualsiasi tipo di server (o hosting). In altre parole non è necessario un server Node.js per far girare le applicazioni che, in generale, possono comunicare con un qualunque backend in grado di esporre una Web API, sia esso realizzato con Java, PHP, ASP.NET, o anche con lo stesso Node.js.

Quindi installiamo Node.js per creare un ambiente di sviluppo composto da diversi tool e servizi scritti in JavaScript e progettati per funzionare grazie al runtime di Node. Essi ci consentono ad esempio di:

• rendere modulare la nostra applicazione,
• eseguire il transpiling del codice JSX,
• "minificare" i fogli di stile,
• etc.

Ecco quindi che Node diviene un componente fondamentale a supporto della fase di sviluppo della nostra applicazione e, al termine, anche della preparazione del pacchetto di build.

Grazie al supporto di Node e del suo package manager npm, possiamo installare pacchetti aggiuntivi; possiamo importare il transpiler di Babel affinché legga i nostri file con sintassi JSX e crei file JavaScript standard, interpretabili da qualsiasi browser, sfruttando le caratteristiche delle versioni più moderne del linguaggio come ad esempio ES6.

Babel ed ES6

Grazie al transpiler Babel, oltre a JSX possiamo approfittare delle feature della versione ES6 del linguaggio JavaScript. Non tutti i browser la supportano appieno, ma sarà cura del transpiler tradurre gli script nella versione precedente (ES5), che è invece largamente supportata dai browser più recenti.

ES6 ci offre numerose feature interessanti. Ne elenco solo alcune tra quelle che considero più utili:

• Classi: finalmente viene introdotto il concetto di classe che consente di introdurre la programmazione orientata agli oggetti nel codice JavaScript; ne faremo uso scrivendo componenti React ereditando una classe della libreria (Component).
• Variabili in scope locali: grazie alla parola chiave let possiamo dichiarare variabili che siano locali all'interno del blocco di codice in cui sono dichiarati, per intenderci quello delimitato da parentesi graffe { e }, restringendo quindi la visibilità dello scope rispetto a quelli disponibili nel classico JavaScript quando si utilizza la parola chiave var, ovvero quello globale e quello locale alla funzione.
• Funzioni lambda: grazie all'operatore => possiamo creare funzioni lambda come avviene già in molti altri linguaggi, rendendo il codice più sintetico ed essenziale.
• Moduli: la suddivisione del codice in moduli consente di creare ambiti dai quali è possibile esportare tipi affinché siano visibili all'esterno del modulo corrente, ossia accessibili da altri moduli, dai quali è invece possibile importare dei tipi. Faremo uso di questa funzionalità per esportare componenti React dai nostri script importando la classe base fornita dalla libreria React, dalla quale si deve ereditare per creare un nuovo componente. Questa feature è essenziale per tool di pacchettizzazione come WebPack, che sfrutta questa sintassi per determinare le dipendenze tra i moduli e assemblare il codice opportunamente.

Nella prossima lezione vedremo come installare e utilizzare un insieme specifico di tool per poter creare applicazioni React scrivendo agevolmente codice con ES6, con uno sguardo verso la "modularizzazione" del codice e la maggiore scalabilità che ne deriva.