Introducción a Vue.js
Con más de 4.8 millones de descargas semanales en npm y una gran comunidad activa de desarrolladores, Vue.js se ha establecido como uno de los frameworks de JavaScript de más rápido crecimiento en la actualidad.
En este post, hacemos una introducción sobre cómo surgió Vue, cómo es hoy en día y conceptos básicos para comenzar a utilizarlo.
El nacimiento de Vue.js
Vue fue creado por Evan You como un proyecto personal en 2013, mientras trabajaba para Google, donde desarrollaba prototipos de interacción de usuario que se salían un poco de la estructura tradicional de aplicaciones web.
Su idea surgió porque los frameworks que se usaban en ese momento no le ofrecían lo que necesitaba: siempre había que pasar por crear una aplicación, con mucha configuración y estructura, y esto le quitaba tiempo para lo poco que le aportaba. Por eso, lo desarrolló inicialmente como una librería liviana para facilitar la sincronización entre la vista (view → vue) y los objetos de JavaScript.
Esta librería comenzó a ganar popularidad entre los usuarios por esta razón, pero todavía había muchos escépticos que no querían darle una oportunidad debido a la falta de una versión estable y la preocupación de que fuera un proyecto temporal con poco soporte. Es por esto por lo que en 2015 lanzó la primera versión estable de Vue.js como librería open source. Con este lanzamiento, nacieron también las herramientas y librerías complementarias para mejorar y ampliar sus capacidades, lo que llamamos el ecosistema de Vue.
Posteriormente, se lanzaron nuevas versiones, ya como framework: en 2016, Vue 2, con mejoras en el rendimiento y la reactividad; y en 2018, Vue 3 (conocido como Vue Next), la versión más actual, con cambios en el núcleo de Vue.js y con un sistema de reactividad y enfoque de composición nuevos.
Ahora conocemos un poco más su historia y desarrollo, pero a día de hoy, ¿qué es Vue y de qué disponemos?
¿Qué es Vue.js?
Vue (pronunciado “viu”, como view) es un framework progresivo basado en HTML, CSS y JavaScript estándar. El concepto de ser progresivo es fundamental: permite incorporar sus características de forma incremental en un proyecto existente.
La librería principal se centra únicamente en la capa de vista y las funcionalidades avanzadas necesarias para aplicaciones complejas, como enrutamiento, gestión de estado y herramientas de construcción, se añaden a través de librerías y paquetes de soporte oficialmente mantenidos. Esto hace que destaque entre los desarrolladores por su simplicidad, flexibilidad y potencia, ya que se puede usar para construir diferentes tipos de aplicaciones.
Además, es una herramienta muy útil por su compatibilidad con otras librerías de JavaScript, tiene una curva de aprendizaje suave y cuenta con una documentación muy completa y bien organizada.
Ecosistema de Vue.js
Como ya hemos dicho, allá por 2015, cuando se lanzó la primera versión oficial de Vue, se fueron creando nuevas herramientas y librerías para poder ir añadiendo más funcionalidad a ese núcleo tan sencillo. Entre las principales herramientas oficiales nos encontramos:
- Vue CLI, una interfaz de línea de comandos para la gestión de proyectos Vue. Aquí podemos elegir entre diferentes configuraciones.
- Vite, un “bundler” alternativo a webpack desarrollado por el equipo de Vue.js. Ofrece compilación bajo demanda para una carga más rápida de módulos en tiempo real.
- Devtools, una extensión para navegadores que permite la depuración de aplicaciones Vue.
En cuanto a las librerías oficiales tenemos:
- Vuex, que permite gestionar el estado en aplicaciones Vue.js. Centraliza los datos compartidos entre componentes, asegurando una sincronización coherente del estado de la aplicación.
- Vue Router, para el enrutamiento en aplicaciones Vue.js, la navegación entre páginas y la gestión de rutas de manera declarativa.
- Vue Test Utils, para unit testing y testing de integración.
- Pinia, una alternativa moderna a Vuex para la gestión de estado en aplicaciones.
Y si te sigue picando la curiosidad, existen también frameworks basados en Vue.js para ampliar las capacidades de Vue.js y darle más estructura:
- Nuxt.js, para crear aplicaciones SSR (server side rendering) y simplificar el uso de Vue como framework.
- Gridsome, para crear aplicaciones PWA (progresive web applications), con integración nativa de GraphQL para la gestión de datos.
- Quasar Framework, para crear aplicaciones web, móviles y de escritorio utilizando un conjunto completo de componentes y herramientas integradas.
Por último y no por ello menos importante, habría que mencionar otro tipo de herramienta muy potente: la comunidad de Vue. Y es que ha sido gracias a ella que este framework ha llegado a donde está, y por la que sigue manteniendo su esencia, al mismo tiempo que ha evolucionado y adquirido nuevas funcionalidades y capacidades.
Probando Vue.js
Para cacharrear un poco, solo necesitas un fichero HTML, y añadiendo el script de Vue y montando el elemento reactivo ya tenemos un desarrollo funcional (de la documentación de Vue using-vue-from-cdn ):
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
Esta es la manera más sencilla. Si queremos crear un proyecto con toda la potencia de Vue (y para poder usar la nueva sintaxis de Vue 3), tendremos que generarlo usando las herramientas del ecosistema de Vue: Vue CLI o Vite.
Si queremos generarlo con Vue CLI, tendremos que usar un gestor de paquetes: npm, yarn... el que gustes. Después, instalar vue-cli a través de la terminal:
npm install -g @vue/cli o yarn global add @vue/cli
Y ahora ya sí, podemos crear la aplicación:
vue create my-project
Donde "my-project" será el nombre de la carpeta raiz de tu proyecto.
Vue CLI nos mostrará un wizard con opciones sobre lo que queremos añadir (typescript, SCSS, vuex, vue router…) y, una vez completado, nos habrá generado un proyecto de Vue con la configuración necesaria.
Podremos ver nuestro proyecto en el navegador yendo a la carpeta raíz y ejecutando el siguiente comando:
npm run serve o yarn serve
Esto nos arrancará un servidor local con hot reload.
Con Vite, la creación de un proyecto se hace ejecutando este comando:
npm create vite@latest o yarn create vite
Vite también nos mostrará un wizard donde tendremos que escoger que la aplicación que queremos montar es de tipo Vue.
Prodemos ver nuestro proyecto en el navegador yendo a la carpeta raíz y ejecutando el siguiente comando:
npm install && npm run dev o yarn install && yarn dev
Y también nos arrancará un servidor local con hot reload.
Con esto os dejo en un buen punto de partida para empezar a probarlo, así que hasta aquí la introducción a Vue.
Como comentario final a modo de resumen, échale un ojo a Vue, un framework hecho por y para desarrolladores, con un núcleo sencillo y fácil de aprender y con muchas herramientas para añadir a posteriori para que no te aturulles. Ah, y con un gran soporte y documentación, ¡Todo lo bueno!