Présentation de VueJS faite lors d'un meetup Codeurs en Seine

1. À la découverte de
Vue.js

2. Bruno Bonnin
Old developer, Dashboard maker, Data
architect @MyScript
webdemo.myscript.com/
myscript.com/about/join-us/

3. Orienté composants
Dédié à la création
d’interfaces Web
Performant
Très facile à
apprendre
Vue.js en quelques mots...
Focus sur la
couche View
Flexible

4. npm install vue-cli -g
vue init webpack monprojet
npm run dev
Et vous êtes prêt à coder !
C’est parti, on l’installe...
<script src="https://.../path/to/vue.js">Le plus simple
Mieux npm install vue
Encore mieux

5. … et on code !
<div id="app">
Bonjour {{ name }} !
</div>
new Vue({
el: '#app',
data: confdata
})
var confdata = {
name: 'BreizhCamp'
}
Model ViewViewModel
confdata.name = 'Codeurs en Seine' Rien de plus
à faire !
?

6. Démo
vue init webpack-simple first-app
cd my-first-app
npm install
npm run dev

7. Les concepts de base

8. La base: l’instance "Vue" (et ses options)
new Vue({
el: '#hero-app',
data: {
name: 'Deadpool'
},
computed: {
uppercaseName: function () {
return this.name.toUpperCase();
}
},
methods: {
clearName: function () {
this.name = '';
}
}
})
La totale sur : https://vuejs.org/v2/api/
Les données (réactives: Vue
détectera toute modification et fera
les màj du DOM nécessaire)
Les données calculées (utilisables
comme les autres données et mises
en cache)
Les fonctions utilisables via l’instance
de Vue ou dans les directives

9. La base: l’instance "Vue" et
Hooks sur le cycle de vie
Source: https://vuejs.org/v2/guide/instance.html

10. La base: l'interpolation
<h1>Bonjour {{ name }} !</h1>
{{ ... }}
v-bind
<a v-bind:href="search_url">Search</a>
<span :title="message"> </span>

11. La base: les directives (v-...)
<input type="text" v-model="name" >
<button v-on:click="like"> J’aime </button>
<div v-if="talk.liked"> Vous aimez ça ! </div>
<div v-else> Vous n’aimez pas </div>
<div v-for="talk in talks">
<h3>{{ talk.title }}</h3>
</div>

12. Les composants

13. Les composants
<barchart
v-bind:values="dataset"
v-bind:title="chartTitle"/>

14. Les composants Vue.component('barchart', {
template: '...',
props: [ 'title', 'values' ],
data: function () {
return {
chart: null
}
},
methods: { … } ,
mounted: function () { … }
})
<barchart
:values="dataset"
:title="chartTitle"/>

15. Les composants: définition du template
Vue.component('barchart', {
template:
'<div><h2>{{title}}</h2><canvas/></div>',
})

16. Les composants: définition du template
Vue.component('barchart', {
})
<barchart inline-template>
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</barchart>
<script
type="text/x-template"
id="barchart-templ">
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</script>
Vue.component('barchart', {
template: '#barchart-templ'
})

17. Les composants: définition du template
Y a aussi JSX...

18. Les composants
.CSS
.HTML
.JS .VUE
+
+
<template>
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</template>
<script>
export default {
props: [ 'title', 'values' ],
data: function () {
return { … }
},
methods: { … } ,
mounted: function () { … }
}
</script>
<style scoped>
</style>

19. Démo : un chart en 2 secondes !
(avec un composant qui contient un composant qui contient un composant qui …)
App.vue
Dataview.vue
Chart.vue

20. vue-router

21. Vue-router
const appRroutes = [ {
…
}, {
path: '/dataview',
name: 'dataview',
component: require('./Dataview.vue')
}, {
path: '*',
redirect: '/'
}
]
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const appRouter = new VueRouter({
mode: 'history',
routes : appRoutes
})
new Vue({
el: '#app',
router : appRouter
})

22. Vue-router
<div id=”#app”>
<router-link to=”/” tag=”button”> Home </router-link>
<router-link to=”/dataview” tag=”button”> Dataview </router-link>
<router-view></router-view>
</div>

23. vuex

24. Vuex
Source: https://vuex.vuejs.org
Gestion centralisé de state
pour tous les composants
d’une application
Inspiré par le pattern Flux

25. Création du store
const store = new Vuex.Store({
mutations: {
setTalks (state, talks) {
state.talks = talks
}
},
state: {
talks: []
},
actions: {
fetchTalks (context) => {
api.fetchTalks()
.then(res => context.commit(’setTalks’, res.data))
}

26. Utilisation du store
import Vue from ‘vue’
import Vuex from 'vuex'
import store from ‘./store’
Vue.use(Vuex)
new Vue({
store,
components: { ‘talkview’: TalkView },
created () {
this.store.dispatch('fetchTalks')
}
}
<template>...</template>
<script>
export default {
name: 'talkview',
computed: {
talks() {
return this.$store.state.talks
}
},
}
</script>

27. vue-devtools

28. Vue-devtools - Components

29. Quoi d’autres ?
https://github.com/vuejs/awesome-vue

30. En conclusion...
Après plus de 2 ans d’existence, la communauté grandit vite
!
Vue.js doit faire partie de votre réflexion !
● Focus sur la simplicité
● Orienté composant
● Montée en compétence très
rapide (des connaissances
standards en JavaScript et
HTML suffisent)

31. Merci !
@_bruno_b_
https://github.com/bbonnin/demos/tree/master/vuejs