"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Single File Components en VueJs

La manera de construir nuestros componentes en VueJs es muy sencilla, pero puede no ser lo suficientemente clara o mantenible cuando nuestras aplicaciones empiezan a crecer.

Cuando pensamos en un componente como una pieza reutilizable e independiente de código también pensamos en asilarla en un fichero que sea agnóstico de nuestra web.

Para ello existen los Single File Components en VueJs, es la manera de desacoplar ese componente, que ya por naturaleza es independiente, en un fichero a parte.

Su funcionamiento es el siguiente…

 

Ventajas de los Single File Components en VueJs

Usar este tipo de arquitectura presenta tantas ventajas, que dificilmente podremos argumentar que no nos sea útil, estas son algunas de ellas:

  1. Una vez escrito el componente por muy reusable que sea es poco mantenible tener que copiar todo su código cada vez que lo queramos usar en otro sitio. Es mucho más sencillo simplemente importar un archivo.
  2. De la misma manera es mucho más sucio tener el código de todos nuestros componentes en el mismo sitio.
  3. Los componentes de VueJs no nos dan soporte para modularizar los estilos, y los Single File Components .
  4. Para un desarrollador es mucho mejor, ya que no olvidemos que con VueJs estamos escribiendo Javascript, por eso el marcado sintáctico de nuestro editor de texto solo reconoce el código escrito en ese lenguaje, mientras que los Single File Components en VueJs separan por un lado el template (HTML), la lógica (JS) y los estilos (CSS) y nos dan el marcado correcto para cada uno de ellos.
  5. Como un Single File Components en VueJs necesitar de ser procesado, durante esa etapa se hace uso de transpiladores, lo que nos permite usar otros lenguajes de alto nivel y preprocesarlos en ese momento, de esta manera en vez de HTML podemos usar PUG, en vez de ES5 podemos usar ES6 y en vez de CSS podemos usar SCSS (por poner un ejemplo).

Por todas estas razones es mucho mejor que valoremos usarlos, para mostrar visualmente la diferencia de usar uno u otro, veamos el componente Hello World! que hay en la documentación oficial.

Podemos apreciar  que la plantilla es un string HTML con una sintaxis tipo mustache para renderizar las variables. No hay marcado sintáctico, si el string es multilinea se complica a aun más.  Los estilos estan o bien incrustados o podriamos hacer un v-bind del objeto styleObject.

En definitiva funciona por que solo tenemos uno y es un ejemplo simple pero sino sería un caos.

Ahora vemos el mismo componente pero usando los Single File Components en VueJs:

 


Cambia bastante, en primer lugar destaca que el template, la lógica y los estilos están perfectamente delimitados en secciones separadas de nuestro componente.

Cada una de esas secciones tiene el marcado correspondiente.

Mediante el atributo lang estamos indicando que transpilador tenemos que aplicarle, en el ejemplo de arriba usa Jade (template) y Style (estilos). Y además aunque no se defina el Js será transpilado con Babel de manera que podemos usar la sintaxis de ES6.

¿Qué necesito?

Como acabamos de ver nuestros ficheros .vue (los que contienen el componente) necesitan ser procesados y durante esta etapa además aplicar distintos transpiladores si procede.

Por lo tanto vamos a necesitar ayuda para gestionar todos estos procesos para construir nuestros paquetes, la manera de hacerlo es o bien usando webpack o sino browserify

Tengo más experiencia con webpack, de manera que es la opción que escojo y tengo que comentar que es muy sencillo, unicamente tienes que usar un loader para poder usar esta tecnología, se llama vue-loader y lo puedes descargar en este link.

Si no sabes como funciona ni webpack ni sus loaders deberías aprender primero, no es el propósito de este artículo explicar esto, pero para terminar te dejo aquí los links tanto a la documentación oficial de webpack como a la de vue-loader.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)