PLB CONSULTANT : 07. Vue.js - Développement d'applications web

Avantages et inconvénients de Vue.js

Qu’est-ce qu’une application SPA (Single Page Application) ?

Les origines du framework Vue.js

Pourquoi choisir Vue.js?

Comparaison avec les frameworks (jQuery, Angular, ReactJS)

Travaux pratiques

Identifier les apports de Vue.js sur une problématique prédéfinie

Utilisation simple de Vue

Utilisation simple, sans outils de build

Présentation de "hello world"

Savoir intégrer Vue.js incrémentalement

Travaux pratiques

Premier développement avec Vue.js

Quiz de validation des acquis

Utilisation sous forme de templates

Le one-way data binding

Connaître les méthodes d'utilisation de Vue.js

Les computed properties

Directives de contrôle de flux

Directives de gestion d'évènements

Présentation des principaux filtres

Les composants fournis avec Vue.js

Connaître les pièges les plus courants

Travaux pratiques

Intégrer Vue.js en tant que template

Utilisation sous forme de composant

Découpler les widgets du HTML

Présentation du cylcle de vie des composants

Modules complets "stand alone"

Connaitre la hiérarchie et la composition

Maîtriser les états et la communication entre composants

Travaux pratiques

Intégrer Vue.js en tant que composant

Quiz de validation des acquis

Routing avec Vue-router

La déclaration des vues

La manipulation de l’historique 

La navigation

Routes imbriquées / Nested routes

Redirection

Gestion d‘erreur 

Les messages flash

Travaux pratiques

Configuration du mode « historique » (configuration server-side, paramètres d’URL)

Data store avec Vuex (introduction)

Les apports d’un gestionnaire d’état (état, vue, actions)

Zone de stockage centralisée pour tous les composants

Règles pour contrôler les mutations de l’état de l’application 

Créer et appeler des actions

Cache et performance

La gestion des erreurs

Définir des accesseurs (getters)

Travaux pratiques

Calcul des valeurs basées sur l’état du store pour filtrer une liste d’éléments et les compter.

Vue.js et les données extérieures (Call API)

Utiliser Axios pour consommer des API

Consommation d’une API REST avec Vue 3

Travaux pratiques

Récupération et affichage des données d’une API (liste de contacts), filtrage pour n’afficher que les informations dont nous avons besoin

Vue.js dans une stack JS moderne : npm, webpack et Babel

Installation via le package manager

La construction via webpack

Pre-processing avec Babel

Travaux pratiques

Déploiement de Vue.js en production (réduction de la taille de notre application)

Bonnes pratiques avec Vue.js

Emplacements et composants

Organisation du store Vuex

Appels d’API et validation des données

Comment simplifier notre base de code (mapState, mapGetters, mapMutations, mapActions)

Les factory API 

La gestion des variables d’environnements ($config)

Bonnes pratiques dans le nommage des commit (git)

Optimiser l’utilisation des bibliothèques (coût d’importation)

Travaux pratiques

Mise en œuvre dans le cadre de notre TP fil rouge (front-end de blog listant des articles et permettant la lecture, l’ajout, la modification et la suppression)