Coding Potions: ¿Qué es VueJS? Introducción y comparación con otros frameworks

Introducción

Bienvenido al primer capítulo de una serie de artículos que voy a escribir sobre VueJS. Mi principal finalidad de esta serie es que aprendas a usar VueJS de manera profesional. Voy a intentar enseñarte todos los consejos y funcionalidades de Vue que me hubiera gustado que me enseñaran cuando yo lo estaba aprendiendo.

Si no tienes conocimientos previos de Vue no tengas miedo porque te voy a explicar cómo funciona todo desde el principio. Lo que si que recomiendo es que tengas conocimientos sobre Javascript, HTML y CSS ya que es lo que usa Vue por debajo y lo vas a necesitar.

Pero antes de empezar manos a la obra a programar, hay que ver qué es y para que sirve Vue, cómo se instala y para qué sirve su cli y la estructura de archivos que se crea.

¿Qué es VueJS?

Vue JS como su nombre indica es un framework javascript, es decir, es un conjunto de herramientas y funciones que permiten desarrollar páginas web de una manera más cómoda. Vue nace con la necesidad de no tener que escribir tanto código javascript y sobre todo con la idea de ahorrar tiempo al programador.

Vue fue creado por Evan You, ex-trabajador de Google, que decidió crear su propio framework en el año 2014. Desde entonces, Vue ha subido muchísimo de popularidad, gracias a su sencillez y a todo lo que puede ofrecer, que lo vamos a ver a continuación.

Características de Vue

Vue ofrece todo un conjunto de características y funcionalidades que permiten crear aplicaciones web completas. Si vienes de Angular o React muchas las cosas que ofrece ya te sonarán, ya que este framework está inspirado en estos dos.

Como es un framework, va más allá de simplemente ofrecer funciones y utilidades para Javascript. Es una nueva forma de programar páginas web. Pero no te preocupes porque con una buena base de Javascript la curva de aprendizaje no es muy grande.

Si tienes dudas sobre si merece la pena usar Angular o React o VueJS, más abajo voy a hacer una pequeña comparación entre ellos. Antes vamos a ver lo que puede ofrecer.

Modularidad

Lo primero que salta a la vista de Vue es que es completamente modular. A diferencia de Angular que está pensando para ofrecerte todo lo necesario, en Vue tienes más libertad para usar ciertas características. Por ejemplo en Angular si quieres realizar llamadas HTTP puedes usar su propio paquete dentro de Angular. En Vue si quieres realizar estas llamadas tienes que instalar por tu cuenta el paquete que prefieras, axios por ejemplo.

Es decir, mientras que otros frameworks javascript te dan todo lo que necesitas, Vue ofrece lo básico para que puedas elegir si instalar a posteriori las utilidades que necesites.

Reactividad

Vue tiene propiedades reactivas, eso quiere decir que si cambia una variable en una parte de la vista de la página, Vue actualizará su nuevo valor sin necesidad de que lo hagas manualmente. El ejemplo típico es un contador. Si lo quieres hacer en Javascript puro, tienes que actualizar el valor en la vista cada vez que incrementas el contador. En Vue basta incrementar el contador para que se actualice en la página el nuevo valor.

Para casos mucho más complejos que éste, te aseguro que vas a agradecer que Vue sea reactivo.

Componentes web

Vue se basa en componentes web. Un componente web es una parte de una web que puede ser reutilizada y que normalmente tiene estilos y funcionalidad aislada.

Si no los conocías ya seguramente te sorprendas al saber que ese concepto ya lo has utilizado si has programado páginas web. Cuando creas una etiqueta html, por ejemplo

Los componentes web básicamente, permiten crear tus propias etiquetas HTML personalizables, es decir, imagina que necesitas crear un calendario y que lo vas a usar en varias vistas de la web. Creando un calendario en forma de componente web, puedes crear calendarios simplemente creando llamando a la etiqueta que tu mismo definas para el HTML, por ejemplo: .

Los componentes web los puedes crear con javascript sin necesitar Vue, pero este framework nos va a facilitar mucho la vida y nos va a ahorrar mucho tiempo.

Virtual DOM

Si hay que hacer un cambio en la vista, en lugar de sustituir directamente los nuevos valores en la vista, Vue creará una especie de réplica del DOM, es decir, de los elementos de la página web para que a la hora de hacer cambios en la vista se hagan de forma más óptima.

Eventos y transiciones

Puedes reaccionar a eventos que se producen en el DOM, por ejemplo cuando el usuario hace click en un elemento, cuando lo mueve, cuando escribe, etc.

Otra de las cosas interesantes de Vue es su sistema de transiciones y animaciones. Es muy sencillo de usar y a la vez puede llegar a ser muy complejo. Las animaciones son las que ya conoces de CSS por lo que no tendrás que aprender sistemas nuevos.

