Angular vs React vs Vue 2022

Hay tres marcos para crear aplicaciones web de los que todos los desarrolladores frontend han oído hablar: React, Vue.js y Angular.

React es una biblioteca de interfaz de usuario, Angular es un marco frontal completo, mientras que Vue.js es un marco progresivo.

Se pueden usar casi indistintamente para crear aplicaciones front-end, pero no son 100 por ciento iguales, por lo que tiene sentido compararlos y comprender sus diferencias.

Cada marco está basado en componentes y permite la creación rápida de funciones de interfaz de usuario.

Sin embargo, todos tienen una estructura y arquitectura diferente, por lo que primero analizaremos sus diferencias arquitectónicas para comprender la filosofía detrás de ellos.

Arquitectura

Reaccionar

React no impone una estructura de proyecto específica y, como puede ver en el ejemplo oficial "Hello World" a continuación, puede comenzar a usar React con solo unas pocas líneas de código.

 ReactDOM.render(
  <h1>¡Hola, mundo!</h1>,
  documento.getElementById('raíz')
);

React se puede usar como una biblioteca de interfaz de usuario para representar elementos, sin imponer una estructura de proyecto específica, y es por eso que no es estrictamente un marco.

React Elements son los componentes básicos más pequeños de las aplicaciones React. Son más poderosos que los elementos DOM porque React DOM se asegura de actualizarlos de manera eficiente cada vez que algo cambia.

Los componentes son bloques de construcción más grandes que definen piezas independientes y reutilizables que se utilizarán en toda la aplicación. Aceptan entradas llamadas accesorios y producen elementos que luego se muestran al usuario.

React se basa en JavaScript, pero en su mayoría se combina con JSX (JavaScript XML), una extensión de sintaxis que le permite crear elementos que contienen HTML y JavaScript al mismo tiempo.

Todo lo que cree con JSX también podría crearse con la API de JavaScript de React, pero la mayoría de los desarrolladores prefieren JSX porque es más intuitivo.

vista

La biblioteca central de Vue.js se enfoca solo en la capa Vista. Se llama marco progresivo porque puede ampliar su funcionalidad con paquetes oficiales y de terceros, como Vue Router o Vuex, para convertirlo en un marco real.

Aunque Vue no está estrictamente asociado con el patrón MVVM (Model-View-ViewModel), su diseño se inspiró en parte en él. Con Vue, trabajará principalmente en la capa ViewModel, para asegurarse de que los datos de la aplicación se procesen de una manera que permita que el marco represente una vista actualizada.

La sintaxis de plantillas de Vue le permite crear componentes de vista y combina HTML familiar con directivas y características especiales. Se prefiere esta sintaxis de plantillas, aunque también se admiten JavaScript sin procesar y JSX.

Los componentes de Vue son pequeños, autónomos y se pueden reutilizar en toda la aplicación. Los componentes de archivo único (SFC) con la extensión .vue contienen HTML, CSS y JavaScript para que todo el código relevante resida en un archivo.

Los SFC son la forma recomendada de organizar el código en los proyectos de Vue.js, especialmente en los más grandes. Se requieren herramientas como Webpack o Browserify para transpilar SFC en código JavaScript funcional.

Angular

En este artículo, hablo de Angular 2, y no de la primera versión del marco que ahora se conoce como AngularJS.

AngularJS, el marco original, es un marco MVC (Model-View-Controller)). Pero en Angular 2, no existe una asociación estricta con los patrones MV*, ya que también se basa en componentes.

Los proyectos en Angular se estructuran en Módulos, Componentes y Servicios. Cada aplicación Angular tiene al menos un componente raíz y un módulo raíz.

Cada componente en Angular contiene una plantilla, una clase que define la lógica de la aplicación y metadatos (decoradores). Los metadatos de un componente le indican a Angular dónde encontrar los componentes básicos que necesita para crear y presentar su vista.

Las plantillas angulares están escritas en HTML, pero también pueden incluir sintaxis de plantilla angular con directivas especiales para generar datos reactivos y representar múltiples elementos, entre otras cosas.

