1. Introdução à linguagem ECMASCRIPT 6

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

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

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

[Introdução à linguagem PHP7 através de exemplos];

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

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

A versão mais recente do servidor de cálculo de impostos desenvolvido no documento [1] pode ser melhorada de várias formas:

A versão atual é centrada no servidor. A tendência atual (julho de 2019) é no sentido de uma arquitetura cliente-servidor:
- o servidor funciona como um serviço JSON;
- Uma página estática ou dinâmica serve como ponto de entrada para a aplicação web. Esta página contém HTML/CSS, bem como JavaScript;
- as outras páginas da aplicação web são geradas dinamicamente por JavaScript:
  - a página HTML pode ser gerada através da montagem de fragmentos estáticos, fornecidos pelo mesmo servidor que serviu a página inicial, ou construída inteiramente por JavaScript;
  - estas diferentes páginas apresentam dados solicitados ao serviço JSON;

Assim, o trabalho é distribuído entre o cliente e o servidor. O servidor, com a sua carga reduzida, consegue atender mais utilizadores.

A arquitetura correspondente a este modelo é a seguinte:

JS: JavaScript

O código JavaScript é do lado do cliente:

de um serviço que fornece páginas ou fragmentos estáticos ou não estáticos;
um serviço JSON;

O código JavaScript é, portanto, um cliente JSON e, como tal, pode ser organizado em camadas [UI, lógica de negócio, DAO] (UI: Interface do Utilizador), tal como os nossos clientes JSON escritos em PHP. Em última análise, o navegador carrega apenas uma única página — a página inicial. Todas as outras páginas são obtidas e renderizadas pelo JavaScript. Este tipo de aplicação é designado por SPA (Single Page Application) ou APU (Single Page Application).

Este tipo de aplicação também faz parte do que se conhece como aplicações AJAX: JavaScript Assíncrono e XML

Assíncrono: porque as chamadas do cliente JavaScript ao servidor JSON são assíncronas;
XML: porque o XML era a tecnologia utilizada antes do advento do JSON. No entanto, a sigla AJAX foi mantida;

Iremos explorar esta arquitetura nos próximos capítulos. No lado do cliente, utilizaremos o framework JavaScript [Vue.js] [https://vuejs.org/] para escrever o cliente JavaScript para o servidor PHP JSON que descrevemos no documento [1].

[Vue.js] é uma estrutura JavaScript. Para compreendê-la, é necessário ter proficiência nesta linguagem. Neste documento, apresentamos a norma ECMAScript 6, que é a mais recente (em 2019) normalização desta linguagem. A história e o papel do ECMAScript podem ser consultados na Wikipédia [https://fr.wikipedia.org/wiki/ECMAScript].

Este documento fornece uma lista de scripts de consola JavaScript em várias áreas (estruturas da linguagem, acesso a bases de dados, acesso à Internet, programação em camadas e programação através de interfaces). O documento conclui com duas aplicações:

Uma aplicação de consola que funcionará como cliente para o servidor de cálculo de impostos desenvolvido no documento [1]. Este cliente terá a mesma arquitetura que o cliente de consola PHP desenvolvido no documento [1]:

as camadas [7–9] serão as do cliente JavaScript em execução numa consola;
as camadas [1–4] são as do servidor PHP 7 desenvolvido no documento [1];
ao contrário do cliente de consola PHP desenvolvido no documento [1], não haverá interações com o sistema de ficheiros local [6];

Aqui temos uma aplicação cliente/servidor em que o cliente é uma aplicação de consola. Será escrita uma segunda aplicação em que o código das camadas [7–9] será portado para um navegador. Estaremos então prontos para abordar as estruturas JavaScript do navegador nos documentos [3] e [4].

Os scripts neste documento estão comentados e a sua saída de 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 de servidor PHP 7 pode ser testada |aqui|.

Serge Tahé, outubro de 2019