El aumento de la popularidad de Vue tiene muchas razones. Esto incluye la simplicidad del marco, la facilidad de su integración en proyectos existentes, la conveniencia de trabajar con él, no restricciones demasiado fuertes impuestas a las aplicaciones de Vue. Todo esto también ayuda a Vue a competir con Angular y React. De hecho, parece que Vue está, en muchos sentidos, a la par con otros frameworks y bibliotecas populares.
Decidí averiguar qué escriben sobre las deficiencias de Vue. Mientras buscaba materiales relevantes, noté que en todas partes dicen que Vue no es lo suficientemente bueno para desarrollar proyectos a gran escala. Conociendo a Vue, puedo decir con seguridad que esto no es cierto. En esta publicación, quiero llamar su atención sobre 4 pautas detalladas para desarrollar proyectos Vue a gran escala.
1. Utilice las ranuras de Vue para que su código sea más claro
Al configurar relaciones de componentes, el modelo principal-secundario se utiliza con mayor frecuencia. Pero en algunas situaciones, tal modelo puede estar lejos de ser el más exitoso. Imagine que tiene un único componente principal que aloja una gran cantidad de componentes secundarios. Esto significa que debe usar una gran cantidad de parámetros de entrada (props) y generar muchos eventos para establecer la interacción de los componentes. En tales condiciones, el código se complicará muy rápidamente. Estas son las situaciones a las que se enfrentan los desarrolladores de proyectos a gran escala. Pero Vue tiene mecanismos diseñados específicamente para lidiar con este tipo de problemas.
Estamos hablando de tragamonedas. Se utilizan para proporcionar una forma alternativa de representar las relaciones entre padres e hijos. Las tragamonedas, es decir, los elementos
<slot>, dan al desarrollador la capacidad de reorganizar el código. Aquí tienes un ejemplo simple de cómo usar una ranura:
<div class="demo-content">
<slot></slot>
</div>
Cuando se procesa un componente de este tipo, la etiqueta que
<slot></slot>contiene será reemplazada por el contenido de la etiqueta <demo-content>:
<demo-content>
<h2><font color="#3AC1EF">Hi!</font></h2>
<class-name name="Welcome to Vue!"></class-name>
</demo-content>
Hay muchas variedades de tragamonedas que se pueden usar en proyectos de Vue. Lo más importante que debe saber sobre las tragamonedas es que su uso puede tener un gran impacto en un proyecto en crecimiento. Mantienen el código de su proyecto en buen estado y lo ayudan a crear un código limpio.
2. Cree componentes independientes y reutilícelos
Al diseñar componentes, siga el PRIMER principio al hacer que los componentes sean enfocados, independientes, reutilizables, pequeños y probables.
De hecho, el secreto para diseñar sistemas "grandes" de manera efectiva es no intentar construir esos sistemas en primer lugar. En su lugar, necesita ensamblar estos sistemas a partir de piezas más pequeñas que resuelvan problemas altamente especializados. Esto hace que sea más fácil evaluar cómo las partes más pequeñas de los sistemas encajan en sus objetivos "más grandes".
Eddie Osmani
Puede utilizar sistemas especializados como Bit para crear y administrar componentes . Aquí está el tema.
3. Mantenga su tienda Vuex bien organizada
Vuex es una biblioteca y un patrón de administración del estado de la aplicación Vue. Con Vuex, puede organizar un almacén de datos centralizado para todos los componentes de la aplicación. He visto comentarios sobre Vuex que dicen que Vuex limita la capacidad de los desarrolladores para estructurar un proyecto y les impide hacer lo que deben hacer. No estoy de acuerdo con tales declaraciones. Vuex realmente ayuda a los desarrolladores que siguen un conjunto de principios a estructurar sus proyectos, haciéndolos mejor organizados.
Antes de hablar sobre estos principios, me gustaría hablar sobre los 4 componentes principales de los repositorios de Vuex que cualquiera que quiera usar dichos repositorios de manera efectiva debe conocer. Si está familiarizado con estos componentes, significa que puede estructurar fácilmente su tienda Vuex y mejorar la organización del proyecto. Aquí hay una breve descripción:
- Estados: se utiliza para almacenar datos de aplicaciones.
- Getters: se utiliza para organizar el acceso a objetos de estado fuera del almacenamiento.
- Mutaciones: necesarias para modificar objetos de estado.
- Acciones: se usa para aplicar mutaciones.
Suponiendo que está familiarizado con estos componentes, hablemos de los principios anteriores:
- El estado de la capa de la aplicación debe gestionarse de forma centralizada almacenándolo en un repositorio.
- Los cambios de estado siempre deben realizarse mediante mutaciones.
- La lógica asincrónica debe estar encapsulada; solo debe actuar sobre el estado a través de acciones.
Si puede adherirse a estos 3 principios, significa que podrá estructurar bien el proyecto. Si, en el transcurso del crecimiento del proyecto, decide que el código de los componentes de Vuex correspondientes debe colocarse en diferentes archivos, puede hacerlo. A continuación se muestra un ejemplo de una estructura de proyecto que utiliza Vuex:
├── index.html
├── main.js
├── api
├── components
└── store
├── index.js
├── actions.js
├── mutations.js
└── modules
▍Organización de almacenamiento modular Vuex
En este artículo estamos hablando de proyectos a gran escala. De dichos proyectos, puede esperar que los archivos utilizados en ellos sean muy grandes y complejos. Los programadores que crean estos proyectos necesitan mecanismos de gestión de almacenamiento que reflejen sus necesidades. Al mismo tiempo, la estructura de almacenamiento no debería complicarse innecesariamente. Por lo tanto, se recomienda organizar sus tiendas Vuex de manera modular, personalizándolas según su visión de la mejor estructura para dichas tiendas. No existe una forma definida de dividir el almacenamiento en módulos. Algunos desarrolladores adoptan un enfoque basado en la capacidad de diseño y otros adoptan un enfoque de modelo de datos. La decisión final sobre la división del almacenamiento en módulos la toma el programador responsable del proyecto.El almacenamiento razonablemente estructurado tiene un impacto positivo en la usabilidad de un proyecto a largo plazo.
A continuación, se muestra un ejemplo de un enfoque modular para estructurar el almacenamiento:
store/
├── index.js
└── modules/
├── module1.store.js
├── module2.store.js
├── module3.store.js
├── module4.store.js
└── module5.store.js
▍Uso de métodos de ayuda
Anteriormente hablé de 4 componentes utilizados en los repositorios de Vuex. Considere una situación en la que necesita acceder a estados y trabajar con captadores, cuando necesita llamar a acciones y mutaciones en componentes. En tales casos, no es necesario crear muchos métodos o propiedades calculadas. Usted puede simplemente utilizar un método de ayuda (
mapState, mapGetters, mapMutationsy mapActions), el uso del cual evitaría indebidamente el aumento del volumen de código. Hablemos sobre el uso de estos métodos auxiliares.
▍mapState
Si un componente necesita acceder a múltiples propiedades de almacenamiento o múltiples captadores, esto significa que podemos usar un método auxiliar
mapStatepara generar una función captadora. Esto nos ahorra tener que escribir cantidades relativamente grandes de código.
import { mapState } from 'vuex'
export default {
computed: mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
▍mapGetters
El método auxiliar se
mapGettersutiliza para configurar la asignación de captadores de almacenamiento a propiedades calculadas locales.
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'count1',
'getter1',
])
}
}
▍mapMutaciones
El método auxiliar se
mapMutationsutiliza en componentes para aplicar mutaciones. Define la correspondencia entre los métodos de componentes y las llamadas store.commit. Además, este método se puede utilizar para transferir algunos datos al almacenamiento.
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations({
cal: 'calculate' // `this.cal()` `this.$store.commit('calculate')`
})
}
}
▍mapActions
Se
mapActionsutiliza un método auxiliar en componentes para enviar acciones. Define la correspondencia entre los métodos de componentes y las llamadas store.dispatch.
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions({
cal: 'calculate' // `this.cal()` `this.$store.dispatch('calculate')`
})
}
}
4. No te olvides de las pruebas unitarias
Las pruebas son otro aspecto importante de cualquier proyecto. Los desarrolladores deben probar lo que crean, independientemente de la importancia y el tamaño de los proyectos. Esto es especialmente cierto en proyectos a gran escala que tienen cientos o incluso miles de funciones pequeñas. Nuestra tarea es probar cada uno de ellos. Las pruebas unitarias ayudan a resolver este problema. Permiten al programador probar módulos individuales de código. Estas pruebas no solo le permiten identificar y eliminar errores. También aumentan el nivel de confianza del programador o del equipo de programadores en la corrección de sus acciones cuando se realizan cambios en el código existente. Cuando, con el tiempo, el proyecto crece, los desarrolladores, gracias al uso de pruebas unitarias, pueden agregarle nuevas funciones de manera segura y al mismo tiempo no tener miedo deque las innovaciones interrumpirán el trabajo de los mecanismos existentes. Todo lo que necesita hacer es seguir la práctica de escribir pruebas unitarias desde el principio del proyecto.
Si hablamos de pruebas unitarias utilizadas en proyectos basados en Vue, entonces podemos decir que dichas pruebas son casi idénticas a las utilizadas en proyectos basados en otros frameworks y bibliotecas. Es decir, Jest , Karma o Mocha funcionan bien con Vue . Pero, independientemente del marco que elija para crear sus pruebas, hay algunas pautas generales a tener en cuenta al desarrollar pruebas unitarias:
- Si la prueba falla, debería mostrar mensajes de error claros.
- Se recomienda utilizar buenas bibliotecas de aserciones al crear pruebas. (Por ejemplo, los mecanismos para generar notificaciones están integrados en Jest y, con Mocha, se utiliza la biblioteca Chai).
- Las pruebas unitarias deben cubrir todos los componentes de Vue.
Si sigue estas recomendaciones desde el principio del proyecto, a medida que el proyecto crece, se reducirá en gran medida el tiempo dedicado a depurar el código y realizar pruebas manuales.
Los proyectos de Vue, además de las pruebas unitarias, pueden someterse a pruebas de integración y de extremo a extremo. La situación aquí, como en el caso de las pruebas unitarias, también es muy similar a la situación con otros marcos y bibliotecas. Por tanto, se recomienda incluir en proyectos y pruebas similares. Normalmente, la parte de enrutamiento de un proyecto no se prueba con pruebas unitarias. Aquí se utilizan pruebas de un extremo a otro. Probar la tienda Vue es el mayor desafío. Se recomienda utilizar pruebas de integración para probarlo, ya que se considera una pérdida de tiempo probar estados, acciones o captadores por separado.
Salir
Después de revisar las capacidades técnicas de Vue.js en esta publicación, he reforzado mi creencia de que este marco es adecuado para desarrollar proyectos a gran escala. Con su ayuda, al igual que con otros frameworks y bibliotecas, puede crear este tipo de proyectos y gestionarlos, manteniéndolos en buenas condiciones.
¿Crees que Vue es adecuado para desarrollar proyectos a gran escala?
