Level up apps and websites with vue.js

1. LEVEL-UP APPS & WEBSITES WITH VUE.JS

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

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

4. hello commit

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

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

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

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

11. 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

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

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

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

16. 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)

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

18. website: https://vuejs.org/

19. website: https://vuejs.org/

21. <script src="vue.js"></script> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello commit people!' } }) </script> https://vuejs.org/ hello world

25. <script src="vue.js"></script> <div id="app"> <img v-bind:src="src" :alt="alt" /> </div> <script> new Vue({ el: '#app', data: { src: 'https://picsum.photos/200/300', alt: 'A random pic from the web.' } }) </script> https://vuejs.org/v2/guide/syntax.html attributes binding

29. <script src="vue.js"></script> <div id="app"> <p v-if="visible"> I’m not rendered </p> <p v-show="visible"> I’m hidden [i.e. display: none] </p> </div> <script> new Vue({ el: '#app', data: { visible: false } }) </script> https://vuejs.org/v2/guide/syntax.html conditional render/display

30. <script src="vue.js"></script> <div id="app"> <p v-if="visible"> I’m not rendered </p> <p v-show="visible"> I’m hidden [i.e. display: none] </p> </div> <script> new Vue({ el: '#app', data: { visible: false } }) </script> https://vuejs.org/v2/guide/syntax.html conditional render/display

31. <script src="vue.js"></script> <ul id="app"> <li v-for="todo in todos" :key="todo"> {{ todo }} </li> </ul> <script> new Vue({ el: '#app', data: { todos: ['eat', 'sleep', 'repeat'] } }) </script> https://vuejs.org/v2/guide/syntax.html loop through elements

32. <script src="vue.js"></script> <ul id="app"> <li v-for="todo in todos" :key="todo"> {{ todo }} </li> </ul> <script> new Vue({ el: '#app', data: { todos: ['eat', 'sleep', 'repeat'] } }) </script> https://vuejs.org/v2/guide/syntax.html loop through elements

34. <script src="vue.js"></script> <div id="app"> <p> {{ message }} </p> <button @click="message = ''"> Reset </button> </div> <script> new Vue({ el: '#app', data: { message: 'Please, reset me!' } }) </script> https://vuejs.org/v2/guide/syntax.html handle user input

35. <script src="vue.js"></script> <div id="app"> <p> {{ message }} </p> <button @click="message = ''"> Reset </button> </div> <script> new Vue({ el: '#app', data: { message: 'Please, reset me!' } }) </script> https://vuejs.org/v2/guide/syntax.html handle user input

36. <script src="vue.js"></script> <div id="app"> <p> you typed: {{ message }} </p> <input v-model="message" placeholder="start typing..." /> </div> <script> new Vue({ el: '#app', data: { message: '' } }) </script> https://vuejs.org/v2/guide/syntax.html handle user input

37. <script src="vue.js"></script> <div id="app"> <p> you typed: {{ message }} </p> <input v-model="message" placeholder="start typing..." /> </div> <script> new Vue({ el: '#app', data: { message: '' } }) </script> https://vuejs.org/v2/guide/syntax.html handle user input

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

40. 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?

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

43. <ul id="app"> <p> The higher number is: {{ higherNumber }} </p> </ul> 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

46. <div id="app"> <p v-show="visible"> I am visible. </p> <button @click="toggleVisibility"> toggle visibility </button> </div> new Vue({ el: '#app', data: { visible: false }, methods: { toggleVisibility: function (event) { this.visible = !this.visible } } }) https://vuejs.org/v2/guide/syntax.html methods

47. <div id="app"> <p v-show="visible"> I am visible. </p> <button @click="toggleVisibility"> toggle visibility </button> </div> new Vue({ el: '#app', data: { visible: false }, methods: { toggleVisibility: function (event) { this.visible = !this.visible } } }) https://vuejs.org/v2/guide/syntax.html methods

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

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

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

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

54. <the-header /> <aside> <main-menu /> </aside> <main> <blog-posts /> </main> <the-footer /> https://vuejs.org/v2/components.htm l components tree structure

55. 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)

56. // ...in root component <div id="app"> <card-item /> </div> Vue.component('card-item', { template: '...', data: function () { return { ... } } }) https://vuejs.org/v2/components.html

57. // ...in root component <div id="app"> <card-item /> </div> <script> Vue.component('card-item', { template: '...', data: function () { return { ... } } }) </script> https://vuejs.org/v2/components.html

58. <script type="text/x-template" id="card-template"> <article> <h2> {{ title }} </h2> <img :src="img" :alt="title" /> </article> </script> 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

59. <script type="text/x-template" id="card-template"> <article> <h2> {{ title }} </h2> <img :src="img" :alt="title" /> </article> </script> 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

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

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

64. Vue.component('card-item', { template: '#card-template', props: ['title', 'img'] }) // ...in root component <div id="app"> <card-item title="Title from parent" src="https://picsum.photos/200/300" /> </div> https://vuejs.org/v2/components.html … better use props

65. Vue.component('card-item', { template: '#card-template', props: ['title', 'img'] }) // ...in root component <div id="app"> <card-item title="Title from parent" src="https://picsum.photos/200/300" /> </div> https://vuejs.org/v2/components.html … better use props

