Description
Ce programme de formation vise à initier les participants aux spécificités de Vue.js, un framework essentiel pour le développement d'applications web dynamiques. Il aborde les concepts clés tels que les Single Page Applications, le modèle MVVM, et les outils nécessaires comme Vue CLI et Vue Router. Les apprenants découvriront également la gestion des états avec Vuex, l'interaction avec des API REST via Axios, et les bonnes pratiques de développement, incluant la qualité du code et l'optimisation des performances. Ce cursus s'adresse aux développeurs souhaitant approfondir leurs compétences en Vue.js.
Objectifs
- Identifier l'environnement du développeur JSIdentifier et définir les principes clés de Vue.jsDévelopper une SPA avec Vue.jsConnaître les outils indispensables au développement d'applications web dynamiques avec Vue.jsAppliquer les bonnes pratiques à un projet Vue.js
Récapitulatif
Public
Développeurs web, intégrateurs, architectes logiciel, chefs de projet…
Prérequis
Avoir une bonne connaissance pratique de HTML
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é
Identifier les spécificités de Vue.js
- Les Single Page Applications
- Les limites de Javascript et de jQuery
- Lenteurs du DOM
- Positionnement de Vue.js
- Démonstration :
- - Installation de l'environnement de travail
- - Code en direct (live-coding)
Identifier et définir les principes clés de Vue.js
- Migration vers Vue.js et les versions de Vue.js
- MVVM selon Vue.js
- Les outils nécessaires liés à l'utilisation de Vue.js (Vue CLI, etc.)
- Les notions et syntaxes de bases
- Notion de component
- La liaison de données
- Les structures de contrôle
- Notion d'event
- Démonstration :
- - Initialiser un projet Vue.js et manipuler ses premiers composants
Développer une SPA avec Vue.js
- Les essentiels de vue.js
- - Cycle de vie d'une requête dans Vue.js et son rôle
- - Les modèles
- - Notion d'interpolation
- - Attributs, filtres et directives
- - Les propriétés calculées
- - Le v-model et la macro defineModel
- - Gérer des listes (v-for, …)
- - L'affichage conditionnel (v-if, …)
- - Event management (v-on, handlers, …)
- - Les composants dynamiques
- - Echange de données entre composants
- L'organisation des composants
- - Mixins (Vue 2) ou composable functions (Vue 3 composition API)
- - Custom Directives
- - Render Functions & JSX
- - Plugins
Connaître les concepts et outils indispensables au développement d'applications web dynamiques avec Vue.js (1/2)
- Utiliser une librairie de composants graphiques avec Vuetify
- Créer une navigation avec Vue-router
- - Présentation des routes
- - Les modes
- - Les liens
- - Vue initiale et liens
- - Router Hooks et Composition API
Connaître les concepts et outils indispensables au développement d'applications web dynamiques avec Vue.js (2/2)
- Gérer des états avec Vuex
- - Présentation de Flux et Redux
- - Gestion de store
- Consommer des API REST avec Axios
Appliquer les bonnes pratiques à un projet Vue.js
- La rétrocompatibilité pour les vieux navigateurs
- La qualité du code avec les tests
- Un code plus maintenable avec TypeScript, ES Lint, Prettier
- Un code plus performant avec les outils de builds (webpack vs vite, options de compilation pour la production ou le développement)