1. Introdução à estrutura 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 ao PHP7 através de exemplos|;

|Introdução ao ECMASCRIPT 6 através de exemplos| ;
|Introdução ao framework VUE.JS através de exemplos|;
|Introdução ao framework NUXT.JS através de exemplos|. Este é o documento atual;

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

o documento [1] apresenta a linguagem PHP 7. Os leitores interessados apenas em PHP e não no JavaScript abordado nos artigos seguintes devem parar por aqui;
Os documentos [2–4] têm como objetivo construir um cliente JavaScript para o servidor de cálculo de impostos desenvolvido no documento [1];
As estruturas JavaScript [vue.js] e [nuxt.js] nos artigos 3 e 4 requerem conhecimento das versões mais recentes do ECMAScript, especificamente a versão 6. O documento [2] destina-se, portanto, a quem não está familiarizado com esta versão do JavaScript. Refere-se ao servidor de cálculo de impostos criado no documento [1]. Os leitores do [2] terão, por isso, por vezes, de consultar o documento [1];
uma vez dominado o ECMASCRIPT 6, podemos avançar para o framework VUE.JS, que permite a criação de clientes JavaScript a executar num navegador no modo SPA (Single Page Application). Este é o documento [3]. Refere-se tanto ao servidor de cálculo de impostos construído no documento [1] como ao código do cliente JavaScript autónomo construído no [2]. Os leitores de [3] terão, portanto, por vezes, de consultar os documentos [1] e [2];
Depois de dominar o VUE.JS, pode passar para o framework NUXT.JS, que permite construir clientes JavaScript que funcionam num navegador no modo SSR (Server Side Rendered). Refere-se ao servidor de cálculo de impostos construído no documento [1], ao código cliente JavaScript autónomo construído no [2] e à aplicação [vue.js] desenvolvida no documento [3]. Os leitores de [4] terão, portanto, de consultar ocasionalmente os documentos [1], [2] e [3];

Este documento dá continuidade ao trabalho realizado no documento [3] utilizando 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 para um serviço de dados da Web [2], bem como um cliente para um servidor de fragmentos de páginas da Web [3];
Em [2], o servidor web funciona como um servidor de dados. Pode ser escrito em qualquer linguagem de programação. Não gera páginas web no sentido tradicional (HTML, CSS, JavaScript), exceto talvez na primeira vez. No entanto, essa primeira página pode ser obtida a partir de um servidor web tradicional [3] (não de um servidor de dados). O JavaScript na página inicial irá então gerar as várias páginas web da aplicação, recuperando os dados [4] a serem exibidos do servidor web, que funciona como um servidor de dados [2]. Também pode recuperar fragmentos de páginas web [5] para formatar esses dados a partir do servidor de páginas web [3];
em [4], o utilizador inicia uma ação;
em [6,7]: recebe dados formatados por um fragmento de página web;

A estrutura [nuxt.js] |https://fr.nuxtjs.org/| permitirá-nos implementar o seguinte fluxo de trabalho:

A primeira página da aplicação é servida pelo servidor [node.js] [3]. Além disso, as outras páginas da aplicação também estão alojadas neste mesmo servidor. São servidas quando o utilizador digita manualmente o seu 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] padrão. No nosso diagrama acima, ela comunicará então com o servidor de dados [2];

Em última análise, 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 URLs. Nestes casos, a página é recuperada do servidor [3]. Quando um motor de busca solicita as várias páginas da aplicação, recebe as páginas do servidor [3]. Estas páginas podem ter sido otimizadas para SEO (Search Engine Optimization). Numa aplicação [Vue.js], o motor de busca recebe uma página com pouco valor de SEO. Por exemplo, na aplicação cliente para o servidor de cálculo de impostos sobre documentos [3], a página recebida pelo navegador quando a aplicação foi iniciada 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>
    <!-- built files will be auto injected -->
  <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 por JavaScript sem a assistência do navegador. Alguns motores de busca ficam satisfeitos com esta página. Outros vão mais longe, executando o JavaScript contido na página (linha 9 acima). Obtém-se então outra página. Esta página 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 então com uma página incompleta. Poderá recordar-se de que este é o caso do nosso cliente [Vue.js] no servidor de cálculo de impostos: de forma assíncrona, enquanto a primeira página está a carregar, ele inicializa uma sessão JSON com o servidor de cálculo de impostos. Neste caso específico, isto não afeta a página recuperada pelo motor de busca. Para outras aplicações, isto pode ser prejudicial em termos de SEO.

Com o [nuxt.js], podemos apresentar uma página mais significativa ao motor de busca para cada página da aplicação.

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

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

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

Serge Tahé, dezembro de 2019