Aller au contenu principal

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

Organisme

PLB CONSULTANT
3-5 RUE MAURICE RAVEL
92300 LEVALLOIS PERRET
Voir toutes ses formationsAutres organismes proposant cette formation

Durée

21 heures

Modalités

Formation
  • Classe virtuelle
  • Présentiel
Évaluation

Travaux pratiques. Auto-évaluation en début et en fin de formation.

Prix

Inter
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
882€ HT / personne
Intra
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
3528€ HT / groupe
4 stagiaires minimum

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)

Sessions

Filtrer les résultats
Modalités pédagogiques
Formation synchrone se déroulant avec la présence physique du (des) formateur(s) et du (des) apprenant(s) réunis dans un même lieu de formation.
Formation combinant des séquences en présentiel et des séquences à distance synchrones ou asynchrones.
Formation à distance, asynchrone, s’appuyant sur une plateforme d’apprentissage, pouvant être complétée par d’autres modalités de formation à distance (visio-conférence…)
Formation à distance, synchrone, s’appuyant sur un dispositif de visio-conférence. La classe virtuelle recrée à distance les conditions d’une formation en salle traditionnelle.
Type de formation
La formation en Inter est dispensée pour un groupe de salariés d’entreprises différentes.
La formation en Intra est dispensée pour un groupe de salariés d’une seule et même entreprise.
Options
Les compétences professionnelles visées par la formation sont validées via un test permettant d’obtenir une certification officielle.
Ces sessions ne peuvent être ni annulées ni reportées par l’organisme de formation.