1. Introduzione al framework NUXT.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)|;
|Introduzione al framework NUXT.JS attraverso esempi (2019)|. Questo è il documento in questione;

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

Il presente documento prosegue il lavoro svolto nel documento [3] con il framework VUE.JS.

Questa sezione si concentra sulla seguente architettura:

in [1], un browser web visualizza pagine web [5, 7] provenienti da un server [3] e destinate a un utente. Queste pagine contengono codice JavaScript che implementa un client di un servizio web di dati [2] e un client di un server di frammenti di pagine web [3];
In [2], il server web è un server di dati. Può essere scritto in qualsiasi linguaggio. Non genera pagine web nel senso classico del termine (HTML, CSS, JavaScript), tranne forse la prima volta. Tuttavia, questa prima pagina può essere ottenuta da un server web classico [3] (non un server di dati). Il JavaScript della pagina iniziale genererà quindi le diverse pagine web dell’applicazione, recuperando i dati [4] da visualizzare dal server web che funge da server di dati [2]. Può inoltre recuperare frammenti di pagina web [5] per presentare tali dati dal server di pagine web [3];
in [4], l’utente avvia un’azione;
in [6,7]: riceve i dati integrati in un frammento di pagina web;

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

la prima pagina dell’applicazione viene fornita dal server [node.js] [3]. Inoltre, anche le altre pagine dell’applicazione sono presenti 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 caricata la prima pagina nel browser, l’applicazione si comporta come una classica applicazione [vue.js]. Nello schema sopra riportato, interagirà 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 digita manualmente URL. In questi casi, la pagina viene ricercata sul server [3]. Quando un motore di ricerca richiede le diverse pagine dell’applicazione, riceve le pagine dal server [3]. Queste potrebbero essere state ottimizzate per il SEO (Search Engine Optimization). In un’applicazione [vue.js], il motore di ricerca riceve una pagina con scarso significato SEO. Ad esempio, nell’applicazione client del server di calcolo delle imposte del documento [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>
    <!--verranno inseriti automaticamente -->
  <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 tramite JavaScript senza l’ausilio del browser. Alcuni motori di ricerca si accontentano di questa pagina. Altri vanno oltre, eseguendo il codice JavaScript contenuto nella pagina (riga 9 sopra). Si ottiene così un’altra pagina. Questa può contenere un’operazione asincrona per recuperare i dati che la pagina visualizzerà. In questo caso i motori di ricerca non attendono. Ci si ritrova quindi con una pagina incompleta. Ricorderemo forse che è il caso del nostro client [vue.js] del server di calcolo delle imposte: in modo asincrono, durante il caricamento della prima pagina, esso 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 penalizzante in termini di SEO.

Con [nuxt.js] è possibile fornire al motore di ricerca una pagina più significativa per ciascuna delle pagine dell’applicazione.

Gli script di questo documento sono commentati e la loro esecuzione in console è riportata. 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.

Gli esempi del documento sono disponibili |qui|.

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

Serge Tahé, dicembre 2019