1. Introduzione al framework VUE.JS

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

Gli esempi tratti da questo documento sono disponibili |QUI|.

Questo documento fa parte di una serie di quattro articoli:

|[Introduzione a PHP7 attraverso esempi| ;

|Introduzione a ECMASCRIPT 6 attraverso esempi|;
|Introduzione al framework VUE.JS attraverso esempi|. Questo è il documento attuale;
|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 tutti 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. Esso fa riferimento al server di calcolo delle imposte realizzato nel documento [1]. I lettori del documento [2] dovranno quindi occasionalmente fare riferimento al documento [1];
una volta acquisita padronanza di ECMASCRIPT 6, è possibile 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 sviluppato nel documento [1] (vedi documento |https://tahe.developpez.com/tutoriels-cours/php7|) può essere migliorata in vari modi:

La versione attuale è incentrata sul server. La tendenza attuale (settembre 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 o dinamici, forniti dallo stesso server che ha servito la pagina di ingresso, oppure costruita da JavaScript lato client;
- Queste diverse pagine visualizzano i dati richiesti al servizio JSON;

Pertanto, il lavoro è distribuito tra il client e il server. Il server, avendo un carico ridotto, può servire un numero maggiore di utenti.

L'architettura corrispondente a questo modello è la seguente:

JS: JavaScript

Il browser è il client:

un servizio che fornisce pagine o frammenti statici o dinamici (non mostrati sopra);
un servizio dati 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 lo erano i nostri client JSON scritti in PHP. In definitiva, il browser carica solo una singola pagina, la home page. Tutte le altre vengono recuperate e visualizzate da JavaScript. Questo tipo di applicazione è chiamata SPA: Single Page Application, o APU: Application à Page Unique.

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

Asynchronous: 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;

Esamineremo questa architettura nel presente documento. Sul lato client, utilizzeremo 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. Abbiamo introdotto il linguaggio JavaScript nel documento [2]. Non condurremo uno studio esaustivo del framework [Vue.js]. Presenteremo semplicemente 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 (vedi |https://tahe.developpez.com/tutoriels-cours/php7|).

Gli script in questo documento sono commentati e viene riprodotto il loro output sulla console. Dove necessario, vengono fornite spiegazioni aggiuntive. Questo 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