Comparación de los marcos JavaScript definitivos: Angular vs React

Una pregunta que me hacen casi a diario es si debo comenzar con ReactJS o Angular. Sin embargo, antes de seguir adelante, déjame darte un descargo de responsabilidad.

No es un blog en el que voy a criticar uno u otro o decir que siempre debes usar uno sobre el otro. Cada desarrollador y cada proyecto son completamente diferentes y tienen un conjunto diferente de requisitos, por lo que decir que siempre debes usar ReactJS o siempre usar Angular es bastante estúpido.

El argumento lógico

Puede argumentar que Angular es un marco y React es técnicamente una biblioteca en sí misma. No estoy negando este hecho, pero este es el argumento en el que no quiero entrar ahora. Hay paquetes que puede agregar a React que lo convertirán en un marco que compite directamente con Angular. Estamos comparando los dos ecosistemas, no el marco exacto con la biblioteca exacta.

La curva de aprendizaje

Comencemos con Angular. Otro descargo de responsabilidad: cuando digo Angular, me refiero a Angular 4, no a AngularJS.

Angular es un marco grande, lo que significa que es poderoso e incluye mucho. Hay mucho que aprender. Vas a escuchar un montón de nuevo vocabulario intimidante como inyección de dependencia, decoradores de directivas, canalizaciones, etc. Luego tienes que lidiar con Typescript, que es JavaScript más un montón de otras características, incluida la escritura estática.

Angular es más obstinado que React, lo cual es una de las ventajas en mi opinión porque con React puedes hacer lo mismo de un millón de formas diferentes. Con Angular, generalmente hay una o dos formas de hacer ciertas cosas, lo que hace que sea más fácil de seguir y le brinda instrucciones mucho más claras sobre lo que se supone que debe hacer.

Pero, de nuevo, todo se reduce a la preferencia. Es posible que le guste la flexibilidad de hacer las cosas de diferentes maneras. Como mencioné, ReactJS es una biblioteca si estamos hablando solo de la biblioteca principal, es mucho más pequeña y mucho más fácil de aprender que el marco Angular. Puedes decir que aprenderás React en menos tiempo. React es una gran biblioteca de visualización en sí misma, pero ni siquiera es tan poderosa para aplicaciones grandes. Si desea enrutamiento, validación, solicitudes HTTP en React, tendrá que instalar otros paquetes y eso se suma a la curva de aprendizaje.

Si observa el código React de dos desarrolladores diferentes, probablemente se verán completamente diferentes, ya sea que realicen solicitudes HTTP o manejen el estado y las propiedades. Todo eso se puede manejar de manera muy diferente y muchas veces puede ser de manera incorrecta.

Encuentra las mejores prácticas y todos los problemas desaparecen, pero eso se suma a la curva de aprendizaje.

A diferencia de Angular React, no usa plantillas. Utiliza algo llamado JSX o extensión de JavaScript o extensión de sintaxis de JavaScript, que nos permite incrustar HTML en JavaScript. Al principio esto puede parecer un poco peculiar. Especialmente, cuando probablemente te enseñaron a separar tu marcado y tu JavaScript.

Piense en ello como poner HTML dentro de JavaScript con un par de cambios diferentes: no puede usar el atributo de clase y tiene que usar el nombre de clase.

Por último, tenemos Redux. React se usa a menudo con Redux o Flux, que son administradores de estado de niveles de aplicación. En mi opinión, Redux está jodidamente duro simplemente configurarlo y aprender los conceptos es difícil.

Creo que está sobreutilizado. Creo que muchos desarrolladores usan redux donde no es necesario. No lo necesita para aplicaciones más pequeñas, pero muchos desarrolladores insisten en usarlo. Eso nuevamente se reduce a la preferencia. Redux es muy poderoso, no quiero quitar eso. Cuando se habla de la curva de aprendizaje, es muy difícil de entender.

Características	Reaccionar	Angular
Lenguaje de programación	JavaScript	Mecanografiado
Estructura del código	Dogmático	Flexible
Biblioteca principal	Pequeña	Muy grande
Plantillas	JSX	HTML
Competencia	Pequeñas Aplicaciones	Aplicaciones a gran escala

Ganador: Es un empate

Rendimiento

No es justo comparar directamente el rendimiento de Angular con React. Angular es un marco completo de adelante hacia atrás que incluye enrutamiento, herramientas de formulario, biblioteca HTTP, extensiones reactivas, etc. Todas estas características inflan el marco y lo hacen más lento. Sin embargo, React por sí solo es solo una biblioteca de visualización, que es mucho más pequeña y rápida.

Una vez que comienza a agregar paquetes como el enrutador, el cliente HTTP o lo que sea que vaya a agregar a su aplicación React, comienza a acercarse un poco más a donde está Angular y luego puede comenzar a compararlos de manera justa, pero incluso después de eso, React todavía gana el departamento de rendimiento. Es una tecnología muy rápida en general.

