![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4486396/pasted-from-clipboard.png)
Evan You
An international team
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328572/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4486429/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4486434/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4497917/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328595/pasted-from-clipboard.png)
Vue.js is the 3rd most starred project on Github
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328623/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328631/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328660/pasted-from-clipboard.png)
Github Stats, october 2018
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4486462/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4486463/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328691/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328834/pasted-from-clipboard.png)
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 |
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328874/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328959/pasted-from-clipboard.png)
- 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://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328801/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328808/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328820/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5329054/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5329068/pasted-from-clipboard.png)
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
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5328726/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5329115/pasted-from-clipboard.png)
- 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4486592/pasted-from-clipboard.png)
Syntax overview
Templates
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5329133/pasted-from-clipboard.png)
v-if , v-else, v-else-if
Directives
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4492141/carbon__1_.png)
v-for
Directives
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4492423/carbon__8_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4492306/carbon__4_.png)
Declaring components
Communication between components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5329138/pasted-from-clipboard.png)
Computed props and watchers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4492365/carbon__5_.png)
Vue Cheat Sheet
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4499716/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4486545/pasted-from-clipboard.png)
Single File Components
(*.vue)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/4492411/carbon__6_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5329195/pasted-from-clipboard.png)
Vue CLI, Vue UI
Modularity
+
Flexibility
+
Easy to start and integrate,
progressive learning and tooling
+
focus on community
=
Giant ecosystem
https://github.com/vuejs/awesome-vue
Vue@Worldline
PWA La Banque Postale, Jessy Archiles & Yann Perthuis:
very easy to start, for everyone
very happy with Vue for our PWAlightweight 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5329326/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5329341/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5329349/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/3570/images/5329354/pasted-from-clipboard.png)
Introduction à Vue.js - COTRECS octobre 2018
By sylvainpv
Introduction à Vue.js - COTRECS octobre 2018
Introduction à Vue.js - COTRECS octobre 2018
- 2,332