Intro à Vue.js

1. Speaker : Bruno Bonnin - @_bruno_b_
Vue.js, même un dev Java peut en faire !

2. Bruno Bonnin @_bruno_b_ - 15 septembre
Solution Architect @saagie_io
#Java #JavaScript #Python
#Elastisearch #MongoDB #ArangoDB
#NoSQL #Hadoop #BigData
#HTML5 #AngularJS #VueJS #WebAPI
Nantes, France

3. Smart Data Platform
Une véritable ligne d’assemblage Big Data (Data Fabric)

4. 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

5. npm install vue-cli -g
vue init webpack monprojet
npm run dev
C’est parti, on l’installe...
<script src="https://unpkg.com/vue">Le plus simple
Mieux npm install vue
Encore mieux

6. … et on code un bon vieux hello world !
<div id="app">
<h1>Hello {{ name }} !</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'JUG Summer Camp'
}
})
</script> Véritable snapshot
réalisé sans trucage !!

7. 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

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

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

10. 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>

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

12. Les composants
Vue.component('barchart', {
template: `
<h2>{{title}}</h2>
<canvas/>`,
props: [ 'title', 'values' ],
data: function () {
return {
chart: null
}
},
methods: { … } ,
mounted: function () { … }
})
<div id="app">
<barchart
v-bind:values="dataset"
title="Nice chart !"/>
</div>
new Vue({
el: 'app',
data: {
dataset: []
},
mounted: function () {
// init dataset
}
})

13. Les composants
.CSS
.HTML
.JS .VUE
+
+
<template>
<div>
<h2>{{ title }}</h2>
<canvas/>
</div>
</template>
<script>
export default {
props: [ 'title', 'values' ],
data: function () { … },
methods: { … } ,
mounted: function () { … }
}
</script>
<style scoped>
/* Je déteste le css, donc j’en mettrai pas une ligne… */
</style>

14. 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

15. J’aurais pu en parler...
vue-router
vuex
vue-devtools
Effets de transition, mixins, custom
directives, server-side rendering, tests
unitaires, ...
vue-test-utils

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

17. En conclusion...
Après plus de 2 ans d’existence, la communauté grandit vite
!
Nombre de stars > 65 000
675k downloads sur le dernier mois
Focus sur la simplicité
Orienté composant
Montée en compétence très rapide
Vue.js doit faire partie de votre réflexion vos apps !

18. Merci !
@_bruno_b_
https://github.com/bbonnin/jugsummercamp2017