66. <div id="app"> <card-item propA="..." propB="..." propC="..." propD="..." ... /> </div> https://vuejs.org/v2/components.html this could be sick

67. Vue.component('card-item', { inheritAttrs: false, // important to avoid unwanted markup template: '#card-template', props: ['title', 'img'] }) <div id="app"> <card-item v-bind="card" /> </div> 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

68. Vue.component('card-item', { inheritAttrs: false, // important to avoid unwanted markup template: '#card-template', props: ['title', 'img'] }) <div id="app"> <card-item v-bind="card" /> </div> 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

69. 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.

70. 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

73. <div id="app"> <component :is="componentName" /> </div> new Vue({ el: '#app', data: { componentName: '...' } }) https://vuejs.org/v2/components.html the :is attribute

74. <template lang="pug"> // ... </template> <script> // export default {} </script> <style lang="sass|scss|stylus" module|scoped> // ... </style> https://vuejs.org/v2/components.html single file components

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

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

78. <script type="text/x-template" id="slider-pag-template"> <div> <button @click="$emit('next-slide')"> Next slide </button> <button @click="$emit('prev-slide')"> Prev slide </button> </div> </script> Vue.component('slider-pag', { template: '#slider-pag-template' }) <div id="app"> <slider-pag @next-slide="slide++" @prev-slide="slide--" /> </div> https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

79. <script type="text/x-template" id="slider-pag-template"> <div> <button @click="$emit('next-slide')"> Next slide </button> <button @click="$emit('prev-slide')"> Prev slide </button> </div> </script> Vue.component('slider-pag', { template: '#slider-pag-template' }) <div id="app"> <slider-pag @next-slide="slide++" @prev-slide="slide--" /> </div> https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events

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

81. // 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

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

83. // 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

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

86. 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

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

88. <div id="app"> <transition name="fade"> <p v-show="visible"> I am visible. </p> </transition> <button @click="visible = !visible"> toggle </button> </div> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> https://vuejs.org/v2/guide/syntax.html

89. <div id="app"> <transition name="fade"> <p v-show="visible"> I am visible. </p> </transition> <button @click="visible = !visible"> toggle </button> </div> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> https://vuejs.org/v2/guide/syntax.html

91. <div id="app"> <transition name="fade"> <p v-show="visible"> I am visible. </p> </transition> <button @click="visible = !visible"> toggle </button> </div> <style> .fade-enter-active { transition: opacity .2s ease; } .fade-leave-active { transition: opacity .3; } .fade-enter, .fade-leave-to { opacity: 0; } </style> https://vuejs.org/v2/guide/syntax.html

92. <div id="app"> <transition name="fade"> <p v-show="visible"> I am visible. </p> </transition> <button @click="visible = !visible"> toggle </button> </div> <style> .fade-enter-active { transition: opacity .2s ease; } .fade-leave-active { transition: opacity .3; } .fade-enter, .fade-leave-to { opacity: 0; } </style> https://vuejs.org/v2/guide/syntax.html

94. <div id="app"> <transition name="fade" mode="out-in|in-out"> <component :is="pageName" /> </transition> </div> <script> new Vue({ el: '#app', props: ['pageName'] }) </script> https://vuejs.org/v2/guide/syntax.html

95. <div id="app"> <transition name="fade" mode="out-in|in-out"> <component :is="pageName" /> </transition> </div> <script> new Vue({ el: '#app', props: ['pageName'] }) </script> https://vuejs.org/v2/guide/syntax.html

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

97. <div id="app"> <transition @enter="enterAnimation"> <component :is="pageName" /> </transition> </div> <script> new Vue({ el: '#app', props: ['pageName'], methods: { enterAnimation (el, done) { /* your code */ } } }) </script> https://vuejs.org/v2/guide/syntax.html

98. <div id="app"> <transition @enter="enterAnimation"> <component :is="pageName" /> </transition> </div> <script> new Vue({ el: '#app', props: ['pageName'], methods: { enterAnimation (el, done) { /* your code */ } } }) </script> https://vuejs.org/v2/guide/syntax.html

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

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

103. <script src="vue.js"></script> <ul id="star-wars"> <li v-for="person in people" :key="person.name"> {{ person.name }} </li> </ul> <script> new Vue({ el: '#star-wars', data: { people: [] }, created: function () { fetch('https://swapi.co/api/people').then(function (response) { this.people = response.results }) } }) </script>

104. <script src="vue.js"></script> <ul id="star-wars"> <li v-for="person in people" :key="person.name"> {{ person.name }} </li> </ul> <script> new Vue({ el: '#star-wars', data: { people: [] }, created: function () { fetch('https://swapi.co/api/people').then(function (response) { this.people = response.results }) } }) </script>

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

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

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

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

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

110. 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/

111. 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/

112. 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/

114. 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/

115. 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

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

117. thank you

Level up apps and websites with vue.js

More Related Content

What's hot (20)

Similar to Level up apps and websites with vue.js (20)

Recently uploaded (20)

Level up apps and websites with vue.js

Editor's Notes