Qué es Vue JS y qué lo diferencia de otros frameworks

En este post te mostramos las peculiaridades de un framework de frontend, que está de moda, y cada día que pasa obtiene más cuota de mercado. Se trata de Vue.js, un framework de JavaScript del área frontend (parte visual de nuestra aplicación) que goza de una gran popularidad entre la comunidad de desarrolladores, debido a una serie de peculiaridades que te contamos a continuación.

Como bien sabes, el mundo del desarrollo web está en continuo cambio y evolución, hace algunos años las aplicaciones eran estáticas, menos interactivas y atractivas, sin embargo, ahora son dinámicas, rápidas, interactúan continuamente con el usuario y deben garantizar tanto la seguridad como la disponibilidad.

Para conseguir estos aspectos, es necesario incrementar el código en el entorno cliente, en definitiva, incrementar el código necesario para conseguir esta interactividad supone escribir más código JavaScript. Debido a la dificultad que recae en hacer estas funciones a mano, han entrado en juego los frameworks frontend, facilitando el desarrollo de las aplicaciones y surgiendo múltiples tecnologías y paradigmas de programación.

Ante tanta complejidad han surgido diferentes frameworks frontend, siendo los más populares Angular, React y VueJS. Frameworks que han llegado para quedarse y revolucionar el mundo del desarrollo web.

Para estudiar la importancia de este framework dentro del mundo frontend, haremos un pequeño ejercicio de investigación con dos herramientas, que definen bastante bien la situación de Vue.js dentro del sector del desarrollo web.

Tendencias de búsqueda por Google Trends: nos muestra las tendencias de búsquedas en el buscador. De hecho, lo primero que hacemos cuando escuchamos un nuevo término, o queremos aprender algo nuevo, es teclearlo en el navegador, para obtener información.

Si ajustamos una búsqueda mundial para los tres frameworks más conocidos por tendencias de búsqueda en los últimos cinco años:

Se puede observar que React es el término de búsqueda más buscado, seguido por Vue.js y Angular. Siendo la tendencia de búsqueda de Vue.js estable en el tiempo.

Si desglosamos estas búsquedas por procedencia, observamos que el sureste Asiático es la zona donde más interés denota Vue.js, siendo China el país en el que más búsquedas de Vue.js se realizan. La tendencia de búsqueda predominante en gran parte de Europa es Angular, quedando React relegada a América del Norte y parte de Asia Central como ganador en las tendencias de búsqueda.

Por otro lado, otra fuente de información a utilizar en nuestro pequeño ejercicio de investigación son los datos provenientes de la encuesta anual de Stackoverflow a desarrolladores sobre las tecnologías más populares. Para el año 2020, muestran los siguientes datos:

Se aprecia como la cuota de popularidad de este framework alcanza el 17 %, superado con creces por React (35,9%) y Angular (25,1%).

Por tanto, aunque no es uno de los frameworks más populares si se encuentra en el top 3, y el coste de oportunidad es algo menor, cuestión no menos a tener en cuenta a la hora de valorar un reciclaje profesional o un cambio en la búsqueda de trabajo. Como verás en líneas precedentes Vue.js es el framework con una curva de aprendizaje más moderada y que ofrece una gran de oportunidades.

Qué es Vue JS

Vue.js es un framework open source de JavaScript, que nos permite la creación de interfaces de usuario y aplicaciones de una sola página (single-page application o SPA, en inglés), de una forma muy sencilla. Fue creado, o desarrollado, por un ex empleado de Google, Evan You, en el año 2014. Con respecto a otros frameworks, la curva de aprendizaje es baja, si conoces los fundamentos de JavaScript. Además, es muy sencillo de utilizar ya que podemos utilizar este framework simplemente con la inclusión de sus dependencias mediante CDN.

Vue.js se ha vuelto tan popular porque ha sabido implementar lo mejor de otros frameworks, eliminado todo aquello que no aporta valor. Dejando libertad a los desarrolladores para personalizar totalmente los proyectos, generando un mayor control. Como beneficio directo, disponemos de aplicaciones muy livianas con una velocidad de carga mucho superior a otros proyectos realizados en otros frameworks.

Para qué sirve Vue JS

Posiblemente, este sea el tema más importante a tratar en el blog, en pocas palabras Vue JS sirve para la creación de páginas web completas, siendo capaz de desarrollar desde aplicaciones básicas a interfaces de usuarios capaces de controlar funciones avanzadas mediante un dashboard.

En ocasiones se compara a este framework con JQuery, pero es un auténtico despropósito, Vue.js es mucho más completo. Por un lado, JQuery está pensado para ahorrar código JavaScript pero no para hacer páginas web completas, mientras que en el entorno de Vue.js no vas a necesitar JQuery ni otras librerías JavaScript.

