Présentation de Vue.js faite lors de Codeurs en seine 2016.

1. Vue, j’avais pas vu !
Bruno Bonnin - @_bruno_b_
#codeurs2016

2. Kissuije ?
Bruno Bonnin @_bruno_b_ - 24 novembre
Architecte logiciel / Développeur @MyScript
#Java #JavaScript #Python
#MongoDB #Elastisearch # NoSQL
#Hadoop #Spark #Storm #BigData
#HTML5 #AngularJS #VueJS #NodeJS
De plus en plus !De moins en
moins...

3. MyScript
Leader de la reconnaissance d’
écriture
Démo:
http://webdemo.myscript.com/
Join us:
http://myscript.com/about/join-us/

4. Java
Server
Pages
Un passé sombre...

5. Heureusement…

6. Et maintenant, que vais-je faireeeeeeuh ?

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

9. npm install vue-cli -g
vue init webpack mon-projet
C’est parti, on l’installe...
<script src="https://unpkg.com/vue/dist/vue.js">Le plus simple
Recommandé npm install vue
Encore mieux

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

11. Démo
(merci de votre tolérance concernant le style…)

12. Commençons par ...
Data binding, interpolation,
properties

13. <span>{{ name | capitalize }}</span>
Interpolation
<h1>Bonjour {{ name }} !</h1>
{{ ... }}
<h1 v-once>Bonjour {{ name }} !</h1>
<span>{{ name.toLowerCase() }}</span>
<p>{{ resultat === 1 ? ‘OK’ : ‘KO’ }}</p>
Filter => défini dans l’instance de Vue

14. Interpolation sur les attributs
v-bind
<a v-bind:href="search_url"> Search </a>
<div v-bind:id=" ’id’ + nb"> </div>
<span :title="message"> </span>
<a href="{{ search_url }}"> Search</a>