Los componentes utilizan los servicios en Angular para delegar tareas de lógica empresarial, como obtener datos o validar entradas. Son una parte distinta de las aplicaciones Angular. Si bien Angular no impone su uso, se recomienda estructurar las aplicaciones como un conjunto de servicios distintos que se pueden reutilizar.

Angular está integrado en TypeScript, por lo que se recomienda su uso para obtener la experiencia más fluida, pero también se admite JavaScript simple.

Popularidad

Reaccionar

React es uno de los proyectos de JavaScript más populares con 160 000 estrellas en GitHub. Lo desarrolla y mantiene Facebook, y se usa internamente en muchos de sus proyectos. Además, impulsa más de 2 millones de sitios web, según las estadísticas de uso de BuiltWith.

vista

De los tres marcos, Vue tiene la mayor cantidad de estrellas en GitHub, con 176k estrellas. El proyecto está desarrollado y dirigido por el ex Googler Evan You. Es un proyecto independiente muy fuerte en la comunidad de código abierto y es utilizado por más de 1 millón de sitios web, según BuiltWith.

Angular

Angular es desarrollado por Google, pero sorprendentemente no se usa en algunos de sus productos estrella, como Search o Youtube. A menudo se usa en proyectos empresariales y funciona con más de 97 000 sitios web basados ​​en los datos de BuiltWith.

Es el menos destacado entre los tres marcos, con 68k estrellas en GitHub. Sin embargo, al cambiar de Angular 1 a Angular 2, crearon un repositorio completamente nuevo en lugar de continuar con el proyecto AngularJS, que también tiene 59k estrellas.

Ecosistema

Los paquetes de código abierto le ahorran un tiempo precioso al desarrollar aplicaciones. No solo eso, sino que a menudo son mejores que los componentes y paquetes personalizados porque están probados en batalla.

Es importante observar la disponibilidad de componentes, temas y otras herramientas listos para usar que pueden ayudarlo a crear nuevas funciones más fácilmente.

Reaccionar

Muchas aplicaciones front-end se basan en la gestión de estado global para almacenar información, como quién está conectado y otras configuraciones de usuario.

El proyecto más popular para la gestión del estado de JavaScript es Redux. La mayoría de los desarrolladores usan los enlaces oficiales de React para Redux, que son mantenidos por el equipo de Redux.

Debido a la popularidad de React, encontrar componentes de entrada y elementos listos para usar es extremadamente fácil. Todos están a solo una búsqueda de Google o GitHub de distancia.

El ecosistema de React también incluye React Native, que le permite crear aplicaciones nativas de iOS y Android a partir de un único código base escrito en React. Por lo tanto, React también puede ser una excelente opción para crear aplicaciones móviles utilizando tecnologías web.

React es parte de la pila MERN, que contiene MongoDB, ExpressJS, React y NodeJS. Lo mejor de esta combinación es que un solo lenguaje, JavaScript, impulsa toda la aplicación.

vista

Aunque Redux se puede usar en Vue, no hay enlaces oficiales. Pero eso no debería preocuparte porque Vuex es la biblioteca de administración estatal oficial creada específicamente para las aplicaciones de Vue. Además de integrarse muy bien con Vue, es fácil de depurar usando las herramientas de desarrollo de Vue.

En los primeros días de Vue, era más difícil encontrar componentes listos para usar. Dado que la comunidad ha crecido, existe una amplia gama de componentes de entrada y elementos avanzados que puede utilizar para acelerar su desarrollo.

Para el desarrollo de aplicaciones móviles, hay un proyecto prometedor llamado Weex. Weex es desarrollado y utilizado por Alibaba, pero no es tan maduro y poderoso como React Native. Además, dado que el proyecto se desarrolla y utiliza más en China, es más difícil encontrar documentación y soluciones a los problemas en inglés.

Vue se integra bien con Laravel, y es por eso que a menudo se usan juntos. Laravel ofrece andamios completos de JavaScript y CSS para permitir el uso de Vue en nuevos proyectos.

Angular

