¿Qué es Vue?

El framework Javascript VueJS


Vue.js (también llamado Vue o VueJS) es un framework progresivo Javascript para crear interfaces de usuario, o en otras palabras, se trata de una «capa» añadida a Javascript formada por herramientas, convenciones de trabajo y un lenguaje particular que nos permite crear aplicaciones de forma rápida, agradable, sencilla y muy práctica.

VueJS

La palabra Vue (pronunciado «viú») viene del francés y significa «view» (vista), que es como se le denomina a la parte visual del modelo MVC, parte en la que se centran estos frameworks.

Vue es un framework frontend, es decir, que si vienes de framework del estilo de Laravel (PHP), Ruby on rails (Ruby), Spring (Java) u otros framework de backend, te encontrarás múltiples diferencias. En los últimos años se ha popularizado la creación de aplicaciones de tipo SPA (Single Page Application), que es la categoría donde se encuentra Vue, React, Angular, etc...

¿Por qué elegir Vue?

Quizás, la pregunta más frecuente cuando hablamos de frameworks de Javascript es ¿Por qué Vue y no otro framework? ¿Por qué no elegir React? ¿o Angular? ¿o Svelte? ¿o cualquier otro framework Javascript? La respuesta a esta pregunta no es clara y es muy subjetiva.

Vue es un framework que tiene varias características que lo definen principalmente. Si tu proyecto o finalidad encaja con dichas características, Vue será una buena elección para ti. Sin embargo, si no se ajusta a dichas características, quizás sea mejor analizar otros frameworks.

Las características de Vue son las siguientes:

  • 📉 La curva de aprendizaje es, con diferencia, la más sencilla de los tres frameworks más populares: React, Vue y Angular.

  • 🎈 Se trata de un framework muy amigable y respetuoso con las tecnologías de frontend y los estándares. Utiliza HTML, CSS y Javascript y es compatible con WebComponents (de hecho, sus componentes se basan en ellos). Si eres desarrollador con base fuerte de HTML/CSS, muy probablemente te guste más Vue que otras opciones.

  • 🍭 Se trata de un framework progresivo. Esto significa que es ideal para migrar y adaptar proyectos existentes hechos en otras tecnologías y pasarlos poco a poco a Vue. Algo muy común cuando trabajas en proyectos legacy (la mayoría de los casos en muchas empresas).

  • 🎃 Los desarrolladores que provienen de lenguajes o frameworks exclusivamente de backend están acostumbrados a ciertos patrones de programación que no son exactamente iguales en frontend. Es aconsejable aprender ciertas bases de frontend general. Una buena base de Javascript también es muy recomendable.

  • 🧶 Vue le da mayor protagonismo al enfoque tradicional «centrado en HTML», así como a los sistemas de plantillas. Si te gustan, Vue probablemente te resulte muy atractivo. Por otro lado, el enfoque de React se suele centrar más en programación pura en Javascript, utilizando HTML y CSS sólo como complementos que se añaden a Javascript.

Estás son algunas de las características principales que creo que pueden hacer decantarte por un framework/librería u otro, dependiendo fuertemente de tus particularidades como desarrollador y la finalidad de tu proyecto.

Framework sin opinión

Vue (al igual que React) se considera una herramienta no opinionated (sin opinión), o lo que es lo mismo, ni Vue ni React te van a guiar por una forma única de hacer las cosas, sino que a lo largo de tus proyectos lo habitual suele ser ir incorporando las características que necesites. También existen múltiples formas de hacer las mismas cosas, cosa que a ciertos desarrolladores les encanta, pero otros lo odian.

Por su parte, Angular se considera un framework opinionated (con opinión), ya que es más estricto en cuanto a las decisiones de arquitectura y te obligará en cierta forma a utilizar determinadas tecnologías o características (o al menos te hará más complicado hacerlo de otra forma).

Ecosistema de Vue

El ecosistema de Vue está formado por varias partes, donde cada uno realiza una tarea concreta. Sus partes principales son las siguientes:

ParteDescripción
VueEl core o núcleo del framework Vue, donde residen sus funciones principales.
create-vueAsistente para crear y administrar proyectos de Vue desde una terminal con Vite.
Vue RouterSistema para crear y gestionar rutas URL desde el navegador en una aplicación de Vue.
PiniaGestor de estados para aplicaciones SPA Vue de nueva generación.
VuexGestor de estados para aplicaciones SPA de Vue legacy.
VitestFramework de testing para tests unitarios basados en Vite.
Vue Test UtilsAPI para realizar tests sobre nuestra aplicación Vue.
Petite VueVersión ligera de Vue, orientada a la mejora progresiva.
NuxtFramework para construir aplicaciones completas que utilicen Vue internamente.

En los siguientes temas iremos viendo cada uno de ellos y avanzando en sus detalles particulares.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev