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...
Vuex optional
Ecosystem Rich++
community driven
not self-sufficient
some official libs ;
promote other 3rd party solutions
mostly official
try to be all-in-one,
  • 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 ?

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

Comparing data-binding and change detection

between frameworks

En savoir plus

Syntax overview


v-if , v-else, v-else-if




Declaring components

Communication between components

Computed props and watchers

Vue Cheat Sheet

Single File Components

Easily share and reuse components


Centralize code
and tooling


Simplify the use of alternative languages / preprocessors

Alternative, class-based syntax to use with Babel or TypeScript
Will be officially supported in Vue 3

Vue CLI, Vue UI



Easy to start and integrate,
progressive learning and tooling
focus on community

Giant ecosystem



PWA La Banque Postale, Jessy Archiles &  Yann Perthuis:

very easy to start, for everyone
very happy with Vue for our PWA

lightweight but less complete than Angular

ewLabs, Arnaud Berthillot:

easiest learning curve, good documentation

quickly adopted and loved by the community
adapted for small to medium web projects

SDCO: used in 3 projects currently in development
Coming soon: a 1-day training session for Vue.js by SDCO

  • Simple:  small API surface, you can start in 2 hours
  • Lightweight: 20kb .min.gzip runtime
  • Versatile: can be used with almost any stack
  • Stable and mature, rich ecosystem
  • Takes the best ideas from competitors
  • Almost no API breaking changes in 4 years

To sum up

Vue is also great to make games

Bonus slide

Introduction à Vue.js - COTRECS octobre 2018

By sylvainpv

Introduction à Vue.js - COTRECS octobre 2018

Introduction à Vue.js - COTRECS octobre 2018

  • 1,197
Loading comments...

More from sylvainpv