Dark Light

Gluo Tech Fight: Angular VS React VS Vue

share:

  

Año 2008. Fidel Castro renunciaba a la presidencia de Cuba después de casi medio siglo en el poder, el banco Lehman Brothers en Estados Unidos se declaraba en bancarrota, Michael Phelps ganaba 8 oros olímpicos en Pekin y Steve Jobs hacía la presentación mundial del iPhone 3G.

Fue en este año cuando comenzó a gestarse un cambio en las interfaces y metodologías que buscaban simplificar el desarrollo web “tradicional”, a la vez de hacerlo más potente, versátil y con mejoras sustanciales de rendimiento, tanto para computadoras de escritorio como para dispositivos móviles, y que traerían consigo una nueva ola de conceptos, metodologías, problemas y soluciones.

 

¿Cuáles fueron esos cambios?

 Principalmente quería reducirse la carga y complejidad que se tenía en muchos sitios ya que muchas funcionalidades del front-end eran realizadas por el servidor y a su vez se buscaba que el código HTML pudiera manipularse de forma dinámica sin manejar directamente el DOM, es decir, desacoplándolo de la lógica de la aplicación en si.

Todo esto sin dejar de lado la modularización del código y el fácil mantenimiento del mismo.

Es por ello que en el año 2010 nace AngularJS como un Web Framework Open Source basado en Javascript y desarrollado por Google, el cual mediante la creación del Virtual DOM (manejo del DOM tradicional pero con Javascript), permitía un desarrollo orientado hacia una arquitectura MVC (Modelo-Vista-Controlador) y sentando las bases de un “estándar” que sigue vigente hasta nuestros días (¡aunque Svelte nos esté convenciendo poco a poco que ellos son mejores!).

 

¿Qué pasó después?

La comunidad de desarrolladores y las empresas se dieron cuenta del potencial de este framework y es por eso que durante los siguientes años fueron liberándose adiciones y mejoras a AngularJS y obviamente surgieron fuertes competidores respaldados por nombres importantes. Estamos hablando de Angular 2 (mejor conocido como Angular), React y mas recientemente Vue.

En Gluo hemos utilizado estas 3 tecnologías para los proyectos que desarrollamos y hemos vivido en código propio lo que cada uno de ellos tiene para ofrecer, sus ventajas y desventajas. Es por esto que creemos que es una excelente idea meterlos al ring de combate. ¡Iniciemos!

 

 

Presentación de los contrincantes

 

Logo Angular

Angular

 

  • Desarrollado por Google de 2016 como una “evolución” de AngularJS (2010)

  • Mantenido por un equipo interno de Google

  • Escrito en Typescript

  • Usado por Microsoft, Google, UPS, YouTube, Paypal, Nike, McDonald’s, Telegram.

  • Última versión estable: 10.1.3

  • Publicado bajo licencia MIT.

  • Sitio oficial: https://angular.io/

 

Logo React

React

 

  • Desarrollado por Facebook en 2013

  • Mantenido por un equipo interno de Facebook

  • Escrito en Javascript

  • Usado por Uber, Airbnb, Facebook, Netflix, Instagram, Udemy, Twitter.

  • Última version estable: 16.8.6

  • Publicado bajo licencia MIT.

  • Sitio oficial: https://es.reactjs.org/

 

Logo Vue

 

Vue

  • Desarrollado por Evan You en 2014

  • Mantenido por la comunidad Open Source

  • Escrito en Typescript y Javascript

  • Usado por Nintendo, Louis Vuitton, Google, Adobe, BMW, Apple, Trivago, Gitlab.

  • Última versión estable: 3.0 One Piece (Nerd Fact: a las versiones de Vue se les dá nombres de animes y/o mangas)

  • Publicado bajo licencia MIT

  • Sitio oficial: https://vuejs.org/


 

Round 1 – Funcionalidades

 

Angular

  • Es un framework que viene “de fábrica” con muchas cosas ya construidas (Validaciones, State Management, peticiones Http, ruteo de peticiones, etc.)

  • Puede ser considerado como un framework “pesado”.

  • Hace uso del Virtual DOM.

  • Permite desarrollar sitios web mediante templates y componentes reactivos.

  • Principalmente se ocupa para construir sitios web, pero también puede utilizarse para construir aplicaciones móviles y PWA’s con Ionic o NativeScript.

  • Puede verse más como una plataforma que como un framework por todas las cosas que incluye: https://angular.io/features

  • Utiliza como gestor de paquetes a npm

  • Se utiliza Typescript para desarrollo

 