El cambio de Angular 2 a Angular 4 debajo del capó hizo bastante para aumentar el rendimiento. Angular 4 funciona mejor que Angular 2. No obstante, React aún gana en el departamento de rendimiento.

Angular vs reaccionar. Fuente: Academy.com

Ganador: Reaccionar

Características

Ambos marcos tienen muchas de las mismas características y ventajas generales: organizan su código, están basados ​​en componentes, ofrecen marcado dinámico, etc. Están acostumbrados a hacer muchas de las mismas cosas y comparten un muchas de las mismas características.

Características	AngularJS	Reaccionar
Fecha de lanzamiento	2009	2013
Idioma	Mecanografiado, JavaScript	JavaScript
Cuota de mercado	0,3%
Modelo	Sí	No
Vista	Sí	Sí
Controlador	Sí	No
Curva de aprendizaje	Complejo	Fácil
Plantillas	Sí	No
Falla	tiempo de ejecución	Tiempo de compilación
Representación del lado del servicio	No	Sí
DOM	Sí	Virtual
Soporte móvil	Sí	Sí
Representación del lado del servicio	No	Sí

Veremos algunas de las características individuales. Angular obviamente tiene muchas más características que React en su núcleo. Permítame recordarle que estamos hablando de dos ecosistemas y paquetes comunes que se usan con React.

Angular es un marco todo incluido. Viene con enrutador de componentes, extensiones reactivas para observables, un cliente HTTP, un módulo de formulario para validación y la lista continúa. Además, ofrece enlace de datos bidireccional de una manera que ningún otro marco realmente lo hace. Vincular datos de la vista al modelo es extremadamente fácil usando la directiva del modelo ng.

Angular también admite MVC (controlador de vista de modelo) o al menos aspectos diferentes de ese patrón de diseño. también viene con características que le permiten implementar pruebas fácilmente: tanto las pruebas unitarias como las pruebas de extremo a extremo. Angular está repleto de funciones para crear aplicaciones front-end de nivel empresarial. React, por otro lado, no incluye mucho en su núcleo. Sin embargo, se pueden agregar cosas para darle las características que Angular incluye listas para usar, además de algunas adicionales.

React usa un DOM virtual que es muy poderoso. Crea su propia versión liviana del Dom real y solo incluye y actualiza lo que se necesita en lugar de actualizar todo. Virtual DOM es una de las principales razones por las que React es increíblemente rápido.

React usa JSX, que es más poderoso que las plantillas estándar porque puede poner absolutamente cualquier tipo de JavaScript que desee. No se requiere JSX para usar React, pero hace que las cosas sean mucho más fáciles. No puedo pensar en ninguna razón por la que no usarías JSX con Angular también. React también hace un muy buen trabajo al administrar el estado y las propiedades de los componentes. Hace que sea muy fácil trabajar con los datos y transferirlos entre los componentes. Pasar datos entre componentes, Angular es mucho más difícil que hacerlo en React.

Core React es difícil de mantener el estado de nivel de la aplicación. Component State es fácil, pero si desea una verdadera administración de estado a nivel de aplicación, necesitará Redux o Flux, lo cual dije antes es bastante confuso de aprender. Los paquetes externos que se usan a menudo como la nueva versión 4 del enrutador React son un poco difíciles de comprender, pero también son muy poderosos una vez que aprende a ejecutarlos y configurarlos. Hay muchas maneras diferentes de usarlo también. React no tiene un componente HTTP central como Angular, pero puede usar Fetch o Axios, que es un cliente HTTP externo y luego Enzyme es popular para certificar React. Hay algunos de los diferentes paquetes que se usan comúnmente con React, aunque no forman parte de la biblioteca real.

Si bien ambas tecnologías comparten una buena cantidad de características, si solo está comparando las tecnologías principales, Angular es el ganador.

Ganador: Angular

Estampación

Angular y React tienen algunas interfaces de línea de comandos bastante agradables. La CLI de Angular y la aplicación Create React son bastante buenas y realmente nos permiten agilizar el desarrollo. La CLI de Angular es un poco más poderosa porque podemos generar rápidamente cosas como componentes y servicios. Create React no puede hacer eso. Tienes que crear todo tú mismo en cuanto a los archivos y la estructura básica. Ambos sistemas usan web pack, tienen sus propios servidores de desarrollo de carga automática y tienen herramientas de compilación y construcción. Obviamente, Angular tiene la tarea adicional de transpilar Typescript. La CLI tiene un script para eso cuando ejecutamos ng serve. Todo lo que sucedió detrás de escena. Utiliza algo llamado TSC o Typescript Compiler para eso y ambos también tienen herramientas de prueba.

Características	Angular	Reaccionar
Interfaz de línea de comandos	CLI angular	Crear Reaccionar
Tareas adicionales	transpilando texto mecanografiado	Ninguno
Pruebas	jazmín y karma	Hay

