PLB CONSULTANT : 07. Vue.js - Développement d'applications web
Organisme
92300 LEVALLOIS PERRETVoir toutes ses formationsAutres organismes proposant cette formation
Durée
Modalités
- Classe virtuelle
- Présentiel
Travaux pratiques. Auto-évaluation en début et en fin de formation.
Prix
Public
Développeurs web, intégrateurs, architectes logiciel, chefs de projet…
Pré-requis
Avoir une bonne connaissance pratique de HTML et la maîtrise et de JavaScript (ES5 minimum).
Objectifs pédagogiques
- Maîtriser l’environnement du développeur JS
- Comprendre les principes clés de Vue.js
- Savoir développer une SPA avec Vue.js
- Connaître les outils indispensables au développement d'applications web dynamiques avec Vue.js
- Appliquer les bonnes pratiques à un projet Vue.js
Programme détaillé
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)