Evan You

An international team

Vue.js is the 3rd most starred project on Github

Github Stats, october 2018

	React	Vue	Angular
TypeScript ?	optional	optional	recommended
JSX ?	recommended	optional	no
Prog. style	functional	declarative	mix func/decl
State management	centralized, immutable : flux, redux...	internal, Vuex optional	internal
Ecosystem	Rich++ community driven not self-sufficient	Rich some official libs ; promote other 3rd party solutions	Rich mostly official try to be all-in-one, self-sufficient

Do one thing,
do it well
Not for everyone
Innovative, disruptive
Bring your tools and spare parts

Accessible, easy
Familiar to use
Quickly efficient, can slow down
with time
Quite common,
but can be tuned

Fully equipped
Heavyweight
Slower to start, more efficient
with time
Spare parts hard to find out there

What is the best JS framework ?

https://about.gitlab.com/2016/10/20/why-we-chose-vue/

Hello Vue

How does it work ?

getters/setters (ES5)

let _name = "joe";

const user = {
    get name() {
        console.log("accès en lecture à la propriété")
        return _name
    },
    set name(value) {
        console.log("accès en écriture à la propriété")
        _name = value
    }
}

How does it work ?

Next in Vue 3 : Proxy (ES6)

const _user = { name: "joe" }

const user = new Proxy(_user, {
    get(obj, key) {
        console.log(`accès en lecture à la propriété ${key}`)
        return Reflect.get(obj, key)
    },
    set (obj, key, value) {
        console.log(`accès en écriture à la propriété ${key} 
                     avec la valeur ${value}`)
        return Reflect.set(obj, key, value)
    }
})

Vue Reactivity System

AngularJS 1.x : synchronous dirty-checking
Angular 2+ : Zones (~= async dirty-checking)
React : manual updates (setState)
manual optimizations (shouldComponentUpdate)
diff against a Virtual DOM to optimize rendering
Vue : auto updates (setters / proxies)
auto optimization (dependency tracking)
diff against a Virtual DOM