En este artículo descubriremos qué es Vue Js y todo sobre el framework progresivo que gana terreno entre los desarrolladores frontend. Por qué conviene manejarlo, sus diferencias con React y Node Js, además de un instructivo para la instalación. 

¿Qué es Vue Js?

Vue Js es un framework de código abierto añadido al lenguaje de programación JavaScript que se usa para crear interfaces de usuario.

También lo escucharás nombrar o lo encontrarás escrito como Vue, VueJS o Vue.js.

En términos técnicos, Vue Js es un framework progresivo JavaScript. Debes tener en cuenta que se trata de un entorno de trabajo frontend. Además de Vue Js, otros frameworks frontend son React y Angular.

Recuerda que el frontend se caracteriza por ser la parte visible del desarrollo web, y su base son el HTML, el CSS y JavaScript. ¿Qué te parece si repasamos brevemente sus funciones?

El HTML 5 es un código que se traduce en la información visual de los sitios web. Podríamos decir que es la estructura, el esqueleto. Inicialmente, el HTML servía para ordenar el texto, pero ahora permite agregar archivos multimedia a la web, como videos, imágenes, tweets, etc.

El CSS es un lenguaje de diseño gráfico, que tiene como finalidad distinguir la jerarquía visual del contenido desde colores, tamaños de fuente, estilos, etc.

El Javascript o JS, es un lenguaje flexible que permite crear sitios web dinámicos a partir de la aplicación de efectos, animaciones o acciones que se ejecutan al pulsar botones. Podríamos decir que es uno de los que realiza el nexo entre los requisitos del área de diseño y el área de programación.

Estos tres lenguajes pueden ser aprovechados aún más utilizando la biblioteca bootstrap. Se trata de un framework que puedes usar para extraer elementos de CSS o JavaScript, como animaciones, efectos o componentes.

Antes de avanzar, hay algunos datos curiosos que te serán de gran utilidad.

¿Qué significa el término “Vue”? Proviene de la palabra en francés que se pronuncia “viú”, que significa vista. Eso es coherente con el área frontend, que refiere al “lado del cliente” y, en tanto, a los elementos que son visibles en aplicaciones y páginas web.

Un detalle no menor: Vue Js fue creado en el año 2014 por Evan You, ex empleado de Google y experto en JavaScript. Evan sigue activo y trabajando constantes mejoras sobre Vue.js, las cuales puedes seguir desde su cuenta de Twitter. Y si también lo deseas, puedes visitar su sitio en GitHub para ver sus trabajos.

¿Para qué sirve Vue Js?

Vue Js sirve para crear aplicaciones e interfaces de usuario en forma rápida, práctica y relativamente simple. Para eso, el framework incluye herramientas, lenguaje específico y convenciones de trabajo.

Esto se traduce en framework de frontend, que es tan potente como Angular, más ligero y flexible, ya que omite plugins y conceptos innecesarios que posee Angular. Esta es una de las tantas razones por las cuales Vue Js se ha convertido en uno de los frameworks más populares en la actualidad.

Este marco de JavaScript progresivo se emplea para crear aplicaciones SPA, una variante de aplicaciones web de una sola página. Es decir, todas las pantallas se muestran agrupadas, sin recargar al navegador.

¿Qué se puede generar con Vue Js?

• Páginas web completas.

• Aplicaciones básicas.

• Interfaces de usuario para controlar funciones avanzadas a través de un dashboard.

¿Vue Js es tecnología frontend?

Vue Js es uno de los entornos de trabajo frontend más populares, tal como señalamos anteriormente.

Frontend hace referencia a las tareas de desarrollo del “lado del cliente” o “del navegador”, es decir, a los elementos con los que interactúa el usuario final.

Si eliges trabajar en el área de frontend te dedicarás a la programación y el desarrollo web, pero centrándote en el aspecto visual del sitio. Es por esto que estarás en constante comunicación con otras áreas como Diseño o Experiencia de Usuario.

