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.

Geek Time Mai 2017 : Vue.js

235 views

Published on

Vue.js
Par Oussama BOUDHRI, Consultant OLBATI
Au Geek Time de Mai 2017

Published in: Software
  • Be the first to comment

  • Be the first to like this

Geek Time Mai 2017 : Vue.js

  1. 1. Geek Time - Mai 2017 Oussama BOUDHRI Consultant - OLBATI Introduction Vue.js
  2. 2. OLBATI - Geek Time - Mai 2016 PLAN 1- Introduction 2-Qu’est ce que vue.js 3- Pourquoi vue.js / Benchmark 4- Architecture & Lifecycle 5- Notions vue.js 6- Routing 7- Gestion des états avec vuex (Flux implemetation) 8- Conclusion
  3. 3. OLBATI - Geek Time - Mai 2016 Introduction Si vous avez déjà été dans l’une des situations suivantes - Des composants JS difficile à maintenir - Avoir l’impression d’avoir installé une usine à gaz pour gérer la partie front de l’appli - Trouver une difficulté d’apprentissage d’un framework et vous avez des délais serrés Vue.js vous intéressera peut être !
  4. 4. OLBATI - Geek Time - Mai 2016 Qu’est ce que vue.js ? Progressive javascript framework Créer des applications SPA Composantes reactives Virtual DOM
  5. 5. OLBATI - Geek Time - Mai 2016 Qu’est ce que vue.js ? Reactive Interfaces Declarative Rendering Data Binding Directives Template Logic Component & Nesting Event Handling Computed Properties CSS Transitions & Animation Custom Filters
  6. 6. OLBATI - Geek Time - Mai 2016 Qu’est ce que vue.js ? Ecosystème : - vuex (state management) - vue-resource (HTTP requests) - vue-router (routing) - vue-cli (command line scaffolding) - vue-developer (chrome devtools extension for debugging)
  7. 7. OLBATI - Geek Time - Mai 2016 Pourquoi vue.js / Benchmark • Simple Pas besoin de bibliothèques externes, ni de plugins Code très lisible Facilité d’apprentissage, une documentation très complète Le créateur du framework dit qu’une journée d’apprentissage est généralement suffisante pour écrire des applications non triviales
  8. 8. OLBATI - Geek Time - Mai 2016 Pourquoi vue.js / Benchmark • Léger L’application Vue 2.0 complète, compilateur inclus, ne fait que 23 Ko => plus léger que les autres frameworks du marché.
  9. 9. OLBATI - Geek Time - Mai 2016 Pourquoi vue.js / Benchmark • Performant et rapide
  10. 10. OLBATI - Geek Time - Mai 2016 Architecture & Lifecycle
  11. 11. OLBATI - Geek Time - Mai 2016 Architecture & Lifecycle
  12. 12. OLBATI - Geek Time - Mai 2016 Architecture & Lifecycle Chaque instance de composant a son propre instance watcher Quand le setter d’une dependance est déclenché Une envoi de notification vers le watcher Appel de re-render component Mise à jour du virtual DOM • Reactivité
  13. 13. OLBATI - Geek Time - Mai 2016 Notions : Component Pour enregistrer un component, on utilise le syntaxe Vue.component(tagName, options) Par exemple : Utilisation du composant dans le template :
  14. 14. OLBATI - Geek Time - Mai 2016 Notions : Component • Local registration Rendre un composant disponible dans la portée d'une autre instance / composant en l'enregistrant avec l'option component:
  15. 15. OLBATI - Geek Time - Mai 2016 Notions : Component • Composing components Le composant A peut utiliser le composant B dans son propre template Le parent peut avoir besoin de transmettre les données au composant “child” L'enfant peut avoir besoin d'informer le parent de ce qui s'est passé dans l’enfant ==> Il faut un bon découplage via des interfaces défini ==> Isolation des compostants ==> maintenabilité et reutilisabilité
  16. 16. OLBATI - Geek Time - Mai 2016 Notions : Component • Composing components Dans vue.js, la relation composant de type parent-child est defini par: props down, event up - le composants parent passe les donnée pour le child a travers des props - le composants child passe les données pour le parent a travers des events
  17. 17. OLBATI - Geek Time - Mai 2016 Notions : Component • Props Chaque instance de composant à sa propre “scope” Cela signifie qu’on peut pas referencer directement les données d’un composant “parent” à partir d’un composant “child” Les données de type “up to down” sont passés à travers les props
  18. 18. OLBATI - Geek Time - Mai 2016 Notions : Component • Props recevoir les données à travers un attribut
  19. 19. OLBATI - Geek Time - Mai 2016 Notions : Component • Props validation
  20. 20. OLBATI - Geek Time - Mai 2016 Notions : Component • Custom Events => C’est pour cela on a besoin des custom events Et comment on peut communiquer les données d’un élément composant de type “child” vers un composant “parent” ?
  21. 21. OLBATI - Geek Time - Mai 2016 Notions : Component • Custom Events Chaque Vue instance implémente l’interface des events: • Ecoute les évènements à travers $on(eventName) • Envoyer les évènements à travers $emit(eventName)
  22. 22. OLBATI - Geek Time - Mai 2016 Notions: Conditionals • v-if • v-else-if
  23. 23. OLBATI - Geek Time - Mai 2016 Notions: Conditionals • v-show • v-show Vs v-if v-show compile et rend toujours le contenu, il ajoute simplement le style “display:none” à l’élement Il y a un cout de chargement initial au debut, mais le changement d’état affiché/non-affiché est rapide. v-if c’est lazy, quand la condition = false rien n’est fait, sinon il compile et rend le contenu Le basculement de la condition est couteux car il permet de créer et détruire des composants pour chaque changement d’état.
  24. 24. OLBATI - Geek Time - Mai 2016 Notions: Filters Vue possède commodément un certain nombre de filtres intégrés Le symbole de pipe (|) est utilisé pour désigner un filtre tel que
  25. 25. OLBATI - Geek Time - Mai 2016 Notions: Filters Les filtres peuvent être placés à la fin de la valeur d'une directive: ou dans un syntaxe mustache ou avec un chainage de plusieurs filtres • Filter vue.js
  26. 26. OLBATI - Geek Time - Mai 2016 Notions: Filters • Custom Filter on peut enregistrer un filtre personnalisé avec la méthode globale Vue.filter(), en passant en paramètre l’ID du filtre et la fonction de filtrage Utilisation du filtre Enregistrement du filtre
  27. 27. OLBATI - Geek Time - Mai 2016 Notions: Computed Properties Mettre trop de logique dans les templates peut les rendre trop verbeux et difficiles à maintenir: => Difficulté d’inclure le message inversé dans votre modèle plus d'une fois. C'est pourquoi pour toute logique complexe dans les templates, on utilise les “computed properties”
  28. 28. OLBATI - Geek Time - Mai 2016 Notions: Computed Properties • Exemple
  29. 29. OLBATI - Geek Time - Mai 2016 Notions: Computed Properties Les “computed properties” sont mises en cache en fonction de leurs dépendances. Ceci est changé lorsque certaines de ses dépendances ont changé. Cela signifie que tant que le message n'a pas changé, l'accès multiple à la propriété calculée reversedMessage enverra immédiatement la valeur précédente sans devoir exécuter la fonction à nouveau. • Exemple
  30. 30. OLBATI - Geek Time - Mai 2016 Notions: Watchers Lorsque on souhaite effectuer des opérations asynchrones ou coûteuses en réponse à la modification des données. => On a besoin d’un watcher Exemple:
  31. 31. OLBATI - Geek Time - Mai 2016 Notions: Watchers Exemple:
  32. 32. OLBATI - Geek Time - Mai 2016 Notions: Class & style bindings Nous pouvons transmettre à l’attribut v-bind:class un objet pour affecter dynamiquement les classes css: Contenu du model: Rendu dans le DOM:
  33. 33. OLBATI - Geek Time - Mai 2016 Routing Il est recommandé d'utiliser la bibliothèque vue-routeur pour gérer la navigation des pages: HTML:
  34. 34. OLBATI - Geek Time - Mai 2016 Routing Router javascript configuration:
  35. 35. OLBATI - Geek Time - Mai 2016 Gestion des états avec Vuex Le concept de "one-way data flow” : - State : Conteneur qui stocke l’état de l’application - View : Afficher l’état et déclencher des actions - Action : Contient les différents possibilités d’actions qui peuvent être appliqué sur l’état
  36. 36. OLBATI - Geek Time - Mai 2016 Gestion des états avec Vuex Si on a plusieurs composants qui partagent le même état - Plusieurs Vue qui dependent de la même partie qui stocke l’état - Des actions qui ont besoin de changer l’état on même temps => Mutation
  37. 37. OLBATI - Geek Time - Mai 2016 Gestion des états avec Vuex Vuex pattern inspiré de Flux, Redux qui est une implémentation dédié pour vue.js
  38. 38. OLBATI - Geek Time - Mai 2016 Gestion des états avec Vuex L’installation de vuex se fait avec la commande npm install vue —save La création d’un simple store :
  39. 39. OLBATI - Geek Time - Mai 2016 Gestion des états avec Vuex Recuperation de l’etat à partir d’un composant Soit un composant qui va être appelé par un compostant parent : Mais comment l’objet store a été passé ?
  40. 40. OLBATI - Geek Time - Mai 2016 Gestion des états avec Vuex Recuperation de l’etat à partir d’un composant La variable store est passé dans le composant parent afin de permettre au autre composant qui l’appelle d’accéder á la variable Store
  41. 41. OLBATI - Geek Time - Mai 2016 Gestion des états avec Vuex Declaration des Getters au sein d’un store Getter call : Getters :
  42. 42. OLBATI - Geek Time - Mai 2016 Gestion des états avec Vuex Declaration des Actions au sein d’un store qui contient des opérations asynchrones Actions : Les Actions sont déclenché par la méthode store.dispatch
  43. 43. OLBATI - Geek Time - Mai 2016 Gestion des états avec Vuex Mais si on veut faire l’incrementation, pourquoi on appelle pas directement store.commit(‘increment’) ? La raison : - Les mutations doivent être synchrones - Par contre, les actions ne sont pas synchrones
  44. 44. OLBATI - Geek Time - Mai 2016 Conclusion Le point faible de Vue.js aux yeux des décideurs est qu’il reste un framework d’une « seule personne »
  45. 45. OLBATI - Geek Time - Mai 2016 Conclusion - Vue.js ne joue vraiment pas dans la cour d’Angular 2, mais vous n’avez pas toujours besoin d’une telle puissance. - La puissance d’Angular 2 est contrebalancée par la complexité et une courbe d’apprentissage assez raide. Vue 2 est sûrement un framework à considérer pour votre prochain projet.
  46. 46. OLBATI - Geek Time - Mai 2016 ‹#› Thanks! Any questions? @oboudhri oussama.boudhri@olbati.com

×