Fabio apresentou uma introdução ao framework VueJS, destacando que ele pode ser usado para construir interfaces e aplicações de página única. Ele explicou como VueJS usa componentes para modularizar aplicações e como esses componentes se comunicam através de propriedades e eventos. Finalmente, ele mostrou como usar VueJS e outras bibliotecas para construir uma aplicação de exemplo de cadastro simples.

1. SPA com VueJS
Fabio Fogliarini Brolesi <@brolesi>

2. Quem sou?
● Matemático pela UNICAMP
● Desenvolvedor na CI&T
● Tenho algumas certificações ;)

3. Agenda
● O que é o VueJS
● Características
● Uma SPA
● Q&A

4. VueJS

5. VueJS
● tl; dr: Vue é um framework para desenvolvimento de interfaces.
● Ele pode ser incrementado utilizando-se outras bibliotecas acopladas a
ele, para criação de interfaces e Single Page Applications (SPA)
● É possível criar aplicações do zero ou utilizando o CLI (command line
interface) para um boilerplate estruturado mais rapidamente

6. VueJS
● O uso das variáveis dentro do DOM é feito a partir de declarações simples
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Olá Vue!'
}
})

7. VueJS - características

8. VueJS - componentes
● É possível modularizar a sua aplicação com o uso de componentes. Cada
pedaço da aplicação é um componente, que se encerra nele mesmo
(autocontido) e que pode ser reutilizado. Podemos então pensar numa
aplicação como sendo uma árvore de componentes.

9. VueJS - componentes: relacionamento
● Se por um lado componentes pai e filho precisam se comunicar de forma
clara, por outro lado é necessário existir um desacoplamento para que
eles sejam reutilizáveis.
● No caso do Vue, ele utiliza propriedades para baixo e eventos para cima.

10. VueJS - componentes: relacionamento do pai para o filho
● O one way data flow do Vue faz com que, quando o pai for atualizado, o
filho também seja; o contrário não é verdade, pois o filho poderia mudar o
valor do pai de maneira incorreta. A tentativa de atualizar uma propriedade
do filho será avisada no console.
● Para que o componente filho possa manipular os dados enviados via
propriedade, as alternativas são montar variáveis no filho que recebam o
valor da propriedade

11. VueJS - componentes: relacionamento do pai para o filho
● Para que as informações do componente pai sejam passadas para o filho,
utilizamos o props (entendido no Vue como propriedade do elemento
filho)
<child message="hello!"></child>
Vue.component('child', {
// declara as propriedades
props: ['message'],
// assim como os dados, a propriedade pode ser usada dentro de templates
// e também se torna disponível na instância como this.message
template: '<span>{{ message }}</span>'
})

12. VueJS - componentes: relacionamento do pai para o filho
● Propriedades dinâmicas podem ser referenciadas no template com o
atalho :<nome_da_propriedade>="<valor>"
<child :message="myMessage"></child>

13. VueJS - componentes: relacionamento do filho para o pai
● No caso de o filho ter de enviar informações para o pai, utilizamos então
eventos (o evento v-on:<nome>)

14. VueJS - componentes: relacionamento do filho para o pai
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{
counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})

15. VueJS - uma SPA

16. VueJS - uma SPA: bootstrap
● Vamos utilizar o CLI do VueJS para montar a SPA:
● Também criamos um mock JSON com json-server:
$ vue init webpack simple-crud
$ cd simple-crud
$ npm install
$ npm run dev
$ mkdir mock
$ cd mock
$ npm install -g json-server
$ json-server --watch db.json

17. VueJS - uma SPA: bootstrap e estrutura com o webpack
● A estrutura de pastas ficará conforme a figura ao lado:

18. VueJS - uma SPA: adicionando bibliotecas extenas
● Para este exemplo, vamos precisar de duas bibliotecas externas: axios e
momentjs
● O arquivo package.json será atualizado automaticamente:
$ npm install --save-dev axios
$ npm install --save-dev momentjs
"devDependencies": {
"autoprefixer": "^7.1.2",
"axios": "^0.17.0",
[...]
"momentjs": "^2.0.0",
[...]
},

19. VueJS - uma SPA: alterando o proxy
● Quando levantamos o servidor para a aplicação, ele fica na porta 8080. Já
o json-server inicia na porta 3000. Para que o navegador possa acessar o
servidor de mock, precisamos realizar uma alteração no arquivo
config/index.js para criar um proxy entre os servidores:
proxyTable: {
'/api/': {
target: 'http://localhost:3000/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},

20. VueJS - uma SPA: um arquivo típico
<template>
<div id="add">
<h1>Add</h1>
<form-input @dataSaved="displayInfo" />
</div>
</template>
<script>
import FormInput from '@/components/common/FormInput'
export default {
name: 'add',
components: {
FormInput
},
methods: {
displayInfo (i) {
this.$router.push('/')
}
}
}
</script>
<style scoped>
</style>

21. Dúvidas?

22. Obrigado
Fabio Fogliarini Brolesi <@brolesi>
https://github.com/brolesi/gdg-campinas-vuejs