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 ECMASCRIPT6 com exemplos (2019)]. Este é o documento atual;
- [Introdução ao framework VUE.JS com exemplos (2019)];
- [Introdução ao framework NUXT.JS com exemplos (2019)];
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];
A última versão do servidor de cálculo de impostos desenvolvida no documento [1] pode ser aprimorada de várias maneiras:
- a versão descrita concentra-se no servidor. Atualmente (julho de 2019), a tendência é para a arquitetura cliente/servidor:
- o servidor opera como serviço jSON;
- uma página estática ou dinâmica é o ponto de entrada do aplicativo web. Essa página contém HTML /CSS, mas também JavaScript;
- as demais páginas da aplicação web são geradas dinamicamente pelo JavaScript:
- a página HTML pode ser gerada pela montagem de fragmentos estáticos, fornecidos pelo mesmo servidor que forneceu a página inicial, ou então construída inteiramente pelo JavaScript;
- essas diferentes páginas exibem dados solicitados ao serviço jSON;
Assim, o trabalho é distribuído entre o cliente e o servidor. O servidor, com menor carga, pode atender a um número maior de usuários.
A arquitetura correspondente a esse modelo é a seguinte:
JS: JavaScript
O código JavaScript é 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 Usuário), assim como 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. Esse tipo de aplicativo é chamado de SPA: Single Page Application ou ainda APU: Aplicativo de Página Única.
Esse tipo de aplicativo também faz parte dos chamados aplicativos 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;
Estudaremos essa arquitetura nos próximos capítulos. No lado do cliente, usaremos o framework JavaScript [Vue.js] [https://vuejs.org/] para escrever o cliente JavaScript do servidor jSON PHP que escrevemos no documento [1].
O [Vue.js] é um framework de JavaScript. Para compreendê-lo, é necessário dominar essa linguagem. Apresentamos neste documento a norma ECMAScript 6, que é a padronização mais recente (em 2019) dessa linguagem. O histórico e o papel do ECMAScript podem ser encontrados na Wikipedia [https://fr.wikipedia.org/wiki/ECMAScript].
Este documento apresenta uma lista de scripts de console em JavaScript em diferentes áreas (estruturas da linguagem, acesso a bancos de dados, à Internet, programação em camadas, programação por interfaces). O documento termina com duas aplicações:
Um aplicativo de console que funcionará como cliente do servidor de cálculo de impostos desenvolvido no documento [1]. Esse cliente terá a mesma arquitetura do cliente de console PHP desenvolvido no documento [1]:
- as camadas [7-9] serão as do cliente JavaScript executado em um console;
- as camadas [1-4] são as do servidor PHP 7 criado no documento [1];
- ao contrário do cliente de console PHP, criado no documento [1], não haverá interações com o sistema de arquivos local [6];
Trata-se de uma aplicação cliente/servidor em que o cliente é uma aplicação de console. Será desenvolvida 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 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.
O aplicativo de servidor PHP 7 pode ser testado |aqui|.
Serge Tahé, outubro de 2019