Opciones de marco de front-end en 2021 Angular vs React vs Vue
React es una biblioteca de interfaz de usuario, Angular es un marco de interfaz de usuario maduro y Vue.js es un marco incremental.
Se utilizan casi indistintamente al crear aplicaciones front-end, pero no son exactamente iguales, por lo que tiene sentido compararlos y comprender las diferencias.
Cada marco se basa en componentes y permite la creación rápida de funcionalidades de interfaz de usuario.
Sin embargo, todos tienen estructuras y arquitecturas diferentes, así que veamos primero sus diferencias arquitectónicas para comprender las ideas detrás de ellas.
React no impone una estructura de proyecto específica y, como puedes ver en el ejemplo oficial "Hello World" a continuación, puedes comenzar a usar React con solo unas pocas líneas de código.
React se puede utilizar como una biblioteca de interfaz de usuario para representar elementos sin imponer una estructura de proyecto específica, por lo que no es estrictamente un marco.
Los elementos de React son los bloques de construcción más pequeños de las aplicaciones de React. Son más poderosos que los elementos DOM porque React DOM garantiza que se actualicen de manera eficiente cuando se produzcan cambios.
Los componentes son bloques de construcción más grandes que definen piezas independientes y reutilizables que se pueden utilizar en toda una aplicación. Reciben información llamada accesorios y generan elementos que luego se muestran al usuario.
React está basado en JavaScript, pero se combina principalmente con JSX (JavaScript XML), una extensión de sintaxis que permite crear elementos que contienen HTML y JavaScript.
Todo lo que crees usando JSX también se puede crear usando la API React JavaScript, pero la mayoría de los desarrolladores prefieren JSX porque es más intuitivo.
La biblioteca principal de Vue.js solo se centra en la capa de vista. Se llama progresivo porque puedes ampliar su funcionalidad utilizando paquetes oficiales y de terceros como Vue Router o Vuex, convirtiéndolo en un framework real.
Aunque Vue no está estrictamente relacionado con el patrón MVVM (Model-View-ViewModel), su diseño está en parte inspirado en él. Con Vue, trabajará principalmente en la capa ViewModel para garantizar que los datos de su aplicación se manejen de una manera que permita que el marco represente las vistas más actualizadas.
La sintaxis de plantilla de Vue le permite crear componentes de vista que combinan HTML familiar con directivas y funcionalidades especializadas. Aunque se admiten JavaScript sin formato y JSX, se sigue prefiriendo esta sintaxis de plantilla.
Los componentes de Vue son pequeños, autónomos y reutilizables en toda la aplicación. Un componente de archivo único (SFC) con la extensión .vue contiene HTML, CSS y JavaScript, por lo que todo el código relevante está en un solo archivo.
SFC es la forma recomendada de organizar el código en proyectos Vue.js, especialmente proyectos grandes. SFC debe convertirse en código JavaScript utilizable utilizando herramientas como Webpack o Browserify.
En este artículo, hablo de Angular 2, no de la primera versión del marco ahora conocido como AngularJS.
El framework AngularJS original era un framework MVC (Modelo-Vista-Controlador).
Pero en Angular 2, no existe una conexión estricta con el patrón MV* ya que también se basa en componentes.
Los proyectos en Angular se dividen 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 de Angular consta de 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 bloques de construcción necesarios para crear y representar la vista.
Las plantillas angulares están escritas en HTML, pero también pueden contener sintaxis de plantilla angular, que contiene instrucciones especiales para generar datos reactivos, representar múltiples elementos, etc.
Los componentes utilizan servicios en Angular para delegar tareas de lógica de negocios, como obtener datos o validar entradas. Son una parte única de las aplicaciones Angular. Aunque Angular no exige el uso de componentes, le recomendamos encarecidamente que cree su aplicación como un conjunto de servicios únicos y reutilizables.
Angular está integrado en TypeScript, por lo que se recomienda para obtener la mejor experiencia, pero también se admite JavaScript puro.
React es uno de los proyectos de JavaScript más populares, con 160.000 estrellas en GitHub. Es desarrollado y mantenido por Facebook y utilizado en muchos proyectos dentro de ellos. Además, según las estadísticas de uso de BuiltWith, funciona con más de 2 millones de sitios web.
Entre los tres frameworks, Vue tiene la mayor cantidad de estrellas en GitHub, alcanzando 176k. El proyecto está desarrollado y dirigido por el ex empleado de Google Evan You. Según BuiltWith, es un proyecto independiente muy sólido en la comunidad de código abierto, con más de un millón de sitios web que lo utilizan.
Angular es desarrollado por Google, pero sorprendentemente no se utiliza en algunos de los productos estrella de Google como la Búsqueda o Youtube.
Angular tiene la calificación de estrellas más baja entre los tres marcos, con solo 68.000 estrellas en GitHub. Sin embargo, al pasar de Angular 1 a Angular 2, crearon una base de código completamente nueva en lugar de continuar con el proyecto AngularJS, que también tiene 59k estrellas.
Los paquetes de software de código abierto pueden ahorrarle un tiempo valioso a la hora de desarrollar aplicaciones. No sólo eso, sino que suelen ser mejores que los componentes y paquetes personalizados porque se prueban en el mundo real.
Es importante comprobar la disponibilidad de componentes, temas y otras herramientas ya preparados que pueden ayudarle a crear nuevas funciones más fácilmente.
Muchas aplicaciones front-end dependen de la administración del estado global para almacenar información como los usuarios que han iniciado sesión y otras configuraciones del usuario.
El proyecto de gestión de estado de JavaScript más popular es Redux. La mayoría de los desarrolladores utilizan 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 muy fácil. Puedes encontrarlos con sólo una búsqueda en Google o GitHub.
El ecosistema React también incluye React Native, que le permite crear aplicaciones nativas para iOS y Android a partir de una única base de código escrita en React. Por lo tanto, React también es una excelente opción para crear aplicaciones móviles utilizando tecnologías web.
React es parte de la pila MERN, que incluye MongoDB, ExpressJS, React y NodeJS. La mayor ventaja de esta combinación es que sólo se puede utilizar un lenguaje (JavaScript) para impulsar toda la aplicación. -
Aunque los desarrolladores de Redbase y Redbase pueden encontrar algunos problemas durante el proceso de desarrollo, esto no afecta su trabajo.
Si bien es posible utilizar Redux con Vue, actualmente no existe ningún vínculo oficial. Pero no tiene que preocuparse porque Vuex es la biblioteca oficial de administración estatal específicamente para aplicaciones Vue. Además de estar perfectamente integrado con Vue, la depuración también es muy sencilla utilizando las herramientas de desarrollo de Vue.
En los primeros días de Vue, era difícil encontrar componentes disponibles en el mercado. A medida que su comunidad crece, puede utilizar una variedad de componentes de entrada y elementos avanzados para acelerar el desarrollo.
En términos de desarrollo de aplicaciones móviles, existe un proyecto emergente llamado Weex, que es desarrollado y utilizado por Alibaba, pero no es tan maduro y robusto como React Native. Además, dado que el proyecto se desarrolló y utilizó más en China, es difícil encontrar documentación y soluciones a problemas en inglés.
Vue se integra bien con Laravel, por lo que a menudo se usan juntos, y Laravel proporciona un andamiaje completo de JavaScript y CSS para admitir el uso de Vue en nuevos proyectos.
Para la gestión del estado en Angular, puedes utilizar el proyecto NgRx. Está inspirado en Redux, pero creado específicamente para Angular.
Al igual que con Vue y React, hay muchos componentes listos para usar que puedes importar a tu proyecto. Ligeramente diferente de Angular, hay muchos componentes oficiales en el proyecto Angular Material. Este es un proyecto oficial de Google que proporciona componentes de Material Design para aplicaciones Angular.
Puedes utilizar NativeScript para crear aplicaciones móviles multiplataforma en Angular. También es compatible con Vue, pero el soporte Angular es más maduro.
Angular es parte de la famosa pila MEAN que combina Angular con MongoDB, ExpressJS y NodeJS. Al igual que la pila MERN, se basa completamente en JavaScript tanto para el front-end como para el back-end.
Angular, React y Vue se pueden utilizar para desarrollar aplicaciones web progresivas, también conocidas como PWA.
Las PWA no son aplicaciones móviles; son aplicaciones web que los usuarios de teléfonos inteligentes pueden agregar a sus accesos directos en la pantalla de inicio y proporcionar una apariencia similar a las aplicaciones móviles nativas.
También puedes encontrar plantillas avanzadas y aplicaciones prediseñadas para cada framework, pero Angular y React ofrecen opciones más avanzadas que Vue.
A la hora de elegir un framework o biblioteca, también hay que tener en cuenta el rendimiento.
En muchos casos, no es necesario preocuparse por el rendimiento, especialmente cuando se crean proyectos pequeños. Sin embargo, cuanto mayor es el alcance y la complejidad del proyecto, más graves se vuelven los problemas de rendimiento.
Es importante tener en cuenta que cuando se trata de rendimiento web, la calidad del desarrollo y seguir las mejores prácticas son más importantes que la elección del marco.
Sin embargo, dado que existen muchas métricas de rendimiento y diferencias, las examinaré y explicaré cómo cada una afecta sus esfuerzos de desarrollo.
Los resultados de JS Framework Benchmark muestran que funcionan razonablemente bien en la mayoría de los puntos de referencia, como crear o agregar filas en una tabla.
Como se muestra arriba, Vue es mucho más lento que Angular y React al seleccionar filas. Por otro lado, Angular y React tampoco son muy eficientes a la hora de intercambiar filas.
Estas son las únicas diferencias sustanciales en los puntos de referencia presentados, y en la mayoría de los casos no hay resultados notables. Dado que seleccionar filas es una característica más común que intercambiar filas, creo que este punto de referencia ubica a Vue en tercer lugar y empatado en el primer lugar, detrás de Angular y React.
En términos de memoria y tiempo de inicio, React y Vue funcionan bien, pero Angular es un poco más lento; Angular puede tardar 150 milisegundos en iniciar un script básico y requiere más memoria para ejecutarse.
Perf Track de Google Chrome Labs muestra datos de producción de miles de sitios web. Estas estadísticas se ven afectadas por muchos otros factores además del marco elegido, así que echemos un vistazo a los números.
Los sitios web de Vue y React tienen una clasificación más alta que Angular en esta métrica porque Angular tarda más tiempo en lanzar y mostrar contenido a los usuarios.
Angular también es el más lento de los tres frameworks cuando se trata de renderizar páginas completas, con solo 27 sitios Angular con una puntuación dentro del rango aceptable.
En los tres marcos, más de 80 sitios estaban dentro de rangos aceptables para la latencia de primera entrada, lo que muestra cuánto tiempo les toma a los usuarios interactuar con una página.
Con diferencia, las aplicaciones más ligeras desarrolladas con Vue, 68 aplicaciones Vue cargan menos de 1 MB de JavaScript. Las aplicaciones Angular y React, por otro lado, tienden a tener tamaños de código mucho más grandes.
Puedes ver tendencias en estos números, pero no debes sacar conclusiones precipitadas. Por ejemplo, para el último diagrama, se puede explicar que Vue se usa para desarrollar aplicaciones livianas, mientras que Angular se usa para proyectos más grandes.
Las estadísticas pueden ayudarle a tomar buenas decisiones, pero no puede utilizarlas para demostrar que un marco es más rápido o mejor que otro.
Para aplicaciones más avanzadas, el marco de front-end utilizado debería poder realizar tareas que mejoren el rendimiento y la escalabilidad.
Dos tecnologías clave son la renderización del lado del servidor (SSR) y la virtualización.
React admite la renderización del lado del servidor utilizando el paquete oficial ReactDOMServer. Para la virtualización, puede utilizar una popular herramienta de terceros llamada React Virtualized.
Vue también admite renderizado del lado del servidor utilizando el paquete SSR oficial. Además, puede utilizar el marco Nuxt.js, que está construido en Vue y es compatible con SSR.
Desafortunadamente, las opciones de virtualización en Vue no son potentes. En mi opinión, la lista de desplazamiento virtual de Vue es la mejor solución para el desplazamiento virtual, pero tiene algunos problemas y no es tan estable como las opciones de React y Angular.
Angular tiene un paquete oficial Angular Universal para SSR, así como componentes oficiales para desplazamiento virtual y renderizado eficiente de listas grandes.
¿Qué tan fácil es aprender estos frameworks?
Para responder a esta pregunta, debemos comprender la complejidad de cada marco y los conceptos que introduce.
En sus casos de uso más básicos, React es el menos complejo de los tres frameworks. Esto se debe a que puedes simplemente importar la biblioteca y comenzar a escribir aplicaciones React con solo unas pocas líneas de código.
Pero aparte del ejemplo de Hello World, la mayoría de las aplicaciones de React se basan en componentes, en lugar de simplemente representar elementos en la página.
Una cosa que es nueva o difícil para algunos desarrolladores con React es que aprender JSX es una calle de sentido único. También puedes usar JavaScript sin formato, pero dado que la mayoría de los desarrolladores de React usan JSX, aprender JSX es casi inevitable.
Este es el factor principal que hace que la curva de aprendizaje de React sea más pronunciada, pero aparte de eso, es una biblioteca fácil de aprender para desarrolladores que conocen JavaScript y entienden los conceptos de desarrollo web.
Vue es un poco más complicado de configurar que React. Puede usarlo como una biblioteca para definir componentes que se pueden usar en 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 tienen un componente raíz llamado App.vue y varios subcomponentes que se utilizan para mostrar diversos contenidos.
Hablando de sintaxis, lo único nuevo que necesitas aprender es la sintaxis de la plantilla de Vue, que es fácil de aprender si sabes HTML. Incluso para los principiantes, las instrucciones básicas como v-if y v-for renderizado condicional y renderizado de listas son fáciles de entender.
Además, los componentes de archivo único de Vue mantienen todo el código de front-end en un solo lugar, lo que facilita la organización de nuevos proyectos.
En mi opinión, Vue es el más fácil de aprender porque su sintaxis es sencilla e intuitiva.
La estructura del proyecto de Angular es la más compleja de las tres y se basa en más conceptos porque es un marco de front-end maduro.
Además de componentes, Angular también admite módulos y servicios. Espera que escriba y diseñe su código base de una manera específica, haciendo que su proyecto sea más fácil de mantener a medida que escala.
En cuanto a la sintaxis, dado que Angular funciona mejor con TypeScript, es importante comprender TypeScript al crear proyectos de Angular.
Al igual que con Vue, debes familiarizarte con la sintaxis similar a HTML antes de poder comenzar a escribir nuevas funciones de interfaz de usuario en 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.
Muchos proyectos y marcos de código abierto se han olvidado y han dejado de mantenerse. ¿Debería preocuparse por alguno de los marcos que analizamos aquí?
Si bien no podemos predecir completamente lo que sucederá, el desarrollo continuo es un buen indicador de la salud de estos proyectos. La popularidad y el crecimiento también son predictores importantes de la longevidad del proyecto, así que echemos un vistazo a cada marco.
Se ha lanzado React v17.0, pero, sorprendentemente, no ofrece ninguna característica nueva para los desarrolladores.
El principal cambio es que la nueva versión facilita la actualización de React. Puede actualizar partes de React de una versión anterior a una versión más nueva sin actualizar todo el proyecto.
Si su aplicación depende de una función que ha sido modificada o obsoleta en una nueva versión, puede conservar la versión anterior para que la función siga funcionando. Esta actualización hace que React sea una buena opción a largo plazo porque le facilita mantenerse al día con las nuevas versiones.
Las descargas semanales de npm de React han aumentado en 44 desde el año pasado. En números absolutos, sigue siendo el más descargado de los tres proyectos.
Vue 3 se lanzó en septiembre de 2020 y resolvió muchos problemas graves encontrados por Vue 2 en proyectos grandes.
Inspirado en React Hooks, presenta la API de composición, lo que facilita la reutilización de la lógica entre componentes.
Todo el proyecto se reescribió en TypeScript, lo que mejora la compatibilidad con TypeScript para el nuevo proyecto Vue y también lo hace más fácil de mantener.
Vue 3 es una actualización muy necesaria que hace que Vue sea aún más adecuado para proyectos grandes.
Las descargas semanales de Vue han crecido un 87% desde el año pasado, lo que lo convierte en el framework de más rápido crecimiento en términos relativos. Si Vue puede seguir creciendo a este ritmo, definitivamente pronto superará a Angular.
Angular lanzó recientemente el compilador Ivy. Reduce los tiempos de construcción, optimiza los activos, acelera las pruebas y, en general, mejora la experiencia del desarrollador.
El equipo de Angular lanza actualizaciones importantes dos veces al año, que pueden incluir nuevas funciones o simplemente actualizar el marco con nuevas versiones del navegador.
Las descargas semanales de Angular han aumentado en aproximadamente 50 desde el año pasado, por lo que sigue siendo un proyecto popular.
Angular, React y Vue se desarrollan activamente. Lanzan nuevas versiones periódicamente y mantienen las versiones existentes. Dado que el nivel actual de soporte para cada marco es alto, puede utilizar cualquiera de ellos con confianza.
Es importante tener en cuenta que Angular no está creciendo tan rápido como antes, mientras que Vue, a pesar de estar recién comenzando, parece estar creciendo muy rápidamente.
Como mencionamos antes, no podemos predecir qué frameworks seguirán siendo relevantes con el tiempo, pero detrás de cada proyecto hay una gran comunidad que continúa creciendo.
Mi propósito al escribir esta publicación de blog es explicar las diferencias arquitectónicas, analizar los pros y los contras de cada marco y compararlos cuando corresponda.
Antes de comenzar con 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 nueva tecnología.
Asimismo, debes considerar el talento disponible en tu área para poder contratar desarrolladores para tu proyecto.
Finalmente, en cuanto al proyecto en sí, la complejidad y el alcance también influirán en la elección del marco.
Al considerar todas las diferencias clave, espero que puedas decidir qué framework front-end se adapta mejor a tus objetivos y necesidades.
(Este artículo fue traducido del artículo de Aris Pattakos "Angular vs React vs Vue 2021" de Smell the Numbers. Indique el enlace original al reimprimir: /guides/angular-vs-react-vs-vue /)