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 ao ECMASCRIPT 6 através de exemplos|;
- |Introdução ao framework VUE.JS através de exemplos|. Este é o documento atual;
- |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 todos 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, portanto, de consultar ocasionalmente o documento [1];
- uma vez dominado o ECMASCRIPT 6, pode-se 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] (ver documento |https://tahe.developpez.com/tutoriels-cours/php7|) pode ser melhorada de várias formas:
- A versão atual é centrada no servidor. A tendência atual (setembro 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 ou dinâmicos, fornecidos pelo mesmo servidor que serviu a página de entrada, ou construída por JavaScript do lado do cliente;
- 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, pode servir mais utilizadores.
A arquitetura correspondente a este modelo é a seguinte:
JS: JavaScript
O navegador é o cliente:
- um serviço que fornece páginas ou fragmentos estáticos ou dinâmicos (não mostrados acima);
- um serviço de dados 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 são obtidas e renderizadas pelo JavaScript. Este tipo de aplicação é designado por SPA: Single Page Application, ou APU: Application à Page Unique.
Este tipo de aplicação também faz parte do que se conhece como aplicações AJAX: Asynchronous JavaScript and 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 examinar esta arquitetura neste documento. 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. Apresentámos a linguagem JavaScript no documento [2]. Não iremos realizar um estudo exaustivo da estrutura [Vue.js]. Apresentaremos simplesmente os conceitos que serão posteriormente utilizados na escrita de um cliente [Vue.js] para a versão JSON da versão 14 do servidor de cálculo de impostos (ver |https://tahe.developpez.com/tutoriels-cours/php7|).
Os scripts neste documento estão comentados e a sua saída na consola é reproduzida. São fornecidas explicações adicionais sempre que necessário. Este 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