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

Nice to met Vue

Nice to met Vue

Vue.js 2 Introduction, Overview, Basics and Learnings from a practical standpoint after successful usage in a medium scaled customer project. Presentation held by Ben Richter at the Javascript User Group in Dresden.

Demo application: https://github.com/BenRichter/vue-todo

move:elevator

April 13, 2018
Tweet

More Decks by move:elevator

Other Decks in Technology

Transcript

  1. Overview Release 2013 by Evan You (formerly Meteor and Google)


    Open Source Single-Page-Webapps, MVVM
 Simplicity, Performance, Singlefile Components Popularity: 83K Github stars (React 88K)
 Enterprise: Gitlab, Alibaba (china google), nintendo https://vuejs.org/v2/guide/comparison.html Eco-system
  2. Cherry Picker Angular: HTML Templating engine with Directives 
 —>

    easier migration of existing Code
 Typescript-Support React: Virtual DOM, Props, Redux-like store & routing 
 Scoped CSS, CLI generator (multiple templates) Polymer / Riot: Singlepage components Coherent eco-system: vue-router, Vuex
 Low learning curve. Intuitive. Fun!
 https://www.quora.com/Should-I-learn-React-js-or-Vue-js-Is-it-worth-it-if-I-learn-Vue-js-first-and-then-React- js/answer/Andy-Merskin?share=c40c234d&srid=TrWC The Best of all worlds
  3. Starting a project IE8 and up with babel-polyfill CLI generator

    npm install -g vue-cli vue init webpack todo-app CDN in production 
 <script src=„https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2
  4. Mustache interpolation {{ value }} <span>Message: {{ msg }}</span> Conditional

    rendering v-if, v-else, v-if-else <p v-if="seen">Now you see me</p> Visibility v-show <h1 v-show="ok">Hello!</h1> List loops v-for <ul id="example-2"> <li v-for="(item, index) in items" key="index"> {{ index }} - {{ item.message }} </li> </ul> Templating https://vuejs.org/v2/guide/syntax.html#Directives <template>
  5. Dynamic property binding v-bind / : <div v-bind:class="{ active: isActive,

    'text-danger': hasError }"></div> :class="todo.done ? 'green' : 'red'" Two-way data binding v-model <input type='text' v-model="todo.title" > Event listener v-on / @ <!-- full syntax --> <a v-on:click="doSomething"> ... </a> <!-- shorthand --> <a @click="doSomething"> ... </a> Directives https://vuejs.org/v2/guide/syntax.html#Directives
  6. Data, Methods, Computed, Watch <script> data() function! else shared 


    between instances props: methods: computed: watch: generic observer, good for heavy async computation https://vuejs.org/v2/guide/computed.html data() { return { todos: [‘string‘], } }, // Like methods, but are cached until dependency changes computed: { counterDone () { return this.todos.filter(todo => todo.done).length }, },
  7. Lifecycle Hooks Lifecycle created mounted updated destroyed (+ beforeCreate, …

    ) https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram // no arrow functions! needs this context to vue instance created: function () { console.log('a is: ' + this.isCreating) },
  8. Quasi standard Plugins Vuex State management Vue-router (Vue-resource HTTP-client —>

    Axios) Vue-test-utils Unit testing (+ Jest, Mocha, tape, AVA) Documentation DevTools: Components & Vuex (Chrome & Firefox) Server-Side Rendering Cross-Plattform: Weex, NativeScript-Vue More goodies
  9. Learnings Low learning curve, full speed in few weeks Very

    good Material Design implementation: vuetifyjs.com Always refactoring: first KISS then DRY
 (When separate components? Use data / props / store?)
  10. Styleguide <multi-word> Components, prefix —> prevent Namespace errors prefix single-instance:

    TheHeader prefix with parent/coupled name: TodoList, TodoListButton data () {} must be a function, else shared between instances Specific props: https://vuejs.org/v2/style-guide/ status: { type: String, required: true, validator: function (value) { return ['syncing', 'error'].indexOf(value) !== -1 }, },