Compartir esta publicación

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.

  Beneficios de la Metodología Ágil

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.

  25 Mujeres Influyentes del Desarrollo de Software

@ 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

Author

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Suscríbete a nuestro boletín de noticias

Recibe actualizaciones de los últimos descubrimientos tecnológicos

¿Tienes un proyecto desafiante?

Podemos trabajar juntos

apiumhub software development projects barcelona
Secured By miniOrange