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 (2019)];
[Introdução à linguagem ECMAScript 6 através de exemplos (2019)]. Este é o documento em questão;
[Introdução ao framework VUE.JS através de exemplos (2019)];
[Introdução ao framework NUXT.JS através de exemplos (2019)];

Todos estes são documentos para 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 irá parar por 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];

A última versão do servidor de cálculo de impostos desenvolvida no documento [1] pode ser melhorada de várias formas:

a versão descrita centra-se no servidor. A tendência atual (julho de 2019) é para a arquitetura cliente/servidor:
- o servidor funciona como serviço jSON;
- uma página estática ou dinâmica constitui o ponto de entrada da aplicação web. Esta página contém HTML /CSS, mas também Javascript;
- as restantes páginas da aplicação web são obtidas dinamicamente através do JavaScript:
  - a página HTML pode ser obtida através da montagem de fragmentos estáticos, fornecidos pelo mesmo servidor que forneceu a página inicial, ou então construída inteiramente pelo JavaScript;
  - estas diferentes páginas apresentam dados que são solicitados ao serviço jSON;

Assim, o trabalho é distribuído entre o cliente e o servidor. O servidor, assim aliviado, pode servir mais utilizadores.

A arquitetura correspondente a este modelo é a seguinte:

JS: JavaScript

O código JavaScript é do lado do cliente:

de um serviço de páginas ou fragmentos, estáticos ou não;
de um serviço jSON;

O código JavaScript é, portanto, um cliente jSON e, como tal, pode ser organizado em camadas [UI, métier, dao] (UI: Interface do Utilizador), tal como aconteceu com os nossos clientes jSON escritos em PHP. No final, o navegador carrega apenas uma única página, a página inicial. Todas as outras são obtidas e construídas pelo JavaScript. Este tipo de aplicação é designado por SPA: Single Page Application ou ainda APU: Aplicação de Página Única.

Este tipo de aplicação também faz parte das aplicações denominadas AJAX: Asynchronous JavaScript e XML

Assíncrono: porque as chamadas do cliente JavaScript para o servidor jSON são assíncronas;
XML: porque XML era a tecnologia utilizada antes do advento do jSON. No entanto, manteve-se a sigla AJAX;

Iremos analisar essa arquitetura nos próximos capítulos. Do lado do cliente, utilizaremos o framework JavaScript [Vue.js] [https://vuejs.org/] para escrever o cliente JavaScript do servidor jSON PHP que criámos no documento [1].

O [Vue.js] é um framework JavaScript. Para o compreender, é necessário dominar esta linguagem. Apresentamos neste documento a norma ECMAScript 6, que é a normalização mais recente (em 2019) desta linguagem. O histórico e o papel do ECMAScript podem ser consultados na Wikipédia [https://fr.wikipedia.org/wiki/ECMAScript].

Este documento apresenta uma lista de scripts de consola em JavaScript em diferentes áreas (estruturas da linguagem, acesso a bases de dados, à Internet, programação em camadas, programação por interfaces). O documento termina com duas aplicações:

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

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

Temos aqui 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 os frameworks JavaScript dos navegadores nos documentos [3] e [4].

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é, outubro de 2019