Save 37% off PRO during our Black Friday Sale! »

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.

4ca7c621719678e8a8502ed44df4be1b?s=128

Lorenzo Girardi

February 22, 2018
Tweet

Transcript

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

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

  3. i am a front-end dev and a passionate musician twitter:

    @loregirardi github: @liqueflies
  4. digital company with strong focus on strategy and technology website:

    https://www.develondigital.com/
  5. international group +15 years +55 people +5 departments website: https://www.develondigital.com/

    thanks for having us!
  6. is it easy to build websites? twitter: @loregirardi github: @liqueflies

  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
  8. + = website: https://vuejs.org/

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

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

  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)
  13. basic concepts website: https://vuejs.org/

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

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

  16. <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
  17. None
  18. <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
  19. None
  20. <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
  21. <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
  22. None
  23. <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
  24. <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
  25. None
  26. syntax Focusing - semantic code - easy to read -

    easy to maintain - easy to share code in teams.
  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?
  28. computed and methods website: https://vuejs.org/

  29. <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
  30. <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
  31. computed Focusing - runs when its own dependencies updates -

    called and used as data properties - is cached
  32. methods Focusing - runs when you need to use it

    - called as a function in event bindings - is not cached
  33. summary Focusing - no this hell (context is auto-binded) -

    no async data beginner failures - no shouldUpdate worries - no build steps needed
  34. content management with components website: https://vuejs.org/v2/components.html

  35. None
  36. <the-header /> <aside> <main-menu /> </aside> <main> <blog-posts /> </main>

    <the-footer /> https://vuejs.org/v2/components.html components tree structure
  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)
  38. // ...in root component <div id="app"> <card-item /> </div> Vue.component('card-item',

    { template: '...', data: function () { return { ... } } }) https://vuejs.org/v2/components.html
  39. <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
  40. None
  41. { ... data () { return { title: 'A card

    title' img: 'https://picsum.photos/200/300' } } ... } https://vuejs.org/v2/components.html data is a function
  42. None
  43. now we can encapsulate logic and style in a component.

    by for now, we are using it statically. twitter: @loregirardi github: @liqueflies
  44. 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
  45. <div id="app"> <card-item propA="..." propB="..." propC="..." propD="..." ... /> </div>

    https://vuejs.org/v2/components.html this could be sick
  46. 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
  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.
  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
  49. <div id="app"> <component :is="componentName" /> </div> new Vue({ el: '#app',

    data: { componentName: '...' } }) https://vuejs.org/v2/components.html the :is attribute
  50. <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
  51. update data with events website: https://vuejs.org/v2/style-guide/

  52. by passing props we can mutate child data from parent.

    how can we mutate parent data from its children? twitter: @loregirardi github: @liqueflies
  53. <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
  54. and what if we want to change data... ...wherever in

    the component tree? twitter: @loregirardi github: @liqueflies
  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
  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
  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
  58. native transitions website: https://vuejs.org/v2/guide/transitions.html

  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
  60. website: https://vuejs.org/v2/guide/transitions.html

  61. <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
  62. <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
  63. <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
  64. https://jsfiddle.net/loregirardi/52mn0sqL/ a fiddle

  65. <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
  66. async call best practices website: https://vuejs.org/

  67. in real use cases we have to display data from

    server. what’s the better way to achieve that? twitter: @loregirardi github: @liqueflies
  68. <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>
  69. in fast connections we will immediately see results. how can

    we add a loader for slow connections? twitter: @loregirardi github: @liqueflies
  70. https://jsfiddle.net/loregirardi/5x6392wr/ a fiddle

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

  72. no build steps required Easy to start up, also in

    old legacy projects. website: https://vuejs.org/
  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/
  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/
  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/
  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/
  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/
  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
  79. vue community is growing quickly but is recent. let’s share

    knowledge, code and passion. twitter: @loregirardi github: @liqueflies
  80. thank you