Cada vez que un programador crea un componente en Vue.Js, debe de preguntarse si catalogarlo como un componente vista o como un componente abstracto el cual se puede separar de la lógica de negocio. Este problema será abordado a lo largo del artículo, así como ejemplos concretos con código de cada una de las variantes.
Diferencias
Si has llegado hasta aquí y aun no tienes claro el concepto de componente en Vue.Js, debes de pasarte por el siguiente artículo.
La principal diferencia entre un componente abstracto y un componente vista radica en que este último tiene lógica de negocio de la aplicación. La lógica de negocio consta de toda la funcionalidad que es definida por el dueño de la aplicación. Un ejemplo de ello puede ser la disposición de los botones que tiene una cabecera de una página web (header).
La segunda diferencia que es más difícil de detectar, es la forma de aplicación y uso de un componente. Normalmente, aunque suelen haber excepciones, un componente abstracto se suele utilizar con alguna propiedad como parámetro de entrada, o con un slot al cual debe de aplicarle ciertos estilos, etc. En definitiva, un componente abstracto no suele poder existir por sí solo. Mientras que un componente vista si que se puede utilizar sin parámetros de entrada.
La tercera diferencia es más general, pero consiste en las veces que se suele reutilizar un componente. Un componente vista no se suele reutilizar, la mayoría de ellos se suele utilizar solo una vez, aunque siempre hay excepciones y depende del tamaño de la aplicación. Sin embargo, un componente abstracto está concebido para ser reutilizado constantemente.
Código
Componente vista
El código que se muestra a continuación se trata de una implementación particular de pie de página. Como se puede observar, el componente encapsula toda la lógica de negocio para disponer la información en el footer.
Es cierto que alguien puede decir que esto se podría convertir en un componente genérico o que ya hay muchos componentes genéricos sobre pies de página. Sin embargo, es muy probable que por los requisitos de la aplicación, tengas que utilizar el componente genérico y además darle una capa de personalización. Por lo tanto al final se convierte en un componente vista que engloba el uso de un componente genérico más tu propia programación.
Componente abstracto
El código que se muestra a continuación es una implementación sencilla de badge. Su funcionalidad radica en posicionar un texto sobre cualquier elemento que se le pase como slot. Hay cuatro posiciones en donde se puede ubicar el texto y cuatro colores definidos por defecto para el fondo del badge.
En el ejemplo que se muestra de uso del badge, se ha añadido el texto 12 (podría ser la información de un contador) sobre un botón.
Este componente abstracto, como se puede comprobar admite muchas mejoras. Sin embargo, es recomendable no crear todas las propiedades que se te ocurran si no las vas a utilizar, ya que solo añade complejidad y tiempo de desarrollo. Lo mejor es desarrollar lo que necesitas e ir actualizando el componente a medida que se requiera más funcionalidad.
Conclusión
A pesar de querer ser una guía sobre como identificar un componente abstracto frente a un componente vista. Lo más importante es crear un componente y no tener miedo de refactorizarlo después para que sea un de un tipo u otro.
Finalmente, me gustaría animar a todos aquellos que tengan ganas o buenas ideas sobre componentes abstractos a que publiquen todo esto en la comunidad. Un buen sitio en donde encontraréis muchos componentes y por lo tanto podéis poner los vuestros es en made with vue.js. No tengáis miedo de las críticas, si son constructivas, solo os ayudarán a crecer como profesionales!