La comunidad de desarrollo de Vue JS ha conseguido implementar las mejores opciones de otros frameworks, siendo las principales peculiaridades de esta framework, las siguientes:

JQuery obsoleto

Con Vue Js ya no vas a necesitar JQuery, así como otras librerías de JavaScript, por tanto, la complejidad y el tamaño de nuestra aplicación se reducen considerablemente.

Reactividad

Otras de las características que definen a Vue.js, es la reactividad. La aplicación reacciona al cambio de eventos modificando el DOM de nuestra página, todo esto sin que sea necesaria la recarga de la página. Aspecto fundamental en la mejora de usabilidad y experiencia de los usuarios. Esto es debido a que los modelos del framework son objetos de JavaScript. Cuando se produzca una modificación, se actualizará la vista sin tener que recargar toda la página.

Componentes

Una de las características fundamentales de Vue.js es el trabajo con componentes. Un componente Vue.js, es un elemento en el cual se encapsula código reutilizable. Dentro de cada componente podemos encontrar fragmentos de código HTML, JavaScript o CSS. Esta característica permite modular los proyectos, haciendo muy fácil la escalabilidad de los mismos. Así mismo, si surge la necesidad, se puede reemplazar un componente por otro de una forma muy simple, y en muy poco tiempo.

Modularidad

Vue Js está modularizado en diferentes librerías separadas que permite ir añadiendo funciones e interactividad a nuestra aplicación. Mientras que otros frameworks te ofrecen una gran cantidad de funciones y características, Vue ofrece lo básico para que puedas elegir entre las utilidades que necesites, así el desarrollador puede adaptar su desarrollo a aquello que necesita, y sobre todo tener el control sobre la aplicación que está desarrollando.

Virtual DOM

Vue en lugar de sustituir directamente los nuevos valores en la vista, crea una vista paralela, implementando un DOM de tipo virtual. Para que, a la hora de hacer cambios, estos se hagan de forma más óptima, lo que garantiza un mejor rendimiento y experiencia de usuario.

Patrón MVVM

Vue.js implementa el patrón modelo–vista–modelo (MVVM), un patrón de arquitectura de software que trata de desacoplar la interfaz de usuario de la parte lógica de la aplicación.

Este patrón se compone de los siguientes elementos:

• El modelo, que representa la capa de datos y/o la lógica de negocio. El modelo contiene la información, pero nunca las acciones o servicios que la manipulan, no teniendo dependencia alguna con la vista.

• La vista, que representa la información a través de los elementos visuales que la componen.

• Modelo de vista, este elemento hace de intermediario entre el modelo y la vista. Contiene toda la lógica de presentación y se comporta como una abstracción de la interfaz.

Como programadores, estamos acostumbrados a trabajar con el patrón MVC (Modelo, vista, Controlador). La utilización de este patrón supone un nuevo grado de innovación.

Eventos y transiciones

Este framework posee la capacidad de reaccionar a eventos que se producen en el DOM, por ejemplo, cuando el usuario hace click en un elemento, lo mueve o cuando escribe, etc. Puedes tener más información sobre eventos de Vue.js en este Taller de usos de eventos Vue.

El sistema de transiciones y animaciones, es sencillo de usar y a la vez puede llegar a ser muy complejo, pero si conoces CSS no tendrás problemas en tener el control.

Vue.js está diseñado para disponer de un alto control de la aplicación, sin que tengamos que utilizar JQuery o JavaScript para el control de la interacción del usuario.

Mixins

Los mixins de Vue.js son aquellas funciones 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, lo que te permite mejorar el rendimiento a la hora del desarrollo de aplicaciones.

Lifecicle (ciclo de vida) de los componentes

Como también ocurre 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, disponiendo de un elevado control sobre la aplicación.

Aplicaciones SPA con Vue Router

Vue.js, dispone de un paquete oficial para implementar y diseñar un sistema de rutas en nuestra aplicación. Este paquete se llama vue router, y nos permite disponer de una página web SPA. En la que 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 también lo poseen los frameworks Angular y React.

Ventajas de Vue JS respecto a la competencia

Lo que hace especial a Vue con respecto a otros frameworks, es que la comunidad de desarrollo ha sabido estudiar características muy importantes de otros frameworks, e implementarlas, por otro lado, ha realizado una labor de depuración, reduciendo el código innecesario. Esto supone que, por un lado,el tamaño de la aplicación se reduzca y por otro lado, disminuye la dificultad de aprendizaje, permitiendo al desarrollador tomar el control de la aplicación, permitiendo el desarrollo ad hoc de nuevas funciones.

