jmaleman.dev

Angular vs React vs Vue ¿Qué framework front-end escoger?

jmaleman

·

Agular React Vue

Posiblemente 2018 sea el año en el que las Progressive Web Apps o PWAs se consoliden finalmente y todo en gran parte gracias a los framework front-end como Angular, React o Vue entre otros. Estos frameworks permiten crear en cuestión de minutos, todo lo necesario para empezar a desarrollar nuestros proyectos. Para ayudarte en esta difícil decisión, explicaré un poco el proceso que he seguido yo mismo para realizar mi elección.

Antes que nada decir, que si tienes tiempo, le eches un vistazo al artículo creado por Jens Neuhaus en el que expone de una forma más minuciosa y contrastada las diferencias existentes entre estos tres frameworks front-end. La lectura es algo densa, pero muy recomendada.

Los tres frameworks cumplen a la perfección con su cometido y que por lo tanto no hay elección “mala” posible. Entonces, ¿por qué haces este artículo? Obviamente, porque a mi parecer sí hay una opción “buena”. Pero ya te aviso, igual con el tiempo hay una opción “mejor”, jejeje.

Para analizar los tres framework front-end me he formulado varias preguntas en base a tres niveles: estratégico, desarrollo y rendimiento.

Nivel Estratégico
  • ¿Cuándo empezó a desarrollarse?
  • ¿Quién/es son los desarrolladores?
  • ¿Qué tipo de licencia tiene?
  • ¿Cómo de amplia y específica es su documentación?
  • ¿Su comunidad y/o foros son activos?
  • ¿Es posible seguir a sus desarrolladores para estar al tanto de sus avances?
Nivel Desarrollo
  • ¿Cuáles son los conceptos básicos de programación?
  • ¿Cómo de fácil es desarrollar pequeñas o grandes aplicaciones?
  • ¿Cómo es su curva de aprendizaje?
  • ¿Es posible añadir nuevas características o extensiones?
Nivel Rendimiento
  • ¿Qué rendimiento ofrece al desarrollar pequeñas o grandes aplicaciones?
  • ¿Frecuencia y calidad de las actualizaciones?
  • ¿Peso del ecosistema?

Análisis del nivel estratégico

Angular

“Superheroic JavaScript MVW Framework”

Desarrollador Google
Lanzamiento Septiembre 2016 (AngularJS Octubre 2010)
Licencia MIT
Documentación Hello World App, Guía rápida, Arquitectura (Inglés y Chino)
Comunidad (Github) +33000 estrellas, +590 contribuidores


Seguimiento:

React

“a JavaScript library for building user interfaces”

Desarrollador Facebook
Lanzamiento Marzo 2013
Licencia MIT
Documentación Tutorial y amplia documentación (inglés)
Comunidad (Github) +88000 estrellas y +1100 contribuidores

Seguimiento:

Vue

“Intuitive, Fast and Composable MVVM for building interactive interfaces”

Desarrollador Evan You (ex Google)
Lanzamiento Febrero 2014
Licencia MIT
Documentación Guia, API, Guía de estilo, ejemplos. (inglés, francés,…)
Comunidad (Github) +83000 estrellas y +160 contribuidores

Seguimiento:

Como los tres frameworks están disponibles a través de NPM, gracias a Npmtrends es posible visualizar un gráfico con las descargas de los últimos 6 meses:

React se encuentra en primera posición con la friolera cifra de 2 millones de descargas, muy alejado de sus competidores, Angular y Vue, como segundo y tercero respectivamente.

Análisis del nivel desarrollo

Tanto para Angular, React y Vue es necesario tener ciertos conocimientos en NodeJS/NPM. Obviamente también es necesario tener ciertas nociones de HTML y CSS, para los tres ecosistemas. ¿Y JavaScript? Bueno, es imprescindible tener los conceptos básicos de JavaScript, pero hay una sutil diferencia en uno de los frameworks, que veremos a continuación. Puedes refrescar tus conocimientos de JavaScript con esta guía del equipo de Mozilla.

Angular

Angular basa su código principal en TypeScript y por lo tanto se encuentra algo alejado del estándar JavaScript (ES5 / ES6). Aunque su código ofrece una mayor consistencia, debes tener en cuenta que ya no estarás escribiendo en un estándar y por mi parte, creo que es un aspecto negativo a tener en cuenta en la decisión final. Además con Angular debemos hacer un esfuerzo extra, ya que utiliza una sintaxis específica para sus HTML mejorados.

Angular es por tanto una solución algo “encorsetada”, pero que ofrece un gran rendimiento a largo plazo y para grupos de trabajo importantes, gracias a la cantidad de opciones y funcionalidades disponibles desde el primer minuto y a sus sintaxis bien definida.

