¿Cuál es el mejor framework? En este artículo analizaremos las diferencias entre los 3 frameworks más sobresalientes de los ultimos años: React, Angular y Vue.

Antes de adentrarnos en detalles específicos sobre estos frameworks, veamos resumidamente un poco de cada uno.

¿Qué son?

• React: Lanzado en 2013 por Facebook. React es un framework utilizado principalmente para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página. Es mantenido por Facebook y la comunidad de software libre.

(Si deseas comprender en profundidad sobre React, lee nuestro post sobre React)

• Angular: Desarrollado por Google en 2016. Angular es un framework open source que facilita la creación y programación de aplicaciones web de una sola página, las webs SPA (Single Page Application). Sirve tanto para versiones móviles como de escritorio.

• Vue: Creado en 2014 por Evan You, un ex ingeniero de Google. Vue es un framework de JavaScript que sirve para la construcción de interfaces de usuario y aplicaciones de una sola página.

Sintaxis

React

React no funciona con una estructura de Template HTML y lógica JavaScript. Sino que más bien todo está escrito en funciones o clases JavaScript, pero con un agregado especial llamado JSX. Que es similar a HTML, pero dentro del código JavaScript, así que sería como una mezcla entre HTML y JavaScript para React. 

Ejemplo:

Supongamos que, por razones semánticas, queremos envolver nuestro encabezado en una etiqueta <header>. El enfoque JSX nos permite anidar nuestros elementos entre sí, tal como lo hacemos con HTML:

const header = (

  <header>

    <h1>Hola mundo</h1>

  </header>

);

Angular

Angular usa un Template HTML con una sintaxis de instrucciones específicas, que el framework mismo se encarga de entender y renderizar. Pero con la diferencia que está separado en un archivo diferente. Ya que para la lógica o código JavaScript se encuentra en otro archivo y que Angular se encarga de enlazar o conectar estos dos archivos para así de esta forma manipular la información del Template cuando sea necesario.

Angular utiliza TypeScript como agregado a JavaScript, para agregarle funcionalidades extras, y así terminar pareciendo un lenguaje fuertemente tipeado.

Ejemplo

Archivo html

<p>{{message 1}}</p>

Archivo JavaScript+TypeScript

import { Component } from '@angular/core';


@component ({
        selector: 'hello-world-interpolation',
        templateUrl: './hello-world-interpolation.component.html'
})
export class HellollorldInterpolationComponent {
        message = 'Hello, World!';
}

Resultado

<p>Hello, World!</p>

Vue

Utiliza JavaScript puro donde hay una separación entre la parte HTML y el código JavaScript que pertenece a ese HTML ya que Vue conecta el código HTML con el código JavaScript, y dinámicamente se puede manipular el contenido del HTML con un Template de sintaxis específica que Vue entiende cuando renderiza el código HTML. La idea principal es que se tenga JavaScript puro, casi HTML puro con algunas instrucciones específicas las cuales al final Vue hará automáticamente por ti.

Esto es algo que encontraremos en los tres frameworks, no se escribirá código que le dé instrucciones a JavaScript para crear algún elemento y agregarlo en alguna parte del DOM. Mayormente se escribirá el código de una forma que le indique al framework lo que debe renderizar al usuario, tanto las partes estáticas, como las partes dinámicas, las cuales se actualizarán cuando algo cambie en la data, o alguna acción.

Ejemplo:

HTML

<div id="app">
     {{ message }}
</div>

JavaScript

var app = new Vue({
    el: '#app' ,
    data:  {
        message:  'Hello Vue!'
     }
 })

Facilidad de aprendizaje

React

Quizá no sea al inicio tan difícil aprender React pero luego puede volverse un poco complejo:

• Complejidad al crear proyecto: A pesar de que se puede escribir directamente JavaScript, para poder utilizar las herramientas de React como el JSX igualmente hay que crear un proyecto con características especiales, para ello al igual que Angular, React tiene su propio CLI para facilitar este proceso.

• JSX: Esta mezcla de HTML y JavaScript puede complicar el aprendizaje al inicio debido a lo extraño y enredado de leer al principio.

• Entendimiento general: De igual manera se tiene que aprender a pensar en React, y nuevos conceptos de herramientas, y sobre todo la mezcla JSX.

Angular

Para Angular se pudiera decir que tiene un aprendizaje extenso debido a:

• Complejidad al crear el proyecto: No se puede simplemente comenzar a escribir código Angular en cualquier proyecto web, debido a que utiliza TypeScript, optimizaciones, etc. Por ende, se necesita crear el proyecto con una estructura específica. De allí que Angular creara su CLI para facilitar la creación del proyecto.

• TypeScript: Se debe manejar este lenguaje de programación o aprenderlo en caso de no saberlo. No es difícil, pero tiene sus peculiaridades.

• Entendimiento general: La sintaxis de Angular es algo por considerar, saber que el template HTML está separado del archivo JavaScript + TypeScript, la forma en cómo se comunican, entre otros.

Vue

Muchos argumentan que Vue, es más fácil de aprender que React y Angular considerando que:

• Complejidad al crear proyecto: esta característica en Vue no siempre es requerida, quizá para grandes proyectos donde se requieran más herramientas complejas, sea necesario, y para esto al igual que los dos anteriores Vue también tiene su CLI para facilitar este proceso.

• Sintaxis: Vue utiliza JavaScript, incluso se puede usar también TypeScript si se desea, y al igual que Angular separa el template HTML del código JavaScript, aunque en un mismo archivo a diferencia de Angular, que son dos por separado.

• Entendimiento general: con saber JavaScript y HTML adicionando las características especiales para el template de Vue, ya se podría comenzar a desarrollar, de allí se diga que a nivel general es más sencillo.

