Vue.js : Développer des applications web modernes et performantes Mixte : présentiel / à distance

• 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

• Développeurs web, front-end, Full-stack
• Intégrateurs web
• Architectes logiciels front-end
• Chefs de projet techniques

• Avoir une bonne connaissance pratique de HTML
• Maîtriser JavaScript (ES5 minimum, ES6+ recommandé)
• Un questionnaire de positionnement sera réalisé au préalable pour adapter la formation à vos besoins

Jour 1 :

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.

Jour 2 :

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.

Jour 3 :

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.

• Exercices concrets
• Cas pratiques
• Quiz d'évaluation des connaissances

• Mise à disposition de postes de travail
• Vidéoprojecteur, tableau blanc, supports numériques
• Documentation pédagogique numérique

• Positionnement en amont de la formation :
• Un quiz de consolidation des pré-requis sera administré en amont de la formation
• Suivi « pendant » :
• Feuilles de présence
• Exercices pratiques
• Évaluation « fin de formation »
• Évaluation des acquis en fin de formation
• Formulaires d'évaluation de la formation
• Évaluation à froid :
• Suivi post-formation : Questionnaire de satisfaction à j+30

• Configurer l'environnement de développement Vue.js avec Vue CLI ou Vite et les outils nécessaires
• Expliquer les principes clés de Vue.js (MVVM, réactivité, Options API vs Composition API)
• Développer une Single Page Application (SPA) complète avec Vue.js et ses composants
• Créer des composants réutilisables en utilisant les bonnes pratiques (props, events, slots)
• Implémenter le routing avec Vue Router pour gérer la navigation multi-pages
• Gérer l'état de l'application avec Vuex ou Pinia pour centraliser les données
• Consommer des API REST en utilisant Axios ou Fetch pour récupérer et envoyer des données
• Utiliser une bibliothèque de composants graphiques (Vuetify ou équivalent) pour accélérer le développement
• Mettre en œuvre les tests et la qualité du code avec ESLint, tests unitaires et d'intégration
• Déployer une application Vue.js en production en optimisant les performances et la rétrocompatibilité

Délais d'accès à la formation

Le délai d'accès à la formation est variable en fonction du dispositif de financement utilisé, du planning des formateurs et des contraintes du client. Pour les formations inter-entreprises, vous pouvez consulter notre calendrier en ligne ou prendre contact avec nous. Nous traitons vos demandes sous 48 heures

Accessibilité

Si vous êtes en situation de handicap, merci de nous en informer afin de vous accompagner, vous orienter, et étudier les compensations nécessaires pour répondre au mieux à votre demande de formation. Certaines formations peuvent nécessiter une adaptation pour les personnes en fonction de leur handicap. Nous restons disponibles pour échanger ensemble et nous pourrons vous orienter vers un de nos partenaires : Agefiph, Cap Emploi

Contactez-nous pour échanger sur vos besoins !

Rachel Girardeau

✉️ formation@napsia.com

📞 05 62 84 10 13