Para la gestión de estado en Angular, puede usar el proyecto NgRx. Se ha inspirado en Redux, pero está creado específicamente para Angular.

Como en el caso de Vue y React, hay muchos componentes listos para usar que puede importar a sus proyectos. Lo que es ligeramente diferente de Angular es que hay muchos componentes oficiales en el proyecto Angular Material. Este es un proyecto oficial de Google que ofrece componentes de Material Design para aplicaciones Angular.

Puede crear aplicaciones móviles multiplataforma en Angular usando NativeScript. También es compatible con Vue, pero el soporte de Angular es más maduro.

Angular es parte de la conocida pila MEAN que combina Angular con MongoDB, ExpressJS y NodeJS. Similar a la pila MERN, se basa completamente en JavaScript tanto para el front-end como para el back-end.

Tecnologías comunes

Angular, React y Vue se pueden usar para desarrollar aplicaciones web progresivas, también conocidas como PWA.

Las PWA no son aplicaciones móviles, sino aplicaciones web que los usuarios de teléfonos inteligentes pueden agregar como accesos directos a su pantalla de inicio y ofrecen una apariencia similar a las aplicaciones móviles nativas.

También puede encontrar plantillas premium y aplicaciones prefabricadas para cada marco, pero Angular y React tienen más opciones premium disponibles que Vue.

Rendimiento

Al elegir un marco o biblioteca, también debe pensar en el rendimiento.

En muchos casos, no tendrá que preocuparse por el rendimiento, especialmente si está creando un proyecto pequeño. Sin embargo, cuanto más crece un proyecto en alcance y complejidad, el rendimiento puede (y lo hará) convertirse en una preocupación.

Es importante tener en cuenta que la calidad del desarrollo y el seguimiento de las mejores prácticas en lo que respecta al rendimiento web es más importante que la elección del marco.

Pero dado que existen algunas métricas de rendimiento y diferencias, las analizaré y explicaré cómo cada una podría afectar sus esfuerzos de desarrollo.

JS Framework Benchmark: Angular vs React vs Vue

Los resultados de JS Framework Benchmark muestran que todos funcionan bastante bien en la mayoría de los puntos de referencia, como crear o agregar filas en una tabla.

Como puede ver arriba, Vue es considerablemente más lento que Angular y React en la selección de filas. Por otro lado, Angular y React no son muy eficientes para intercambiar filas.

Estas son las únicas diferencias sustanciales en los puntos de referencia de representación y, en la mayoría de los casos, no producirán resultados notables. Dado que seleccionar filas es una funcionalidad más común que intercambiar filas, diría que este punto de referencia coloca a Vue en el tercer lugar detrás de Angular y React que comparten la primera posición.

Cuando se trata de memoria y tiempo de arranque, React y Vue obtienen muy buenos puntajes, pero Angular es un poco más lento. Angular puede tardar 150 ms en iniciar un script básico y requiere más memoria para ejecutarse.

Perf Track: Angular vs React vs Vue

Perf Track de Google Chrome Labs muestra datos de producción de miles de sitios web. Estas estadísticas se ven afectadas por muchas otras cosas y no solo por el marco elegido, sino que veamos los números.

Primera pintura con contenido

Los sitios web de Vue y React tienen una clasificación más alta para esta métrica en comparación con Angular, que puede tomar más tiempo para iniciar y presentar el contenido al usuario.

Pintura con contenido más grande

Angular también es el más lento entre los tres marcos en la representación de una página completa, con solo el 27 por ciento de los sitios web de Angular con una puntuación en el rango aceptable.

Retraso de la primera entrada

Para los tres marcos, más del 80 por ciento de los sitios web están en el rango aceptable para el primer retraso de entrada, lo que muestra cuánto se tarda hasta que el usuario puede interactuar con la página.

Bytes JavaScript

Las aplicaciones más livianas son, con mucho, las desarrolladas con Vue, con el 68 por ciento de las aplicaciones de Vue cargando menos de 1 MB de JavaScript. Por otro lado, las aplicaciones Angular y React tienden a tener un tamaño de código más grande.

