Level-up apps and websites with vue.js

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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 Slide

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

   View Slide

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

   View Slide

10. View Slide

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

    View Slide

12. 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 Slide

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

    View Slide

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

    View Slide

15. website:
    https://vuejs.org/
    

    View Slide

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

    View Slide

17. View Slide

18. 
    
    
    
    <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 Slide

19. View Slide

20. 
    
    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 Slide

21. 
    
    
    {{ 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 Slide

22. View Slide

23. 
    
    {{ 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 Slide

24. 
    
    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 Slide

25. View Slide

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

    View Slide

27. 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 Slide

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

    View Slide

29. 
    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 Slide

30. 
    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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. View Slide

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

    View Slide

37. 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 Slide

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

    View Slide

39. <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 Slide

40. View Slide

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

    View Slide

42. View Slide

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

    View Slide

44. 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 Slide

45. 
    propA="..."
    propB="..."
    propC="..."
    propD="..."
    ...
    />
    
    https://vuejs.org/v2/components.html
    this could be sick
    

    View Slide

46. 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 Slide

47. 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 Slide

48. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

53. <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 Slide

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

    View Slide

55. // 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 Slide

56. // 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 Slide

57. // 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 Slide

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

    View Slide

59. 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 Slide

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

    View Slide

61. 
    
    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 Slide

62. 
    
    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 Slide

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

    View Slide

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

    View Slide

65. 
    
    
    
    
    <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 Slide

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

    View Slide

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

    View Slide

68. 
    
    
    {{ 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

73. 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 Slide

74. 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 Slide

75. 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 Slide

76. 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 Slide

77. 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 Slide

78. 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 Slide

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

    View Slide

80. thank you
    

    View Slide