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 com exemplos (2019)|;

|Introdução à linguagem ECMASCRIPT6 com exemplos (2019)|;
|Introdução ao framework VUE.JS com exemplos (2019)|;
|Introdução ao framework NUXT.JS com exemplos (2019)|. Este é o documento em questão;

Todos são documentos para iniciantes. Os artigos seguem uma sequência lógica, mas são pouco interligados:

o documento [1] apresenta a linguagem PHP 7. O leitor interessado apenas na linguagem PHP e não na linguagem JavaScript dos artigos seguintes irá 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];
os frameworks de JavaScript [vue.js] e [nuxt.js] dos artigos 3 e 4 exigem conhecimento do JavaScript das últimas versões do ECMASCRIPT, ou seja, as da versão 6. O documento [2] destina-se, portanto, àqueles que não conhecem essa versão do JavaScript. Ele faz referência ao servidor de cálculo de impostos desenvolvido no documento [1]. O leitor do [2] precisará, então, ocasionalmente consultar o documento [1];
uma vez dominado o ECMASCRIPT, é possível abordar o framework VUE.JS, que permite criar clientes JavaScript executáveis em um navegador no modo SPA (Single Page Application). Trata-se do documento [3]. Ele faz referência tanto ao servidor de cálculo de impostos desenvolvido no documento [1] quanto ao código do cliente JavaScript autônomo desenvolvido no [2]. Quem estiver lendo o [3] precisará, então, ocasionalmente, consultar os documentos [1] e [2];
uma vez dominado o VUE.JS, é possível abordar o framework NUXT.JS, que permite criar clientes JavaScript executáveis em um navegador no modo SSR (renderização do lado do servidor). Ele faz referência tanto ao servidor de cálculo de impostos desenvolvido no documento [1], ao código do cliente JavaScript autônomo desenvolvido em [2] e também ao aplicativo [vue.js] desenvolvido no documento [3]. O leitor do documento [4] precisará, portanto, ocasionalmente consultar os documentos [1], [2] e [3];

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

Esta seção aborda a seguinte arquitetura:

no [1], um navegador da web exibe páginas da web [5, 7] provenientes de um servidor [3] destinadas a um usuário. Essas 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 da web [3];
No [2], o servidor web é um servidor de dados. Ele pode ser escrito em qualquer linguagem. Ele não gera páginas da web no sentido clássico (HTML, CSS, JavaScript), exceto talvez na primeira vez. Mas essa primeira página pode ser obtida 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 da web do aplicativo, obtendo os dados [4] a serem exibidos junto ao servidor web, que atua como um servidor de dados [2]. Ele também pode obter fragmentos de página da web [5] para apresentar esses dados, obtidos do servidor de páginas da web [3];
em [4], o usuário inicia uma ação;
em [6,7]: ele recebe dados apresentados por um fragmento de página da web;

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

a primeira página do aplicativo é fornecida pelo servidor [node.js] [3]. Além disso, as demais páginas do aplicativo também estão presentes nesse mesmo servidor. Elas são servidas quando o usuário digita manualmente seu endereço URL no navegador. Essas páginas incorporam um aplicativo [vue.js] (aproximadamente);
assim que a primeira página é carregada no navegador, o aplicativo se comporta como um aplicativo [vue.js] convencional. No nosso esquema acima, ele passa então a se comunicar com o servidor de dados [2];

No final das contas, o aplicativo se comporta como um aplicativo [vue.js], exceto na primeira página e quando o usuário digita URL manualmente. Nesses casos, a página é buscada no servidor [3]. Quando um mecanismo de busca solicita as diferentes páginas do aplicativo, ele recebe as páginas do servidor [3]. Essas páginas podem ter sido otimizadas para o SEO (Search Engine Optimization). Em uma aplicação [vue.js], o mecanismo de busca recebe uma página com pouca relevância, SEO. Por exemplo, no aplicativo do cliente do servidor de cálculo de impostos do documento [3], a página recebida pelo navegador ao iniciar o aplicativo 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>

Essa é a única página carregada pelo navegador. Todas as outras páginas do aplicativo são geradas dinamicamente pelo JavaScript, sem a intervenção do navegador. Alguns mecanismos de busca se contentam com essa página. Outros vão além, executando o JavaScript contido na página (linha 9 acima). Assim, obtém-se outra página. Essa página pode conter uma operação assíncrona para buscar os dados que serão exibidos. Nesse caso, os mecanismos de busca não aguardam. Acabamos, então, 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. Nesse caso específico, isso não afeta a página recuperada pelo mecanismo de busca. Para outras aplicações, isso poderia ser prejudicial em termos de SEO.

Com o [nuxt.js], é possível fornecer ao mecanismo de busca uma página mais relevante para cada uma das páginas do aplicativo.

Os scripts deste documento estão comentados e sua execução na console é reproduzida. Às vezes, são fornecidas explicações adicionais. O documento requer uma leitura ativa: para compreender um script, é preciso ler tanto o código quanto os comentários e os resultados da execução.

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

Serge Tahé, dezembro de 2019