15. <div>{{ speakers.sort().join(‘, ‘) }}</div>
<script>
new Vue({
el: '#app',
data: {
speakers: [ 'Grincheux', ‘Prof’]
}
})
</script>
,
computed: {
allSpeakers () {
return this.speakers.sort().join(‘, ‘)
}
Computed properties
allSpeakers
Props en cache !
{{ ... }}

16. Watched properties
new Vue({
data: {
firstname: 'Archibald',
lastname: 'Haddock',
fullname: ''
},
watch: {
firstname (val) {
this.fullname = val + ‘ ‘ + this.lastname
},
lastname (val) {
this.fullname = this.firstname + ‘ ‘ + val
}
}
})
Peut être coûteux !
Préférez les computed props
computed: {
fullname () {
return this.firstname + ‘ ‘ +
this.lastname
}

17. Démo
(juste pour voir les properties)

18. Continuons avec …
Les directives v-*

19. Directives
Attributs commençant par v-
Avec un argument
Avec des modificateurs
<input v-model="name">
<a v-bind:href="search_url"> Search </a>
<input v-model.trim="name" type="text">
<form v-on:submit.prevent="updateData">

20. Two-way binding
<span>Hello {{ name }} !</span>
<input v-model="name">
<script>
new Vue({
el: '#app',
data: {
name: 'world'
}
})
</script>
v-model

21. Evénements DOM
<h3> Talk: {{ title }} </h3>
<button v-on:click="like"> J’aime </button>
<script>
new Vue({
data: {
title: "BeerScript, le langage pour l’apéro"
},
methods: {
like (event) { … },
}
})
</script>
v-on

22. Conditional rendering
<h3> Talk: {{ title }} </h3>
<div v-if="like"> Vous aimez ça ! </div>
<script>
new Vue({
data: {
title: "Pourquoi Angular3 ne
supportera que le VBScript",
like: true
}
})
</script>
v-if
v-else
<div v-else> Vous n’aimez pas </div>

23. List rendering
<div v-for="talk in talks">
<h3>{{ talk.title }}</h3>
</div>
<script>
new Vue({
data: {
talks: [
{ "title": "..." },
{ "title": "..." } ]
}
})
</script>
v-for
Peut être une
computed prop
ou une méthode

24. Custom directive
<button v-bigbutton:success> Yes ! </button>
v- ...
<script>
Vue.directive({ ‘bigbutton’, {
bind (el, binding, vnode) {
el.classList =
'btn btn-lg btn-' + binding.arg
}
}})
</script>

25. Démo
(cette fois, le style est top !)

26. Transition
<transition name="fade">
<p v-if="showTheBook">
<img src="..." />
</p>
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .8s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>

27. Poursuivons avec …
La classe Vue

28. Une instance "Vue"
new Vue({
el: '#app',
template: '',
data: { … },
computed: { ... },
watch: { ... },
methods: { ... },
filters: { … }, // {{ name | capitalize }}
// Méthodes liées au
// cycle de vie de l’instance
created () { … },
mounted () { … },
beforeUpdate () { … },
updated () { … }
...
})

29. Cycle de vie
Source: https://vuejs.org/v2/guide/instance.html

30. Et maintenant...
Les composants

31. Les composants
Extension des éléments HTML de base
pour construire des éléments réutilisable
<talks>
...
...
...
...
</talks>

32. Les composants
<template id="talks-template">
<div v-for='talk in talks'>
{{ talk.title }}
</div>
</template>
new Vue({
el: '#app',
data: {
talks: [ { title: '...' }, { title: '...' } ]
}
})
Vue.component('talks', {
template: '#talks-template',
props: [ 'talks' ]
})
<div id="app">
<talks :talks="talks"></talks>
</div>

33. Le tout en un
=.CSS.HTML .JS .VUE
++

34. Composants: .vue
<div class="talks">
<div class="talk" v-for="talk in talks">
<h3 class="talk-title">{{ talk.titre }}</h3>
</div>
</div>
export default {
name: 'talks',
props: [ 'talks' ],
methods: {
...
}
}
.talks {
margin: 0 50px;
}
.HTML
.JS
.CSS

35. Composants: .vue
<template>
<div class="talks">
<div class="talk" v-for="talk in talks">
<h3 class="talk-title">{{ talk.titre }}</h3>
</div>
</div>
</template>
<script>
export default {
name: 'talks',
props: [ 'talks' ],
methods: {
...
}
}
</script>
<style scoped>
.talks {
margin: 0 50px;
}
</style>
.VUE

36. Démo
(si ça marche, tournée générale...)

37. Vue-router
Et y a quoi d’autres ?

38. Vue-router
<div id=”#app”>
<router-link to=”/talks” tag=”button”> Talks </router-link>
<router-link to=”/speakers” tag=”button”> Speakers </router-link>
<router-view></router-view>
</div>

39. Vue-router
const routes = [ {
path: '/talks',
name: 'talks',
component: require('./TalkList.vue')
}, {
path: '/talk/:id',
components: {
default: require('./Talk.vue'),
nav: require('./Nav.vue')
}
}, {
path: '*',
redirect: '/talks'
}]
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes : routes
})
new Vue({
el: '#app',
router : router
})

40. Démo
(grosse sérénité sur cette démo...)

41. Vuex
Et y a quoi d’autres ?

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

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

44. Utilisation du store
import { mapState } from 'vuex'
new Vue({
store : store,
created () {
this.$store.dispatch('fetchTalks') // Action invoquée pour avoir
// les data à la création de la Vue
},
computed: mapState([ // Helper pour créer des accès au state
'talks' // Equivalent this.$store.state.talks
]),
}

45. Démo
(et après, c’est fini !!!)

46. Vue-devtools
Et y a quoi d’autres ?

47. Vue-devtools - Components

48. Vue-devtools - Vuex

49. https://github.com/vuejs/awesome-vue
Et y a quoi d’autres ?

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

51. Merci !
@_bruno_b_
https://github.com/bbonnin/codeursenseine2016