AVUESOME - Why Vue.js is so great

My slides about main reasons to adopt Vue.js @FEVR, Verona (IT).

Event: http://www.fevr.it/eventi/2017/05/avuesome-why-vuejs-is-so-great/

Transcript

1. AVUESOME Why Vue.js is so great @loregirardi @liqueflies
2. Lorenzo Girardi front-end developer @develondigital open source @styled-components @loregirardi @liqueflies
3. WHY
4. Framework - Save time - Write less code - Code readability - Scalability
6. What my ideal framework should cover? - Easy and approachable - Lean API - Usage of front-end base knowledge (HTML, CSS, JS) - Well written docs - High performance, also on mobile devices!
7. Why Vue? … does it really cover all these things?
8. Vue.js @vuejs @vuejs The Progressive JavaScript Framework https://vuejs.org/v2/guide/
9. Progressive Framework “Progressive Framework is composed of incrementally adoptable libraries”
10. Evan You full-time open source! @yyx990803 @yyx990803
11. History - [late 2013] created - [Feb. 2014] first release - [Nov. 2015] v1.00 release - [Sept 2016] v2.00 release - Now, it has > 50k stars on github (+20k after v2.0.0)
12. Version 2.0.0 - 2 - 4x faster - 12 - 17 kb min + gzip - Virtual DOM (based on snabbdom) - Server Side Rendering - JSX/Hyperscript rendering and/or HTML templates - Mobile native apps with weex (by alibaba) https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.t2d55ypix https://medium.com/the-vue-point/vue-in-2016-8df71d98bfb3#.onussvll7
13. Declarative Rendering Single source of truth Map of the state
14. Vue state is called data data data: { ... } Models are just plain JavaScript objects.
15. Vue data object properties are converted to getters and setters, collected in watchers https://vuejs.org/v2/guide/reactivity.html#ad
16. reactivity vs setState // react setState this.setState({ counter: this.counter + 1}) this.setState({ counter: this.counter + 1}) // console.log(this.counter) -> ? // vue reactivity this.counter = this.counter + 1 this.counter = this.counter + 1 // console.log(this.counter) -> known
17. ...easy and approachable! <script src="vue.js"></script> <div id="app"> <p>{{ message }}</p> </div> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
18. HTML Binding / Two-way binding <input v-model="message" placeholder="edit me"> // set data props compiling the input field <p>Message is: {{ message }}</p> // normal bind <a v-bind:href="dataProp" v-on:click="dataProp2 = true"></a> // expression <span :id="'label-' + id" @click.prevent="myMethod"></span>
19. Conditional rendering / Loop // todos: ["eat", "sleep", "repeat"] <ol v-if="todos.length" v-for="todo in todos"> <li> {{ todo }} </li> </ol> // todos: [] <div v-else> <h2> Yay! all todos were done! </h2> </div>
20. Lean API - Vue Instance { // ... el, data computed: { visibleTodos: function() { return this.todos.length } }, methods: { logInserted: function() { log(this.todos.slice(-1).pop()) } }, watch: { todos: function() { this.logInserted() } } // ... lifecycle } https://vuejs.org/v2/guide/instance.html#ad
21. Transition effects - Conditional rendering (v-if) - Conditional display (v-show) - Dynamic components - Root component (appear transition) <transition> is a wrapper component, that allows you to add entering/leaving transitions for: https://vuejs.org/v2/guide/transitions.html
22. Transition effects
23. Transition effects <transition name="fade"> <modal v-show="show">hello</modal> </transition> .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to { opacity: 0 }
24. Component system https://vuejs.org/v2/guide/components.html Abstract your UI into tree of components, that are small, self-contained and reusable
25. Single File Component - Split logic into template, script, styles - Preprocessor agnostic (sass, pug...) - Scoped CSS - Hot reload - Write ES6 Javascript https://vuejs.org/v2/guide/single-file-components.html
26. Effortless SSR https://ssr.vuejs.org
27. Effortless SSR - Optimized bundle clientManifest - Stream rendering supported with renderToStream - Easy component caching with serverCacheKey - Client-side hydration to avoid useless re-render of markup Vue 2.3.0 focus on SSR providing a new guide and awesome effortless practice that makes easy to achieve! https://ssr.vuejs.org
28. Vanilla JavaScript Vue 2 React (no -fiber) Angular 2 1x 1.29x 1.74x 1.97x So Vue is really fast? https://cdn.rawgit.com/krausest/js-framework-benchmark/956b068f03ef96a9c08d209ffadb0947cd56edc6/webdriver-java/table.html
29. Vue ecosystem - Vuex: Large state management - Vue router: router - Vue cli: no-build configuration tool - Vue resources: http resources - Vue devtool: chrome official extension debugger tool Check awesome-vue for a curated list of community packages! https://github.com/vuejs/awesome-vue
30. how about docs? - Vue: https://vuejs.org/ - Vuex: http://vuex.vuejs.org/ - Vue router: http://router.vuejs.org/ - Server side rendering: http://ssr.vuejs.org/ - Vue cli: http://vuejs-templates.github.io/webpack/
31. Vue in practice a cool idea to test most-of framework API
34. Project idea - CAGEFLIX - Stupid netflix clone only for Nicolas Cage - Browse, filter and search movies easily - Usage of entire Vue ecosystem - Connection to REST API (TMDB) - Simple server-side-rendering https://github.com/liqueflies/cageflix
35. Final recap - We write what we already know (HTML, CSS, JS) - Easy to startup, fast learning curve, awesome docs - Use both for small issues or big spa, including parts progressively - Very cool support for transitions - Very fast, also on mobile devices - Effortless SSR
36. Thank you! questions? @loregirardi @liqueflies