Bibliothèques et frameworks javascript

Vue.js, maîtriser le framework JavaScript Open Source

21 heures 0 mins

Bibliothèques et frameworks javascript

Objectifs de la formation

  • Comprendre les concepts clés de Vue.js
  • Être capable de développer une application Single Page App complète avec Vue.js
  • Connaître les outils indispensables au développement d’applications Vue.js

Programme de la formation

L’écosystème du développeur JS moderne

  • La spec ECMAScript.
  • La syntaxe ES6+.
  • Les nouveautés d’ES9/ES10.
  • Babel & Webpack.

Travaux pratiques

Mise en place d’un environnement de développement JS optimisé.

Premiers pas avec Vue.js

  • Principes clés de Vue.js.
  • Vue.js vs React vs Angular.
  • Roadmap et prochaines versions.
  • Créer et gérer un projet avec vue-cli.
  • La base d’une application : l’instance Vue.
  • Créer son premier composant Vue.js.
  • Gérer les événements du DOM.
  • Débugger avec vue-devtools.

Travaux pratiques

Créer le projet Vue.js qui servira de base au reste des TP.

Répartir son code dans des composants

  • L’imbrication de composants et les props.
  • Passer du contenu à un composant : les slots/children.
  • Déclencher des événements custom.
  • Le cycle de vie des composants.

Travaux pratiques

Refactorisation du code de l’application fil rouge : répartition dans des sous-composants.

Enrichir ses templates

  • Filters et computedProps : simplifier l’écriture des templates.
  • Templates vs render methods & JSX.
  • Composants fonctionnels.
  • Animations & transitions : améliorer l’expérience utilisateur.

Travaux pratiques

Améliorer l’affichage de l’application : les différentes techniques de rendu.

Gérer la navigation

  • Développer un système de routing maison.
  • Principes de Vue router.
  • Configurer des routes.
  • Sécuriser une application : les Navigation Guards.
  • Transitions entre écrans.

Travaux pratiques

Mettre en place la navigation avec Vue router.

Gestion des données avec Vuex

  • Vuex : concepts de base.
  • Installation et mise en œuvre.
  • Étendre Vuex avec les plugins.
  • Librairies alternatives.

Travaux pratiques

Optimiser l’architecture de l’application par la conversion à Vuex.

Développer une application connectée

  • Charger et envoyer des données avec AJAX : les différents scénarios.
  • Gestion des formulaires.
  • « two-way data binding » vs « one way data flow ».
  • Vuex et les formulaires.
  • Validation de la saisie utilisateur.

Travaux pratiques

Chargement de données issues d’une API REST/JSON et création d’un formulaire.

Aller plus loin avec Vue.js, bonnes pratiques

  • Mixins et plugins.
  • Regrouper son code dans des Single File Components .vue.
  • Créer des custom directives.
  • Typage flow/TypeScript.
  • Rendre son code robuste grâce aux Prop types.
  • Compilation & optimisation des performances.
  • Server Side Rendering.
  • Développement d’applications mobiles.

Travaux pratiques

Améliorer la qualité du code de l’application.

MOYENS PÉDAGOGIQUES ET TECHNIQUES D’ENCADREMENT DES FORMATIONS

Modalités pédagogiques :

  • Évaluation des besoins et du profil des participants.
  • Apport théorique et méthodologique : séquences pédagogiques regroupées en différents modules.
  • Contenus des programmes adaptés en fonction des besoins identifiés pendant la formation.
  • Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de travaux pratiques, étude de cas et mise en situation.
  • Méthodes expositive, active et participative.
  • Réflexion et échanges sur cas pratiques.
  • Retours d'expériences.
  • Corrections appropriées et contrôles des connaissances à chaque étape, fonction du rythme de l’apprenant mais également des exigences requises au titre de la formation souscrite.

Éléments matériels :

  • Mise à disposition des outils nécessaires au bon déroulement des travaux pratiques.
  • Support de cours au format numérique projeté sur écran et transmis au participant en fin de la formation.

Référent pédagogique et formateur :

  • Chaque formation est sous la responsabilité du directeur pédagogique de l’organisme de formation.
  • Le bon déroulement est assuré par le formateur désigné par l’organisme de formation.
MOYENS PERMETTANT LE SUIVI ET L’APPRÉCIATION DES RÉSULTATS
  • Feuilles de présences signées des participants et du formateur par demi-journée.
  • Attestation de fin de formation mentionnant les objectifs, la nature et la durée de l’action et les résultats de l’évaluation des acquis de la formation.
Please login to get access to the quiz
ReactJS, programmation avancée (Prev Lesson)
(Next Lesson) Développer des applications Web Full JavaScript
Back to Bibliothèques et frameworks javascript
Public

Développeurs web, intégrateurs, architectes logiciel.

Pré-requis

Bonne connaissance de HTML, maîtrise et pratique de JavaScript (ES5 minimum).

Vérifiez que vous avez les prérequis nécessaires pour profiter pleinement de cette formation en effectuant le test disponible en bas de cette page.

Lieu de formation

Intra-entreprise/à distance

Dates ou période

À définir. Nous consulter

Tarif

Sur devis. Merci de nous contacter

Modalités

Pour s’inscrire à notre formation, veuillez nous contacter par mail ou téléphone.

Démarrage de la formation sous deux semaines (délai indicatif).

Nous contacer
training@profind.fr
Informations complémentaires

Pour toute réclamation, aléas ou difficultés rencontrés pendant la formation, veuillez prendre contact avec notre organisme par téléphone ou par e-mail. Nous mettrons tout en œuvre pour trouver une solution adapter.

Formation synchrone, réalisée à distance en visioconférence via l’application Microsoft Teams ou en présentiel dans les locaux du client.

Sur le même thème