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 ECMASCRIPT6 com exemplos (2019)];
- [Introdução ao framework VUE.JS com exemplos (2019)]; Este é o documento em questão;
- [Introdução ao framework NUXT.JS com exemplos (2019)];
Todos esses 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 6, é 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 autônomo JavaScript desenvolvido no [2]. O leitor do [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 construir clientes JavaScript executados 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] (consulte o documento |https://tahe.developpez.com/tutoriels-cours/php7|) pode ser aprimorada de várias maneiras:
- a versão descrita concentra-se no servidor. Atualmente (setembro de 2019), a tendência é para a arquitetura cliente/servidor:
- o servidor opera como serviço jSON;
- uma página estática ou não é 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 obtida pela montagem de fragmentos estáticos ou não, fornecidos pelo mesmo servidor que forneceu a página inicial, ou construídos pelo JavaScript do cliente;
- 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 essa carga aliviada, pode atender a um número maior de usuários.
A arquitetura correspondente a esse 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 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 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 estudar essa arquitetura neste documento. No lado do cliente, utilizaremos o framework JavaScript [Vue.js] [https://vuejs.org/] para escrever o cliente JavaScript do servidor jSON PHP que criamos no documento [1].
[Vue.js] é um framework JavaScript. Apresentamos 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 utilizados posteriormente na criação de um cliente [Vue.js] para a versão jSON da versão 14 do servidor de cálculo de impostos (cf. |https://tahe.developpez.com/tutoriais-cursos/php7|).
Os scripts deste documento estão comentados e sua execução no terminal é reproduzida. Às vezes, são fornecidas explicações adicionais. O documento requer uma leitura ativa: para compreender um script, é necessário 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