React

  • Es una biblioteca que permite construir y renderizar componentes reactivos, no incluye otras funcionalidades

  • Está enfocada principalmente en el desarrollo de UI de una forma sencilla

  • No se le considera un framework como tal

  • Hace uso del Virtual DOM

  • Utiliza JSX para trabajar con HMTL

  • Deben integrarse funcionalidades adicionales con bibliotecas de terceros: State Management (Redux), peticiones Http (Axios), Routing (React Router), etc.

  • Usada principalmente para construir sitios web, pero también puede usarse para desarrollo de aplicaciones móviles con React Native

  • Utiliza como gestor de paquetes a npm

  • Puede utilizarse Javascript y/o Typescript para desarrollar

                                                                                            

Vue

  • Es un framework que incluye algunas funcionalidades empaquetadas, aunque no tantas como Angular

  • Permite la construcción de sitios web basado en componentes reactivos

  • Se encuentra en un punto intermedio entre Angular y React

  • Está muy enfocado a simplificar la codificación

  • Hace uso del Virtual DOM

  • State Management y Routing vienen incluidos con Vue, pero otras funcionalidades (como peticiones Http o Validaciones) hay que trabajarlas con bibliotecas de terceros (por ejemplo Axios)

  • Usada principalmente para construir sitios web pero también se puede ocupar para el desarrollo de aplicaciones móviles con Ionic

  • Utiliza como gestor de paquetes a npm

  • Se puede utilizar Javascript y/o Typescript para desarrollar

Aunque depende mucho del proyecto en el que se vaya a utilizar, Angular se lleva este primer round, ya que es el que tiene más tiempo de vida y cuenta con más funcionalidades listas para usarse.


 

Round 2 – Curva de aprendizaje

La curva de aprendizaje no depende solo de qué tan complicada sea la tecnología en cuestión, si no también del desarrollador, aunque hay algunas cosas que sí hacen que un framework sea mas complicado de aprender que otros.

Vue, al ser un “híbrido” entre Angular y React tiene una gran ventaja: conoce bastante bien los puntos débiles de cada uno de sus contrincantes.

Es por ello por lo que en la gráfica podemos ver reflejada esta situación. Fueron por un terreno ya explorado por Angular y posteriormente por React, aprendieron de los errores de estos últimos y han trabajado en corregirlos (o al menos no repetirlos).

Angular es el claro “perdedor” en esta categoría ya que requiere que los desarrolladores tengan un uso bastante bueno de Typescript (a diferencia de React y Vue que se requiere javascript). Entre estos dos últimos considero que es un empate técnico, ya que aunque los desarrolladores consideran que Vue es más “amigable” y en consecuencia se puede aprender de forma más “sencilla”, la base de ambos es javascript y teniendo una base sólida en el mismo se pueden aprender ambos con relativa facilidad.

Curva de aprendizaje React Angular y Vue

Fuente: https://academind.com/learn/javascript/angular-vs-react-vs-vue-my-thoughts/


 

Round 3 – Rendimiento

Basándonos en el fantástico benchmark realizado por Stefan Krause podemos observar las siguientes 3 pruebas de rendimiento. Las pruebas se realizaron con las últimas versiones LTS de cada framework disponibles en la página a la fecha de publicación de este artículo.

Manipulación del DOM en una tabla

Es importante mencionar que los resultados de esta medición son muy subjetivos, ya que no necesariamente se está midiendo lo que cada aplicación necesita (en este caso la prueba se realiza con una tabla).

Aunque nos da una idea general del rendimiento, no significa que un framework en términos generales sea más rápido o más lento que otro, simplemente para esa tarea en específico su desempeño fue mejor o peor que los otros contendientes.

En este caso se puede ver que Vue responde con un mejor tiempo que Angular y React al realizar un intercambio de 2 filas en una tabla que tiene 1,000 filas, sin embargo su performance es menor cuando se “sombrea” una fila al pasar encima de ella.

vue angular react carga

 

Tiempo de Carga

De esta comparativa se puede ver inmediatamente que AngularJs es el más lento de los 3 frameworks para realizar la carga total de los scripts del framework. Aunque la diferencia con los otros dos es de casi 7 veces más tiempo, recordemos que AngularJs viene “de fábrica” con muchos más componentes que los otros por lo que es normal ver este incremento en latencia.

vue angular react startup

Podemos dar por “ganador” en este round a Vue tomando en cuenta los puntos de subjetividad mencionados anteriormente.


 

Round 4 – Popularidad y adopción

 

Descargas por mes desde npm

Podemos ver que el framework más descargado ha sido React desde el año 2016, tomando en cuenta lo siguiente:

  • No se incluye AngularJS en las descargas

  • Angular tiene en cache muchos paquetes para proyectos empresariales, por lo que dichas descargas no se muestran en la gráfica.

Descargas Angular React y Vue

Descargas de Angular React y Vue

