Dans le modèle traditionnel du développement web, lorsqu'un utilisateur clique sur un lien pour aller sur une nouvelle page ou doit mettre à jour le contenu d'une page, la page entière doit généralement être rechargée. Cela signifie que même si l'utilisateur ne fait que soumettre un simple formulaire, une nouvelle page est générée pour gérer la réponse.

Lors de la création d'une application, un des points les plus critiques est de s'assurer que les données sont toujours à jour et aussi faciles à maintenir que possible. Dans une page web traditionnelle, lorsqu'on écrit du contenu en HTML simple, le contenu est considéré comme des données « codées en dur » ou « statiques ». Ce contenu n'est pas censé être modifié en fonction d'autres variables de la page. Bien que cette pratique soit parfaitement adaptée à des données n'apparaissant qu'une seule fois sur le site, cela a ses limites. Cette méthode devient très difficile à gérer dans le temps, à mesure que les données sont propagées au sein d'une application.

Lorsque l'on évoque les problèmes de frontend rencontrés par les développeurs, certains apparaissent encore et encore. Et plutôt que de laisser à chacun le soin d'inventer sa propre façon de faire, Vue nous fournit des directives pour accomplir les tâches les plus communes.

Vous êtes maintenant en mesure de créer des applications Web sans aucun outil de construction ! Cependant, vous pourriez commencer à voir quelques limites à cette façon de faire. Quand vous serez prêt, rejoignez-moi dans la partie suivante qui traite de Vue CLI et de la façon dont la plupart des applications en entreprise sont créées.

Dans le développement frontend, il fut un temps où tout était fait à la main. Qu'il s'agisse d'intégrer la bonne feuille de style à certaines pages en fonction de son contenu, ou s'assurer de minimiser la taille du fichier JavaScript pour optimiser le temps de chargement d'une page. Petit à petit, nous avons adapté nos outils pour automatiser un certain nombre de process.

Bien que cela soit assez simple à gérer sur une seule page, imaginez ce qui se passerait si quelqu'un devait modifier les liens de navigation. Si vous deviez mettre à jour la classe CSS pour actualiser les styles, cela nécessiterait au moins trois lignes de modifications de code pour chaque page qui utilise cette navigation. Par conséquent, cela crée de nombreuses possibilités de bugs.

Comme nous l'avons vu précédemment, le terme « Applications monopages » (SPA) indique qu'une seule page est chargée. Cette dernière est ensuite mise à jour dynamiquement en fonction des besoins. Bien que cela soit puissant, il y a tout de même un défaut principal : les utilisateurs ont besoin d'URL différentes pour distinguer les différentes pages les unes des autres. Sinon, à chaque fois qu'un utilisateur essaie de revenir en arrière, il obtiendra toujours la même page !

L'un des indicateurs les plus couramment utilisés pour mesurer la performance d'un site est le temps nécessaire avant que l'utilisateur puisse interagir avec le site. Par conséquent, il vaut mieux éviter que notre code entier ne commence à s'exécuter que lorsque le chargement de la page se termine. Cela ajouterait du temps d'attente et dégraderait la performance de notre site. Et si je vous disais que le code peut s'exécuter à part, avant que vos composants ne soient affichés à l'écran ?

Vous avez franchi une étape importante dans votre cheminement vers la création d'applications Web robustes avec Vue.js ! Vous êtes maintenant prêt à passer à la pratique avec l'activité de cette partie ! Alors, prêt à relever le défi ? ?

Nous l'avons vu précédemment, Vue est facile d'utilisation. Et c'est notamment dû à l'amélioration continue. Si vous ne souhaitez pas travailler avec un outil, pas de problème ; en revanche, le jour où vous en aurez besoin, sa configuration sera très simple ! Et c'est encore plus pratique si vous souhaitez ajouter du style à votre application, c'est-à-dire gérer le CSS de votre application.

Dans les chapitres précédents, vous avez appris à utiliser les props pour passer des données vers un composant. Cependant, cela n'était qu'une utilisation basique des props. Que se passerait-il si nous voulions être plus explicites sur le type de données qui doivent être passées ? Et si nous voulions nous assurer que la prop est passée en continu pour que notre composant bénéficie des propriétés dont il a besoin ? Jetons un œil à tout ça.

Nous avons beaucoup appris sur la façon de communiquer depuis les composants parents vers les composants enfants, mais qu'en est-il de la communication vers les parents ? ?‍?‍? La manière la plus courante est d'émettre des événements personnalisés.

Même si les props sont très puissantes, elles ajoutent un niveau de complexité dans l'interaction avec un composant, puisqu'elles demandent un certain niveau de connaissance afin d'utiliser le composant de manière adéquate. De plus, on peut facilement se retrouver au milieu d'un « bazar de props » lorsqu'un composant a besoin de plusieurs props pour fonctionner correctement.

La prochaine partie du cours aborde un concept intermédiaire, recommandé si vous souhaitez en savoir plus sur la manière de gérer les données pour une application plus conséquente, comme pourrait l'être une application en prod d'une entreprise. Cependant, et j'insiste sur ce point, vous avez déjà à ce stade tout ce qu'il vous faut pour être un développeur Vue.js productif et créer de superbes applications Web ! Félicitations pour tout le travail accompli !

Lorsque l'on travaille avec des applications monopages (SPA), le concept de state management (gestion d'état) est un sujet couramment abordé. Et même si ce sujet peut souvent mener à des discussions très complexes, le principal objectif recherché par tous est le suivant : s'assurer que l'application utilise les bonnes données à tout moment. Sur cette base, nous pouvons définir le state (ou état, en français) comme un instantané du data store à un moment donné. De multiples states sont utilisés à travers une application, ce qui explique la complexité inhérente à la gestion de ces éléments. Après tout, chaque composant utilisé contient sa propre propriété data, ce qui signifie qu'il gère son propre state. Une fois que l'on ajoute la complexité du passage de données entre composants, cela devient effectivement très compliqué. Pour illustrer cela, combien y a-t-il d'instances de state représentées dans l'exemple suivant ?

Vuex est un gestionnaire d'état et une bibliothèque pour les applications Vue.js. En d'autres termes, le but unique de Vuex est de nous aider à créer un store centralisé qui nous permettra d'avoir cette "source unique de vérité" pour récupérer nos datas.

aintenant que nous avons installé Vuex dans notre application, il est temps pour nous de comprendre son fonctionnement. Et comme Vuex nous sert de store global, nous devrions commencer par apprendre dès maintenant comment stocker et récupérer les données qui s'y trouvent. Commençons tout de suite ! ?

Dans le chapitre précédent, nous avons appris à définir notre espace de stockage de données dans Vuex avec state et des accesseurs, mais également à récupérer nos données avec des méthodes comme mapState et mapGetters. Dans ce chapitre, nous allons passer à l'étape suivante dans la gestion de notre data store : mettre à jour et modifier nos données dans Vuex avec les mutations

Dans cette partie du cours, nous avons appris comment gérer le state global d'une application avec Vuex. Configurer une application Vue pour utiliser Vuex avec Vue CLI. Définir et récupérer des données depuis le state (état) de Vuex. Définir et récupérer des données calculées depuis les accesseurs (getters) de Vuex. Définir et acter des modifications du state de Vuex avec les mutations. Définir et propager des mutations avec les actions Vuex. Félicitations ! Vous avez maintenant acquis une compétence essentielle pour construire une application qui scale à grande échelle. C'est maintenant le bon moment pour tester vos connaissances avec un quiz préparé juste pour vous. Bonne chance ! ?