Cómo usar estas métricas

Puede ver una tendencia a partir de estas cifras, pero no debe apresurarse a sacar conclusiones. Para la última figura, por ejemplo, una explicación podría ser que Vue se usa para desarrollar aplicaciones más livianas mientras que Angular se usa para proyectos más grandes.

Las estadísticas pueden ayudarlo a guiarlo para tomar una buena decisión, pero no puede usarlas para demostrar que un marco es más rápido o mejor que el otro.

Características avanzadas

Para aplicaciones más avanzadas, el marco de front-end en uso debería poder realizar algunas tareas que mejoran el rendimiento y pueden escalar mejor.

Dos tecnologías que son clave son la representación del lado del servidor (SSR) y la virtualización.

Reaccionar

React admite la representación del lado del servidor con el paquete oficial ReactDOMServer. Para la virtualización, puede usar una popular herramienta de terceros llamada React Virtualized.

vista

La representación del lado del servidor también es compatible con Vue con el paquete SSR oficial. Además, también puede usar el marco Nuxt.js que se basa en Vue y es compatible con SSR.

Desafortunadamente, las opciones de virtualización en Vue no son tan fuertes. En mi opinión, Vue Virtual Scroll List es la mejor solución para el desplazamiento virtual, pero tiene algunos errores y no es tan estable como las opciones de React y Angular.

Angular

Angular tiene el paquete oficial Angular Universal para SSR y un componente oficial para el desplazamiento virtual y la representación eficiente de listas grandes.

Curva de aprendizaje

¿Qué tan fácil es aprender cada uno de estos marcos?

Para responder a esta pregunta, debemos observar la complejidad de cada marco y los conceptos que introducen.

Reaccionar

En su caso de uso más básico, React es el menos complejo de los tres marcos. Esto se debe a que solo necesita importar la biblioteca, luego puede comenzar a escribir su aplicación React con unas pocas líneas de código.

Pero aparte del ejemplo de Hello World, la mayoría de las aplicaciones React están basadas en componentes y no solo representan algunos elementos en la página.

Una cosa que algunos desarrolladores encuentran extraña o difícil sobre React es el hecho de que aprender JSX es una calle de un solo sentido. También puede usar JavaScript sin procesar, pero dado que la mayoría de los desarrolladores de React usan JSX, aprenderlo es prácticamente inevitable.

Esto es lo principal que puede hacer que la curva de aprendizaje de React sea un poco más pronunciada, pero aparte de eso, es una biblioteca que es fácil de aprender para los desarrolladores que conocen JavaScript y entienden los conceptos de desarrollo web.

vista

Vue es un poco más complejo de configurar que React. Puede usarlo como una biblioteca para definir componentes que puede usar en su HTML, pero al igual que React, no es así como se construyen la mayoría de los proyectos.

La mayoría de los proyectos de Vue tendrán un componente raíz llamado App.vue y varios componentes secundarios para mostrar varias cosas.

Cuando se trata de sintaxis, lo único nuevo que debe aprender es la sintaxis de plantilla de Vue, que es muy fácil de entender si sabe HTML. Las directivas básicas, como v-if y v-for para la representación condicional y la representación de listas, son fáciles de entender incluso para los principiantes.

Además, los componentes de un solo archivo de Vue mantienen todo el código front-end en un solo lugar, lo que facilita la organización de nuevos proyectos.

Vue es el más fácil de aprender, en mi opinión, debido a su sencillez y sintaxis intuitiva.

Angular

Angular tiene la estructura de proyecto más compleja de los tres y, dado que es un marco de front-end completo, se basa en más conceptos.

Además de los componentes, Angular admite módulos y servicios. Espera que escriba y diseñe su base de código de una manera específica que haga que su proyecto sea más fácil de mantener cuando se amplíe.

En cuanto a la sintaxis, dado que Angular funciona mejor con TypeScript, es importante que conozca TypeScript al crear un proyecto de Angular.

Al igual que con Vue, también debe familiarizarse con la sintaxis similar a HTML para que pueda comenzar a codificar nuevas funciones de interfaz de usuario con Angular.

