$30 off During Our Annual Pro Sale. View Details »

Vuejs

 Vuejs

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

Thulio Philipe

March 18, 2017
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

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