Mixins

Los mixins son funciones y lógica de los componentes que puedes reutilizar y reusar en otros componentes web. Con los mixins puedes compartir cualquier clase de opción que le puedes pasar a los componentes.

Lifecicle (ciclo de vida) de los componentes

Como también pasa en Angular y en React, tienes control sobre todo el ciclo de vida de los componentes, es decir, puedes controlar lo que ocurre antes de que se cargue el componente, lo que pasa justo al cargarse o al destruirse. Esto es útil por ejemplo cuendo queremos que pasen ciertas cosas cuando el usuario entra en una página (por ejemplo llamar a una API REST para cargar los datos)

Aplicaciones SPA gracias a Vue Router

Vue tiene un paquete oficial para poder tener un sistema de rutas. El sistema de rutas llamado vue router, permite tener una página web SPA, es decir, todas las páginas están ya cargadas cuando el usuario entra en la página web de tal forma que cambiar de página es instantáneo. Este sistema no es único de Vue, también lo tiene Angular y React.

Vue vs React vs Angular. ¿Cuál elegir?

Lo primero, podemos comparar el tamaño de todos los frameworks (en el año 2019). Este dato no es muy comparable, ya que Angular ofrece un framework completo, y en el caso de Vue y React, vas a necesitar más librerías si quieres hacer más cosas.

• Angular: 500+ KB
• React: 100 KB
• Vue: 80 KB

En cuanto a la curva de aprendizaje, en mi opinión, Angular es el más difícil de aprender. Con Angular, necesitas aprender Typescript y inyección de dependencias, que, aunque no es muy difícil, añade cierta complejidad en su aprendizaje.

React es más fácil de aprender pero su sintaxis hace que pueda resultar algo lioso para ciertas personas.

Vue en mi opinión, es el más sencillo de aprender, su sintaxis no resulta compleja y tiene una curva de aprendizaje muy asequible.

Angular y React cuentan con el apoyo de una gran compañía. Google en el caso de Angular y React en el caso de Facebook. VueJS no tiene apoyo de grandes compañías, solo de la comunidad, pero si que hay empresas que han desvelado que utilizan Vue como framework en proyectos importantes (Apple, Nike, etc).

Veamos ahora las ventajas de cada uno de ellos en cuanto a lo que puede ofrecer:

Ventajas de Angular:

• Typescript. Aunque al principio cueste más al tener que aprender su sintaxis, al final hace que se tengan menos errores en aplicaciones grandes al poder usar tipado e interfaces.
• Framework completo. A posteriori no vas a tener que instalar nada nuevo. Viene con todo para crear aplicaciones web completas.
• MCV. Modelo vista controlador que permite tener los datos separados de la lógica y de su representación
• Inyección de dependencias. Permite testear mejor los componentes ya que puedes crear mocks de las dependencias. Además permite modularizar mejor el código y abstraerse de los detalles de implementación de las dependencias.
• Arquitectura muy bien pensada para proyectos grandes. Todo está bien separado y organizado. Esto en proyectos pequeños puede resultar una desventaja porque es más lioso y necesitas más archivos.
• Servicios. Es una funcionalidad que trae Angular para poder abstraerse de las llamadas a la adquisición de los datos. Puedes tener las llamadas a una API, por ejemplo, en archivos separados que puedes inyectar en los componentes.

Ventajas de React:

• Tiene una comunidad detrás muy importante. Si tienes algún problema seguramente haciendo una búsqueda en google llegues a solucionarlo ya que a otro programador le habrá pasado lo mismo que a ti.
• A diferencia de Angular, React no viene con todo un set de utilidades ya creadas. Esto permite que sea mucho más flexible ya que puedes usar o implementar lo que necesites sin necesidad de usar lo que te dan. Esta ventaja también la ofrece Vue.
• React native. Con esta librería vas a poder crear aplicaciones móviles nativas con React de forma que sin tener que cambiar mucho, puedes crear una web y una aplicación móvil.
• Si te gusta programar en Javascript con React te vas a sentir bastante cómodo. Aunque Vue también se usa con Javascript, React utiliza javascript para el html y los estilos.

Ventajas de Vue:

• Curva de aprendizaje. En mi opinión y en la de muchos programadores, tardas menos tiempo en aprender los básico para poder desenvolverte con el framework.
• Arquitectura limpia. Por como está hecho Vue, el código de los componentes queda mucho más ordenado y limpio.
• Archivos .vue. A diferencia de React con sus archivos jsx, en los archivos vue puedes escribir html y css sin tener que hacerlo dentro de javascript. Está todo perfectamente separado.
• Comunidad en crecimiento. Aunque Vue no tiene una comunidad tan grande como React y Angular, su comunidad ha tenido un crecimiento espectacular en los últimos tiempos y se según las encuestas va a ir a más.