Aunque Angular dispone de una amplia documentación muy bien elaborada, su  curva de aprendizaje es costosa desde el principio por los aspectos que hemos comentado anteriormente. Sin embargo, si eres capaz de dedicarle el tiempo suficiente posiblemente llegará un momento en el que centrarás tus esfuerzos en el QUÉ y no el CÓMO.

Hola mundo:

https://angular.io/generated/live-examples/toh-pt1/stackblitz.html

Puesta en marcha (Starter Kit):

https://angular.io/guide/quickstart

React

Para React tendremos que dominar JavaScript (ES6), aunque es altamente recomendado aprender JSX y Babel ya que facilita mucho el desarrollo de nuestras aplicaciones. React es un framework muy flexible, ya que puedes ir añadiendo librearías a través de NPM según las necesidades de la aplicación, pero cuidado, esto también puede llegar a ser perjudicial si no sabes muy bien lo que estas añadiendo a tu proyecto.

Hola mundo:

https://codepen.io/pen?editors=0010

Puesta en marcha (Starter Kit):

https://reactjs.org/docs/add-react-to-a-new-app.html

Vue

Para Vue bastaría con dominar JavaScript (ES5 y/o ES6). Es posiblemente el framework más sencillo de aprender, y para muchos de los desarrolladores que implementaban jQuery en sus proyectos Vue es su elección favorita. Este framework esta teniendo un crecimiento espectacular, y pese a ser el último en llegar, muchas entidades de renombre están empezando a incorporarlo a sus proyectos: Alibaba, Baidu, Expedia, Nintendo o GitLab entre otros.

Hola mundo:

https://github.com/vuejs-templates/simple

Puesta en marcha (Starter Kit):

https://vuejs.org/v2/guide/installation.html#NPM

Análisis del nivel rendimiento

Los tres sistemas ofrecen plantillas para desarrollar aplicaciones SPA (Single Page Application) por lo que en cuestión de minutos podemos tener ya encarrilado nuestra pequeña aplicación. Para trabajar en grandes proyectos, Angular y React, están por encima de Vue, ya que ofrecen muchos más recursos que los desarrolladores pueden aprovechar. Obviamente Vue es el “recién llegado”, pero con el tiempo seguro que se pone a la altura.

Tanto React como Vue ofrecen Virtual DOM, que mejora el rendimiento en nuestras aplicaciones. Si quieres aprender más acerca de Virtual DOM y su diferencia con DOM, puedes echar un vistazo a este artículo.

Para comprobar el rendimiento de los tres frameworks podemos hacer uso de js-frameworks-benchmark6 en el que se realizan una serie de pruebas cuyos resultados se muestran en mili-segundos. Los resultados de las pruebas se han realizado con un MacBook Pro 15 (2,5 GHz i7, 16 GB RAM, OSX 10.12.5, Chrome 58.0.3029.110 (64-bit)):

También es posible comprar el espacio que ocupan (MB) cada uno de los frameworks front-end en Memoria Principal:

Como podemos observar Vue es el framework que ofrece mejores prestaciones, aunque las diferencias con Angular y React no son muy significativas por lo que es un dato que no tendremos mucho en cuenta.

Las actualizaciones para los tres ecosistemas no deben ser un problema, ya que detrás de estos proyectos, hay una comunidad muy fuerte de desarrolladores en constante perfeccionamiento. Angular se encuentra en su versión 5.2.7 (estable), y suele recibir actualizaciones cada semana. React se encuentra en su versión 16.2.0, y suele recibir actualizaciones una vez al mes aproximadamente. Vue se encuentra en su versión 2.5.13 y normalmente suele publicar nuevas versiones semanalmente.

Para un nuevo proyecto Angular necesita como mínimo 266MB, React 121MB y Vue 172MB.

Conclusiones

React, Angular y Vue son geniales, y ninguno de ellos está claramente por encima de los demás. Es más, dependiendo del tipo de proyecto te puede convenir escoger un framework u otro.

Escoge Angular si…

  • trabajas en Google
  • conoces TypeScript o no te importaría aprenderlo
  • te encanta la programación orientada a objetos (OOP)
  • trabajas con diseñadores y necesitas HTML limpios

Escoge React si…

  • trabajas en Facebook
  • te gusta la flexibilidad
  • vas a realizar un gran proyecto
  • estás enamorado de JavaScript y crees que todo debería ser JavaScript
  • deseas construir una aplicación react-native

Escoge Vue si…

  • te gusta el código limpio
  • vienes de utilizar jQuery en tus proyectos
  • no quieres complicarte la vida o tienes poco tiempo
  • quieres rapidez en tu entorno de desarrollo
  • tu equipo de desarrollo es relativamente pequeño
  • trabajas con diseñadores y necesitas HTML limpios

Espero haber resuelto tus dudas, pero si aún necesitas un empujón final, mi orden de preferencia sería el siguiente: React, Vue y Angular.

 

, ,