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
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
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 concetto di classe Component
- Variabili in scope let
- Funzioni lambda =>
- Moduli
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.