AVUESOME - Why Vue.js is so great

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/

4ca7c621719678e8a8502ed44df4be1b?s=128

Lorenzo Girardi

May 25, 2017
Tweet

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
  5. None
  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
  32. None
  33. None
  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