1. Introdução ao framework NUXT.JS

O PDF deste documento está disponível |AQUI|.

Os exemplos deste documento estão disponíveis |AQUI|.

Este documento faz parte de uma série de quatro artigos:

|Introdução à linguagem PHP7 através de exemplos (2019)|;

|Introdução à linguagem ECMAScript 6 através de exemplos (2019)|;
|Introdução ao framework VUE.JS através de exemplos (2019)|;
|Introdução ao framework NUXT.JS através de exemplos (2019)|. Este é o documento em questão;

Todos estes são documentos destinados a principiantes. Os artigos seguem uma sequência lógica, mas estão pouco interligados:

o documento [1] apresenta a linguagem PHP 7. O leitor que esteja interessado apenas na linguagem PHP e não na linguagem JavaScript dos artigos seguintes terminará a sua leitura aqui;
os documentos [2-4] têm como objetivo criar um cliente JavaScript para o servidor de cálculo de impostos desenvolvido no documento [1];
os frameworks JavaScript [vue.js] e [nuxt.js] dos artigos 3.º e 4.º exigem o conhecimento do JavaScript das últimas versões do ECMASCRIPT, nomeadamente as da versão 6. O documento [2] destina-se, portanto, a quem não conhece esta versão do JavaScript. Faz referência ao servidor de cálculo do imposto criado no documento [1]. O leitor do [2] terá, por vezes, de consultar o documento [1];
uma vez dominado o ECMASCRIPT, é possível abordar o framework VUE.JS, que permite criar clientes JavaScript executáveis num navegador no modo SPA (Single Page Application). Trata-se do documento [3]. Este faz referência tanto ao servidor de cálculo de impostos desenvolvido no documento [1] como ao código do cliente JavaScript autónomo desenvolvido no [2]. Quem estiver a ler o documento [3] terá, por vezes, de consultar os documentos [1] e [2];
uma vez dominado o VUE.JS, é possível abordar o framework NUXT.JS, que permite criar clientes JavaScript executados num navegador no modo SSR (renderização do lado do servidor). Este framework faz referência tanto ao servidor de cálculo de impostos desenvolvido no documento [1], ao código do cliente JavaScript autónomo criado em [2], bem como à aplicação [vue.js] desenvolvida no documento [3]. O leitor do documento [4] terá, por vezes, de consultar os documentos [1], [2] e [3];

Este documento dá continuidade ao trabalho realizado no documento [3] com o framework VUE.JS.

Esta secção centra-se na seguinte arquitetura:

em [1], um navegador da Web apresenta páginas da Web [5, 7] provenientes de um servidor [3] destinadas a um utilizador. Estas páginas contêm JavaScript que implementa um cliente de um serviço web de dados [2], bem como um cliente de um servidor de fragmentos de páginas web [3];
No [2], o servidor web é um servidor de dados. Pode ser escrito em qualquer linguagem. Não produz páginas web no sentido clássico (HTML, CSS, JavaScript), exceto talvez na primeira vez. Mas essa primeira página pode ser obtida a partir de um servidor web clássico [3] (não um servidor de dados). O JavaScript da página inicial irá então gerar as diferentes páginas web da aplicação, obtendo os dados [4] a apresentar junto do servidor web que funciona como um servidor de dados [2]. Também pode obter fragmentos de páginas web [5] para apresentar esses dados, a partir do servidor de páginas web [3];
em [4], o utilizador inicia uma ação;
em [6,7]: recebe dados apresentados por um fragmento de página web;

O framework [nuxt.js] |https://fr.nuxtjs.org/| vai permitir-nos implementar o seguinte funcionamento:

a primeira página da aplicação é servida pelo servidor [node.js] [3]. Além disso, as restantes páginas da aplicação também se encontram neste mesmo servidor. São servidas quando o utilizador introduz manualmente o respetivo URL no navegador. Estas páginas incorporam uma aplicação [vue.js] (aproximadamente);
assim que a primeira página for carregada no navegador, a aplicação comporta-se como uma aplicação [vue.js] clássica. No nosso esquema acima, irá então comunicar com o servidor de dados [2];

Em suma, a aplicação comporta-se como uma aplicação [vue.js], exceto no que diz respeito à primeira página e quando o utilizador introduz manualmente URL. Nesses casos, a página é procurada no servidor [3]. Quando um motor de busca solicita as diferentes páginas da aplicação, recebe as páginas do servidor [3]. Estas podem ter sido otimizadas para o SEO (Search Engine Optimization). Numa aplicação [vue.js], o motor de busca recebe uma página com pouca relevância, a SEO. Por exemplo, na aplicação do cliente do servidor de cálculo de impostos do documento [3], a página recebida pelo navegador ao iniciar a aplicação era a seguinte:


<!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>
    <!--serão inseridos automaticamente -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

Esta é a única página carregada pelo navegador. Todas as outras páginas da aplicação são geradas dinamicamente pelo JavaScript sem a ajuda do navegador. Alguns motores de busca limitam-se a esta página. Outros vão mais longe, executando o JavaScript contido na página (linha 9 acima). É então obtida outra página. Esta pode conter uma operação assíncrona para ir buscar os dados que a página irá apresentar. Neste caso, os motores de busca não esperam. Ficamos, assim, com uma página incompleta. Talvez nos lembremos de que é esse o caso do nosso cliente [vue.js] do servidor de cálculo de impostos: de forma assíncrona, ele inicializa, durante o carregamento da primeira página, uma sessão jSON com o servidor de cálculo de impostos. Neste caso específico, isso não afeta a página recuperada pelo motor de busca. Para outras aplicações, isso poderia ser prejudicial em termos de SEO.

Com o [nuxt.js], é possível apresentar ao motor de busca uma página mais relevante para cada uma das páginas da aplicação.

Os scripts deste documento estão comentados e a sua execução na consola é reproduzida. Por vezes, são fornecidas explicações adicionais. O documento requer uma leitura ativa: para compreender um script, é necessário ler simultaneamente o seu código, os seus comentários e os resultados da sua execução.

A aplicação de servidor PHP 7 pode ser testada |aqui|.

Serge Tahé, dezembro de 2019