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
   

   View Slide

2. Lorenzo Girardi
   front-end developer @develondigital
   open source @styled-components
   @loregirardi @liqueflies
   

   View Slide

3. WHY
   

   View Slide

4. Framework
   - Save time
   - Write less code
   - Code readability
   - Scalability
   

   View Slide

5. View Slide

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!
   

   View Slide

7. Why Vue?
   … does it really cover all these things?
   

   View Slide

8. Vue.js
   @vuejs @vuejs
   The Progressive
   JavaScript Framework
   https://vuejs.org/v2/guide/
   

   View Slide

9. Progressive Framework
   “Progressive Framework is composed of incrementally adoptable libraries”
   

   View Slide

10. Evan You
    full-time open source!
    @yyx990803 @yyx990803
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

13. Declarative Rendering
    Single source
    of truth
    Map of
    the state
    

    View Slide

14. Vue state is called data
    data
    data: {
    ...
    }
    Models are just plain JavaScript objects.
    

    View Slide

15. Vue data object properties are converted to
    getters and setters, collected in watchers
    https://vuejs.org/v2/guide/reactivity.html#ad
    

    View Slide

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
    

    View Slide

17. ...easy and approachable!
    
    
    {{ message }}
    
    new Vue({
    el: '#app',
    data: {
    message: 'Hello Vue.js!'
    }
    })
    

    View Slide

18. HTML Binding / Two-way binding
    
    // set data props compiling the input field
    Message is: {{ message }}
    // normal bind
    
    // expression
    
    

    View Slide

19. Conditional rendering / Loop
    // todos: ["eat", "sleep", "repeat"]
    
    {{ todo }}
    
    // todos: []
    
    Yay! all todos were done!
    
    

    View Slide

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
    

    View Slide

21. Transition effects
    - Conditional rendering (v-if)
    - Conditional display (v-show)
    - Dynamic components
    - Root component (appear transition)
    is a wrapper component, that allows you to add
    entering/leaving transitions for:
    https://vuejs.org/v2/guide/transitions.html
    

    View Slide

22. Transition effects
    

    View Slide

23. Transition effects
    
    hello
    
    .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
    }
    .fade-enter, .fade-leave-to {
    opacity: 0
    }
    

    View Slide

24. Component system
    https://vuejs.org/v2/guide/components.html
    Abstract your UI into tree of
    components, that are small,
    self-contained and
    reusable
    

    View Slide

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
    

    View Slide

26. Effortless SSR
    https://ssr.vuejs.org
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

31. Vue in practice
    a cool idea to test most-of framework API
    

    View Slide

32. View Slide

33. View Slide

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
    

    View Slide

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
    

    View Slide

36. Thank you!
    questions?
    @loregirardi @liqueflies
    

    View Slide