Rendimiento

• React: El rendimiento de React ha mejorado con la introducción del DOM virtual. No es específico del navegador y ligero. Es gratuito y elimina los problemas de rendimiento lento del DOM real, y se reduce la carga en el navegador. Además, dado que el proceso de enlace de datos es unidireccional, los enlaces no se asignan a los observadores (watchers) como en el caso de Angular. Respectivamente, no se crea una carga de trabajo adicional.

• Angular: El rendimiento de las aplicaciones de Angular se ve afectado negativamente por el enlace de datos bidireccional. A cada enlace se le asigna un observador para realizar el seguimiento de los cambios, y cada ciclo continúa hasta que se verifiquen todos los observadores y los valores asociados. Debido a esto, cuantas más vinculaciones tenga, más observadores se crearán y más engorroso se volverá el proceso.

Sin embargo, la actualización más reciente de Angular ha mejorado enormemente su rendimiento y ya no pierde frente a React. Además, el tamaño de una aplicación Angular es ligeramente más pequeño que el tamaño de una aplicación React.

• Vue: Vue ha tomado todos los buenos atributos de los frameworks lanzados antes. Con el mismo concepto, Vue está utilizando DOM virtual como un concepto adoptado de React. Esto garantiza un rendimiento más rápido y sin errores. Aunque muchos desarrolladores todavía se encuentran problemas mientras trabajan con DOM virtual de React y Vue. Lo encuentran lo suficientemente eficiente como para elegir sobre Real DOM.

Flexibilidad

• React: A diferencia de Angular, no proporciona mucho en la biblioteca oficial de React. Esta te brinda la libertad de elegir las herramientas de programación que prefieras. En otras palabras, no es tan complicado como Angular.

Las soluciones de terceros como el enrutamiento de reacción se pueden integrar con este Framework de JavaScript. Aparte de esto, también puede usar MobX y Redux para apoyar las tareas de administración.

Si cuentas con un equipo de Desarrollo con mucha experiencia, entonces disfrutarán mucho de esta flexibilidad. Además, obtendrás una increíble aplicación dinámica desarrollada para su negocio.

• Angular: Angular ofrece de todo, desde enrutamiento hasta plantillas. No tienes que pasar a ninguna otra herramienta para desarrollar tus aplicaciones, esto puede ser bueno o malo según tu perspectiva.

Tiene opiniones sobre cómo estructurar una aplicación. No accede ni necesita seleccionar bibliotecas de enrutamiento, y puedes comenzar con el proceso de codificación con todo lo que se proporciona en el paquete Angular.

• Vue: El framework Vue es tan básico como React. Pero el ecosistema Vue en su sitio web oficial tiene mucho que ofrecer a los desarrolladores. Algunos de los complementos son Vue Router para enrutamiento y para la administración existe Vuex.

También tiene un render vue del lado del servidor para iniciar el desarrollo del lado del servidor de una aplicación. Por lo tanto, no es tan complicado como Angular, pero no es tan flexible como React.

Comunidad

• React: React es uno de las librerías de JS más populares en todo el mundo, y la comunidad que lo apoya y desarrolla es enorme.

Al trabajar con React, debes ser un aprendiz continuamente ya que la librería se actualiza constantemente. Si bien la comunidad intenta avanzar con la documentación más reciente lo más rápido posible, mantenerse al día con todos los cambios no es sencillo. A veces, puede faltar cierta documentación, pero el problema a menudo se resuelve con el apoyo de la comunidad en foros temáticos.

Whatsapp, Instagram Paypal, Glassdoor, BBC, son algunas de las compañías populares que usan React.

• Angular: Angular es menos admirado que React y encara mucho escepticismo, en parte debido a la impopularidad de Angular 1.0. Los desarrolladores solían descartar el framework por ser demasiado complicado, ya que requería mucho tiempo aprenderlo. Sin embargo, este framework ha sido desarrollado por Google, que trabaja a favor de la credibilidad de Angular.

Google proporciona el soporte a largo plazo del framework y lo mejora constantemente. Sin embargo, las actualizaciones son tan rápidas que la documentación a menudo sufre retrasos.

Angular también es utilizado por empresas como McDonald 's, AT & T, HBO, Apple, Forbes, Adobe, Nike y Microsoft.

• Vue: A diferencia de Angular y React, Vue no está respaldado por ninguna empresa de alto nivel. Esta debería haber resultado en una menor popularidad, pero en realidad, esto ganó una increíble popularidad en la comunidad de código abierto.

Grandes empresas como Netflix, Adobe, Xiaomi o Grammarly ya usan Vue en algunas de sus plataformas web.

Conclusión

Después de leer e investigar en profundidad sobre Angular, React y Vue, podemos concluir cuatro cosas

• Vue y React ofrecen un mejor rendimiento y flexibilidad que Angular.

• Vue y React son más adecuados para aplicaciones livianas y Angular es el mejor para aplicaciones de interfaz de usuario grandes.

• Angular es muy rígido y, a diferencia de Vue y React, ofrece todo, desde enrutamiento, plantillas, hasta pruebas de utilidades en su paquete.

• Vue es el framework más querido y en crecimiento de Javascript.

Esperamos que después de leer esta comparación completa de React vs Angular vs Vue, tengas claro cuál framework / biblioteca Javascript es la más adecuada para tu próximo proyecto de desarrollo de aplicaciones de software.

¿Quieres aprender más sobre el desarrollo web? Visita nuestros cursos sobre HTML, CSS, JavaScript en los cuales aprenderás todos los fundamentos y habilidades necesarias para ser un desarrollador web Frontend.