De hecho, en esta tabla vemos el tamaño de cada framework frontend, donde se aprecia el tamaño de cada una de las aplicaciones:

En cuanto a la curva de aprendizaje con otro frameworks se refiere, Angular es el más difícil de aprender. Ya que necesitas aprender Typescript y el tema de inyección de dependencias, añade cierta complejidad a su aprendizaje.

React es más fácil de aprender, pero su sintaxis puede resultar compleja para ciertas personas con conocimientos básicos o medios. Si quieres ampliar la información, tenemos una entrada en nuestro blog con la comparativa React vs Vue.

Vue, es más sencillo de aprender, su sintaxis no resulta compleja y tiene una curva de aprendizaje muy asequible, por lo que para adentrarnos en el mundo del desarrollo frontend, es uno de los recomendados por multitud de expertos.

Por otro lado, tanto Angular como React, cuentan con el apoyo de grandes compañías, 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 sí que hay empresas de reputado prestigio como sponsors, siendo su comunidad desarrolladores una de las más activas.

Por otro lado, existen frameworks dentro del propio Vue.js, frameworks dentro de frameworks, que permiten añadir o alcanzar nuevas funcionalidades, existen unos cuantos e incluso derivaciones del propio Vue.js (forks).

Los más importantes son:

Vuetify

Vuetify es una biblioteca de Vue.js destinada a la creación de interfaces de usuario que implementa componentes de usabilidad listos para usar, combina las bondades de Vue.js y Material Design.

El objetivo primordial de este framework es proporcionar a los desarrolladores las herramientas que necesitan para crear experiencias de usuario enriquecedoras y atractivas.

De otro lado, Vuetify adopta un primer enfoque de diseño móvil, lo que significa que la aplicación simplemente funciona de inmediato, ya sea en un teléfono, tableta u ordenador.

Bootstrap Vue

Bootstrap es uno de los frameworks frontend basados en CSS de código abierto más utilizados. Bootstrap Vue combina los hermosos componentes de la interfaz de usuario de la biblioteca Bootstrap con la facilidad y flexibilidad de Vue.js.

Con Bootstrap Vue, se puede crear un sitio web adaptable para dispositivos móviles, en muy pocos pasos. Proporciona más de 80 componentes de interfaz de usuario, varias plantillas, y gran variedad de complementos.

Quasar Framework

Quasar es un super framework basado en VueJS que permite a los desarrolladores web crear de forma rápida sitios web responsivos y aplicaciones de diferentes propósitos:

• SPA (Single Page App)
• SSR (Server-side Rendered App)
• PWAs (Progressive Web App)
• Mobile Apps (Android, iOS, …) utilizando Apache Cordova
• Multi-platform Desktop Apps (usando Electron)

Se trata por tanto de un frameworks de JS, multipropósito que permite desarrollar una aplicación para múltiples requerimientos y plataformas.

Vue Material

Vue Material sirve para crear aplicaciones adaptables a cada pantalla para que sean compatibles con todos los navegadores web modernos, dispone de temas dinámicos, componentes predefinidos y una API fácil de usar. Está construido de acuerdo con las especificaciones de Google Material Design.

Instalación de Vue JS

Instalar Vue Js es un juego de niños, eso sí, antes de comenzar necesitamos disponer Node.js en nuestro equipo, en el caso de que nuestro gestor de paquetes sea NPM.

Aunque existen varias alternativas para empezar con este framework, en mi opinión esta es la más directa, simple y que aportará al desarrollador mayor cantidad de recursos y herramientas para gestionar los proyectos Vue.

Para crear un proyecto con Vue tendrás que instalar la herramienta de línea de comandos Vue CLI, con la que podrás compilar el código Vue en código JavaScript, entre otras cosas.

Para instalar Vue en tu sistema, abre una ventana de terminal de comandos e instálalo con uno este comando comandos, si tu gestor de paquetes es NPM:

# Instalación de Vue CLI con NPM
npm i -g @vue/cli @vue/cli-service-global

Una vez instalado Vue CLI, podrás crear un proyecto de forma muy sencilla, solo debes usar el comando vue create.vue

# Creación de proyecto vue
create proyecto-vue

Una vez creada la aplicación, accede al directorio del proyecto usando el comando cd y ejecuta uno de estos comandos para iniciar el servidor local:

# NPM
npm run serve

Listo, solo tienes que acceder a la URL http://localhost:8080/ o a la que se muestre en la terminal para ver la página por defecto de tu proyecto Vue en tu navegador.

¿Quieres probar con Vue JS?

Recuerda que tenemos el curso de Vue Práctico en la Vida Real, que te ayudará con la creación de proyectos para que puedas analizar todas y cada una de las ventajas por ti mismo.