1. Introduzione al framework VUE.JS

Il PDF di questo documento è disponibile |QUI|`.

Gli esempi di questo documento sono disponibili |QUI|.

Questo documento fa parte di una serie di quattro articoli:

|Introduzione al linguaggio PHP7 attraverso esempi (2019)| ;
|Introduzione al linguaggio ECMAScript 6 attraverso esempi (2019|;
|Introduzione al framework VUE.JS attraverso esempi (2019)|. Questo è il documento in questione;
|Introduzione al framework NUXT.JS attraverso esempi (2019)|;

Si tratta di documenti destinati ai principianti. Gli articoli seguono un ordine logico ma sono debolmente correlati:

il documento [1] presenta il linguaggio PHP 7. Il lettore interessato solo al linguaggio PHP e non al linguaggio JavaScript degli articoli successivi si fermerà qui;
i documenti [2-4] mirano tutti a realizzare un client JavaScript per il server di calcolo delle imposte sviluppato nel documento [1];
i framework JavaScript [vue.js] e [nuxt.js] degli articoli 3 e 4 richiedono la conoscenza del JavaScript delle ultime versioni di ECMASCRIPT, ovvero quelle della versione 6. Il documento [2] è quindi destinato a coloro che non conoscono questa versione di JavaScript. Esso fa riferimento al server di calcolo delle imposte realizzato nel documento [1]. Il lettore di [2] dovrà quindi, in alcuni casi, fare riferimento al documento [1];
una volta acquisita padronanza di ECMASCRIPT, è possibile affrontare il framework VUE.JS che consente di creare client JavaScript eseguibili in un browser in modalità SPA (Single Page Application). Si tratta del documento [3]. Esso fa riferimento sia al server di calcolo delle imposte realizzato nel documento [1] sia al codice del client autonomo JavaScript realizzato in [2]. Chi legge il documento [3] dovrà quindi, in alcuni casi, fare riferimento ai documenti [1] e [2];
una volta acquisita padronanza di VUE.JS, è possibile affrontare il framework NUXT.JS che consente di creare client JavaScript eseguibili in un browser in modalità SSR (Server Side Rendered). Esso fa riferimento sia al server di calcolo delle imposte descritto nel documento [1], al codice client JavaScript autonomo realizzato in [2] e all’applicazione [vue.js] sviluppata nel documento [3]. Il lettore di [4] dovrà quindi, in alcuni casi, fare riferimento ai documenti [1], [2] e [3];

L’ultima versione del server di calcolo delle imposte sviluppata nel documento [1] (cfr. documento |Introduzione al linguaggio PHP7 attraverso esempi (2019)|) può essere migliorata in vari modi:

la versione descritta è incentrata sul server. La tendenza attuale (settembre 2019) è quella client/server:

il server funziona come servizio jSON;
una pagina, statica o meno, costituisce il punto di ingresso dell’applicazione web. Questa pagina contiene HTML /CSS ma anche JavaScript;
le altre pagine dell’applicazione web vengono generate dinamicamente tramite il JavaScript:
- la pagina HTML può essere ottenuta assemblando frammenti statici o non statici, forniti dallo stesso server che ha fornito la pagina iniziale, oppure costruiti dal JavaScript del client;
- queste diverse pagine visualizzano dati richiesti al servizio jSON;

In questo modo il lavoro viene ripartito tra il client e il server. Il server, così alleggerito, può servire un numero maggiore di utenti.

L’architettura corrispondente a questo modello è la seguente:

JS : JavaScript

Il browser è un client:

di un servizio di pagine o frammenti statici o meno (non rappresentato sopra);
di un servizio di dati jSON;

Il codice JavaScript è quindi un client jSON e, in quanto tale, può essere organizzato in livelli [UI, métier, dao] (UI: Interfaccia utente) proprio come i nostri client jSON scritti in PHP. Alla fine, il browser carica una sola pagina, la pagina iniziale. Tutte le altre vengono recuperate e costruite dal JavaScript. Questo tipo di applicazione viene chiamata SPA: Single Page Application o anche APU: Applicazione a Pagina Singola.

Questo tipo di applicazione rientra anche nella categoria delle cosiddette AJAX: Asynchronous JavaScript e XM:

Asynchronous: poiché le chiamate del client JavaScript al server jSON sono asincrone;
XML: poiché XML era la tecnologia utilizzata prima dell’avvento di jSON. Si è tuttavia mantenuto l’acronimo AJAX;

In questo documento analizzeremo tale architettura. Sul lato client, utilizzeremo il framework JavaScript [Vue.js] [https://vuejs.org/] per scrivere il client JavaScript del server jSON PHP che abbiamo descritto nel documento [1].

[Vue.js] è un framework JavaScript. Abbiamo presentato il linguaggio JavaScript nel documento [2]. Non faremo uno studio esaustivo del framework [vue.js]. Ci limiteremo a presentare i concetti che verranno successivamente utilizzati nella scrittura di un client [Vue.js] per la versione jSON della versione 14 del server di calcolo delle imposte (cfr. |Introduzione al linguaggio PHP7 attraverso esempi (2019)|).

Gli script presenti in questo documento sono commentati e viene riportata la loro esecuzione in console. Talvolta vengono fornite spiegazioni aggiuntive. Il documento richiede una lettura attiva: per comprendere uno script, è necessario leggere sia il codice, sia i commenti, sia i risultati dell’esecuzione.

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

Serge Tahé, ottobre 2019