1. Introdução ao framework VUE.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 ECMAScript 6 através de exemplos (2019)|;
- |Introdução ao framework VUE.JS através de exemplos (2019)|. Este é o presente documento;
- |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 terminará a sua leitura aqui;
- os documentos [2-4] têm todos como objetivo construir 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, ou seja, 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 de impostos desenvolvido no documento [1]. O leitor do [2] terá, por vezes, de consultar o documento [1];
- uma vez dominado o ECMASCRIPT 6, é 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 autónomo JavaScript desenvolvido no [2]. Quem estiver a ler o [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] (ver documento |Introdução à linguagem PHP7 através de exemplos (2019)|) pode ser melhorada de várias formas:
- a versão descrita centra-se no servidor. A tendência atual (setembro de 2019) é para a arquitetura cliente/servidor:
- o servidor funciona como serviço jSON;
- uma página, estática ou não, 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 ou não, fornecidos pelo mesmo servidor que forneceu a página inicial, ou então construídos pelo JavaScript do cliente;
- 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 navegador é o cliente:
- de um serviço de páginas ou fragmentos, estáticos ou não (não representado acima);
- de um serviço de dados 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 XM:
- 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;
Vamos analisar essa arquitetura neste documento. 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. Apresentámos a linguagem JavaScript no documento [2]. Não faremos um estudo exaustivo do framework [vue.js]. Limitar-nos-emos a apresentar os conceitos que serão posteriormente utilizados na criação de um cliente [Vue.js] para a versão jSON da versão 14 do servidor de cálculo de impostos (ver |Introdução à linguagem PHP7 através de exemplos (2019)|).
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