Hoy en día todo desarrollador web que trabaje con tecnologías front conoce (y probablemente utilice) alguno de los 3 frameworks más conocidos: React, Angular y Vue.
Sin entrar en grandes debates, los 3 son frameworks con una buena comunidad y un roadmap prometedor, para los cuales existe gran cantidad de componentes/plugins creados tanto por el propio equipo de desarrollo como por sus respectivas comunidades.
Personalmente siempre me he decantado por Vue, entre otros motivos por su simplicidad, pocas restricciones y facilidad de integración con otras tecnologías.
Si buceamos por internet y buscamos información sobre que aplicación dar a Vue, en multitud de resultados se suele decir que no se recomienda para grandes proyectos, algo con lo que multitud de desarrolladores no está de acuerdo, más bien se trata de una cuestión de organización del proyecto y un buen uso de sus herramientas.
A continuación se exponen 4 buenas prácticas que nos ayudarán a mantener un proyecto en Vue con mejor organización y escalado.
1. Utiliza Slots para hacer el código más comprensible
Las relaciones entre componentes Padre-Hijo son una de las formas más usuales de comunicación entre componentes pese a no ser la mejor opción en todas las situaciones. Si en nuestra app existiese un gran número componentes Hijo para un único Padre, tendríamos que emitir a su vez un gran número de eventos desde estos componentes Hijo. Es en esta situación es cuando los Slots salen a relucir.
Un Slot en Vue es un fragmento de componente al cual se le puede inyectar contenido. Esto permite que podamos utilizar los componentes de Vue de la misma forma cómo funciona un elemento de bloque en HTML permitiéndole anidar otros elementos dentro de él.
Con un ejemplo se ve mejor. Imaginemos que tenemos un componente ContenedorDemo, con el siguiente contenido:
<div class="container">
<h2>Vue slots</h2>
<slot></slot>
</div>
Cuando se utilice nuestro componente, las etiquetas <slot></slot> se sustituirán por lo contenido dentro de las etiquetas del componente.
<contenedor-demo>
<p>Este contenido se inyectará en el slot</p>
<otro-componente></otro-componente>
</contenedor-demo>
Lo que daría como resultado…
<div class="container">
<h2>Vue slots</h2>
<p>Este contenido se inyectará en el slot</p>
/** ... **/
</div>
En este ejemplo solo se ilustra el uso más básico. Los Slots son una potente herramienta que permite un uso más avanzado según lo requiera lo “grande” que sea o no nuestra aplicación.
2. Crea y comparte componentes independientes
Más que una recomendación es casi una obligación regirse siempre lo máximo a los principios F.I.R.S.T. en el uso de componentes que Addy Osmani ilustra muy bien en este post.
Keep it (F)ocused.
Keep it (I)ndependent.
Keep it (R)eusable.
Keep it (S)mall.
Keep it (T)estable.
or in short, FIRST.
~ Addy
Existen herramientas como Bit que nos permiten tener repositorios específicos para componentes. Se trata de desacoplar lo máximo cada componente y dotarlo de propio control de versiones de forma independiente.
De este modo podemos compartirlo, clonarlo utilizando npm/yarn, tener sus propios tests, versiones, etc.
Podemos leer más sobre Bit en este artículo.
3. Mantener nuestra store de Vuex bien organizada
Vuex es el state management pattern del ecosistema Vue. Para los que conozcan otros frameworks JS es la equivalencia en Vue de Redux (React) o NgRx (Angular).
Vuex nos brinda la posibilidad de centralizar la información de nuestra aplicación en una store con la cual pueden interactuar el resto de componentes y funciona de manera reactiva. Si bien su uso no siempre es necesario en pequeñas aplicaciones, sí es casi de uso obligatorio en medias y grandes. Gracias al uso de Vuex nuestra aplicación ahorrará complejos “caminos” que nuestros eventos deberían tomar para propagarse hacia todos los componentes que necesitan captar cualquier cambio.
La estructura básica de Vuex constra del siguiente código:
const store = new Vuex.Store({ state: {}, mutations: {}, actions: {}, getters: {}, })
Debido a la anterior estructura muchos desarrolladores afirman que “Vuex restringe a los desarrolladores estructurar su código cómo ellos necesitan”, cuando la realidad es que Vuex ayuda a los desarrolladores a tener su proyecto mejor organizado.
Existen 4 componentes principales de una store de Vuex
-
States: Se utilizan para mantener la información de la app.
-
Getters: Utilizados para acceder a la información desde el exterior de la store.
-
Mutations: Utilizados para modificar el state.
-
Actions: Utilizados para hacer “commit” de las mutaciones.
Entendiendo lo anterior, es recomendable seguir estos 3 principios:
-
Debe mantener un estado a nivel de aplicación centralizado en la tienda.
-
Los estados siempre deben cambiar cometiendo mutaciones.
-
La lógica asincrónica debe encapsularse y solo se puede usar con acciones.
Siguiendo estos 3 principios nuestros proyectos siempre estarán bien estructurados y serán fácilmente escalables.
Modularización de Vuex
Personalmente cuando realizo proyectos con Vue y utilizo Vuex siempre procuro aplicarles modularización, sencillamente debido a que si ya utilizo Vuex doy por hecho que la aplicación es media/grande y por ello va a requerir tener una estructura mejor organizada que tener todo en un único fichero. Podéis aprender más de esto aquí.
Sin entrar en detalles, una estructura básica de nuestra store en nuestro sistema de ficheros sería la siguiente:
├── index.html
├── main.js
├── ...
└── store/
├── index.js
├── actions.js
├── mutations.js
└── modules
Cuando modularizando tendríamos algo como:
├── index.html
├── main.js
├── ...
└── store/
├── index.js
└── modules/
├── module1.store.js
├── module2.store.js
├── module3.store.js
├── module4.store.js
└── module5.store.js
De esta forma podríamos importar de forma sencilla solo el/los módulos necesarios en cada componente que deseemos.
4. No olvides los test!
Como desarrolladores debemos testear nuestro código. Vale.. sí, todos sabemos que lo haremos en esos ratos libres que nunca llegan, pero son especialmente útiles cuando se trata de proyectos a gran escala en los cuales el código “muta” con el tiempo y parte de nuestro código puede verse afectado.
Las pruebas unitarias no solo evitan errores si no que aportan confianza sobre el código a los desarrolladores ya que les garantizan que pueden añadir un cambio en el futuro sin temor a que rompa.
Vue puede integrarse con librerías de test Javascript como Jest, Karma, Mocha. Incluso en la actualidad Vue CLI dispone de opciones integradas de testing.
Hay que tener un par de detalles en cuenta a la hora de escribir tests:
-
Debe proporcionar mensajes de error claros.
-
Utilizar una buena librería de testing.
-
Utiliza pruebas simplificadas por cada componente.
Además de unitarias, Vue admite test E2E y de integración, por lo que siempre es buena idea combinarlos con los unitarios para gozar de mayor robustez. Vuex es la parte con más dificultad de testing y se recomienda aplicar test de integración.
Conclusión
Como podéis ver el uso de Vue como framework puede utilizarse en diferentes contextos. Tanto en pequeñas interfaces de microservicios, plugins y demás, hasta complejas aplicaciones SaaS SPA con multitud de información a la vez siempre y cuando seamos conscientes de su complejidad y apliquemos las mejores prácticas para tener siempre una evolución favorable cara un futuro.