Por: Ernesto Canquiz

Pros y Contras

Echemos un vistazo más de cerca a los pros y contras de la estructura modular anidada de componentes y componibles.

Pros

• Agrupación de Archivos Relacionados: Los archivos que están estrechamente relacionados quedan todos juntos en la misma carpeta.

Esto reduce la necesidad de navegar por múltiples carpetas para revisarlos, lo que mejora la eficiencia en el desarrollo.

• Nombres de Archivos Más Intuitivos: Si el componente padre se llama Foo/Index.vue, su componente hijo exclusivo puede llamarse directamente Children.vue. La nueva nomenclatura es más clara y directa.

En comparación con la estructura tradicional, donde se utilizarían nombres como FooChildren.vue o ChildrenFoo.vue para diferenciarlo de otros archivos aledaños.

• Claridad en la Exclusividad: Los componentes y componibles anidados dentro del componente padre son de exclusividad del mismo, lo que facilita la comprensión de su propósito y uso.
• Reutilización Clara: Los componentes y componibles que no están anidados dentro de la carpeta del componente padre son reutilizables dentro de la jerarquía, lo que fomenta la modularidad y la reutilización del código.

Contras

• Necesidad de Refactorización: Es necesario estar pendiente de refactorizar la estructura según la jerarquía cada vez que se encuentre un componente hijo que pueda ser reutilizado por otro padre.

Cuando esto suceda, es necesario moverlo a una carpeta en algún lugar superior según la jerarquía. Lo mismo sucede con los componibles respectivamente.

• Posible Complejidad en Proyectos Grandes: A medida que el proyecto crece, la anidación de componentes y componibles puede llevar a una estructura más compleja, lo que podría dificultar la navegación y la comprensión de la jerarquía.

Sin embargo, cuando esto suceda, simplemente cierre todas las carpetas que no le interesen en ese momento y concéntrese solo en la carpeta en cuestión.

• Dependencia de la Estructura: La organización de los componentes y componibles hijos depende en gran medida de la estructura del los componentes y componibles padres.

Si se realizan cambios en la estructura de los componentes o componibles padres, puede ser necesario realizar ajustes en distintos lugares.

Resumen

Este enfoque propuesto para la organización de un proyecto Vue.js va más allá de la simple estructura modular, incorporando la anidación de componentes y componibles según su propósito. Esta metodología permite una agrupación lógica de archivos relacionados, facilitando la navegación y la comprensión del código.

Al mantener los componentes y componibles secundarios dentro de sus respectivos componentes y componibles principales, se establece una exclusividad clara y se fomenta la reutilización de aquellos que son globales.

Sin embargo, este enfoque también presenta desafíos, como la necesidad de refactorizar la estructura cuando se identifican componentes y componibles reutilizables más la posible complejidad en proyectos grandes. A pesar de estos contras, la capacidad de centrarse en un componente o componible específico y cerrar las carpetas no relevantes ayuda a mitigar la complejidad.

En resumen, este enfoque modular y anidado proporciona una base sólida para el desarrollo de aplicaciones Vue.js, promoviendo la organización y la claridad en el código, mientras que también requiere una atención cuidadosa a la estructura a medida que el proyecto evoluciona.