1. Introduzione al framework NUXT.JS

Il PDF di questo documento è disponibile |QUI|.

Gli esempi in 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|;
|Introduzione al framework NUXT.JS attraverso esempi|. Questo è il documento attuale;

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];

Il presente documento prosegue il lavoro svolto nel documento [3] utilizzando il framework Vue.js.

Questa sezione si concentra sulla seguente architettura:

In [1], un browser web visualizza le pagine web [5, 7] provenienti da un server [3] destinate a un utente. Queste pagine contengono JavaScript che implementa un client per un servizio dati web [2] nonché un client per un server di frammenti di pagine web [3];
In [2], il server web funge da server dati. Può essere scritto in qualsiasi linguaggio di programmazione. Non genera pagine web nel senso tradizionale del termine (HTML, CSS, JavaScript), tranne forse la prima volta. Tuttavia, quella prima pagina può essere recuperata da un server web tradizionale [3] (non da un server dati). Il JavaScript sulla pagina iniziale genererà quindi le varie pagine web dell'applicazione recuperando i dati [4] da visualizzare dal server web, che funge da server di dati [2]. Può anche recuperare frammenti di pagine web [5] per formattare questi dati dal server delle pagine web [3];
in [4], l'utente avvia un'azione;
in [6,7]: riceve i dati formattati da un frammento di pagina web;

Il framework [nuxt.js] |https://fr.nuxtjs.org/| ci consentirà di implementare il seguente flusso di lavoro:

La prima pagina dell'applicazione viene fornita dal server [node.js] [3]. Inoltre, anche le altre pagine dell'applicazione sono ospitate su questo stesso server. Vengono fornite quando l'utente digita manualmente il loro URL nel browser. Queste pagine incorporano un'applicazione [vue.js] (approssimativamente);
una volta che la prima pagina è stata caricata nel browser, l'applicazione si comporta come una normale applicazione [Vue.js]. Nel nostro diagramma sopra, comunicherà quindi con il server dati [2];

In definitiva, l'applicazione si comporta come un'applicazione [Vue.js] tranne che per la prima pagina e quando l'utente inserisce manualmente gli URL. In questi casi, la pagina viene recuperata dal server [3]. Quando un motore di ricerca richiede le varie pagine dell'applicazione, le riceve dal server [3]. Queste pagine potrebbero essere state ottimizzate per la SEO (Search Engine Optimization). In un'applicazione [Vue.js], il motore di ricerca riceve una pagina con scarso valore SEO. Ad esempio, nell'applicazione client per il server di calcolo delle imposte sui documenti [3], la pagina ricevuta dal browser all'avvio dell'applicazione era la seguente:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/client-vuejs-impot/favicon.ico">
    <title>vuejs</title>
  <link href="/client-vuejs-impot/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

Questa è l'unica pagina caricata dal browser. Tutte le altre pagine dell'applicazione vengono generate dinamicamente da JavaScript senza l'ausilio del browser. Alcuni motori di ricerca si accontentano di questa pagina. Altri vanno oltre, eseguendo il JavaScript contenuto nella pagina (riga 9 sopra). Si ottiene quindi un'altra pagina. Questa pagina può contenere un'operazione asincrona per recuperare i dati che la pagina visualizzerà. In questo caso, i motori di ricerca non aspettano. Ci ritroviamo quindi con una pagina incompleta. Ricorderete che questo è il caso del nostro client [Vue.js] sul server di calcolo delle imposte: in modo asincrono, mentre la prima pagina si sta caricando, inizializza una sessione JSON con il server di calcolo delle imposte. In questo caso specifico, ciò non influisce sulla pagina recuperata dal motore di ricerca. Per altre applicazioni, ciò potrebbe essere dannoso in termini di SEO.

Con [nuxt.js], possiamo fornire al motore di ricerca una pagina più significativa per ogni pagina dell'applicazione.

Gli script in questo documento sono commentati e viene riprodotto il loro output della 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é, dicembre 2019