En mi opinión, Angular es el más difícil de aprender para el desarrollador promedio porque es más complejo y se basa en TypeScript.

Predicciones futuras

Muchos proyectos y marcos de código abierto se desvanecen en el olvido y pierden mantenimiento. ¿Debería estar preocupado por alguno de los marcos que estamos discutiendo aquí?

Aunque no podemos predecir completamente lo que sucede, el trabajo de desarrollo en curso es un buen indicador de la salud de estos proyectos. La popularidad y el crecimiento también son métricas importantes para predecir la longevidad de un proyecto, así que echemos un vistazo a cada marco.

Reaccionar

Se lanzó React v17.0, pero sorprendentemente, no incluye ninguna característica nueva para los desarrolladores.

El cambio principal es que esta nueva versión facilita la actualización de React. Puede actualizar solo algunas partes de React de la versión anterior a la más nueva, sin tener que actualizar todo el proyecto.

Si su aplicación se basa en funciones que cambian o quedan obsoletas con la nueva versión, puede mantener la versión anterior para mantener viva esta funcionalidad. Esta actualización hace que React sea una excelente opción a largo plazo porque hace que sea más fácil mantenerse actualizado con las nuevas versiones.

React ha crecido un 44 por ciento desde el año pasado en descargas semanales de npm. En números absolutos, sigue siendo el más descargado de los tres proyectos.

vista

Vue 3 se lanzó en septiembre de 2020 y aborda muchos problemas graves que Vue 2 tiene en proyectos grandes. Presenta la API de composición que está inspirada en React Hooks y facilita la reutilización de la lógica entre los componentes.

Todo el proyecto se reescribió en TypeScript, lo que mejora la compatibilidad con TypeScript en los nuevos proyectos de Vue y, al mismo tiempo, hace que el proyecto sea más fácil de mantener.

Vue 3 es una actualización muy necesaria y hace que Vue se adapte mejor a proyectos a gran escala.

Las descargas semanales de Vue han crecido un 87 % desde el año pasado, lo que convierte a Vue en el marco de más rápido crecimiento en términos relativos. Si Vue puede mantener esta tasa de crecimiento, seguramente superará pronto a Angular.

Angular

Angular introdujo recientemente el Ivy Compiler. Reduce los tiempos de compilación, optimiza los activos, permite pruebas más rápidas y, en general, mejora la experiencia del desarrollador.

El equipo de Angular publica actualizaciones importantes varias veces al año, que pueden incluir nuevas funciones o simplemente actualizar el marco con nuevas versiones del navegador.

Angular ha crecido alrededor de un 50 por ciento en descargas semanales desde el año pasado, por lo que sigue siendo un proyecto popular.

Conclusión

Angular, React y Vue están en desarrollo muy activo. Lanzan regularmente nuevas versiones y mantienen las existentes. Como el nivel actual de soporte es alto en cada caso, puede usar cualquiera de estos marcos de forma segura.

Es importante tener en cuenta que Angular no está creciendo tan rápido como antes, mientras que Vue, aunque comenzó más recientemente, parece estar creciendo mucho.

Como se indicó anteriormente, no podemos predecir qué marcos seguirán siendo relevantes a largo plazo, pero cada proyecto tiene una gran comunidad detrás y está en constante evolución.

Mi objetivo con este artículo era explicar las diferencias arquitectónicas, desglosar las fortalezas y debilidades de cada marco y compararlas donde corresponda.

Antes de saltar a un nuevo marco, hay algunas cosas a considerar.

En primer lugar, la experiencia de su equipo puede ser un factor decisivo a la hora de elegir una nueva tecnología.

De igual forma, tienes que considerar el talento que hay disponible en tu zona para que puedas contratar desarrolladores para tu proyecto.

Finalmente, cuando se trata del proyecto en sí, la complejidad y el alcance también pueden afectar su elección de marco.

Teniendo en cuenta todas las diferencias clave, espero que pueda decidir cuál es el mejor marco de front-end para sus objetivos y necesidades.