Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Level-up apps and websites with vue.js

Level-up apps and websites with vue.js

Firenze, piazza madonna della neve. Organized by Commit University.

Lorenzo Girardi

February 22, 2018
Tweet

More Decks by Lorenzo Girardi

Other Decks in Programming

Transcript

  1. Level-up
    apps & websites
    with vue.js
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide

  2. hey folks
    i am
    lorenzo girardi
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide

  3. i am a
    front-end dev
    and a passionate
    musician
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide

  4. digital company with strong focus on
    strategy and technology
    website:
    https://www.develondigital.com/

    View full-size slide

  5. international group
    +15 years
    +55 people
    +5 departments
    website:
    https://www.develondigital.com/
    thanks for having us!

    View full-size slide

  6. is it easy
    to build websites?
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide

  7. Our team was searching for a tool
    with data driven development in mind...
    ...and a lean learning curve because
    we had to be production-ready ASAP.
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide

  8. + =
    website:
    https://vuejs.org/

    View full-size slide

  9. /vjuː/
    website:
    https://vuejs.org/

    View full-size slide

  10. website:
    https://vuejs.org/
    progressive
    framework
    evan you
    vue vue-router vuex vue-cli

    View full-size slide

  11. website:
    https://vuejs.org/
    numbers
    > 82k stars (87k react, 32k angular)
    ~ 4000 packages depends on it
    > 1.000.000 download last month
    $ 11.567 per month by 204 patreons
    2 vueconf in 2018 (amsterdam, new orleans)

    View full-size slide

  12. basic
    concepts
    website:
    https://vuejs.org/

    View full-size slide

  13. website:
    https://vuejs.org/

    View full-size slide

  14. website:
    https://vuejs.org/

    View full-size slide



  15. {{ message }}

    <br/>new Vue({<br/>el: '#app',<br/>data: {<br/>message: 'Hello commit people!'<br/>}<br/>})<br/>
    https://vuejs.org/ hello world

    View full-size slide





  16. <br/>new Vue({<br/>el: '#app',<br/>data: {<br/>src: 'https://picsum.photos/200/300',<br/>alt: 'A random pic from the web.'<br/>}<br/>})<br/>
    https://vuejs.org/v2/guide/syntax.html attributes binding

    View full-size slide



  17. I’m not rendered
    I’m hidden [i.e. display: none]

    <br/>new Vue({<br/>el: '#app',<br/>data: {<br/>visible: false<br/>}<br/>})<br/>
    https://vuejs.org/v2/guide/syntax.html conditional render/display

    View full-size slide




  18. {{ todo }}


    <br/>new Vue({<br/>el: '#app',<br/>data: {<br/>todos: ['eat', 'sleep', 'repeat']<br/>}<br/>})<br/>
    https://vuejs.org/v2/guide/syntax.html loop through elements

    View full-size slide



  19. {{ message }}
    Reset

    <br/>new Vue({<br/>el: '#app',<br/>data: {<br/>message: 'Please, reset me!'<br/>}<br/>})<br/>
    https://vuejs.org/v2/guide/syntax.html handle user input

    View full-size slide



  20. you typed: {{ message }}


    <br/>new Vue({<br/>el: '#app',<br/>data: {<br/>message: ''<br/>}<br/>})<br/>
    https://vuejs.org/v2/guide/syntax.html handle user input

    View full-size slide

  21. syntax
    Focusing
    - semantic code
    - easy to read
    - easy to maintain
    - easy to share code
    in teams.

    View full-size slide

  22. setting data
    Focusing
    set data in vue.js is not async.
    is the same as you do in javascript.
    this.setState({ counter: this.state.counter++ })
    this.setState({ counter: this.state.counter++ })
    have you ever tried?

    View full-size slide

  23. computed
    and methods
    website:
    https://vuejs.org/

    View full-size slide


  24. The higher number is: {{ higherNumber }}

    new Vue({
    el: '#app',
    data: {
    numbers: [100, 2, 345, 42, 56]
    },
    computed: {
    higherNumber: function () {
    return Math.max(...this.numbers)
    }
    }
    })
    https://vuejs.org/v2/guide/syntax.html computed

    View full-size slide


  25. I am visible.
    toggle visibility

    new Vue({
    el: '#app',
    data: {
    visible: false
    },
    methods: {
    toggleVisibility: function (event) {
    this.visible = !this.visible
    }
    }
    })
    https://vuejs.org/v2/guide/syntax.html methods

    View full-size slide

  26. computed
    Focusing
    - runs when its
    own dependencies
    updates
    - called and used
    as data properties
    - is cached

    View full-size slide

  27. methods
    Focusing
    - runs when
    you need to use it
    - called as a
    function in event
    bindings
    - is not cached

    View full-size slide

  28. summary
    Focusing
    - no this hell (context is auto-binded)
    - no async data beginner failures
    - no shouldUpdate worries
    - no build steps needed

    View full-size slide

  29. content
    management with
    components
    website:
    https://vuejs.org/v2/components.html

    View full-size slide









  30. https://vuejs.org/v2/components.html
    components
    tree structure

    View full-size slide

  31. component
    Focusing
    - encapsulation of elements
    that can be accessed
    through one single element.
    - encapsulation of logic,
    but in different instances
    - encapsulation of style (module, scoped)

    View full-size slide

  32. // ...in root component



    Vue.component('card-item', {
    template: '...',
    data: function () {
    return {
    ...
    }
    }
    })
    https://vuejs.org/v2/components.html

    View full-size slide

  33. <br/><article><br/><h2> {{ title }} </h2><br/><img :src="img" :alt="title" /><br/></article><br/>
    Vue.component('card-item', {
    template: '#card-template',
    data: function () {
    return {
    title: 'A card title'
    img: 'https://picsum.photos/200/300'
    }
    }
    })
    https://vuejs.org/v2/components.html

    View full-size slide

  34. {
    ...
    data () {
    return {
    title: 'A card title'
    img: 'https://picsum.photos/200/300'
    }
    }
    ...
    }
    https://vuejs.org/v2/components.html
    data is a function

    View full-size slide

  35. now we can encapsulate logic
    and style in a component.
    by for now, we are using it
    statically.
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide

  36. Vue.component('card-item', {
    template: '#card-template',
    props: ['title', 'img']
    })
    // ...in root component

    title="Title from parent"
    src="https://picsum.photos/200/300" />

    https://vuejs.org/v2/components.html
    … better use props

    View full-size slide


  37. propA="..."
    propB="..."
    propC="..."
    propD="..."
    ...
    />

    https://vuejs.org/v2/components.html
    this could be sick

    View full-size slide

  38. Vue.component('card-item', {
    inheritAttrs: false, // important to avoid unwanted markup
    template: '#card-template',
    props: ['title', 'img']
    })



    new Vue({
    el: '#app',
    data: {
    card: { title: 'Card title', img: 'https://picsum.photos/200/300' }
    }
    })
    https://vuejs.org/v2/components.html
    v-bind to the rescue

    View full-size slide

  39. lifecycle
    Focusing
    each vue instance goes through
    a series of initialization steps
    when it’s created running functions
    called lifecycle hooks,
    giving users the opportunity to
    add their own code at specific stages.

    View full-size slide

  40. Vue.component('card-item', {
    template: '...',
    data: function () {
    return {
    image: '...'
    }
    },
    mounted: function () {
    var image = this.image
    this.image = '...my-spinner-image.png'
    new imagesLoaded(this.$el, { this.image = image })
    }
    })
    https://vuejs.org/v2/components.html

    View full-size slide




  41. new Vue({
    el: '#app',
    data: {
    componentName: '...'
    }
    })
    https://vuejs.org/v2/components.html
    the :is attribute

    View full-size slide


  42. // ...

    <br/>// export default {}<br/>
    <br/>// ...<br/>
    https://vuejs.org/v2/components.html
    single file
    components

    View full-size slide

  43. update
    data with events
    website:
    https://vuejs.org/v2/style-guide/

    View full-size slide

  44. by passing props we can mutate
    child data from parent.
    how can we mutate
    parent data from its children?
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide

  45. <br/><div><br/><button @click="$emit('next-slide')"> Next slide </button><br/><button @click="$emit('prev-slide')"> Prev slide </button><br/></div><br/>
    Vue.component('slider-pag', {
    template: '#slider-pag-template'
    })

    @next-slide="slide++" @prev-slide="slide--" />

    https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

    View full-size slide

  46. and what if we want
    to change data...
    ...wherever in the
    component tree?
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide

  47. // broadcast event
    var bus = new Vue()
    // send event
    bus.$emit('event-name', ...arguments)
    // receive event
    bus.$on('event-name', ...arguments)
    // unbind event
    bus.$off('event-name')
    event bus
    https://vuejs.org/v2/components.html#Content-Distribution-with-Slots

    View full-size slide

  48. // send event
    new Vue({
    ...
    methods: {
    myMethod: function () {
    bus.$emit('event-name', ...arguments)
    }
    }
    })
    event bus
    https://vuejs.org/v2/components.html#Content-Distribution-with-Slots

    View full-size slide

  49. // receive event
    new Vue({
    ...
    created: function () {
    bus.$on('event-name', myMethod)
    },
    methods: {
    myMethod: function () { ... }
    }
    })
    event bus
    https://vuejs.org/v2/components.html#Content-Distribution-with-Slots

    View full-size slide

  50. native
    transitions
    website:
    https://vuejs.org/v2/guide/transitions.html

    View full-size slide

  51. transitions
    Focusing
    transition component allows
    to add enter/leave effects to:
    - conditions (v-if / v-show)
    - dynamic components
    - component root node
    - switching :key attribute
    website:
    https://vuejs.org/v2/guide/transitions.html

    View full-size slide

  52. website:
    https://vuejs.org/v2/guide/transitions.html

    View full-size slide



  53. I am visible.

    toggle

    <br/>.fade-enter-active, .fade-leave-active {<br/>transition: opacity .5s;<br/>}<br/>.fade-enter, .fade-leave-to {<br/>opacity: 0;<br/>}<br/>
    https://vuejs.org/v2/guide/syntax.html

    View full-size slide



  54. I am visible.

    toggle

    <br/>.fade-enter-active {<br/>transition: opacity .2s ease;<br/>}<br/>.fade-leave-active {<br/>transition: opacity .3;<br/>}<br/>.fade-enter, .fade-leave-to {<br/>opacity: 0;<br/>}<br/>
    https://vuejs.org/v2/guide/syntax.html

    View full-size slide






  55. <br/>new Vue({<br/>el: '#app',<br/>props: ['pageName']<br/>})<br/>
    https://vuejs.org/v2/guide/syntax.html

    View full-size slide

  56. https://jsfiddle.net/loregirardi/52mn0sqL/
    a fiddle

    View full-size slide






  57. <br/>new Vue({<br/>el: '#app',<br/>props: ['pageName'],<br/>methods: {<br/>enterAnimation (el, done) { /* your code */ }<br/>}<br/>})<br/>
    https://vuejs.org/v2/guide/syntax.html

    View full-size slide

  58. async call
    best practices
    website:
    https://vuejs.org/

    View full-size slide

  59. in real use cases
    we have to display
    data from server.
    what’s the better way
    to achieve that?
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide




  60. {{ person.name }}


    <br/>new Vue({<br/>el: '#star-wars',<br/>data: {<br/>people: []<br/>},<br/>created: function () {<br/>fetch('https://swapi.co/api/people').then(function (response) {<br/>this.people = response.results<br/>})<br/>}<br/>})<br/>

    View full-size slide

  61. in fast connections
    we will immediately see
    results.
    how can we add a loader
    for slow connections?
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide

  62. https://jsfiddle.net/loregirardi/5x6392wr/
    a fiddle

    View full-size slide

  63. five
    reasons why
    website:
    https://vuejs.org/

    View full-size slide

  64. no build steps
    required
    Easy to start up, also in old legacy
    projects.
    website:
    https://vuejs.org/

    View full-size slide

  65. effortless
    api
    update and modify data is easy.
    context is auto-binded and rendering
    updates are out of the box.
    website:
    https://vuejs.org/

    View full-size slide

  66. add modularly
    what you need
    if your app / website needs to scale
    just add modules from vue.js ecosystem
    to fit your needs.
    website:
    https://vuejs.org/

    View full-size slide

  67. no es6 knowledge
    needed
    i am not telling you to not learn es6.
    but if you want you can still use
    old es2015 syntax so
    beginner / not-frontend dev
    can easily get into it.
    website:
    https://vuejs.org/

    View full-size slide

  68. super fast on
    mobile devices
    is easy achieve fast rendering on desktop,
    vue.js get the best experience on mobile
    devices.
    website:
    https://vuejs.org/

    View full-size slide

  69. useful resources
    - curated list: https://github.com/vuejs/awesome-vue
    - official forum: https://forum.vuejs.org/
    - vuex: https://github.com/vuejs/vuex
    - vue-router: https://router.vuejs.org/en/
    - vue-cli: https://github.com/vuejs/vue-cli
    - server-side rendering: https://vuejs.org/v2/guide/ssr.html
    website:
    https://vuejs.org/

    View full-size slide

  70. vue people
    - evan you: https://twitter.com/youyuxi
    - kazupon: https://twitter.com/kazu_pon
    - linusborg: https://twitter.com/Linus_Borg
    - akryum: https://twitter.com/Akryum
    - katashin: https://twitter.com/ktsn
    - sarah drasner: https://twitter.com/sarah_edo
    website:
    https://vuejs.org/team.html

    View full-size slide

  71. vue community is
    growing quickly but is recent.
    let’s share knowledge,
    code and passion.
    twitter:
    @loregirardi
    github:
    @liqueflies

    View full-size slide