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 suffisante 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 notification 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éfini

==> 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 filtres

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



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 afin de permettre au autre composantqui 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.

OLBATI - Geek Time - Mai 2016 ‹#›

Thanks! Any questions?

@oboudhri [email protected]

mailto:[email protected]

geek time mai 2017 : vue.js

Software