Geek Time Mai 2017 : Vue.js

Geek Time - Mai 2017
Oussama BOUDHRI
Consultant - OLBATI
Introduction Vue.js

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

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 !

Qu’est ce que vue.js ?
Progressive javascript
framework
Créer des
applications SPA
Composantes
reactives
Virtual DOM

Reactive Interfaces
Declarative Rendering
Data Binding
Directives
Template Logic
Component & Nesting
Event Handling
Computed Properties
CSS Transitions & Animation
Custom Filters

Ecosystème :
- vuex (state management)
- vue-resource (HTTP requests)
- vue-router (routing)
- vue-cli (command line scaffolding)
- vue-developer (chrome devtools extension for debugging)

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 sufﬁsante
pour écrire des applications non triviales

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

• Performant et rapide

Architecture & Lifecycle

Architecture & Lifecycle
Chaque instance de composant a son propre instance watcher
Quand le setter d’une dependance est déclenché
Une envoi de notiﬁcation vers le watcher
Appel de re-render component
Mise à jour du virtual DOM
• Reactivité

Notions : Component
Pour enregistrer un component, on utilise le syntaxe Vue.component(tagName, options)
Par exemple :
Utilisation du composant dans le template :

Notions : Component
• Local registration
Rendre un composant disponible dans la portée d'une autre instance / composant
en l'enregistrant avec l'option component:

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éﬁni
==> Isolation des compostants ==> maintenabilité et reutilisabilité

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

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

Notions : Component
• Props
recevoir les données à travers un attribut

Notions : Component
• Props validation

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” ?

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)

Notions: Conditionals
• v-if
• v-else-if

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.

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

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 ﬁltres
• Filter vue.js

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

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”

• Exemple

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

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:

Notions: Watchers
Exemple:

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:

Routing
Il est recommandé d'utiliser la bibliothèque vue-routeur pour gérer la navigation des pages:
HTML:

Routing
Router javascript configuration:

Gestion des états avec Vuex
Le concept de "one-way data ﬂow” :
- 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

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

Vuex pattern inspiré de Flux, Redux qui est une implémentation dédié pour vue.js

L’installation de vuex se fait avec la commande npm install vue —save
La création d’un simple store :

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é ?

Recuperation de l’etat à partir d’un composant
La variable store est passé dans le composant parent aﬁn de permettre au autre composant
qui l’appelle d’accéder á la variable Store

Declaration des Getters au sein d’un store
Getter call :
Getters :

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

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

Conclusion
Le point faible de Vue.js aux yeux des décideurs est qu’il reste un framework d’une « seule
personne »

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.

‹#›
Thanks!
Any questions?
@oboudhri
oussama.boudhri@olbati.com

Geek Time Mai 2017 : Vue.js

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Geek Time Mai 2017 : Vue.js

Similaire à Geek Time Mai 2017 : Vue.js (20)

Plus de OLBATI

Plus de OLBATI (16)

Geek Time Mai 2017 : Vue.js