1. Introduzione al linguaggio ECMASCRIPT 6

Il PDF di questo articolo è disponibile |QUI|.

Gli esempi contenuti in questo articolo sono disponibili |QUI|.

Questo documento fa parte di una serie di quattro articoli:

[Introduzione al linguaggio PHP7 attraverso esempi];

[Introduzione a ECMASCRIPT 6 attraverso esempi]. Questo è il documento attuale;
[Introduzione al framework VUE.JS attraverso esempi];
[Introduzione al framework NUXT.JS attraverso esempi];

Questi sono tutti documenti per principianti. Gli articoli seguono una sequenza logica ma sono collegati in modo approssimativo:

il documento [1] introduce il linguaggio PHP 7. I lettori interessati solo a PHP e non a JavaScript, argomento trattato negli articoli seguenti, dovrebbero fermarsi qui;
I documenti [2–4] mirano a costruire un client JavaScript per il server di calcolo delle imposte sviluppato nel documento [1];
I framework JavaScript [Vue.js] e [Nuxt.js] negli articoli 3 e 4 richiedono la conoscenza delle ultime versioni di ECMAScript, in particolare la versione 6. Il documento [2] è quindi destinato a coloro che non hanno familiarità con questa versione di JavaScript. Fa riferimento al server di calcolo delle imposte realizzato nel documento [1]. I lettori di [2] dovranno quindi a volte fare riferimento al documento [1];
una volta acquisita padronanza di ECMASCRIPT 6, possiamo passare al framework VUE.JS, che consente la creazione di client JavaScript in esecuzione in un browser in modalità SPA (Single Page Application). Questo è il documento [3]. Esso fa riferimento sia al server di calcolo delle imposte realizzato nel documento [1] sia al codice client JavaScript autonomo realizzato in [2]. I lettori di [3] dovranno quindi a volte fare riferimento ai documenti [1] e [2];
Una volta acquisita padronanza di VUE.JS, è possibile passare al framework NUXT.JS, che consente di creare client JavaScript che girano in un browser in modalità SSR (Server Side Rendered). Si fa riferimento al server di calcolo delle imposte realizzato nel documento [1], al codice client JavaScript autonomo realizzato in [2] e all'applicazione [vue.js] sviluppata nel documento [3]. I lettori di [4] dovranno quindi occasionalmente fare riferimento ai documenti [1], [2] e [3];

L'ultima versione del server di calcolo delle imposte sviluppata nel documento [1] può essere migliorata in vari modi:

La versione attuale è incentrata sul server. La tendenza attuale (luglio 2019) è verso un'architettura client-server:
- il server opera come servizio JSON;
- Una pagina statica o dinamica funge da punto di accesso per l'applicazione web. Questa pagina contiene HTML/CSS e JavaScript;
- le altre pagine dell'applicazione web sono generate dinamicamente da JavaScript:
  - la pagina HTML può essere generata assemblando frammenti statici, forniti dallo stesso server che ha servito la home page, oppure costruita interamente da JavaScript;
  - queste diverse pagine visualizzano i dati richiesti al servizio JSON;

In questo modo, il carico di lavoro viene ripartito tra il client e il server. Il server, vedendo ridotto il proprio carico, è in grado di servire un numero maggiore di utenti.

L'architettura corrispondente a questo modello è la seguente:

JS: JavaScript

Il codice JavaScript è lato client:

da un servizio che fornisce pagine o frammenti statici o non statici;
un servizio JSON;

Il codice JavaScript è quindi un client JSON e, in quanto tale, può essere organizzato in livelli [UI, logica di business, DAO] (UI: Interfaccia Utente), proprio come i nostri client JSON scritti in PHP. In definitiva, il browser carica solo una singola pagina: la home page. Tutte le altre pagine vengono recuperate e visualizzate da JavaScript. Questo tipo di applicazione è chiamata SPA (Single Page Application) o APU (Single Page Application).

Questo tipo di applicazione fa anche parte di quelle che sono note come applicazioni AJAX: Asynchronous JavaScript and XML

Asincrono: perché le chiamate del client JavaScript al server JSON sono asincrone;
XML: perché l'XML era la tecnologia utilizzata prima dell'avvento del JSON. Tuttavia, l'acronimo AJAX è stato mantenuto;

Esploreremo questa architettura nei prossimi capitoli. Sul lato client, useremo il framework JavaScript [Vue.js] [https://vuejs.org/] per scrivere il client JavaScript per il server PHP JSON che abbiamo descritto nel documento [1].

[Vue.js] è un framework JavaScript. Per comprenderlo, è necessario avere una buona padronanza di questo linguaggio. In questo documento presentiamo lo standard ECMAScript 6, che è la più recente (al 2019) standardizzazione di questo linguaggio. La storia e il ruolo di ECMAScript sono disponibili su Wikipedia [https://fr.wikipedia.org/wiki/ECMAScript].

Questo documento fornisce un elenco di script per la console JavaScript in vari ambiti (strutture del linguaggio, accesso ai database, accesso a Internet, programmazione a livelli e programmazione tramite interfacce). Il documento si conclude con due applicazioni:

Un'applicazione console che fungerà da client per il server di calcolo delle imposte realizzato nel documento [1]. Questo client avrà la stessa architettura del client console PHP realizzato nel documento [1]:

i livelli [7–9] saranno quelli del client JavaScript in esecuzione in una console;
i livelli [1–4] sono quelli del server PHP 7 descritto nel documento [1];
a differenza del client console PHP descritto nel documento [1], non ci saranno interazioni con il file system locale [6];

Qui abbiamo un'applicazione client/server in cui il client è un'applicazione da console. Verrà scritta una seconda applicazione in cui il codice per i livelli [7–9] verrà portato su un browser. A quel punto saremo pronti per affrontare i framework JavaScript per browser nei documenti [3] e [4].

Gli script in questo documento sono commentati e viene riprodotto il loro output in console. A volte vengono fornite spiegazioni aggiuntive. Il documento richiede una lettura attiva: per comprendere uno script, è necessario leggere il suo codice, i commenti e i risultati dell'esecuzione.

Gli esempi in questo documento sono disponibili |qui|.

L'applicazione server PHP 7 può essere testata |qui|.

Serge Tahé, ottobre 2019