Description
Vue.js est l'un des Frameworks de développement front-end les plus légers et simple d’utilisation pour créer des applications Web modernes. Vue.js gagne rapidement en popularité avec une très forte communauté open-source. Cette formation vous apprendra tous les principes fondamentaux du développement Vue, notamment la création de composants, de directives, de filtres, le routage, la gestion d'état Vuex et le déploiement en production.
A l’issue de la formation, vous serez capable de développer une application Single Page App (SPA) complète avec le framework open source JavaScript Vue.js.
Objectifs
- Maîtriser l'environnement du développeur JS
- Comprendre les principes clés et bonnes pratiques de js
- Développer une SPA avec js
- Connaître les outils indispensables au développement d'applications web dynamiques avec js
- Réaliser les tests
Récapitulatif
Public
Développeurs web, intégrateurs, architectes logiciel, chefs de projet…
Prérequis
Avoir une bonne connaissance pratique de HTML et la maîtrise de JavaScript (ES5 minimum)
Méthodes et modalités pédagogiques
Formation réalisée en Présentiel, Distanciel ou Dual-Learning selon la formule retenue.
Moyens et supports pédagogiques
Mise à disposition d'un poste de travail sur nos formations en Présentiel.
Mise à disposition de nos environnements de visio sur nos formations en Distanciel
Remise d'une documentation pédagogique numérique pendant la formation
La formation est constituée d'apports théoriques, d'exercices pratiques et de réflexions
Dans le cas d'une formation sur site Entreprise, le client s'engage à avoir toutes les ressources pédagogiques nécessaires (salle, équipements, accès internet, TV ou Paperboard...) au bon déroulement de l'action de formation conformément aux prérequis indiqués dans le programme de formation
Modalités de suivi et d'évaluations
Auto-positionnement des stagiaires avant la formation
Émargement des stagiaires et formateur par 1/2 journée
Exercices de mise en pratique ou quiz de connaissances tout au long de la formation permettant de mesurer la progression des stagiaires
Auto-évaluation des acquis de la formation par les stagiaires
Questionnaire de satisfaction à chaud et à froid à l'issue de la formation
Programme détaillé
Maîtriser l'environnement du développeur JS
- Les Single Page Applications
- Les limites de Javascript et de jQuery
- Lenteurs du DOM
- Positionnement de js
- Exemple de travaux pratiques : le formateur réalise une maquette simple d'une page web. Il réalise un diagramme de classe UML pour représenter la modélisation et le découpage de la page sous forme de composants web. A partir du diagramme de classe, il implémente une partie du code pour montrer le fonctionnement d'une SPA en “from scratch” (en partant de zéro, sans Framework) et mettre en application les syntaxes ES6. Les participants reproduisent et exécutent le code sur leur poste de travail.
Comprendre les principes clés et bonnes pratiques de Vue.js
- Migration vers js et les versions de Vue.js
- MVVM selon js
- Les outils nécessaires liés à l'utilisation de js (Vue CLI, etc.)
- Les notions et syntaxes de bases (Options API vs Composition API, …)
- Notion de component (HTML vs SFC…)
- La liaison de données (variables réactives et liaisons d'attributs)
- Les structures de contrôle
- Notion d'event
- Exemples de travaux pratiques : Le formateur illustre les principaux concepts à partir d'exemples de code. Les participants reproduisent les manipulations. Le formateur peut vérifier le résultat obtenu par les participants pour valider l'exercice.
Développer une SPA avec Vue.js
- Les essentiels de js
- Cycle de vie d'une requête dans js et son rôle
- Les modèles
- Notion d'interpolation
- Attributs, filtres et directives
- Les propriétés calculées
- Différence entre v-model et v-bind
- Le v-model
- Gérer des listes
- L'affichage conditionnel
- Event management
- Les composants dynamiques
- Echange de données entre composants
- L'organisation des composants
- Mixins et Composition API
- Custom Directives
- Render Functions & JSX
- Plugins
- Exemples de travaux pratiques : les participants mettent en pratique les modules présentés en suivant un énoncé qui leur permet de manipuler chaque cas de façon indépendante. Le formateur peut vérifier le résultat obtenu par les participants pour valider l'exercice.
Connaître les concepts et outils indispensables au développement d'applications web dynamiques avec Vue.js (1/2)
- Identifier les principales librairies de composants graphiques du marché
- Utiliser une librairie de composants graphiques avec Vuetify ou une alternative
- Créer une navigation avec Vue-router
- Présentation des routes
- Les modes
- Les liens
- Vue initiale et liens
- Exemples de travaux pratiques : les participants mettent en pratique les notions présentées en suivant un énoncé qui leur permet de manipuler chaque cas de façon indépendante : ils continuent par exemple le cas pratique démarré lors de la séquence précédente : ajouter un menu, une navigation avec différents liens.
Connaître les concepts et outils indispensables au développement d'applications web dynamiques avec Vue.js (2/2)
- Présentation des patterns de gestion d'états Flux et Redux
- Gestion des états simple et optimisée avec Pinia
- Gérer des états avec Vuex
- Consommer des API REST avec l'API native fetch ou la librairie Axios
- Exemples de travaux pratiques : Les participants continuent le cas pratique démarré lors de la séquence précédente : créer un store pour ajouter des articles dans un panier, valider la commande avec un appel API. Le formateur peut vérifier le résultat obtenu par les participants pour valider l'exercice.
Réaliser les tests
- La rétrocompatibilité pour les vieux navigateurs (si besoin avéré)
- La qualité du code avec les tests, l'analyse des dépendances
- Un code plus maintenable avec TypeScript et ES Lint
- Un code plus performant avec les outils de builds (production & deployment)
- Brainstorming : le formateur interroge les participants concernant les concepts ou problématiques présentés (rétrocompatibilité, qualité, maintenabilité et performance). Chacun peut faire part de son retour d'expérience, ou commenter.