Si se trata de una aplicación de pila completa, estos son realmente importantes. No es necesario que los uses. Puede crear una aplicación React desde cero con el paquete web. Esto hace que sea mucho más fácil no solo construir la aplicación, sino también compilarla y construirla para producción.

Ambos son bonitos incluso en ese departamento.

Ganador: Angular

Ecosistema

Como dije, ambas tecnologías tienen sus propios ecosistemas que ahora se extienden mucho más allá del navegador web.

Ionic es un marco híbrido popular que es una aplicación Angular que se ejecuta dentro de un contenedor nativo para aplicaciones móviles. Puede crear aplicaciones móviles usando Angular. Las aplicaciones híbridas pueden ser un poco torpes en comparación con las aplicaciones nativas. La experiencia del usuario puede no ser tan buena a veces, no tan rápida y receptiva. Entre los diversos marcos híbridos, Ionic 3 es el mejor. También está NativeScript, que nos permite crear verdaderas aplicaciones nativas para iOS y Android con Angular y JavaScript.

Características	Angular	Reaccionar
Desarrollo de aplicaciones híbridas	Iónico	*No requerido
Desarrollo de aplicaciones nativas	Escritura nativa	reaccionar nativo
Representación del lado del servidor	Angular Universal	ESE
Biblioteca de Gestión Estatal	Tienda NgRx	Reax Redux, MobX
Biblioteca de interfaz de usuario de material	Material angular	Material-IU
Realidad virtual	RV reactiva	ESE

No obstante, NativeScript no parece ser tan bueno como React Native de Facebook, al menos en este momento. Angular también tiene una biblioteca de componentes de diseño de materiales si eres fanático del diseño de materiales. Angular Universal es un proyecto semilla que se puede usar para renderizar Angular en el lado del servidor. También hay una tienda NgRx, que es una biblioteca de administración de estado inspirada en Reax redux. Se basa en el estado mutado por reductores de pares. También tiene integración con extensiones Reactivas.

te hubieras dado cuenta Una vez, uno de ellos hace algo que el otro copia de manera diferente. React y Angular se han convertido en marcos de Microsoft y Apple de JavaScript.

React tiene bastante ecosistema. Tiene React native, que es popular. Es la mejor manera de crear aplicaciones móviles con tecnologías web. React Native es rápido y muchas de las aplicaciones, si se construyen correctamente, están a la altura de las aplicaciones nativas que se construyen en Swift o Java. React tiene una biblioteca de diseño de materiales llamada Material-UI que se parece mucho al componente de diseño de materiales de Angular pero más maduro. JS es un marco para renderizar aplicaciones React del lado del servidor. Su objetivo es hacer esto de la manera más simple posible para que pueda compararse con Angular Universal. MobX es otra forma de administrar el estado. Funciona un poco diferente que redux. Proporciona un conjunto de decoradores para definir observables y observadores e introduce la lógica reactiva en su estado.

Storybook es un entorno de desarrollo para React. Le permite explorar una biblioteca de componentes, ver diferentes estados de cada componente y desarrollar y probar componentes de forma interactiva. Reactive VR está llevando a React a la realidad virtual. React Desktop es una biblioteca de JavaScript construida sobre la biblioteca Reacts que supuestamente brinda una experiencia de escritorio nativa a la web, con muchos componentes de macOS y Windows 10. El ecosistema React es extremadamente grande y poderoso. React se está abriendo camino en todos los aspectos de la tecnología y es un claro ganador.

Ganador: Reaccionar

La gente de traje y corbata usa Angular y los hipsters con barbas desaliñadas usan React.

	AngularJS	Reaccionar
Principales desarrolladores	Google	Facebook+Instagram
Años	6 años	2 años
Extensibilidad	Sí	Sí
Velocidad*	1,35 segundos	310 milisegundos
DOM	Navegador	Virtual; solo vuelve a representar los datos modificados con el mecanismo de parcheo
Arquitectura	Marco MVC completo	Solo el componente de vista
Curva de aprendizaje	Difícil al principio; requiere conocimiento de conceptos específicos como directivas DOM, filtros y fábricas.	Más fácil de empezar; contiene una API y una sintaxis simplificadas
Estructura y Componentes	HTML,JS y CSS	Mismo; pero puede integrar HTML con JS, usando JSX

En pocas palabras: es un empate

Si está decidiendo entre estos marcos, mire las diferentes categorías y vea qué le interesa. Pruébelos a ambos y vea cuál elige más rápido. Investigue un poco más que este blog. Nunca obtendrás toda la información que necesitas de un blog, así que lee un poco más.

Si está buscando un ecosistema más grande que incluya el desarrollo de aplicaciones móviles nativas, elija React sin pensarlo dos veces. Si buscas características, Angular es enorme. Hay más funciones de las que necesita.