Vue, le framework progressif
![](https://media.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
https://goo.gl/WrhmSS
![](https://media.slid.es/uploads/638176/images/3735740/avatar.jpg)
Guillaume Chau
@Akryum
![](https://media.slid.es/uploads/638176/images/3405366/twitterbird_RGB.png)
![](https://media.slid.es/uploads/638176/images/4456317/github-icon.png)
github.com/Akryum
06/11/2014
v0.11
Cowboy Bepop
20/04/2015
Laravel PHP
26/10/2015
v1.0
Evangelion
01/10/2016
v2.0
Ghost in the Shell
![](https://media.slid.es/uploads/638176/images/4456317/github-icon.png)
77k+ Stars GitHub
Top 6
2ème librarie JavaScript
1.1M+ téléchargements
![](https://media.slid.es/uploads/638176/images/4456453/chrome-webstore.png)
320k + 14k utilisateurs actifs
![](https://media.slid.es/uploads/638176/images/3405105/gitlab.png)
![](https://media.slid.es/uploads/638176/images/3405106/sainsburys.png)
![](https://media.slid.es/uploads/638176/images/3405107/nintendo.png)
![](https://media.slid.es/uploads/638176/images/3405108/large_logo.png)
![](https://media.slid.es/uploads/638176/images/3405109/800px-Xiaomi_logo.png)
![](https://media.slid.es/uploads/638176/images/3405110/ENGIE_logo.png)
![](https://media.slid.es/uploads/638176/images/3405111/640px-Baidu.svg.png)
![](https://media.slid.es/uploads/638176/images/3405112/library_logos_alibabaev_large.png)
![](https://media.slid.es/uploads/638176/images/3405113/Veolia_vector_logo.png)
![](https://media.slid.es/uploads/638176/images/4456497/1200px-Adobe_Systems_logo_and_wordmark.svg.png)
![](https://media.slid.es/uploads/638176/images/4456503/sas-001.png)
![](https://media.slid.es/uploads/638176/images/4456504/codeship-logo.png)
![](https://media.slid.es/uploads/638176/images/4456505/belogo-social-posts-default.png)
![](https://media.slid.es/uploads/638176/images/4456516/nbc-logo.jpg)
Communauté
![](https://media.slid.es/uploads/638176/images/4456317/github-icon.png)
400+ Contributeurs
A travers l'organisation vuejs
Bus Effect
![](https://media.slid.es/uploads/638176/images/4456547/onsenui.png)
![](https://media.slid.es/uploads/638176/images/4456549/687474703a2f2f696d6775722e636f6d2f56344c746f49492e706e67.png)
![](https://media.slid.es/uploads/638176/images/4456887/vue-material.png)
vuetify
vue-material
Vue
Philosophie
![](https://media.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
![](https://media.slid.es/uploads/638176/images/3404570/react-logo-1000-transparent.png)
![](https://media.slid.es/uploads/638176/images/3404573/ember.png)
![](https://media.slid.es/uploads/638176/images/4456916/meteor.png)
Frameworks
Moins
Plus
View-layer
![](https://media.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
![](https://media.slid.es/uploads/638176/images/3404570/react-logo-1000-transparent.png)
View-layer
+
Librairies optionelles
![](https://media.slid.es/uploads/638176/images/3404520/vuejs-logo.png)
![](https://media.slid.es/uploads/638176/images/3404570/react-logo-1000-transparent.png)
Framework
JavaScript Fatigue
![](https://media.slid.es/uploads/638176/images/4456968/Capture_d__cran_du_2017-12-18_14.45.39.png)
Vue
Le framework progressif
Pas à pas
Le framework progressif
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">
npm install vue
import Vue from 'vue'
JavaScript Fatigue
Rendu déclaratif
Composants
Routing
State Management
Build Tools
Rendu déclaratif
DOM
State
?
Réactivité
<p>{{ message }}</p>
<script>
app.message = 'Hello world.'
// Do other things
app.message = 'This is awesome!'
</script>
Virtual DOM
Minimiser les opérations DOM
Diffing très rapide
Moteur de rendu autre que le DOM?
Virtual DOM
Propriétés calculées
{
computed: {
currentThread () {
return this.threads.find(this.threadId)
}
}
}
Propriétés calculées
- Cache
- Re-calcul automatique
- Lazy
Et pleins d'autres fonctions sympa
- Classe et Style binding
- Watchers
- Animations
- Filtre/Directive custom
- Server-Side Rendering
- etc...
Templates
<ul>
<li v-for="task of tasks">
<span>{{ task.text }}</span>
<a v-on:click="removeTask(task)">Delete</a>
</li>
</ul>
JSX
{
render (h) {
return <ul>
{tasks.map(task => <li>
<span>{task.text}</span>
<a onClick={removeTask(task)}>Delete</a>
</li>)}
</ul>
}
}
Render function
{
render (h) {
return h('ul', this.tasks.map(
task => h('li', [
h('span', task.text),
h('a', {
on: {
click: () => this.removeTask(task)
}
}, 'Delete')
])
))
}
}
Template: JavaScript in HTML
JSX: HTML in JavaScript
Render function: just JavaScript
Composants
Décomposition en composants
![](https://media.slid.es/uploads/638176/images/4457851/Capture_d__cran_du_2017-12-18_17.43.56.png)
Arbre de composants
![](https://media.slid.es/uploads/638176/images/4457559/components.png)
Avantages
- Réutilisable
- Testable
- Maintenable
- Evolutif
Props
Evénements
Déclarer un composant
Vue.component('base-task', {
template: `<li :class="{ done: done }">
{{ text }}
<a @click="onDelete">Delete</a>
</li>`,
props: {
text: String,
done: Boolean,
},
methods: {
onDelete () {
this.$emit('delete')
},
},
})
Utiliser un composant
<div id="app">
<ul>
<base-task
v-for="task of tasks"
:text="task.text"
:done="task.done"
@delete="removeTask(task)"
></base-task>
</ul>
</div>
DRY: Extends
Vue.component('super-task', {
extends: Vue.component('base-task'),
methods: {
onDelete () {
console.log('Faire autre chose')
},
},
})
DRY: Mixins
const TaskProps = {
props: {
text: String,
done: Boolean,
}
}
const TaskMethods = {
methods: {
onDelete () {
this.$emit('delete')
},
},
}
Vue.component('mixins-task', {
mixins: [TaskProps, TaskMethods],
template: `<li :class="{ done: done }">
{{ text }}
<a @click="onDelete">Delete</a>
</li>`
})
Routing
Installation de vue-router
<script src="https://unpkg.com/vue-router"></script>
<script>
Vue.use(VueRouter)
</script>
Liste des routes
const Home = {
template: `<h1>Home</h1>`,
}
const Profile = {
template: `<h1>My Profile</h1>`,
}
const About = {
template: `<h1>About</h1>`,
}
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/profile', name: 'profile', component: Profile },
{ path: '/about', name: 'about', component: About },
]
Création du router
const router = new VueRouter({
routes,
})
// New VueJS instance
var app = new Vue({
el: '#app',
// Inject the router into the app
router,
})
State Management
State management
![](https://media.slid.es/uploads/638176/images/3405003/flow.png)
Installation de vuex
<script src="https://unpkg.com/vuex"></script>
<script>
Vue.use(Vuex)
</script>
![](https://media.slid.es/uploads/638176/images/4458060/vuex.png)
Composition & Fonctionement
Demo 5
Build tools
vue-cli
npm install -g vue-cli
vue init webpack-simple my-app
cd my-app
npm install
npm run dev
devtools
![](https://media.slid.es/uploads/638176/images/3405331/vue-devtools.png)
![](https://media.slid.es/uploads/638176/images/3405400/vuex-devtools.gif)
Format .vue
![](https://media.slid.es/uploads/638176/images/3405332/vue-single-file-component.png)
Merci !
@akryum
![](https://media.slid.es/uploads/638176/images/3405366/twitterbird_RGB.png)
Liens utiles
@vuejs
![](https://media.slid.es/uploads/638176/images/3405366/twitterbird_RGB.png)
vuejs.org
vuejs.org/guide
vuejs.org/api
github.com/vuejs/awesome-vue
forum.vuejs.org
medium.com/the-vue-point
vuejobs.com
Vue, le framework progressif
By Guillaume Chau
Vue, le framework progressif
Slides du Meetup LyonJS le 17/01/2017 https://www.meetup.com/fr-FR/LyonJS/events/236644715/ https://vuejs.org https://vuejs.org/guide https://vuejs.org/api https://github.com/vuejs/awesome-vue https://forum.vuejs.org https://medium.com/the-vue-point https://vuejobs.com https://conf.vuejs.org
- 7,291