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.
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:
Parte | Descripción |
---|---|
Vue | El core o núcleo del framework Vue, donde residen sus funciones principales. |
create-vue | Asistente para crear y administrar proyectos de Vue desde una terminal con Vite. |
Vue Router | Sistema para crear y gestionar rutas URL desde el navegador en una aplicación de Vue. |
Pinia | Gestor de estados para aplicaciones SPA Vue de nueva generación. |
Vuex | Gestor de estados para aplicaciones SPA de Vue legacy. |
Vitest | Framework de testing para tests unitarios basados en Vite. |
Vue Test Utils | API para realizar tests sobre nuestra aplicación Vue. |
Petite Vue | Versión ligera de Vue, orientada a la mejora progresiva. |
Nuxt | Framework para construir aplicaciones completas que utilicen Vue internamente. |
En los siguientes temas iremos viendo cada uno de ellos y avanzando en sus detalles particulares.