$30 off During Our Annual Pro Sale. View Details »

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/

Lorenzo Girardi

May 25, 2017
Tweet

More Decks by Lorenzo Girardi

Other Decks in Programming

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