infos

Informações Vuejs

Dados gerais sobre a aplicação front-end

Palavras-chave:

Single-Page Applications (SPA), Component-Based-Architecture (CBA), Web components, Reatividade, Modularidade.

Links:

Resumo de cada ponto das palavras chaves acima. Importante para entender o framework:
http://thulioph.com/notes/2017/03/29/vuejs/

Template utilizado:

http://vuejs-templates.github.io/webpack/structure.html
https://github.com/vuejs-templates/webpack

Tecnologias:

Vuejs: framework javascript
Bootstrap: biblioteca CSS
Babel (transpiler): para poder usar as versões mais atuais do JS e funcionar em todos os browser.
Webpack (module bundler): browsers ainda não suportam a modularização, então o webpack organiza e junta os módulos.

Desenvolvimento:

Para gerar o template inicial foi usado o vue-cli. É uma ferramenta de linha de comando que gera projetos com a arquitetura e configuração pronta para uso. Para o Arbitrium foi o utilizado o template webpack.
Como Vue trabalha com componentes, então foi decidido manter a forma mais fácil de se trabalhar do framework que é com Single-File Components. Onde cada componente trabalha de forma separada com seu próprio HTML, CSS e JS. Esse é o principal diferencial do Vue em comparação com qualquer outro framework atual.
Para a organização das pastas foi decidido manter o template original do vue-cli (http://vuejs-templates.github.io/webpack/structure.html) com duas alterações: as pastas pages e services.
A pasta pages é onde está cada página da aplicação, por exemplo: Home (iniciar jogo), Schedule (agenda), WeekSimulation (passagem do tempo), Result (resultado da semana), GameOver (fim do jogo).
Em services é onde fica a integração com a API para fazer a conexão e buscar os dados.
As demais pastas seguiram a organização oficial do Vue, como a pasta router que faz o gerenciamento de todas as rotas da aplicação. E a pasta components, onde ficam os componentes que serão utilizados em cada página.

Acesse o repositório:
http://www.tools.ages.pucrs.br/arbitrium/web