Vuejs

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

Transcript

1. Vue.js
   Thulio Philipe @thulioph
   Web Developer
   

   View Slide

2. Viu-Djêi-Éss
   (vuejs)
   

   View Slide

3. Thulio Philipe
   @thulioph
   Web Developer
   @labcodes
   Web Apps
   @unibratec
   Team
   @devbeers
   
   "
   ⚙
   

   View Slide

4. Thulio Philipe
   @thulioph_
   Web Developer
   @labcodes
   Web Apps
   @unibratec
   Team
   @devbeers
   
   "
   ⚙
   

   View Slide

5. Atenção!
   

   View Slide

6. • O slides serão disponibilizados.
   Atenção!
   

   View Slide

7. • O slides serão disponibilizados.
   • Não se preocupe com links, todos estão nos slides.
   Atenção!
   

   View Slide

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!
   

   View Slide

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!
   

   View Slide

10. Conceitos
    

    View Slide

11. goo.gl/cgbP0l
    Components
    

    View Slide

12. components
    

    View Slide

13. components
    

    View Slide

14. Stateful
    goo.gl/knaTae
    

    View Slide

15. const hour = 1;
    const increment = () => hour + 1;
    increment(); // 2
    

    View Slide

16. goo.gl/knaTae
    Stateless
    

    View Slide

17. const hour = 1;
    const increment = (a) => a + 1;
    increment(hour);
    

    View Slide

18. Web
    components
    webcomponents.org
    

    View Slide

19. Uma coleção de web apis
    que permitem você criar novas tags
    HTML reusaveis e totalmente
    customizadas.
    

    View Slide

20. Uma coleção de web apis
    que permitem você criar novas tags
    HTML reusaveis e totalmente
    customizadas
    

    View Slide

21. 1. Custom Elements
    2. HTML imports
    3. HTML Template
    4. Shadow DOM
    

    View Slide

22. 1. Custom Elements
    2. HTML imports
    3. HTML Template
    4. Shadow DOM
    

    View Slide

23. Especificação que permite utilizar novos
    tipos de elementos DOM
    custom elements
    

    View Slide

24. Define como você encapsula
    estilo e marcação no componente
    shadow DOM
    

    View Slide

25. Webpack
    webpack.js.org
    

    View Slide

26. import bar from './bar';
    bar();
    app.js
    

    View Slide

27. export default function bar() {
    console.log('Hi, bar');
    }
    bar.js
    

    View Slide

28. module.exports = {
    entry: './app.js',
    output: {
    filename: 'bundle.js'
    }
    }
    webpack.config.js
    

    View Slide

29. 
    
    ...
    
    
    ...
    
    
    
    index.html
    

    View Slide

30. Você sabia?
    

    View Slide

31. View Slide

32. View Slide

33. U$ 65.4
    bilhões de
    dólares
    

    View Slide

34. View Slide

35. • Huguinho
    • O líder
    

    View Slide

36. • Huguinho
    • O líder
    

    View Slide

37. • Zezinho
    • O mais esperto
    

    View Slide

38. • Zezinho
    • O mais esperto
    

    View Slide

39. • Luizinho
    • O mais criativo
    

    View Slide

40. • Luizinho
    • O mais criativo
    

    View Slide

41. Vuejs
    github.com/vuejs
    

    View Slide

42. Evan You
    @yyx990803
    github.com/open-source/stories/yyx990803
    

    View Slide

43. github.com/vuejs/vue/pulse
    46,148 5,938 194
    

    View Slide

44. Hello World
    

    View Slide

45. CDN
    vuejs.org/v2/guide
    

    View Slide

46. 
    
    ...
    
    
    
    {{ message }}
    
    
    
    
    
    index.html
    

    View Slide

47. new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue!'
    }
    });
    app.js
    

    View Slide

48. 
    
    ...
    
    
    
    Hello Vue!
    
    
    
    
    
    index.html
    

    View Slide

49. Vue-CLI
    github.com/vuejs/vue-cli
    

    View Slide

50. $ npm install -g vue-cli
    $ vue init webpack my-project
    

    View Slide

51. $ npm install -g vue-cli
    $ vue init webpack my-project
    template nome do projeto
    

    View Slide

52. • ES2015+
    • Webpack + vue-loader (.vue)
    • Testes
    • e2e
    • Nightwatch
    • Unitários
    • Karma
    • Mocha + Chai + Sinon
    • Vue router
    • ESLint
    • PostCSS
    

    View Slide

53. Components
    

    View Slide

54. vuejs.org/v2/guide
    Estrutura
    [componentes globais]
    

    View Slide

55. Vue.component(tagName, options);
    

    View Slide

56. Vue.component('my-component', {
    template: 'Hello World!'

    //options
    });
    new Vue({
    el: '#app'
    });
    

    View Slide

57. 
    
    
    

    View Slide

58. 
    Hello World!
    
    

    View Slide

59. vuejs.org/v2/guide
    Estrutura
    [single-file component]
    

    View Slide

60. 
    // marcação
    
    <br/>// comportamento<br/>
    <br/>// estilo<br/>
    

    View Slide

61. 
    {{ message }}
    
    <br/>export default {<br/>name: 'app',<br/>data() {<br/>return {<br/>message: 'Hello World'<br/>}<br/>}<br/>};<br/>
    
    

    View Slide

62. Data
    vuejs.org/v2/guide
    

    View Slide

63. 
    
    {{ title }}
    
    
    

    View Slide

