La montée en popularité de Vue a de nombreuses raisons. Cela inclut la simplicité du framework, la facilité de son intégration dans des projets existants, la commodité de travailler avec lui, pas de restrictions trop fortes imposées aux applications Vue. Tout cela aide également Vue à rivaliser avec Angular et React. En fait, on a l'impression que Vue est, à bien des égards, à égalité avec d'autres frameworks et bibliothèques populaires.
J'ai décidé de découvrir ce qu'ils écrivent sur les lacunes de Vue. En cherchant des matériaux pertinents, j'ai remarqué que partout ils disent que Vue n'est pas assez bon pour développer des projets à grande échelle. Connaissant Vue, je peux dire en toute confiance que ce n'est pas vrai. Dans cet article, je souhaite attirer votre attention sur 4 directives détaillées pour le développement de projets Vue à grande échelle.
1. Utilisez les slots Vue pour rendre votre code plus clair
Lors de la configuration des relations de composants, le modèle parent-enfant est le plus souvent utilisé. Mais dans certaines situations, un tel modèle peut être loin d'être le plus efficace. Imaginez que vous ayez un composant parent unique qui héberge un grand nombre de composants enfants. Cela signifie que vous devrez utiliser un grand nombre de paramètres d'entrée (props) et générer de nombreux événements pour établir l'interaction des composants. Dans de telles conditions, le code deviendra très rapidement en désordre. Telles sont les situations auxquelles sont confrontés les développeurs de projets de grande envergure. Mais Vue a des mécanismes conçus spécifiquement pour traiter ce type de problèmes.
Nous parlons de machines à sous. Ils sont utilisés pour fournir une autre manière de représenter les relations parents-enfants. Les slots, à savoir les éléments
<slot>, donnent au développeur la possibilité de réorganiser le code. Voici un exemple simple d'utilisation d'un slot:
<div class="demo-content">
<slot></slot>
</div>
Lorsqu'un tel composant est rendu, sa balise
<slot></slot>sera remplacée par le contenu de la balise <demo-content>:
<demo-content>
<h2><font color="#3AC1EF">Hi!</font></h2>
<class-name name="Welcome to Vue!"></class-name>
</demo-content>
Il existe de nombreuses variétés d'emplacements pouvant être utilisés dans les projets Vue. La chose la plus importante que vous devez savoir sur les machines à sous est que leur utilisation peut avoir un impact énorme sur un projet en croissance. Ils maintiennent le code de votre projet en bon état et vous aident à créer un code propre.
2. Créez des composants indépendants et réutilisez-les
Lors de la conception des composants, suivez le principe FIRST en rendant les composants focalisés, indépendants, réutilisables, petits et testables.
En fait, le secret pour concevoir efficacement de «grands» systèmes n'est pas d'essayer de construire ces systèmes en premier lieu. Au lieu de cela, ces systèmes doivent être assemblés à partir de pièces plus petites qui résolvent des problèmes hautement spécialisés. Cela permet d'évaluer plus facilement comment les plus petites parties des systèmes s'inscrivent dans leurs objectifs «plus larges».
Eddie Osmani
Vous pouvez utiliser des systèmes spécialisés comme Bit pour créer et gérer des composants . Voici les trucs à ce sujet.
3. Maintenez un magasin Vuex bien organisé
Vuex est un modèle et une bibliothèque de gestion de l'état des applications Vue. Avec Vuex, vous pouvez organiser un magasin de données centralisé pour tous les composants de l'application. J'ai vu des commentaires sur Vuex qui disent que Vuex limite la capacité des développeurs à structurer un projet et les empêche de faire ce qu'ils doivent faire. Je ne suis pas d'accord avec de telles déclarations. Vuex aide en fait les développeurs qui suivent un ensemble de principes à structurer leurs projets, les rendant ainsi mieux organisés.
Avant de parler de ces principes, j'aimerais parler de 4 composants principaux des référentiels Vuex que toute personne souhaitant utiliser de tels référentiels doit connaître efficacement. Si vous connaissez ces composants, cela signifie que vous pouvez facilement structurer votre magasin Vuex et améliorer l'organisation du projet. Voici une brève description:
- États: utilisé pour stocker les données d'application.
- Getters: utilisé pour organiser l'accès aux objets d'état en dehors du stockage.
- Mutations: nécessaires pour modifier les objets d'état.
- Actions: utilisé pour appliquer des mutations.
En supposant que vous soyez familier avec ces composants, parlons des principes ci-dessus:
- L'état de la couche application doit être géré de manière centralisée en le stockant dans un référentiel.
- Les changements d'état doivent toujours être effectués à l'aide de mutations.
- La logique asynchrone doit être encapsulée; elle ne doit agir sur l'état que par des actions.
Si vous pouvez adhérer à ces 3 principes, cela signifie que vous serez en mesure de bien structurer le projet. Si, au cours de la croissance du projet, vous décidez que le code des composants Vuex correspondants doit être placé dans différents fichiers, vous pouvez facilement le faire. Voici un exemple de structure de projet utilisant Vuex:
├── index.html
├── main.js
├── api
├── components
└── store
├── index.js
├── actions.js
├── mutations.js
└── modules
Organisation de stockage modulaire â–ŤVuex
Dans cet article, nous parlons de projets à grande échelle. On peut s'attendre à ce que ces projets utilisent des fichiers très volumineux et complexes. Les programmeurs qui créent de tels projets ont besoin de mécanismes de gestion du stockage qui reflètent leurs besoins. Dans le même temps, la structure de stockage ne doit pas être inutilement compliquée. Par conséquent, il est recommandé d'organiser vos magasins Vuex de manière modulaire, en les personnalisant en fonction de votre vision de la meilleure structure pour ces magasins. Il n'y a pas de moyen défini de diviser le stockage en modules. Certains développeurs adoptent une approche basée sur les capacités de conception et d'autres une approche de modèle de données. La décision finale de diviser le stockage en modules est prise par le programmeur responsable du projet.Un stockage raisonnablement structuré a un impact positif sur la convivialité d'un projet à long terme.
Voici un exemple d'approche modulaire de la structuration du stockage:
store/
├── index.js
└── modules/
├── module1.store.js
├── module2.store.js
├── module3.store.js
├── module4.store.js
└── module5.store.js
▍Utilisation de méthodes d'assistance
Ci-dessus, j'ai parlé de 4 composants utilisés dans les référentiels Vuex. Considérez une situation où vous avez besoin d'accéder à des états et de travailler avec des getters, lorsque vous devez appeler des actions et des mutations dans des composants. Dans de tels cas, vous n'avez pas besoin de créer de nombreuses méthodes ou propriétés calculées. Vous pouvez simplement utiliser une méthode d'assistance (
mapState, mapGetters, mapMutationset mapActions), dont l'utilisation permettrait d' éviter augmenter indûment le volume de code. Parlons de l'utilisation de ces méthodes d'assistance.
â–ŤmapState
Si un composant a besoin d'accéder à plusieurs propriétés de stockage ou à plusieurs getters, cela signifie que nous pouvons utiliser une méthode d'assistance
mapStatepour générer une fonction getter. Cela nous évite d'avoir à écrire des quantités de code relativement importantes.
import { mapState } from 'vuex'
export default {
computed: mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
â–ŤmapGetters
La méthode d'assistance est
mapGettersutilisée pour configurer le mappage des récupérateurs de stockage sur les propriétés calculées locales.
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'count1',
'getter1',
])
}
}
â–ŤmapMutations
Une méthode d'assistance est
mapMutationsutilisée dans les composants pour appliquer des mutations. Il définit la correspondance entre les méthodes des composants et les appels store.commit. De plus, cette méthode peut être utilisée pour transférer certaines données vers le stockage.
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations({
cal: 'calculate' // `this.cal()` `this.$store.commit('calculate')`
})
}
}
â–ŤmapActions
Une méthode d'assistance
mapActionsest utilisée dans les composants pour distribuer des actions. Il définit la correspondance entre les méthodes des composants et les appels store.dispatch.
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions({
cal: 'calculate' // `this.cal()` `this.$store.dispatch('calculate')`
})
}
}
4. N'oubliez pas les tests unitaires
Le test est un autre aspect important de tout projet. Les développeurs doivent tester ce qu'ils créent, indépendamment de l'importance et de la taille des projets. Cela est particulièrement vrai dans les projets à grande échelle qui ont des centaines, voire des milliers de petites fonctions. Notre tâche est de tester chacun d'eux. Les tests unitaires aident à résoudre ce problème. Ils permettent au programmeur de tester des modules de code individuels. De tels tests vous permettent non seulement d'identifier et d'éliminer les erreurs. Ils augmentent également le niveau de confiance du programmeur ou de l'équipe de programmeurs dans l'exactitude de leurs actions lorsque des modifications sont apportées au code existant. Lorsque, au fil du temps, le projet se développe, les développeurs, grâce à l'utilisation de tests unitaires, peuvent y ajouter en toute sécurité de nouvelles fonctionnalités et en même temps ne pas avoir peurque les innovations perturberont le travail des mécanismes existants. Tout ce que vous avez à faire est de suivre la pratique de l'écriture de tests unitaires dès le début du projet.
Si nous parlons de tests unitaires utilisés dans des projets basés sur Vue, alors nous pouvons dire que ces tests sont presque identiques à ceux utilisés dans des projets basés sur d'autres frameworks et bibliothèques. À savoir, Jest , Karma ou Mocha fonctionnent bien avec Vue . Mais, quel que soit le framework que vous choisissez pour créer vos tests, il y a quelques règles générales à garder à l'esprit lors du développement de tests unitaires:
- Si le test Ă©choue, il doit afficher des messages d'erreur clairs.
- Il est recommandé d'utiliser de bonnes bibliothèques d'assertions lors de la création de tests. (Par exemple, les mécanismes de génération de revendications sont intégrés à Jest, et avec Mocha, la bibliothèque Chai est utilisée).
- Les tests unitaires doivent couvrir tous les composants de Vue.
Si vous suivez ces recommandations dès le début du projet, cela, à mesure que le projet se développe, réduira considérablement le temps consacré au débogage du code et à ses tests manuels.
Les projets Vue, en plus des tests unitaires, peuvent être soumis à des tests d'intégration et de bout en bout. La situation ici, comme dans le cas des tests unitaires, est également très similaire à la situation avec d'autres frameworks et bibliothèques. Par conséquent, il est recommandé d'inclure dans des projets et des tests similaires. En règle générale, la partie routage d'un projet n'est pas testée avec des tests unitaires. Le test de bout en bout est utilisé ici. Tester le magasin Vue est le plus grand défi. Il est recommandé d'utiliser des tests d'intégration pour le tester, car il est considéré comme une perte de temps de tester séparément les états, les actions ou les getters.
RĂ©sultat
Après avoir examiné les capacités techniques de Vue.js dans cet article, j'ai renforcé ma conviction que ce cadre convient au développement de projets à grande échelle. Avec son aide, comme avec d'autres frameworks et bibliothèques, vous pouvez créer de tels projets et les gérer, en les gardant en bon état.
Pensez-vous que Vue convient au développement de projets à grande échelle?