Yo personalmente pienso que Angular está más enfocado a aplicaciones web grandes, con una estructura muy compleja. Vue y React son más parecidos, la sintaxis de React no me acaba de convencer y si tengo que escoger un framework me quedaría con Vue.

Cómo instalar Vue. Hello world

Bien, si ya te has decidido a utilizar Vue, lo primero es ver cómo se puede crear un proyecto con este framework javascript. Se puede hacer de varias formas:

Con Vue CLI

La opción que yo siempre suelo usar. Vue CLi es una herramienta para línea de comandos que sirve para gestionar proyectos Vue. Para usarla puedes descargarla en tu equipo desde su paquete NPM:

npm install-g @vue/cli

Para que el vue cli se encarge de crear toda la estructura inicial del proyecto ejecuta:

vue create nombre-de-tu-proyecto

Cuando ejecutas ese comando, la terminal te preguntará si quieres las opciones por defecto o quieres personalizarlo

Si no sabes qué elegir le puedes dar a la opción default, no te preocupes porque todo se puede añadir al proyecto después de haber sido creado. En cuanto le des a esta opción se creará el proyecto y no tendrás que hacer nada más. Las opciones que voy a comentar ahora son por si seleccionas la opción manual.

Si decides manualmente seleccionar las opciones que prefieres, se abrirá otra pantalla en la que podrás instalar algunos paquetes básicos (yo suelo seleccionar vuex para gestionar estado, vue router para poder crear rutas en la web y css preprocessors porque me gusta usar sass). Puedes seleccionar los que quieras a tu gusto con la tecla espacio.

En la siguiente pantalla aparecerá que tipo de configuración quieres para el eslint, es decir, para el linter que analiza el código en busca de errores. Yo suelo escoger prettier. Luego te saldrá si quieres ejecutar el eslint cada vez que guardas y cada vez que haces commit. Yo recomiendo poner las dos opciones para evitar errores en el código.Lint on sa

La siguiente pantalla te dice si quieres la configuración en el package.json o en archivos dedicados. Yo recomiendo en archivos dedicados para tener todo separado en su lugar.

Yo para esta serie de artículos voy a escoger estas opciones para generar el proyecto de Vue:

