Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vue business first

391 views

Published on

Vue is JavaScript framework for building component based UI. Why it became popular and what makes Vue business-first.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Vue business first

  1. 1. Vue: business-first
  2. 2. About me Front-end developer in YouWe Passion to comfortable UX Developing front-end with Vue for POS platform 2/64
  3. 3. Agenda • What is Vue? • Why Vue became a popular? • How to start with Vue? • How component looks like? • Events handling with Vue? • Data-philosophy of Vue • Vuex as official state manager • Vue Router • Weak sides of Vue • Extra features of Vue 3/64
  4. 4. What is Vue? • Component based framework • Reactive (ES5) • Virtual DOM (Snabbdom) • Used in Alibaba/Taobao/Gitlab 4/64
  5. 5. Advantages of Vue • Fast (~2x faster than React/Angular/Polymer) • Small size (20kb min+gzip) • Low feature delivery time • Incrementaly adoptable 5/64
  6. 6. 6/64http://www.timqian.com/star-history/#vuejs/vue&angular/angular&facebook/react
  7. 7. Why Vue became popular 7/64
  8. 8. Why Vue became popular • Learning curve looks smooth in Vue • Component approach good as mental model • Corporate support (Alibaba/Taobao) 8/64
  9. 9. 9
  10. 10. Start with CDN <script src="https://cdnjs.cloudflare.com/ajax /libs/vue/2.4.4/vue.min.js"></script> 10/64
  11. 11. Start with npm $ npm install –g vue-cli $ vue init webpack projectName # choose some to configuritaons for project $ cd projectName $ npm install $ npm run dev 11
  12. 12. Components 12
  13. 13. Single File Component Component.vue <template> … </temlate> <script> … </script> <style> … </style> 13/64
  14. 14. Template <template> <div> <p class=“greeting” :class=“{‘text-bold’: isBold}”> Hello {{ name }}</p> <button @click=“toggleMessageBoldness”> Click me</button> <div> </template> 14/64 Template Script Style
  15. 15. Script <script> export default { data () { return { name: ‘Lviv’, isBold: false } }, methods: { toggleMessageBoldness() { this.isBold = !this.isBold; } } } </script> 15/64 Template Script Style
  16. 16. Styles <style scoped> .greeting { color: red } .text-bold { font-weight: bold } </style> 16/64 Template Script Style
  17. 17. Preprocessors in Vue 17
  18. 18. Preprocessors in Vue • Lang attribute on template/script/style • Webpack Loader for preprocessor 18/64
  19. 19. Preprocessors in Vue <template lang=“pug”> div p.greeting Hello, {{ name }} </template> <style lang=“scss”> $primary-color: red; .greeting { color: $primary-color; } </style> 19/64
  20. 20. CSS preprocessor preset. <style lang=“scss”> @import(‘~assets/styles/preset.scss’); .greeting { color: $variable-from-preset; } </style> 20/64
  21. 21. Events handling <template> <form @submit.prevent.stop=“submitCallback”> <input type=“text” @focus=“handleFocus”/> </form> </template> 22/64
  22. 22. Key events handling <template> <form @submit.prevent.stop=“submitCallback”> <input type=“text” @keyup.13=“handleEnter”/> </form> </template> 23/64
  23. 23. Key events config Vue.config.keyCodes = { enter: 13, escape: 27 “left-arrow”: 37 } 24/64
  24. 24. Init config Vue.config.keyCodes = { … }; new Vue ({…}); 25/64
  25. 25. In component <template> <input type=“text” @key-up.enter=“handleEnter()”> </template> 26/64
  26. 26. Vue Reactivity 27
  27. 27. Component state is reactive export default { data () { return { transactions: [] }; }, methods: { loadTransactions () { api.loadTransactions().then(transactions => { this.transactions = transactions; }); } } } 28/64
  28. 28. Watch changes export default { data () { return { transactionsCounter: 0 }; }, watch: { transactionsCounter (newValue) { // send to marketingTool metrics new value } } } 29/64
  29. 29. Computed props export default { data () { return { firstName: ‘John’, lastName: ‘Doe’, alias: ‘Gun’ }; }, computed: { formattedUserName() { return this.firstName + this.firstName && this.alias ? ` (${this.alias)`: this.alias + (this.firstName || this.alias) && this.lastName ? `${lastName}`: this.lastName; } } } 30/64
  30. 30. Vue data-flow philosophy
  31. 31. philosophy of Vue: props down, events up Parent Child 32/64 Props Events
  32. 32. Props down from parent to child <template> <div> <p>{{ selectedValue }}</p> <custom-select :value=“selectedValue” :options=“parentsOptions”> </div> </template> 33/64
  33. 33. Events up from Child to Parent <script> export default { props: { value: { type: Array } }, methods: { pickValue (newSelectedValue) { this.$emit(‘change’, newSelectedValue); } } } </script> 34/64
  34. 34. Handle changes <template> <div> <p>{{ selectedValue }}</p> <custom-select @change=“handleChangeSelect” :value=“selectedValue” :options=“parentsOptions”> </div> </template> <script> export default { methods: { handleChangeSelect (newSelectedValue) { this.selectedValue = newSelectedValue; } } } </script> 35/64
  35. 35. Two way data-binding with .sync <template> <div> <p>{{ selectedValue }}</p> <custom-select :value.sync=“selectedValue” :options=“parentsOptions”> </div> </template> 36
  36. 36. Update value from Child <script> export default { props: { value: { type: Array } }, methods: { pickValue (valueThatUserPickedInSelect) { this.$emit(‘update:value’, valueThatUserPickedInSelect); } } } </script> 37/64
  37. 37. Global data flow • Event bus • Vuex 38/64
  38. 38. Event Bus export const Event Bus = new Vue (); 39/64
  39. 39. Event bus EventBus.$emit(‘task:reload’) EventBus.$on(‘task:reload’,this.reload); 40/64
  40. 40. Vuex – state management 41/64
  41. 41. Vue Devtools 42/64
  42. 42. Vue Router
  43. 43. Route example Import Tasks from ‘src/components/Tasks’ Import TaskById from ‘src/components/TaskById’ export default new Router({ … , routes: [{ path: '/tasks', name: ‘Task', component: Tasks, children: [{ name: TaskByID', path: ‘:id', component: TaskById }] }] }) 44/64
  44. 44. Router link <router-link :to=“{name: ‘TaskById’, params: {‘id’: 10}}” tag=“a”> </router-link> 45
  45. 45. Router View <router-view> // here will be rendered route- component </router-view> 46/64
  46. 46. Extra features of Vue 47
  47. 47. Vue supports JSX <script> export default { data () { name: ‘John Doe’ }, render(createElement) { return createElement(<h1>Hello, { this.name }</h1>); } } </script> 48/64
  48. 48. Dont forget plugin { test: /.vue$/, exclude: [/node_modules/], use: [{ loader: ‘babel-loader’, options: { presets: [‘es2015’], plugins: [‘transfrom-vue-jsx’] } }] } 49/64
  49. 49. Typescript support <template> <h1 @click=“hello”> Hello {{ name }}</h1> </template> <script> Import { Vue, Component } from ‘av-ts’ @Component export default class App extends Vue { name: string = ‘John Doe’ hello(): void { console.log(‘name’, this.name) } } </script> 50/64
  50. 50. IDE supports Vue • Visual studio code has full Vue support • JetBrains products has plugins for Vue • Sublime/Atom has plugins for Vue 51/64
  51. 51. Weak parts of Vue • Best practices • Styles with preprocessors • Plugins implemented by chinese comminuty (in very rare situations) 52/64
  52. 52. What’s more with Vue
  53. 53. Server side rendering 54/64
  54. 54. Native Mobile Applications 55/64
  55. 55. Electron applications 59/64
  56. 56. Silver bullet? 57/64
  57. 57. Conclusion • Vue is production ready • Ecosystem became more and more stable • Easy to learn • Fast without optimizations • Low feature delivery time 58/64
  58. 58. 59
  59. 59. Contacts Vitalii Ratyshyi Email: v.ratyshnij@gmail.com SkypeId: misreadable Official Russian Vue telegram-chat: @vuejs_ru 60/64
  60. 60. Thanks for attention Vitalii Ratyshyi Email: v.ratyshnij@gmail.com SkypeId: misreadable Official Russian Vue telegram-chat: @vuejs_ru 61/64

×