En ese sentido, frontend (donde se inscriben Vue Js, React y Angular, entre otros) se diferencia del desarrollo backend que se enfoca en el “lado del servidor” y trabaja con lenguajes de programación como Java, PHP, Phyton y NoddeJS, entre otros.

¿Por qué aprender Vue Js?

Vue es un framework progresivo que ha conseguido penetración entre la comunidad de desarrolladores frontend.

El repaso de sus beneficios explica por qué es conveniente estudiar Vue Js. Una de las principales diferencias en comparación con React y Angular es el alto desacoplamiento.  

¿Qué implica esto? Mira.

Vue Js facilita la tarea de extender las funcionalidades para que se incluyan en más módulos, trabajando en una biblioteca central.  

En resumen, aprender Vue Js es conveniente por las siguientes razones:

• El framework tiene una creciente popularidad en la comunidad de desarrolladores.

• En Google Trends, las tendencias de búsqueda de “Vue Js” se mantienen estables a lo largo del tiempo.

• Según la encuesta a desarrolladores realizada por Stackoverflow en 2022, Vue Js aparece entre los seis primeros frameworks más utilizados, en un ranking que lidera Node.js.

• La curva de aprendizaje es sencilla en relación con React y Angular.

• En definitiva, porque facilita la creación de aplicaciones.

Características de Vue Js

Las siguientes son las principales características de Vue Js:

• JavaScript y frontend: Es un framework amigable para el desarrollo del lado del cliente. Recuerda que el frontend es el área del desarrollo web que se centra en los aspectos visuales y de interfaz de un sitio web, por lo que si quieres dedicarte a esta área deberías aprender Vue Js.

• Es progresivo: Permite migrar y adecuar proyectos creados con otras tecnologías. Además, puede ser utilizado en tareas básicas y sencillas, como una alternativa a Jquery o en otras más complejas como la creación de una SPA (Single-Page Application) completa.   

• Reactividad: Es una de las características fundamentales de Vue Js. Implica que la aplicación reacciona a los cambios, sin que sea necesaria la recarga completa de la página. Esto a su vez mejora la experiencia de los usuarios.

• Modularidad: Vue Js opera con librerías separadas, lo que permite añadir funciones e interactividad al desarrollo.

• Es compatible con WebComponents: Los componentes de Vue Js se basan en ellos; utiliza, JavaScript, CSS y HTML. Por eso, resulta conveniente volcarse a aprender Vue Js luego de dominar las nociones fundamentales del desarrollo web.

• Centrado en HTML: Vue Js se enfoca en ese lenguaje de marcado y en los sistemas de plantillas.

• Es un framework “sin opinión”: A estas herramientas se las denomina en inglés “no opinionated”; es decir, no proponen un único modo de trabajar, sino que abren un abanico de posibilidades de acuerdo a las características del proyecto.

• Es flexible: Vue Js permite modular los proyectos, favoreciendo su escalabilidad. También permite reemplazar fácilmente componentes.

• Control elevado: Igual que en React y Angular, el desarrollado tiene un amplio margen de control sobre los componentes al trabajar con Vue Js. Es posible hacer revisiones antes de que cargue, cuando carga o al destruirse.

Finalmente, es preciso mencionar que Vue Js admite el patrón Model-View-ViewModel (MVVM).

Ventajas y desventajas de Vue Js

Igual que cualquier otro entorno de desarrollo, Vue Js tiene puntos a favor y algunas desventajas respecto a las alternativas disponibles, en este caso en el área frontend.

Algunas de las ventajas de Vue Js:  

• Es un framework JavaScript que gana popularidad en la comunidad de desarrolladores. Por lo que puedes encontrar gente que pueda ayudarte a resolver dudas o a la que puedas ayudar con tus conocimientos.

• Es open source (de código abierto). Esto es muy positivo, ya que no requiere gastos externos para aprender a usar la herramienta y profundizar tus conocimientos.

• Implementa lo mejor de otros frameworks, barriendo con aquello que no aporta valor.

• En ese sentido, tiene una labor de depuración que elimina el código innecesario.

• Ofrece un amplio margen para la personalización de los proyectos.

• Brinda un nivel alto de control.