Fuente: https://npm-stat.com/charts.html?package=react&package=vue&package=%40angular%2Fcore&from=2015-10-01&to=2020-10-01

 

Tendencia en Google Trends

A nivel mundial, podemos observar que React tiene mayor popularidad en cuanto a búsquedas en Google (78%), sin embargo, esto solo fue desde 2018. Antes se encontraba muy parejo con Angular. En el caso de Vue se ha estabilizado en este último año (en términos actuales, se aplano su curva).

Trends Angular React y Vue

Trends dos Angular React y Vue

 

Es interesante ver que China es el país en donde más se realizan búsquedas relacionadas a Vue. En Rusia, los países Escandinavos y Norteamérica la tendencia de búsquedas es en React y finalmente en Europa, India, México y Sudamérica la tendencia de búsqueda está enfocada a Angular.

Descarga React Vue Angular en distintos países

 

Si hacemos un zoom en nuestro país, podemos ver que casi todos los estados tienen una mayor tendencia a búsquedas relacionadas con Angular (un 75%), React se queda con un 22% y finalmente Vue con un 3%.

vue-angular-react-mexico

vue-angular-react-mexico-2

Fuente: https://trends.google.com/trends/explore?cat=733&date=today%205-y&geo=MX&q=React,Vue,Angular

 

StackOverflow Survey

En esta encuesta llevada a cabo por StackOverflow a inicios de 2020, participaron 65,000 personas y los datos que recopilaron son bastante interesantes:

 

Web Framework más popular

React se lleva un 35.9%, seguido de Angular con un 25.1% (aunque si sumamos Angular y AngularJs le dan la vuelta a React) y finalmente Vue con un 17.3%. La tendencia indica que en unos cuantos años JQuery será destronado y comenzará el reinado de React o de Angular.

vue-angular-react-framework-uno

 

Web Framework más amado por los desarrolladores

¡Increíble que ASP.NET Core se lleve el primer lugar! Muy cerca se encuentran React y Vue, y Angular lo encontramos más abajo en la lista, detrás de frameworks como Spring, Django, Express, Gastby y Flask.

vue-angular-react-framework-desarrolladores

 

Web Framework más temido por los desarrolladores

Parece ser que Angular es el gran villano aquí, podemos notar que tres de cada cuatro desarrolladores no quieren continuar trabajando con él, a diferencia de React y Vue que solo es uno de cada tres. (Ojo también con Drupal y JQuery).

vue-angular-react-framework-temido

 

Web Framework más buscado por los desarrolladores

Finalmente, podemos ver que los porcentajes de personas que no trabajan con alguna de estas tecnologías y quieren hacerlo es muy similar para los 3 contendientes.

vue-angular-react-framework-buscado

Fuente: https://insights.stackoverflow.com/survey/2020

 

Sitios construidos

React gana en esta categoría por un margen muy amplio ya que casi triplica el número de sitios existentes hechos con AngularJs y quintuplica los hechos con Vue.

angular-sitios

react-sitios

vue-sitios

Fuente: https://www.similartech.com/technologies


 

Decisión Final

 

Cada proyecto tiene sus propias necesidades y dependerá de estas mismas elegir el framework adecuado para el desarrollo.

No tenemos un único vencedor y por ende no podemos decir que un framework es superior a los otros en todos los aspectos, cada uno tiene sus propias bases y fundamentos, tienen sus propias fortalezas y debilidades, mismas que harán que se elija la mejor opción al iniciar un proyecto.

Así mismo, tiene que ver si se cuenta con tiempo para la curva de aprendizaje, si el equipo de desarrollo está conformado en su mayoría por desarrolladores junior, si es un super equipo formado por desarrolladores senior que conocen muy bien Typescript o si es una mezcla entre varios perfiles en donde algunos son expertos en Javascript y otros nunca lo han utilizado en su vida.

Si es que es la primera vez que trabajaremos con alguno de ellos, conviene mucho revisar la documentación oficial (al menos los temas principales), leer alguno que otro blog con opiniones y experiencias en cada una, hacer algunas pruebas, revisar la sintaxis y ver si nos sentimos cómodos con ella, para así tener suficientes bases para decidir con cual trabajaremos los próximos meses. Si ya se tiene experiencia con alguno(s) de ellos, nunca está de más el evaluar el o los que no conozcamos para tomar una mejor decisión.

Ya lo dijo el filósofo griego Sócrates: “El conocimiento nos hará libres”, y si aplicamos esa frase a la elección de las tecnologías con las que desarrollaremos, evitaremos pasar nuestros fines de semana buscando como resolver algún problema ocasionado por nosotros mismos, fastidiados, frustrados y deseando no haber tomado esa mala decisión.

¡Leamos, entendamos y apliquemos! ¡Es la mejor forma de aprender!