• Babel, Router, CSS Pre-processors, Linter / Formatter
• History mode: yes. Si pones que no lo que va a hacer Vue es añadir al final de cada ruta un hash (#) para que el navegador no recargue la página al navegar entre ellas
• Sass / Scss with dart-sass. A mi me gusta sass. Uso dart-sass porque a veces node-sass da problemas.
• EsLint + Prettier. Es la opción que más me gusta para el linter
• Lint on save y lint and fix on commit. Muchas veces me ha salvado de subir código con errores
• Dedicated config files. Más fácil de mantener.

Por último te preguntará si quieres guardar estas opciones para crear proyectos en el futuro y se creará el proyecto.

Importando la librería de Vue

La otra forma de hacerlo, ideal cuando estamos haciendo algo simple o queremos prototipar rápido, consiste en usar directamente el javascript compilado de Vue de forma local o mediante CDN:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

Importando la librería de Vue ya tienes acceso a la variable global de Vue. Aquí te dejo un ejemplo de un hello world con vue con este método:

https://jsfiddle.net/chrisvfritz/50wL7mdz/

Mediante codesanbox o similares

Existen en Internet páginas gratuitas como codesanbox que permite crear proyectos de Vue. Cuando lo creas, te abre un editor de código online con vista previa por si no quieres instalar nada y quieres hacer pruebas en la nube.

https://codesandbox.io/

El asistente de línea de comandos de Vue

Vue CLI es una librería que permite usar comandos en la consola del ordenador para automatizar ciertas tareas. Este CLI es muy parecido al que tiene Angular o el que tiene React, es muy recomendable su uso en el día a día para ahorrar tiempo.

Si todavía no has instalado vue cli te vuelvo a dejar el comando:

npm install-g @vue/cli

Si al ejecutar uno de los comandos el asistente te dice que tienes que instalar un addon, ejecuta:

npm install-g @vue/cli-service-global

Veamos los comandos y todo lo que puede ofrecer vue cli:

Serve. Desarrollo en local

vue serve

Sirve para ejecutar la página en local para que puedas ver los cambios mientras desarrollas. Lo bueno de este comando es que tiene hot reloading es decir, cuando haces un cambio en uno de los archivos de vue (excepto en los de configuración globales), se actualiza la página sin necesidad de recargar.

Otra forma de ejecutar este comando, si has creado el proyecto con vue create es mediante el script que se crea en el package.json. Es decir:

npm run serve

Si usas el primer comando lo tienes que hacer dentro de la carpeta src del proyecto y si usas el segundo comando lo tienes que hacer en la carpeta en la que esté el package.json.

Una vez ejecutado el comando, y cuando haya cargado, si abres el navegador en la página http://localhost:8080 podrás ver la página que estás desarrollando. Lo tienes que dejar ejecutándose meintras desarrollas para ver los cambios.

Build. Compilación de tu aplicación web

vue build

El comando build sirve para compilar los archivos para ponerlos en producción, es decir, sirve para poder desplegar vue en un servidor.

Este comando generará todos los archivos javascript compilados y minificados para que los usuarios finales puedan acceder a la página que estás desarrollando. Para ello necesitas un hosting en el que poder usar apache o nginx.

Como el comando anterior, este comando también lo tienes disponible en el package.json.

npm run build

Este comando si que recomiendo tirarlo desde npm porque en el servidor en el que vayas a desplegar la página lo más normal es que tengas npm, así no tienes que instalar el paquete de vue cli.

UI. Interfaz gráfica para administrar proyectos Vue

vue ui

Este comando sirve para ejecutar una interfaz gráfica para poder administrar los proyectos de Vue. Si no te gusta mucho andar con comandos,puedes usar esta interfaz para trabajar de manera más cómoda.

Con esta interfaz puedes crear proyectos de Vue como con el vue create, puedes administrar los que ya tienes, ejecutar desde ahí los proyectos y compilarlos y instalar de forma más cómoda dependencias.

Añadir plugins con Vue CLI

Si después de haber creado un proyecto con Vue decides instalar una librería que no habías puesto, con este comando vas a poder hacerlo sin tener que configurar nada, por ejemplo:

vue add router

O por ejemplo:

vue add @vue/cli-plugin-eslint

Lo bueno de este comando es que ya te configura los archivos que tenías para añadir la configuración de los nuevos plugins. Si estos mismos paquetes los instalas mediante npm, vas a tener que añadir manualmente su configuración en cada archivo.

Herramientas recomendadas para programar con Vue

Vue tiene un tipo de archivos específico, los .vue y por lo tanto cuando los abras en cualquier IDE o programa no te va a pintar de colores la sintaxis como en otros lenguajes, por lo tanto necesitas instalar plugins en el IDE o editor de texto que utilices.

Editor de texto recomendado para Vue

El editor que yo siempre recomiendo para trabajar con Vue es el VSCode. No solo lo uso para programar en Vue si no que también lo uso para cualquier lenguaje para el frontend, incluso para python.

Te dejo su página web por si te lo quieres descargar. Por cierto, es gratuito y open source.

https://code.visualstudio.com/

Para VSCode existe un plugin ideal para Vue, llamado Vetur. Instalando este plugin vas a tener todo lo necesario para usar Vue en vscode. Este plugin va a hacer que tengas la sintaxis de colores, te va ayudar con el lint y formateado de archivos, tiene autocompletado, snippets, etc.

Para instalarlo puedes buscarlo en la sección Extensions (el último icono del menú de la izquierda).

Además, te recomiendo que crees un archivos llamado .editorconfig en la raíz del proyecto con estas opciones:

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

Este fichero lo que hace es decirle al editor, en este caso al vscode que las tabulaciones sean de dos espacios para cuando creemos los archivos de vue.

Para que funcione te tienes que descargar esta extensión para que el vscode lea el archivo:

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Otros plugins para trabajar con Vue

• vim-vue: Para el editor VIM. https://github.com/posva/vim-vue
• vue-codemix: Para Eclipse. https://marketplace.eclipse.org/content/vuejs-codemix
• language-vue: Para usar con ATOM. https://atom.io/packages/language-vue
• brackets-vue: Para el editor brackets. https://github.com/pandao/brackets-vue
• vue-syntax: Para Subime code. https://medium.com/@kentaguilar/install-vue-syntax-highlighting-via-package-control-on-sublime-text-2-bfb977f444e7

Conclusiones

Vue, en mi opinión, es uno de los mejores frameworks para el frontend del panorama actual. Es simple, se aprende rápido su estructura es limpia y su comunidad va en aumento.

Con lo que hemos visto hoy deberías tener una idea básica de qué es Vue y como crear la estructura de tu primer proyecto con Vue.

Si te sientes perdido es normal, nos pasa a todos al principio. Te recomiendo que sigas los próximos capítulos de esta serie sobre Vue. Próximamente veremos cómo empezar a programar en Vue y cómo se organiza un proyecto Vue.