• Permite crear aplicaciones en forma rápida y sencilla.

• Propicia resultados con una velocidad de carga superior en relación con proyectos que se realizan en otros frameworks.

• La curva de aprendizaje asequible. Esto se traduce en no enfrentarse constantemente a las frustraciones habituales del proceso de aprendizaje.

• Por eso, es una buena vía de entrada al desarrollo frontend.

• Además, los desarrolladores gozan de acceso a documentación muy detallada.

Con una comunidad activa, existen frameworks dentro de Vue Js que agregan nuevas funcionalidades. Entre ellos aparecen Bootstrap Vue, Vuetify, Quasar y Vue Material.

¿Cuáles son las desventajas de Vue Js?

Originalmente, Vue.js fue adoptado por los chinos en empresas como Xiaomi o Alibaba, sin embargo, con el tiempo se ha popularizado más y se han generado canales de habla hispana para poder acceder a diversos foros de consulta. De todas formas, es muy posible que una parte del soporte no sea en español, por lo que siempre es buena idea aprender otros idiomas como el inglés.

El apoyo es mayor entre la comunidad de desarrolladores que entre las grandes empresas, mientras que otros frameworks en frontend sí lo tienen, por ejemplo React (Facebook) y Angular (Google).

Node Js vs. Vue Js: similitudes y diferencias

Node Js es una tecnología de backend que interpreta JavaScripts y fue diseñada para crear aplicaciones escalables (cuya cantidad de usuarios va en aumento). Con Node Js puedes crear servidores web más ágiles y capaces de trabajar con otros lenguajes secuenciales como Python. Es utilizado principalmente en aplicaciones de red o proyectos grandes para garantizar la velocidad y agilidad de los procesos.

• Si bien Node Js y Vue Js se basan en JavaScript, el primero ejecuta código en el lado del servidor (back end), mientras que el segundo lo hace en el lado del cliente (front end).

• Esa es la principal diferencia entre Vue Js y Node Js, de la que se desprenden otros aspectos.

• La curva de aprendizaje en Node Js es alta en relación a Vue Js, que es comparativamente baja.

• Node Js está escrito en C / C++, mientras que Vue Js en Javascript.

• El primero transmite datos en tiempo real, algo que no es factible en Vue Js.

• En Node Js no se utiliza DOM (siglas de “modelo de objetos de documento”), que sí se emplea en Vue Js.

React vs. Vue Js: Similitudes y diferencias

Tanto React como Vue Js son frameworks del lado del cliente (frontend). React Js es un framework desarrollado por Facebook en el año 2013 con el fin de crear interfaces modulares y adaptables que resultan de gran utilidad al momento de diseñar una web con diseño responsive.

React Js no solo es utilizado para construir páginas web interactivas y responsive, sino que también sirve para crear aplicaciones nativas con React Native para Android o iOS, aplicaciones de escritorio e, incluso, realidad virtual. 

También están emparentados por el hecho de ser “no opinionated”. Tal como indicamos anteriormente, brindan diferentes vías para avanzar en las tareas de desarrollo, distanciándose en este punto de Angular.  

• Una de las diferencias entre React y Vue Js es el tamaño de las aplicaciones, siendo el primero apenas más pesado que el segundo (100 kb vs. 80 kb).

• Incluso con esa diferencia, React y Vue Js son considerablemente más livianos en comparación con Angular, que está por encima de los 500 kb.

• También es preciso tener en cuenta que el enfoque de React usualmente está centrado en programación pura en Javascript, empleando HTML y CSS como complementos añadidos.

• Respecto a la curva de aprendizaje, el consenso entre los insiders es que es más baja en Vue Js que en React.

También, cabe considerar que en Vue Js se emplea el HTML tradicional para plantillas. Por su parte, en React se recomienda escribir todo el código de plantilla en JavaScript con la extensión de sintaxis JSX.

Empresas que utilizan Vue Js

¿Sabías que muchas de las grandes compañías del mundo utilizan este framework para sus sitios? Aquí te nombramos algunas:

• Nintendo: la compañía nipona de videojuegos responsable de títulos como Mario Bros, Pokemon o Legend of Zelda y de consolas como Game Boy Wii o Switch, usan Vue Js en muchas de sus páginas oficiales. Un ejemplo es el sitio web oficial de Alemania. También en su página My Nintendo donde cada usuario puede administrar sus recompensas obtenidas por compras o logros en videojuegos.

• Adobe: si conoces diseñadores o tú mismo has querido armar un portfolio con un diseño elegante y visualmente atractivo, es muy factible que hayas oído hablar de Behance. Esta plataforma es muy utilizada para exhibir el trabajo de diferentes personas usuarias. Y para su desarrollo, el equipo de Adobe emplea el framework Vue.Js.

• GitLab: la compañía que permite almacenar, gestionar y conectar repositorios con diferentes aplicaciones (similar a GitHub) utiliza Vue.Js desde el año 2016. La razón de su implementación se basa en que muchos desarrolladores notaron que se podían lograr los mismos efectos con menos líneas de código (de 30 a 1), por lo que significó una mejora en su rendimiento. 

Además de las mencionadas, otras de las compañías y organizaciones que usan Vue Js son Alibaba, Xiaomi, Glovo, EuroNews y Reuters.

De acuerdo a la plataforma StackShare, más de 3.600 empresas utilizan Vue Js.

¿Cómo instalar Vue Js?

Instalar Vue Js es relativamente sencillo. Hay algunos aspectos a considerar:

Tener Node Js en el equipo, en caso de que el gestor de paquetes sea NPM (la herramienta por defecto de JavaScript para compartir e instalar distintos paquetes). Aquella es una herramienta que simplifica el trabajo con librerías, permitiendo instalar, eliminar y actualizarlas en forma simple.

¿Qué pasos seguir para instalar Vue Js? Veamos.

• Instalar la herramienta de línea de comandos Vue CLI, para compilar el código Vue en JavaScript.

• Para la instalación, es preciso abrir una ventana de terminal de comandos. Con gesto de paquetes NPM, indicar lo siguiente:

# Instalación de Vue CLI con NPM

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

• Luego es preciso usar el comando vue créate.vue.

# Creación de proyecto vue

create proyecto-vue

• Lo que sigue es acceder al directorio del proyecto mediante el comando cd, ejecutando uno de estos comandos para iniciar el servidor local:

# NPM

npm run serve

• Por último, es preciso acceder a la URL que se muestra en la terminal para ver la página por defecto (en el navegador) del proyecto Vue.

¿Vue Js es fácil de aprender?

La curva de aprendizaje de Vue Js es baja en comparación con otros frameworks JavaScript en el área frontend.

Si es importante conocer los fundamentos de JavaScript y HTML, articulándolos también con CSS. Es por eso que aprender desarrollo web siempre será un paso fundamental antes de empezar con Vue Js.

En favor del aprendizaje de este framework hay que mencionar que los desarrolladores cuentan con acceso a documentación detallada y completa, lo que puede acelerar la curva de aprendizaje de esta capa cuya popularidad va en ascenso.

A modo de cierre, recapitulemos algunos tips al momento de aprender Vue Js:

• Como bien dejamos en claro durante varios apartados de esta nota, es fundamental que antes de iniciarte en este camino es fundamental que domines los lenguajes básicos del Desarrollo Web: HTML, CSS y JavaScript.

• Puedes instalar el complemento de forma 100% gratuita para realizar tus prácticas o proyectos en cualquier momento que lo desees.

• La curva de aprendizaje de Vue Js es más sencilla en comparación con otros frameworks como React Js (front end) o Node Js (back end).

• Puede serte de gran utilidad dominar otro idioma además del español al momento de necesitar soporte técnico. Recomendamos que domines el inglés.

Muchas grandes y medianas compañías utilizan Vue Js para sus sitios. Esto puede ponerte en perspectiva al momento de proponer tus proyectos en caso de que busques inspiración o referencias.

---

Conoce el programa de nuestro curso de Vue Js aquí.

Si quieres seguir leyendo sobre este u otros temas te invitamos a recorrer nuestro blog.