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

Transcript

1. „Nice to met Vue“ Vue.js 2 Overview, Basics, Learnings
2. Ben Richter Frontend Developer @move:elevator
3. General Angular / React / Vue
4. 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
5. 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
6. Basics Startup, Templating, Structure, Plugins
7. 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/vue@2.5.16/dist/vue.min.js"></script> https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2
8. 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>
9. 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
10. 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 }, },
11. 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) },
12. 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
13. Let’s have a look Router, Vuex, Semantic-UI, Parcel-Bundler VueDo https://github.com/BenRichter/vue-todo
14. Learnings
15. 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?)
16. 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 }, },
17. move:elevator JavaScript, PHP, Typo3, Projectmanager … Neustadt —> Food Modern light office Terrace Kicker table Coffee Club Mate
18. Vue ist FUN