|
|
|
|
|
|
|
**Frontend**
|
|
|
|
|
|
|
|
O frontend é responsável por coletar a entrada do usuário em várias formas e processá-la para adequá-la a uma especificação em que o backend possa utilizar.
|
|
|
|
No decorrer deste documento você verá quais tecnologia estão sendo usadas para o desenvolvimento da aplicação frontend e informações sobre o principal framework utilizado.
|
|
|
|
|
|
|
|
**Frontend Arbitrium:** http://www.tools.ages.pucrs.br/arbitrium/web
|
|
|
|
|
|
|
|
__________
|
|
|
|
|
|
|
|
**Tecnologias**
|
|
|
|
- VueJs
|
|
|
|
- HTML
|
|
|
|
- CSS
|
|
|
|
- Javascript
|
|
|
|
|
|
|
|
__________
|
|
|
|
|
|
|
|
**VueJS**
|
|
|
|
- Site oficial: https://br.vuejs.org/
|
|
|
|
- Documentação: https://br.vuejs.org/v2/guide/
|
|
|
|
- API: https://br.vuejs.org/v2/api/
|
|
|
|
- Guia de melhores práticas: https://br.vuejs.org/v2/style-guide/
|
|
|
|
|
|
|
|
|
|
|
|
**1. O que é?**
|
|
|
|
VueJs é um framework Javascript para aplicações frontend que foi criado para organizar e simplificar o desenvolvimento web.
|
|
|
|
|
|
|
|
|
|
|
|
**2. Por que VueJs?**
|
|
|
|
https://br.vuejs.org/v2/guide/comparison.html
|
|
|
|
|
|
|
|
|
|
|
|
**3. Semelhanças com React**
|
|
|
|
O React é uma biblioteca JavaScript criada e mantida pelo Facebook para construir interfaces de usuário.
|
|
|
|
Vue é muito semelhante ao React, tudo que React pode fazer Vue.js também faz, porém de forma mais fácil e ágil.
|
|
|
|
|
|
|
|
**4. Curva de aprendizado**
|
|
|
|
React é conhecido por sua difícil curva de aprendizado. Antes que você possa realmente começar, você precisa saber sobre JSX e versões recentes do Ecmascript, uma vez que muitos exemplos React usam sintaxe de classes.
|
|
|
|
Para começar com Vue, tudo que você precisa é familiaridade com HTML e JavaScript puro.
|
|
|
|
|
|
|
|
E além do Vue escalar tão bem quanto React, ele também é capaz de reduzir a escala ao nível do simples jQuery. Por exemplo, com o simples uso da tag abaixo, a aplicação já estará pronta para usar o framework.
|
|
|
|
|
|
|
|
- `<script src="https://cdn.jsdelivr.net/npm/vue"></script>`
|
|
|
|
|
|
|
|
E já que você não precisa obrigatoriamente saber sobre JSX, ES2015 ou sistemas de build para começar com o Vue, em muito pouco tempo qualquer desenvolvedor poderá criar sua própria aplicação.
|
|
|
|
|
|
|
|
|
|
|
|
**5. Performance**
|
|
|
|
- https://br.vuejs.org/v2/guide/comparison.html#Desempenho-em-Execucao
|
|
|
|
|
|
|
|
- http://www.stefankrause.net/js-frameworks-benchmark7/table.html
|
|
|
|
|
|
|
|
__________
|
|
|
|
|
|
|
|
|
|
|
|
**Sintaxe**:
|
|
|
|
```
|
|
|
|
<template>
|
|
|
|
<!-- Código HTML -->
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
// Código Javascript
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
/* CSS */
|
|
|
|
</style>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
**Exemplo de componente:**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
________
|
|
|
|
|
|
|
|
**Links úteis**
|
|
|
|
- https://github.com/vuejs/awesome-vue
|
|
|
|
|
|
|
|
- https://forum.vuejs.org/
|
|
|
|
|
|
|
|
- https://www.tutorialspoint.com/vuejs/index.htm
|
|
|
|
|
|
|
|
|
