Vuejs

Talk realizada no Front in Maceió 2017 sobre o Vuejs.

Transcript

1. Vue.js Thulio Philipe @thulioph Web Developer
2. Viu-Djêi-Éss (vuejs)
3. Thulio Philipe @thulioph Web Developer @labcodes Web Apps @unibratec Team @devbeers " ⚙
4. Thulio Philipe @thulioph_ Web Developer @labcodes Web Apps @unibratec Team @devbeers " ⚙
5. Atenção!
6. • O slides serão disponibilizados. Atenção!
7. • O slides serão disponibilizados. • Não se preocupe com links, todos estão nos slides. Atenção!
8. • O slides serão disponibilizados. • Não se preocupe com links, todos estão nos slides. • Tome nota de alguns termos, pode ser útil para uma pesquisa futura. Atenção!
9. • O slides serão disponibilizados. • Não se preocupe com links, todos estão nos slides. • Tome nota de alguns termos, pode ser útil para uma pesquisa futura. • Esta palestra pode conter imagens de gatos. Atenção!
10. Conceitos
11. goo.gl/cgbP0l Components
12. components
13. components
14. Stateful goo.gl/knaTae
15. const hour = 1; const increment = () => hour + 1; increment(); // 2
16. goo.gl/knaTae Stateless
17. const hour = 1; const increment = (a) => a + 1; increment(hour);
18. Web components webcomponents.org
19. Uma coleção de web apis que permitem você criar novas tags HTML reusaveis e totalmente customizadas.
20. Uma coleção de web apis que permitem você criar novas tags HTML reusaveis e totalmente customizadas
21. 1. Custom Elements 2. HTML imports 3. HTML Template 4. Shadow DOM
22. 1. Custom Elements 2. HTML imports 3. HTML Template 4. Shadow DOM
23. Especificação que permite utilizar novos tipos de elementos DOM custom elements
24. Define como você encapsula estilo e marcação no componente shadow DOM
25. Webpack webpack.js.org
26. import bar from './bar'; bar(); app.js
27. export default function bar() { console.log('Hi, bar'); } bar.js
28. module.exports = { entry: './app.js', output: { filename: 'bundle.js' } } webpack.config.js
29. <html> <head> ... </head> <body> ... <script src="bundle.js"></script> </body> </html> index.html
30. Você sabia?
33. U$ 65.4 bilhões de dólares
35. • Huguinho • O líder
36. • Huguinho • O líder
37. • Zezinho • O mais esperto
38. • Zezinho • O mais esperto
39. • Luizinho • O mais criativo
40. • Luizinho • O mais criativo
41. Vuejs github.com/vuejs
42. Evan You @yyx990803 github.com/open-source/stories/yyx990803
43. github.com/vuejs/vue/pulse 46,148 5,938 194
44. Hello World
45. CDN vuejs.org/v2/guide
46. <html> <head> ... </head> <body> <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue"></script> <script src="app.js"></script> </body> </html> index.html
47. new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); app.js
48. <html> <head> ... </head> <body> <div id="app"> Hello Vue! </div> <script src="https://unpkg.com/vue"></script> <script src="app.js"></script> </body> </html> index.html
49. Vue-CLI github.com/vuejs/vue-cli
50. $ npm install -g vue-cli $ vue init webpack my-project
51. $ npm install -g vue-cli $ vue init webpack my-project template nome do projeto
52. • ES2015+ • Webpack + vue-loader (.vue) • Testes • e2e • Nightwatch • Unitários • Karma • Mocha + Chai + Sinon • Vue router • ESLint • PostCSS
53. Components
54. vuejs.org/v2/guide Estrutura [componentes globais]
55. Vue.component(tagName, options);
56. Vue.component('my-component', { template: '<h1>Hello World!</h1>'
 //options }); new Vue({ el: '#app' });
57. <div id="app"> <my-component></my-component> </div>
58. <div id="app"> <h1>Hello World!</h1> </div>
59. vuejs.org/v2/guide Estrutura [single-file component]
60. <template> // marcação </template> <script> // comportamento </script> <style> // estilo </style>
61. <template> <h1>{{ message }}</h1> </template> <script> export default { name: 'app', data() { return { message: 'Hello World' } } }; </script> <style></style>
62. Data vuejs.org/v2/guide
63. <template> <h1> {{ title }} </h1> </template>
64. export default { name: 'Título', data() { return { title:'Título Aqui' } } }
65. <template> <h1> Título Aqui </h1> </template>
66. vuejs.org/v2/guide Lifecycle [hooks]
67. lifecycle
68. lifecycle
69. lifecycle
70. export default { name: 'Meu Componente', created() { console.warn('Created'); }, mounted() { console.warn('Mounted'); }, updated() { console.warn('Updated'); }, destroyed() { console.warn('Destroyed'); } }
71. Props vuejs.org/v2/guide
72. <my-contact :address="Rua deserto do Atacama"> </my-contact>
73. export default { name: 'Contato', props: ['address'] }
74. <p>{{ address }}</p>
75. <p>Rua deserto do Atacama</p>
76. Methods vuejs.org/v2/guide
77. <template> <button @click="toggle"> Mudar Status </button> <p>{{ active }}</p> </template>
78. export default { name: 'Toggle botão', methods: { toggle() { this.active = !this.active; } }, data() { return { active: false } } }
79. Diretivas vuejs.org/v2/guide
80. • v-model • v-on • v-on:click="doSomething" • @click="doSomething" • v-bind • :href="url", :class="myClass" • v-for • v-show • v-if
81. vuejs.org/v2/guide Modifiers
82. <form @submit.prevent="onSubmit"> </form>
83. Rotas
84. vue-router router.vuejs.org
85. $ npm install vue-router --save
86. index.html <body> ... 
 <router-view></router-view> <script src="https://unpkg.com/ vue-router"> </script> </body>
87. import Foo from './components/Foo.vue' import Bar from './components/Bar.vue' export default = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] routes.js
88. import Vue from 'vue' import VueRouter from 'vue-router' import routes from './routes' Vue.use(VueRouter); const router = new VueRouter({ routes }); export default router; index.js
89. import Vue from 'vue' import router from './index' new Vue({ el:'#app', router }); main.js
90. Gerenciando estados
91. vuex vuex.vuejs.org
92. $ npm install vuex --save
93. <body> ... <script src="https://unpkg.com/vuex"> </script> </body> index.html
94. vuex
95. Testes
96. vuejs.org/v2/guide Teste unitário
98. MyComponent .vue
99. <template> <span>{{ message }}</span> </template>
100. export default { data () { return { message: 'Hello!' } }, created () { this.message = 'Bye!' } }
101. MyComponent .test.js
102. import Vue from 'vue' import MyComponent from 'path/to/ MyComponent.vue'
103. describe('MyComponent Spec', () => { it('Sets the correct default data', () => { const defaultData = MyComponent.data(); expect(defaultData.message).toBe('Hello!'); }); });
104. github.com/vuejs-templates Teste e2e
106. MyComponent .vue
107. <template> <div id="app"> <h1>{{message}}</h1> </div> </template> <script> export default { name: 'meu app', data() { return { message: 'Olá mundo!', }; } }; </script>
108. MyComponent .test.js
109. const devServer = browser.globals.devServerURL; browser .url(devServer) .waitForElementVisible('#app', 5000) .assert.containsText('h1', 'Olá mundo!') .end();
110. Mobile e Desktop
111. Framework 7 framework7.io
112. github.com/nolimits4web/framework7 9,107 1,981 58
113. Onsen UI onsen.io
114. github.com/OnsenUI/OnsenUI 4,406 575 92
115. VOnic github.com/wangdahoo/vonic
116. github.com/wangdahoo/vonic 1,542 214 8
117. Comunidade
118. i18n
119. Debug github.com/vuejs/vue-devtools
120. Github github.com/vuejs/awesome-vue
121. Slack slack.vuejs-brasil.com.br
122. E-mail vuejsfeed.com
123. Fórum forum.vuejs.org
124. Artigos vuejs-brasil.com.br
125. Demo
126. • Vuejs • @2.0 • Travis • Karma + Jasmine • Leaflet • Mapa • Firebase • database • auth • Bulma • Heroku
127. goo.gl/dgqlZ1
129. Thulio Philipe @thulioph Web Developer goo.gl/idCGmm Obrigado!