Le framework progressif
VUE.JS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4796261/avatar_copie.jpg)
Guillaume Chau
Vue.js Core Team
@Akryum
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4825108/Capture_d_écran_-_2018-04-18_à_19.00.19.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
06/11/2014
v0.11
Cowboy Bepop
20/04/2015
Laravel PHP Adoption
26/10/2015
v1.0
Evangelion
01/10/2016
v2.0
Ghost in the Shell
08/12/2013
v0.6
First release
![](https://media2.giphy.com/media/nb7ni9qkOATzG/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4614879/GitHub-Mark-Light-120px-plus.png)
2016
7.6k
2017
37.6k
2018
83.8k
2016
0.21M
2017
1.78M
2018
9.72M
2016
84k
2018
355k
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4456453/chrome-webstore.png)
+122%
+446%
+322%
2017
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405105/gitlab.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405106/sainsburys.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405107/nintendo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405108/large_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405109/800px-Xiaomi_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405110/ENGIE_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405111/640px-Baidu.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405112/library_logos_alibabaev_large.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405113/Veolia_vector_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4456497/1200px-Adobe_Systems_logo_and_wordmark.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4456503/sas-001.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4456504/codeship-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4456505/belogo-social-posts-default.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4456516/nbc-logo.jpg)
PHILOSOPHIE
Une librairie ou un framework ?
Complexité de l'Application
VS
Complexité du Framework
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404570/react-logo-1000-transparent.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404573/ember.png)
Frameworks
Moins
Plus
View layer core
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404570/react-logo-1000-transparent.png)
Library
View layer core
+
Optional Support Libraries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404570/react-logo-1000-transparent.png)
Framework
Optional Support Libraries
?
JavaScript Fatigue
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4456968/Capture_d__cran_du_2017-12-18_14.45.39.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826790/js-fatigue-meme.png)
PROGRESSIVITE
Le framework progressif
STEP
BY
STEP
Accessible aux débutants
Productif pour les plus expérimentés
Prototypes
Petits projets
Widgets
Applications Complexes
Grande échelle
<script src="https://unpkg.com/vue">
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826794/carbon_2_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826795/carbon_1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826798/babeljs.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826803/eslint.png)
JavaScript Fatigue
![](https://media2.giphy.com/media/aydEd3UIYy0dG/giphy.gif)
Rendu déclaratif
Composants
Routing
State Management
Build Tools
RENDU DECLARATIF
Connecter le DOM et le State
DOM
State
?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826822/carbon_3_.png)
Réactivité
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826826/carbon_4_.png)
Virtual DOM
Minimiser les opérations DOM
Diffing très rapide
Moteur de rendu autre que le DOM?
Virtual DOM
VIRTUAL
REAL DOM
Propriétés calculées
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826849/carbon_5_.png)
Propriétés calculées
CACHE
MAJ AUTO
LAZY
Other Included Neat Things
Class & Style Binding
Efficient Watchers
Transitions & Animations
Custom Filters & Directives
Server-Side Rendering
...
Plusieurs syntaxes possibles
Templates
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826880/carbon_6_.png)
JSX
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826884/carbon_7_.png)
Render function
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826886/carbon_8_.png)
Template: JavaScript in HTML
JSX: HTML in JavaScript
Render function: just JavaScript
Et maintenant, quelques schémas vraiment très très compliqués
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826930/render-flux.png)
View = Représentation du State
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826931/vue-reactivity.png)
Réactivité en arbre de dépendances
COMPOSANTS
Réutilisables, maintenables...
Décomposition en composants
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4457851/Capture_d__cran_du_2017-12-18_17.43.56.png)
Arbre de composants
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4457559/components.png)
Avantages
Réutilisable
Testable
Maintenable
Evolutif
Props
Evénements
Déclarer un composant
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826900/carbon_9_.png)
Utiliser un composant
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826902/carbon_10_.png)
DRY: Extends
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826904/carbon_11_.png)
DRY: Mixins
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826910/carbon_12_.png)
ROUTING
Découpage en pages
VUE-ROUTER
Librairie Officielle
Installation de vue-router
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826914/carbon_13_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826916/carbon_14_.png)
OU
Liste des routes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826921/carbon_15_.png)
Création du router
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826922/carbon_16_.png)
STATE MANAGEMENT
Large-scale apps
VUEX
Librairie Officielle
Short version
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405003/flow.png)
Long version
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4458060/vuex.png)
SFC
Single-File Component
Single-File Component (.vue)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405332/vue-single-file-component.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826943/sfc1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826944/sfc2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826945/sfc3.png)
Composant = Brique atomique
- Template, Logique et Style au même endroit
- Utilisez ce que vous connaissez déjà: HTML, CSS & JavaScript
- Importé comme un module ES2015 (donc facilement testable)
- Support clé-en-main de préprocesseurs comme Babel, SASS ou Pug
- Hot-reload intégré
- CSS scopé au composant (optionnel)
- Support des CSS modules
Single-File Component
BUILD TOOLS
Designed to be useful
vue-cli 3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826954/carbon_17_.png)
devtools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826956/Capture_d_écran_de_2018-04-19_05-27-52.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405400/vuex-devtools.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
Native Mobile with Vue
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4826959/Capture_d_écran_-_2018-04-19_à_05.32.27.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4796261/avatar_copie.jpg)
Guillaume Chau
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/3405366/twitterbird_RGB.png)
@Akryum
![](https://s3.amazonaws.com/media-p.slid.es/uploads/638176/images/4614879/GitHub-Mark-Light-120px-plus.png)
github.com/Akryum
Merci !
Vue.js, le framework progressif
By Guillaume Chau