Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu

140 views

Published on

Venez découvrir Vue.js, le challenger de React et Angular, au travers d’une présentation endiablée.
Elle sera suivie d’un Hands-on qui vous plongera au cœur de la technique à travers différents exercices. Débutant ou confirmé, ils vous permettront d’acquérir les bonnes pratiques et de peaufiner vos connaissances. Vous serez alors en mesure de créer une application web en quelques minutes.
La connaissance du JavaScript est indispensable.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu

  1. 1. par Ludovic Ladeu et Thomas Champion 1
  2. 2. Nous Pourquoi Vue ? 2 Ludovic Ladeu Développeur Fullstack Thomas Champion Développeur Fullstack #Back #Cloud #Web #Web #JS #CSS
  3. 3. Sommaire Entrevue avec Vue.js 1. Pourquoi Vue ? 2. Architecture d’une application Vue a. Les composants b. La syntaxe de templating 3. Extensions de Vue a. Les plugins b. Vue router 4. Hand’s On 3
  4. 4. Histoire Pourquoi Vue ? En février 2014, Evan You publie la première version de Vue.js "I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?" 4
  5. 5. En trois mots Pourquoi Vue ? « Approchable » 5
  6. 6. En trois mots Pourquoi Vue ? « Versatile » 6
  7. 7. En trois mots Pourquoi Vue ? « Performant » 7
  8. 8. Une application en 30 secondes Pourquoi Vue ? 8
  9. 9. 9
  10. 10. Disclaimer Architecture d’une application Vue Les exemples de code sont en EcmaScript 6 (ES2015) 10 var myVar = 1; const myVar = 2; let myVar = 2; var object = { hello: function() { } }; const object = { hello() { } }; var name = "bob"; var object = { name : name }; const name = "bob"; const object = { name }; Déclaration de variable Shorthand method Shorthand property
  11. 11. Introduction Architecture d’une application Vue Pour bootstrapper une application Vue.js : 11 index.html main.js <div id="app"> <h1>{{ title }}</h1> </div> new Vue({ el: '#app', data: { title: 'My application' } }) Et c’est parti ? ● Un élément html ● Une instance de Vue lié à cet élément
  12. 12. Introduction Architecture d’une application Vue Pour bootstrapper une application Vue.js : ● Un élément html ● Une instance de Vue lié à cet élément Une bonne pratique : ● Mettre en place un composant racine 12 <div id="app"></div> index.html main.js new Vue({ el: '#app', template: '<App/>', components: { App } })
  13. 13. Les composants Architecture d’une application Vue Un composant Vue est défini par un objet JS qui se décompose selon la structure suivante : • template : template HTML du composant 13 const MyHeader = { template: `<h1>My application</h1>` };
  14. 14. const MyHeader = { template: `<h1> My application at {{ date }} </h1>`, data() { return { date: new Date().toString() }; } }; Les composants Architecture d’une application Vue Un composant Vue est défini par un objet JS qui se décompose selon la structure suivante : • template : template HTML du composant • data : attributs internes au composant 14
  15. 15. const MyHeader = { template: `<h1> My application at {{ date }} - {{ hello() }}</h1>`, data() { return { date: new Date().toString() }; }, methods : { hello() { return 'hello world'; } } }; Les composants Architecture d’une application Vue Un composant Vue est défini par un objet JS qui se décompose selon la structure suivante : • template : template HTML du composant • data : attributs internes au composant • methods : fonctions définies dans le composant 15
  16. 16. Valoriser une propriété d’un composant : ● Passer un objet Les composants Architecture d’une application Vue Un composant Vue est défini par un objet JS qui se décompose selon la structure suivante : • template : template HTML du composant • data : attributs internes au composant • methods : fonctions définies dans le composant • props : attributs passés par le composant appelant 16 const MyHeader = { props: ['name'], template: `<h1> My application at {{ date }} - {{ hello() }}</h1>`, data() { return { date: new Date().toString() }; }, methods : { hello() { return `hello ${this.name}`; } } }; <my-header name="Bob"></my-header> <my-header :name="username"></my-header> <my-header :name="'Bob'"></my-header> ● Passer une chaîne équivalent à
  17. 17. Les composants Architecture d’une application Vue Un composant Vue est défini par un objet JS qui se décompose selon la structure suivante : • template : template HTML du composant (pas pour les fichiers Vue) • data : attributs internes au composant • methods : fonctions définies dans le composant • props : attributs passés par le composant appelant • components : enregistrer localement des composants 17 const MyTime = { template: `<span>{{ date }}</span>`, data() { return { date: new Date().toString() }; } }; const MyHeader = { template: `<h1> My application at <my-time /> - {{ hello() }}</h1>`, props: ['name'], methods : { hello() { return `hello ${this.name}`; } }, components : { MyTime } };
  18. 18. Les propriétés avancées Architecture d’une application Vue • watch : méthodes qui permettent d’être notifié lors de la modification d’une propriété 18 const App = { template: ` <div> Your name : <input v-model="firstname" /> </div>`, data() { return { firstname: 'bob' } }, watch: { firstname(value, oldValue) { console.log('watch: firstname changed', value, oldValue); } } };
  19. 19. Les propriétés avancées Architecture d’une application Vue • computed : propriété qui est recalculé à chaque fois qu’une propriété dont elle dépend est modifiée. La valeur de la propriété est alors mise en cache 19 const App = { template: `<div>{{ computedFullName }} - {{ computedFullName }}</div>`, data() { return { firstname: 'bob', lastname: 'dupont' } }, computed: { computedFullName() { return this.firstname + ' ' + this.lastname; } }, };
  20. 20. Communication composants Architecture d’une application Vue Un composant peut posséder des entrées-sorties. ● Les entrées sont les propriétés (props) ● Les sorties correspondent à des événements émisent par le composant enfant 20
  21. 21. Communication composants Architecture d’une application Vue Composant parent Composant enfant const MyNotebook = { template: ` <div> <p>My name : <input v-model="name" /></p> <my-text :text="name" @textChanged="nameChanged" /> </div>`, data() { return { name: 'foobar', } }, methods: { nameChanged(content) { this.name = content; } }, components: { MyText } }; const MyText = { template: ` <div> <input v-model="content" /> </div>`, props: ['text'], data() { return { content: this.text } }, watch: { content() { this.$emit('textChanged', this.content); } } }; 21
  22. 22. Le cycle de vie Architecture d’une application Vue Un composant peut aussi posséder des “hooks” pour être notifié de son cycle de vie : Création du composant ● beforeCreated ● created Ajout au DOM ● beforeMount ● mounted Mise à jour du DOM ● beforeUpdate ● updated Destruction du composant ● beforeDestroy ● destroyed 22 const MyContent = { template: `<main>{{ content }}</main>`, data() { return { content: '' } }, created() { restService.getContent() .then(content => { this.content = content; }) } };
  23. 23. Les fichiers Vue Architecture d’une application Vue 23 Un fichier vue est composé comme suit : <template> <h1>{{ title }} - {{ date }}</h1> </template> <style scoped> h1 { color: blue; } </style> <script> export default { props: ['title'], data() { return { date: new Date().toString() }; }, }; </script> Pris en charge par vue-cli ● template ● script ● style (scoped ou non)
  24. 24. Les composants globaux Architecture d’une application Vue 24 ● Par défaut les composants utilisés doivent être importés (via la propriété components) ● Mais il est possible de créer des composants globaux : Vue.component('box', { template: `<div class="box">{{ content }}</div>`, props: ['content'] }); import Box from './components/Box.vue' Vue.component('box', Box); En déclarant le composant dans un fichier Vue :
  25. 25. 25
  26. 26. Les bindings La syntaxe de templating 26 <a href="https://vuejs.org/">link</a> <a v-bind:href="myLink">link</a> <a :href="myLink">link</a> Comment lier une propriété de mon composant à un attribut html ? Comment afficher une propriété dans mon template ? <h1>{{ title }}</h1>
  27. 27. Les conditions La syntaxe de templating <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else> Not A/B </div> 27
  28. 28. Les boucles La syntaxe de templating <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> <my-component v-for="item in items" :key=”item.id”></my-component> Boucler sur une liste de composants Depuis Vue 2.2.0 + la propriété key est obligatoire quand on utilise v-for avec les composants. 28
  29. 29. Les événements La syntaxe de templating <button v-on:click="method()"></button> <button @click="method($event)"></button> 29
  30. 30. Modèle binding La syntaxe de templating 30 <template> <div> <p>Your name : <input v-model="name" /></p> <p>Hello {{ name }}</p> </div> </template> <script> export default { data() { return { name: 'Bob' } } } </script>
  31. 31. Modèle binding : les modifiers 31 Les modifiers servent à modifier les valeurs associés à un modèle avant de mettre à jour le modèle <input v-model.trim="msg" /> <input v-model.lazy="msg" /> <input v-model.number="age" type="number" /> <input v-model.trim.lazy="msg" /> Il est aussi possible de combiner les modifiers :
  32. 32. 32
  33. 33. Les plugins Extensions de Vue 33 ● Les plugins ajoutent des fonctionnalités globales à Vue ● Il n'y a pas de portée strictement définie pour un plugin ● il existe plusieurs types de plugins: ○ Ajout de méthodes ou propriétés globales ex. vue-element ○ Ajout d’un ou plusieurs assets: directives/filters/transitions etc. ex. vue-touch ○ Ajout d’options aux components by global mixin. ex. vuex ○ Ajout de méthodes aux instances de Vue en passant par Vue.prototype ○ Une combinaison des méthodes ci-dessus. ex. vue-router. ● Pour utiliser un plugin :
  34. 34. Vue Router Extensions de Vue 34 Vue.js permet de créer des applications single page performantes. Pour cela, la gestion des routes est possible via « vue-router » 1) Déclarer le plugin VueRouter 2) Création des composants 3) Définition des routes 4) Création d’une instance du vue Router 5) Création de l'instance Racine Vue avec le router
  35. 35. Vue Router Extensions de Vue 35 6) Template du composant Racine Pour aller plus loin : https://router.vuejs.org/en/
  36. 36. 36
  37. 37. 37
  38. 38. Sujet Hand’s On Nous souhaitons développer le site web SuperCook qui permet de partager ses recettes de cuisines. La création de cette application se fera en plusieurs étapes : 1. Création d’un composant affichant une recette 2. Création d’un composant afficher une liste de recette 3. Création d’un composant de détail d’une recette et mise en place du routage 4. Permettre l’ajout d’une nouvelle recette 5. Pouvoir enregistrer en favoris des recettes Récupération des sources : https://github.com/xebia-france/xebicon17-vuejs 38
  39. 39. 39
  40. 40. Quelques liens Ressources ● La documentation officielle : https://vuejs.org/v2/guide/ ● Cheatsheet : https://vuejs-tips.github.io/cheatsheet/ ● Bibliothèque de composants : https://vuetifyjs.com/ ● Ultime page de ressources : https://github.com/vuejs/awesome-vue ● Bonnes pratiques : https://github.com/pablohpsilva/vuejs-component-style-guide 40
  41. 41. Astuce Hand’s On ● Pour utiliser SASS : npm install sass-loader node-sass webpack --save-dev ○ puis au niveau de la balise style ajouter : lang=”scss” 41 <style lang="scss"> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; header { text-align: center; } } </style>

×