Vue 3.0 au service de l'UX
About Me
- Freelance Consultant Developer
- Symfony Expert (and Laravel Addict...)
- Trainer in Development for Wild Code School
- Lover Frontend-Framework (Angular(JS|2-4), VueJS)
Follow-Me: @Symfomany
Les Tendances
1ère Partie: VueJS
About VueJS
- Ce n'est pas un frameworks, c'est une librairie
- Approchable: necessite du HTML, CSS & JS
- Versatile: Son approche Objet en ES6
- Composition: Approche Orienté-Composants
- Réutilisable: Utilise la DOM Shadow & Web Components
- Performant: 16Kb + Virtual DOM
Doc: https://vuejs.org/
Doc en fr: https://fr.vuejs.org/v2/guide/
Une Application, c'est quoi?
ES6 TOP 10 YOU SHOULD KNOW...
- Default Parameters in ES6
- Template Literals in ES6
- Multi-line Strings in ES6
- Destructuring Assignment in ES6
- Enhanced Object Literals in ES6
- Arrow Functions in ES6
- Promises in ES6
- Block-Scoped Constructs Let and Const
- Classes in ES6
- Modules in ES6
De la réactivité dans votre développement/pHILOSOPHIE
Form BInding
-
Two-Way Binding avec v-model (MVVM)
Possibilité de Persistance de la donnée lors du submit du formulaire
Possibilité de définir des Modifiers
TWO-WAY BINDING
VueJS - Directives
- Philosophie et Programmation Déclarative dans le HTML
- Maîtrise des Templates VueJS
- Travailles directement avec les variables du Model
v-for, v-if, v-else, v-model, v-once, v-bind, v-show, v-cloak
VUE-Router
- Configuration Orientée-Composant
- Utilisation des Composants router-link et router-view
- Récupération et contrôles via l'objet $route
- Support du lazy loading, des guards, des vues nommées etc...
- Redirection programmatique via l'objet $router
Les Composants
VueJS - Fichiers .vue
- Import via des modules ECMAScript 2015
- Meilleur découpage, testable facilement
- Tout le code au même endroit
- Intégrée à WebPack
- CSS scopé
Et tu composes, et tu composes...
- Le système de composant est un autre concept important de Vue, car c’est une abstraction qui nous permet de construire de plus grosses applications composées de plus petits composants réutilisables et autonomes.
- Quand on y pense, presque tous les types d’interface applicative peuvent être abstraites en un arbre de composants.
Communication SImple
entre Composants
QueLle architecture ChoisiR?
YOU SHOULD VUE-CLI
TO GET ARCHITECTURE
npm install vue-cli
npm init webpack my-project
cd my-project
npm iNSTALL
npm run dev/start
TOUJOURS plus loin ...
Simple State Management Pattern
Il sert de store centralisé pour tous les composants dans une application, avec des règles pour s'assurer que l'état ne peut subir des mutations que d'une manière prévisible.
VueX
Centralisation de l'état de votre application et des mutations dans un store
Toutes mises à jours d'une donnée passera par un commit (enregistrement d es actions)
Création d'un mapping entre une variable locale et une variable du store
VueX POUR LES APPS COMPLEXES
- L'État (state), qui est la source de vérité qui dirige notre app;
- La Vue (view), qui est juste un mapping déclaratif du state;
- Les Actions, qui sont les façons possibles pour le state de changer en réaction aux actions de l'utilisateur depuis la vue.
Dan Abramov, l'auteur de Redux (React)
Flux libraries are like glasses: you’ll know when you need them. "
Vue Awesome
VueJS
By Julien Boyer
