Buenas Practicas con Vue

Compartir esta publicación

Share on facebook
Share on linkedin
Share on twitter
Share on email

Inicialmente cuando nos enfrentamos a un nuevo lenguaje o framework nuestras prioridad suele ser la de aprender y asimilar lo más rápido posible los conocimientos necesarios para la realización de las tareas o proyectos derivados al mismo.

En multitud de ocasiones ya sea por la urgencia del proyecto o apatía personal, es olvidado uno de los principales factores en el desarrollo de software diferencial, las buenas prácticas.

En este artículo se intentará centralizar las buenas prácticas relacionadas con el framework VUE siendo expuestas soluciones de terceros y propias con el deseo de que la comunidad se involucre, aportando su visión y ejemplos para este objetivo.

La importancia de utilizarSlots

Un Slot es una porción de un componente en el que se puede inyectar contenido. Esto nos permite que los componentes de Vue puedan anidarse, facilitando la reutilización de los componentes. Otra de sus ventajas es la disminución de eventos para la comunicación parent-child.

slots first child component
slot parent component
slot result

Vuex te ayuda

Vuex es el gestor de estado de Vue (similar a Redux o NgRx).

Con él podremos centralizar toda la información necesaria de nuestra aplicación, mediante una store, donde todos los componentes podrán interactuar de forma reactiva.

Su uso es muy recomendable en proyectos de mediano y gran tamaño, ya que por ejemplo, ahorraremos mucho tiempo en la fase de mantenimiento, al reducir sustancialmente el número y complejidad de flujos relativos a los eventos.

Existen 5 componentes principales de una store de Vuex:

States: Se utiliza para persistir la información del estado en el store de la app.

Getters: Con ellos podremos acceder a los diferentes estados desde el exterior de la store.

Mutations: Se utilizarán siempre para la modificación del state, por medio de “commit”.

Actions: Utilizados para invocar mutaciones (commit) u otras acciones (dispatch).

Modules: Es conveniente utilizarlos para facilitar la escalabilidad de la app.

Mixin o no mixin, esa es la cuestión

Cuando una aplicación creada con Vue va creciendo, y se observa que ciertas funcionalidades, contenidas en uno o varios componentes, podrían ser reutilizadas por otros componentes, es una señal para iniciar su migración a Mixins. En mi opinión es más recomendable utilizar Mixins que un archivo nativo JS, ya que la cohesión será mayor en el proyecto al no dejar de utilizar la estructura y opciones propias de un componente de Vue.

Utiliza PascalCase

La convención de nombres más extendida por la comunidad es PascalCase. Tiene varias ventajas con respecto a otros tipos de nomenclaturas como por ejemplo, está comprobada su mayor efectividad a la hora de buscar y visualizar nombres con este formato o es compatible con la función de autocompletado de la mayoría de IDEs.

Me gustaría decir que independientemente de lo expuesto anteriormente, lo importante, en este caso, es la cohesión y coherencia de la nomenclatura a utilizar y por ello independientemente de la que se utilice se cambiará la misma.

pascal bad
pascal nice

Directivas sin grasa

La utilización de las abreviaturas para las directivas sería algo de obligado cumplimento para una limpieza y adelgazamiento de código amplio. Aunque más importante que esto es utilizarlas siempre o nunca, pero no mezclarlas ya que se conseguirá todo lo contrario.

@ es la abreviatura de v-on:

: es la abreviatura de v-bind

# es la abreviatura de v-slot

directives

¿Quieres salvar un gatito? Se declarativo

La idea sería incluir el menor código funcional posible dentro de nuestros templates.

Para lograr esto en Vue tenemos múltiples posibilidades, pero en mi opinión la más fácil y óptima sería declarar una propiedad computed en la que implementar la funcionalidad y posteriormente instanciar esta propiedad en el lugar del template que necesitemos. Con esto haremos que el código sea mucho más comprensible, la reutilización será muy simple y su mantenimiento será mucho menos costoso en un futuro.

gatito bad
gatito good

Dame un Filter que tengo prisa

Algo tan común como dar formato a un texto se convierte en un juego de niños al utilizar los Filters en Vue. Por ello su uso es altamente recomendado al ahorrar tiempo y código.

filters
Conversion Post ES

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Suscríbete a nuestro boletín de noticias

Recibe actualizaciones de los últimos descubrimientos tecnológicos

Acerca de Apiumhub

Apiumhub reúne a una comunidad de desarrolladores y arquitectos de software para ayudarte a transformar tu idea en un producto potente y escalable. Nuestro Tech Hub se especializa en Arquitectura de Software, Desarrollo Web & Desarrollo de Aplicaciones Móviles. Aquí compartimos con usted consejos de la industria & mejores prácticas, basadas en nuestra experiencia.

Posts populares
PDF gratuito Software Interview Series

¿Tienes un proyecto desafiante?

Podemos trabajar juntos