Insights >Blog

Guía de 3 frameworks populares: React, Vue y Angular

Alan Buscaglia


February 7th, 2019

Introducción: React, Vue y Angular

A la hora de comenzar un nuevo proyecto siempre surge la misma pregunta: ¿Qué framework  utilizar? En este documento se han seleccionado 3 diferentes frameworks que, gracias a sus características y popularidad, pueden ser una gran elección.

Elegimos Angular, React y Vue ya que poseen un gran índice de popularidad, fanbase, herramientas y soporte, lo cual los diferencia del resto de los frameworks orientados al desarrollo front end.

Mediante Google Trends podemos apreciar un índice de popularidad encabezado por Angular, seguido por React y en tercer lugar a Vue para el inicio del 2019.

De acuerdo a una encuesta que Stack Overflow condujo en 2018, el cual recopiló las respuestas de más de 50.000 desarrolladores, Angular y React son respectivamente el segundo y tercer framework más popular.

Entendiendo cada framework

Quiero proveer una vista general de cada uno de estos frameworks, sumado a algunas de sus ventajas y desventajas, basándome en mi experiencia con ellos.

React

Es una librería creada por Facebook para el desarrollo front end. Uno de los elementos clave de esta tecnología es que todo es un componente, lo cual ayuda cuando se quiere crear interfaces de usuario (como explica este excelente GitBook, es importante empezar a pensar “en componentes”). Esto sirve tanto para el desarrollo de aplicaciones de una sola página ( Single Page Applications -SPA-) como para el desarrollo de aplicaciones móviles.

Ventajas de React:

  • React ofrece una creación liviana y fácil de componentes
  • Es una librería muy popular con una gran cantidad de seguidores y muy utilizado por startups
  • A su vez, existe una gran cantidad de extensiones de terceros creados por la comunidad, lo cual ofrece una fácil implementación de soluciones

Desventajas:

  • A la hora de programar el template de un componente se debe utilizar JSX, no HTML nativo; esto hace que se requiera una curva de aprendizaje. JSX es un preprocesador que agrega la sintaxis de XML a JavaScript, creando así una combinación de código y HTML para poder acceder, procesar y mostrar la información en la vista.
  • Gracias a su enfoque en la creación de interfaces de usuario, seguramente se deban incluir extensiones de terceros para poder generar soluciones aptas y, aunque estas son muchas, su gran disponibilidad puede ser tedioso a la hora de elegir cuál de ellas utilizar.

Angular

Es una plataforma de estructura creada por Google para la creación de aplicaciones de página única.

Ventajas:

  • Brinda una experiencia más “out of the box” que React o Vue: posee más herramientas y mejores guías para poder crear soluciones eficientes
  • Es un lenguaje opinado: ante diferentes problemas existe “the angular way” de hacer las cosas lo cual brinda un conjunto de reglas y buenas prácticas a seguir para resolver diferentes problemas
  • Se enfoca a la creación de aplicaciones por lo que es muy popular en organizaciones
  • Posee el mejor CLI de los tres frameworks. Este incluye Typescript (para un mejor control del código y una mayor facilidad de paso al desarrollo front end para aquellos con orientación backend), creación fácil y eficiente de los diferentes componentes de Angular (módulos, servicios, etc.) mediante la terminal la cual logra crear una abstracción mayor a tareas repetitivas, Jasmine + Karma para unit testing, Webpack totalmente configurable, soporta Es6, Sass y muchas cosas más.

Desventajas:

  • Posee la API con mayor curva de aprendizaje debido a su extenso contenido
  • El código puede parecer complejo y repetitivo comparado con React y Vue
  • Archivos grandes y bajo desempeño comparado con Vue y React
  • Angular dice estar basado en componentes, pero en realidad se conforma de módulos

Vue

Es un framework orientado a la creación de interfaces de usuario de muy fácil integración con librerías y proyectos existentes.

Ventajas:

  • Provee la curva de aprendizaje más corta de todas, lo cual hace que su utilización sea la más fácil para desarrolladores que recién comienzan con el desarrollo front end
  • No es tan inclusiva como Angular pero posee mayor cantidad de contenido “out of the box” que React, lo cual lo hace una opción muy popular para aquellos que recién comienzan
  • Puedes utilizar tus conocimientos de HTMLy CSS ya que trabaja por medio de templates
  • Es conocido por sus buena documentación
  • Es escalable, por lo que resulta útil para pequeñas y grandes aplicaciones (verdadera razón por la que Alibaba lo usa).
  • Simplicidad: su código base es fácil de mantener
  • Útil para animaciones y sitios web interactivos

 

Desventajas:

  • Vue es un lenguaje nuevo, por lo cual no posee una gran comunidad
  • Puede llegar a ocurrir que sea imposible encontrar una solución a un determinado problema
  • Menor cantidad de extensiones que React

 

Comparativas

React y Vue poseen un enfoque en la creación de interfaces de usuario, mientras que Angular se orienta en la creación de aplicaciones, razón por la cual es más grande, complejo y con una curva de aprendizaje más difícil. Por otra parte,si bien en principio React y Vue, son más pequeños, estos pueden crecer a medida que el proyecto lo hace también.

Los tres frameworks poseen CLI’s (command line interface), los cuales posibilitan una mayor facilidad en la creación de proyectos, desarrollo local y preparación de las aplicaciones para deployment. Además, poseen un gran soporte con editores de código como Visual Studio Code.

En cuanto al desempeño, poseen una gran similitud en los resultados.

Conclusión

A la hora de seleccionar un framework, cualquiera de los tres resulta ser una muy buena selección. En esta medida, hay que identificar cuál se adaptará de mejor manera al equipo de desarrollo y los requerimientos del proyecto.

Angular es un framework muy robusto y con gran cantidad de control sobre el código gracias a las reglas y principios dictados por la comunidad, lo cual lo hace una buena elección para proyectos grandes que necesiten de ello. No obstante, posee una compleja curva de aprendizaje y tal vez no se necesite de la mayoría de sus ofrecimientos.

React es una de las librerías más populares del mercado y funciona tanto en aplicaciones chicas como en grandes, gracias a que este crece junto con la misma. A pesar de esto, tiene como problemática principal la necesidad y selección de extensiones; gracias a su gran libertad puede ocasionar una gran variedad de problemas ya que la elección de una solución no siempre es la más eficiente (se recomienda contar con una persona a cargo con el conocimiento necesario para guiar el proyecto).

Vue es una librería que crece en popularidad día a día, pero sigue siendo relativamente nueva, lo cual puede ocasionar que no se puedan encontrar soluciones a diferentes problemas. Igualmente es una gran elección para principiantes gracias a su fácil uso, documentación y simplicidad. Esto puede llegar a ocasionar problemas ya que posee muchas soluciones “mágicas” de las cuales no se posee mucho control.

Fuentes y lectura recomendada

Vue.js https://vuejs.org/

React.js training https://rangle-io.gitbooks.io/react-training/content/

Angular 2 training https://angular-2-training-book.rangle.io/

Share

Related posts

See also

Services

Software development

Software testing

Consultancy & innovation

User experience

Industries

Fintech

Media & entertainment

Healthcare

All industries

Insights

Blog

Whitepapers

Webinars

Videos

Why Belatrix?

International presence

Nearshore advantages

Project governance

Agile expertise

Flexible engagement models

Our talent development