64. export default {
    name: 'Título',
    data() {
    return {
    title:'Título Aqui'
    }
    }
    }
    

    View Slide

65. 
    
    Título Aqui
    
    
    

    View Slide

66. vuejs.org/v2/guide
    Lifecycle
    [hooks]
    

    View Slide

67. lifecycle
    

    View Slide

68. lifecycle
    

    View Slide

69. lifecycle
    

    View Slide

70. export default {
    name: 'Meu Componente',
    created() {
    console.warn('Created');
    },
    mounted() {
    console.warn('Mounted');
    },
    updated() {
    console.warn('Updated');
    },
    destroyed() {
    console.warn('Destroyed');
    }
    }
    

    View Slide

71. Props
    vuejs.org/v2/guide
    

    View Slide

72. :address="Rua deserto do Atacama">
    
    

    View Slide

73. export default {
    name: 'Contato',
    props: ['address']
    }
    

    View Slide

74. {{ address }}
    

    View Slide

75. Rua deserto do Atacama
    

    View Slide

76. Methods
    vuejs.org/v2/guide
    

    View Slide

77. 
    @click="toggle">
    Mudar Status
    
    {{ active }}
    
    

    View Slide

78. export default {
    name: 'Toggle botão',
    methods: {
    toggle() {
    this.active = !this.active;
    }
    },
    data() {
    return {
    active: false
    }
    }
    }
    

    View Slide

79. Diretivas
    vuejs.org/v2/guide
    

    View Slide

80. • v-model
    • v-on
    • v-on:click="doSomething"
    • @click="doSomething"
    • v-bind
    • :href="url", :class="myClass"
    • v-for
    • v-show
    • v-if
    

    View Slide

81. vuejs.org/v2/guide
    Modifiers
    

    View Slide

82. @submit.prevent="onSubmit">
    
    

    View Slide

83. Rotas
    

    View Slide

84. vue-router
    router.vuejs.org
    

    View Slide

85. $ npm install vue-router --save
    

    View Slide

86. index.html
    
    ...
    

    
    <br/>
    
    

    View Slide

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
    

    View Slide

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
    

    View Slide

89. import Vue from 'vue'
    import router from './index'
    new Vue({
    el:'#app',
    router
    });
    main.js
    

    View Slide

90. Gerenciando
    estados
    

    View Slide

91. vuex
    vuex.vuejs.org
    

    View Slide

92. $ npm install vuex --save
    

    View Slide

93. 
    ...
    src="https://unpkg.com/vuex">
    
    
    index.html
    

    View Slide

94. vuex
    

    View Slide

95. Testes
    

    View Slide

96. vuejs.org/v2/guide
    Teste
    unitário
    

    View Slide

97. View Slide

98. MyComponent
    .vue
    

    View Slide

99. 
    {{ message }}
    
    

    View Slide

100. export default {
     data () {
     return {
     message: 'Hello!'
     }
     },
     created () {
     this.message = 'Bye!'
     }
     }
     

     View Slide

101. MyComponent
     .test.js
     

     View Slide

102. import Vue from 'vue'
     import MyComponent from 'path/to/
     MyComponent.vue'
     

     View Slide

103. describe('MyComponent Spec', () => {
     it('Sets the correct default data', () => {
     const defaultData = MyComponent.data();
     expect(defaultData.message).toBe('Hello!');
     });
     });
     

     View Slide

104. github.com/vuejs-templates
     Teste
     e2e
     

     View Slide

105. View Slide

106. MyComponent
     .vue
     

     View Slide

107. 
     
     {{message}}
     
     
     <br/>export default {<br/>name: 'meu app',<br/>data() {<br/>return {<br/>message: 'Olá mundo!',<br/>};<br/>}<br/>};<br/>
     

     View Slide

108. MyComponent
     .test.js
     

     View Slide

109. const devServer =
     browser.globals.devServerURL;
     browser
     .url(devServer)
     .waitForElementVisible('#app', 5000)
     .assert.containsText('h1', 'Olá
     mundo!')
     .end();
     

     View Slide

110. Mobile e
     Desktop
     

     View Slide

111. Framework 7
     framework7.io
     

     View Slide

112. github.com/nolimits4web/framework7
     9,107 1,981 58
     

     View Slide

113. Onsen UI
     onsen.io
     

     View Slide

114. github.com/OnsenUI/OnsenUI
     4,406 575 92
     

     View Slide

115. VOnic
     github.com/wangdahoo/vonic
     

     View Slide

116. github.com/wangdahoo/vonic
     1,542 214 8
     

     View Slide

117. Comunidade
     

     View Slide

118. i18n
     

     View Slide

119. Debug
     github.com/vuejs/vue-devtools
     

     View Slide

120. Github
     github.com/vuejs/awesome-vue
     

     View Slide

121. Slack
     slack.vuejs-brasil.com.br
     

     View Slide

122. E-mail
     vuejsfeed.com
     

     View Slide

123. Fórum
     forum.vuejs.org
     

     View Slide

124. Artigos
     vuejs-brasil.com.br
     

     View Slide

125. Demo
     

     View Slide

126. • Vuejs
     • @2.0
     • Travis
     • Karma + Jasmine
     • Leaflet
     • Mapa
     • Firebase
     • database
     • auth
     • Bulma
     • Heroku
     

     View Slide

127. goo.gl/dgqlZ1
     

     View Slide

128. View Slide

129. Thulio Philipe @thulioph
     Web Developer
     goo.gl/idCGmm
     Obrigado!
     

     View Slide