Google y Facebook son los gigantes digitales que siempre compiten. Sus soluciones para desarrolladores Angular y React también parecen rivales. Indeema ayuda a comparar ambos. El artículo fue publicado originalmente
aquí.Al comienzo de su desarrollo, las plataformas web SPA carecían de un sistema flexible pero simple para crear proyectos que pudieran enmendar y, en algunos casos, reemplazar aplicaciones móviles y de escritorio. En ese momento, un usuario cuyo problema era bastante simple tenía que encontrar una aplicación capaz de resolver el problema. Con el tiempo, las tecnologías siguieron avanzando, lo que hizo que los servicios web ganaran popularidad, ya que no era necesario instalarlos. Lo que se necesitaba es visitar un sitio web para acceder a uno u otro servicio. Anteriormente, tales tareas podían resolverse a través de sitios web escritos en ActionScript o Java. Sin embargo, esos sistemas requeridos para instalar Flash o Java están al mismo tiempo lejos de la velocidad esperada por los usuarios.
En ese momento, JavaScript evolucionó lo suficiente como para dejar atrás a sus rivales debido a la alta velocidad, la simplicidad de desarrollo y el soporte continuo de los desarrolladores de los navegadores. La era de JavaScript comenzó a generar una definición como SPA (Aplicación de página única) que proporcionó un nuevo enfoque para el desarrollo de plataformas web. A diferencia de su precursor MPA (Multi-Page Application), SPA permitió que un servicio web funcionara mucho más rápido y le proporcionara una funcionalidad más sofisticada capaz de cambiar dinámicamente de acuerdo con las necesidades de los usuarios. El mayor inconveniente estaba en JavaScript puro, que no podía proporcionar un desarrollo rápido cuando incluso un servicio web SPA primitivo requería mucho tiempo para crearse. Es por eso que Google decidió apoyar el enfoque con un marco que podría ayudar a varias compañías a desarrollar servicios web complicados sin gastar demasiado tiempo.
AngularJS fue la primera etapa en el desarrollo de SPA que permitió crear plataformas web de SPA complicadas. Además, también proporcionó el desarrollo de aplicaciones móviles híbridas junto con programas de escritorio. Después de la aparición de AngularJS, algunas otras empresas decidieron participar también en el desarrollo de sistemas web SPA. Por otro lado, Facebook ha descubierto su propio enfoque para el desarrollo de plataformas web. React fue una de las primeras bibliotecas capaces de competir con rivales tan fuertes como AngularJS. Sin embargo, ambos sistemas son únicos para diferir significativamente al abordar desafíos similares. A diferencia de AngularJS, que se representa solo como un marco de SPA, React puede trabajar con MPA y SPA. Angular es un marco de JavaScript creado sobre la base de TypeScript.
Google es la compañía que sigue desarrollando y respaldando el marco. Al principio, apareció la versión de Angular 1, que también se conocía como AngularJS. La primera versión estaba usando JavaScript puro como un enfoque de prueba para el desarrollo de una funcionalidad más poderosa. Angular 2 o ng2 + después de AngularJS se mejoró críticamente. La actualización más significativa de Angular implicó una transición a una nueva plataforma TypeScript. Desde entonces, el marco comenzó a funcionar mucho más rápido que la primera versión. Además, la barrera de entrada se hizo mucho más baja. En Angular aparecieron funciones tales como Interfaces, Clases y mecanografía fuerte. Una de las características cruciales es
angular / cli que facilita el desarrollo del proyecto. Proporciona la capacidad de crear un proyecto junto con módulos, servicios y componentes. Además, la característica permite implementar el proyecto proporcionando su posterior depuración a través de las pruebas e2e integradas. Por cierto, una versión Angular 6 ya está disponible. Esta es una versión actualizada y corregida de errores de Angular 2 que tiene muchas capacidades nuevas. En la actualidad, Angular se aplica a Google, Wix, weather.com, healthcare.gov, Forbes.
Al momento de escribir este artículo, la última versión de Angular 6 es el marco más rápido que proporciona el desarrollo de plataformas web SPA. La sintaxis de TypeScript que representa varias capacidades para el desarrollo es la más cercana a JavaScript. Las actualizaciones disponibles son las siguientes:
- escritura estática
- decoradores
- interfaces
- espacios de nombres
React es una biblioteca de JavaScript desarrollada por Facebook que sigue apoyándola junto con el lanzamiento de nuevas versiones. Sin embargo, el enfoque de React implica el uso de componentes que se pueden mostrar en la misma página sin ser SPA. Facebook es más proactivo en el uso de React en sus propios proyectos que Google con Angular. La principal diferencia con Angular implica usar JSX y Virtual DOM. La capacidad básica de JSC proporciona la creación de componentes renderizados al poner código similar a HTML en archivos JS. Como resultado, React procesa el código para mostrar finalmente un HTML dinámico que se puede cambiar según la situación. React se usa en Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart.
La peculiaridad de React radica en el uso de JavaScript, que es suficiente para comenzar el desarrollo. La escritura dinámica en JavaScript no permite determinar si se entrega un tipo correcto de datos a un componente. Dicha verificación recae sobre los hombros de un desarrollador que tiene que rastrear la situación de ese tipo en un código. La principal ventaja de React es usar la última versión de JavaScript que permite a un desarrollador aprender nada más que React.
Desarrollo central
Para analizar las razones de la popularidad de Angular y React, vale la pena considerar las estadísticas detalladas. La página de equipo de Angular contiene 36 desarrolladores, mientras que React no tiene ninguna página de equipo. El popular recurso web GitHub dedicado a proyectos de código abierto representa 40,490 estrellas de clasificación junto con 1,714 contribuyentes para Angular. A su vez, React tiene 110 961 estrellas y 1,200 contribuyentes respectivamente. La tabla a continuación representa las estadísticas de las estrellas de clasificación que pertenecen tanto a Angular como a React.
Como podemos ver, React tiene muchas más estrellas que Angular, y la brecha está creciendo continuamente.
El administrador de paquetes npm proporciona otras estadísticas que ofrecen el número de descargas para Angular y React.
Una vez más, vemos cuán activamente React supera a Angular también en las descargas. Y el último gráfico que nos gustaría que revises es Google Trends, que detecta la popularidad en función de la cantidad de solicitudes disponibles en el sistema de búsqueda de Google.
La situación es un poco diferente aquí. Al principio, Angular fue más popular en la búsqueda, pero luego la tendencia se invirtió. Según los últimos datos, React está en la parte superior de las búsquedas ahora, mientras que Angular lo sigue de cerca.
Es posible que no ignoremos un recurso popular Stack Overflow que realizó una encuesta sobre quién prefiere qué con respecto a Angular y React. AngularJS (la versión Angular 2 estaba más allá de la encuesta, desafortunadamente) obtuvo el 52% de los votos, mientras que React alcanzó el 67%. En respuesta a la pregunta sobre la falta de interés para un mayor desarrollo, el marco de Google obtuvo el 48% de los votos, mientras que su competidor alcanzó solo el 33%. La importante pregunta sobre la intención de volver a utilizar el marco más tarde representó a React con el 92% de los votos, mientras que Angular alcanzó solo el 65%. Basándonos en los datos antes mencionados, podemos llegar a la conclusión de que React es más popular entre los desarrolladores que Angular. En cualquier caso, React y Angular juntos ocupan el 100% de popularidad en el mercado, lo que implica su liderazgo durante mucho tiempo.
TypeScript vs ES6 y JSX
Para examinar dos sistemas diferentes de la manera más objetiva, primero debemos verificar sus principales diferencias. Esta vez, consideraremos solo las versiones "listas para usar". Sin embargo, todos pueden acoplar JSX con Angular y TypeScript con React.
¿Por qué TypeScript?
TypeScript es una mejora especial de JavaScript desarrollada por
Microsoft . Permite trabajar con tipeo estático junto con herramientas confiables. Los desarrolladores que trabajan con JavaScript pueden evitar numerosos errores gracias a la solución. TypeScript informa acerca de los errores antes de guardar el archivo, lo que permite escribir código muchas veces más rápido. Tal práctica permite a los desarrolladores centrarse en los problemas realmente importantes.
Además, otra capacidad importante de TypeScript proporciona el establecimiento de un equipo de desarrollo. Por lo general, 1-2 personas están involucradas en el desarrollo con JavaScript, mientras que su funcionalidad básica limita un equipo a 5 desarrolladores. Aún queda mucho por cumplir mientras que el resto no funciona correctamente. La optimización en JavaScript depende de los desarrolladores que tienen que decidir si optimizar algo o no por su cuenta. React casi no ha realizado mejoras en los inconvenientes que ya se han resuelto con TypeScript.
De hecho, los desarrolladores pertenecen a dos campos opuestos. Algunos creen que TypeScript es solo la versión de JavaScript que aparecería desde el principio. Los otros consideran la escritura dinámica como lo que necesitan en JavaScript. Es difícil determinar qué opinión debería ser la más adecuada. Muchos lenguajes de programación contemporáneos admiten tanto la tipificación dinámica como la estática. En tal situación, mucho depende de las preferencias personales de cada desarrollador en particular. Veamos un caso ejemplar de cuánto mejor se comporta TypeScript en comparación con JavaScript para comprender qué tan bien considerado es TypeScript en términos de desarrollo
Es obvio que un desarrollador cometió un error ya que en lugar de una cadena, él / ella entregó boolean. Por lo tanto, se crea un error sin ser rastreado que puede conducir a un error que otro desarrollador podría cometer ya que el error no se identificó de inmediato.
Así es como se escribe el mismo código en TypeScript:
Determinamos el tipo de datos esperados para los argumentos de una función junto con lo que se devolverá. Inmediatamente encontramos un error en un código después de la compilación.
Ese fue uno de los casos simples que revela la calidad de un proyecto. Además, muestra qué búsqueda de errores lleva mucho tiempo mientras TypeScript los rechaza al prohibir la compilación.
Reaccionar piensa lo contrario
Todos los desarrolladores de React tienen la oportunidad de trabajar con una sintaxis especial tipo HTML JSX para representar componentes. Desafortunadamente, TypeScript en Angular y React no pueden prescindir de JSX. Dado que TypeScript se considera casi un lenguaje de programación separado, es necesario tomar un curso de TypeScript antes de pasar a Angular. Pero los desarrolladores de React solo necesitan revisar una breve documentación de JSX para comenzar a codificar. Las únicas innovaciones agregadas por el sistema de desarrollo de sistemas SPA altamente cargados se mencionan anteriormente. De hecho, React ofrece nada más que una característica de representación de plantillas. Por lo tanto, un código escrito en React difícilmente será mejor que un código JavaScript puro. Algunos desarrolladores creen que React podría resolver algunos problemas de JavaScript o, al menos, mejorar sus capacidades.
Desarrollo de Facebook y SPA
Los desarrolladores de lenguajes de programación se esfuerzan por separar la Vista del código para facilitar el intercambio de un proyecto. Facebook, por otro lado, creía que mantener todo junto era un enfoque más apropiado para el desarrollo componente. Los proponentes de React tienen una visión ambivalente de tal enfoque. Algunos de ellos están tratando de limitar JSX al mínimo. Los otros desarrolladores utilizan activamente JSX sin tener idea de por qué rechazarlo. La sintaxis permite desarrollar y agregar componentes de manera simple, enfrentando, sin embargo, algunos problemas insignificantes tanto con el desarrollo de la plantilla HTML como con una mayor integración a React. Una solución más o menos correcta en el caso de un proyecto basado en React es la integración inmediata de un diseño en los componentes de React.
En un caso similar, Angular sigue un enfoque más tradicional cuando la lógica se separa de la Vista. Una vez que la solución angular se basa en el enlace de datos bidireccional, así como en su propio motor de plantillas, podemos integrar fácilmente una plantilla HTML en la vista para componentes angulares. Aunque la sintaxis del motor de plantillas Angular tiene sus propios pros y contras, hace que la dinámica de integración en View sea simple. Permite agregar el Modelo para usar dichos componentes en los otros componentes que, por lo tanto, conducen a la creación de sofisticados sistemas SPA.
Echemos un vistazo a un par de ejemplos con Angular y React. El enfoque de Angular a los componentes implica varios archivos:
componente.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-component', templateUrl: './component.html', styleUrls: ['./component.scss'] }) export class Component implements OnInit { this.component_title: String = “Hello world”; constructor() {} ngOnInit() {} }
componente.html <p> {{ component_title }} </p>
En el ejemplo dado, un componente muestra "Hola mundo" en medio de su Vista. Es más simple cuando se trabaja con React: un archivo es suficiente para crear un nuevo componente.
componente.js import React from 'react'; export class Component extends React.Component { render() { const text = "Hello world!"; return ( <p> {text} </p> ); }; }
Cada sistema tiene un enfoque diferente para la creación de componentes que tienen sus propios pros y contras. Y cada desarrollador debe decidir qué enfoque es más relevante para el desarrollo del proyecto.
Lo que los desarrolladores enfrentan al principio
Una vez que React es la biblioteca que no tiene soluciones potentes listas para usar, los desarrolladores tienen que encontrar los módulos que necesitan por su cuenta. Por otro lado, los desarrolladores de Angular se enfrentan a un conjunto de soluciones que no pueden rechazar desde el principio. Cada uno de los enfoques no implica la mejor solución. Los desarrolladores de React tienen que verificar la compatibilidad con la última versión de React cuando se involucren muchas bibliotecas nuevas. Tienen que hacer actualizaciones manualmente. Muchas bibliotecas son creadas no por Facebook. Es por eso que los desarrolladores tienen que esperar que los creadores de su biblioteca favorita actualicen su compatibilidad con una nueva versión de React a tiempo. Los desarrolladores de Angular tienen menos preocupaciones ya que la mayoría de las herramientas son creadas por Google y, por lo tanto, se actualizan en paralelo con una nueva versión de Angular. Por supuesto, los desarrolladores usan las bibliotecas de terceros para una u otra tarea, pero el número de dichas bibliotecas está significativamente por debajo del número que ofrece React. Además, menos de ellos son importantes para el correcto funcionamiento de un sistema.
Mientras que un desarrollador de React recibe solo un núcleo del sistema configurado para trabajar con JSX fuera de la caja, un desarrollador angular puede encontrar lo siguiente:
- CLI angular
- Pruebas E2E
- Formas
- Módulos para animación, localización, etc.
- Características de TypeScript
- Elementos angulares etc.
Un espectro de las herramientas Angulares aumenta continuamente para admitir más y más soluciones que permitan reducir la necesidad en las bibliotecas de terceros en el futuro de usar Angular de forma inmediata a plena capacidad.
Tamaño y rendimiento
Una vez que Angular es un marco, su tamaño es significativamente mayor que el tamaño de un React ligero. En términos de tamaño, Angular es inferior a su competidor. Sin embargo, algunos megabytes adicionales difícilmente pueden desempeñar un papel crucial en el mundo contemporáneo. Lo que es realmente importante para los desarrolladores es tanto el rendimiento como la velocidad que proporcionan un trabajo agradable con un sistema.
La siguiente es una comparación de referencia de Angular y React.
Como muestran las estadísticas, Angular funciona un poco más rápido que React. Angular 6 tiene un mejor rendimiento que Angular 4, pero incluso la versión anterior supera a su competidor.
Por supuesto, la diferencia no es demasiado grande, pero Angular puede proporcionar un mejor rendimiento cuando se está desarrollando un sistema sofisticado. Después de todo, los desarrolladores deben descubrir qué sistema es más relevante para sus tareas por su cuenta.
Soluciones universales y nativas
Tanto las soluciones universales como las nativas se implementan activamente en varios tipos de aplicaciones, como web, móvil y de escritorio. Tanto React como Angular ofrecen soluciones nativas compatibles. Angular tiene NativeScript (bajo el soporte de Telerik) para soluciones nativas junto con el marco iónico para desarrollar aplicaciones híbridas. React ofrece react-native-render para el desarrollo de soluciones multiplataforma, así como React Native para aplicaciones nativas. Ambas variantes están en el uso igualmente activo y no tienen casi ninguna diferencia para un usuario promedio en funcionamiento. Las soluciones permiten reducir la mano de obra cuando se crea un sistema que tiene aplicaciones web y nativas. Desafortunadamente, las soluciones híbridas no pueden ofrecer una alta velocidad ni estabilidad en la operación. Pero para tareas simples son suficientes.
Proceso de aprendizaje
Es bastante explicable que dominar Angular implica un proceso de aprendizaje más difícil. La documentación es amplia y difícil de aprender que requiere mucho más tiempo para la capacitación. Además, el aprendizaje de TypeScript se debe agregar al proceso que hace que los desarrolladores duden si la teoría angular vale la pena.
A pesar de que Google está tratando de simplificar el proceso de aprendizaje con tutoriales y artículos sobre cómo comenzar, la carga en los desarrolladores difícilmente puede reducirse. Reaccionar, por el contrario, permite comenzar a trabajar de inmediato, lo que requiere el conocimiento de JavaScript como la única condición.
Ambos sistemas ofrecen sus enfoques específicos para el desarrollo. De una forma u otra, pero los desarrolladores tienen que decidir qué es más importante para ellos. Es necesario darse cuenta de que tanto Angular como React implican métodos diferentes que los desarrolladores deben seguir cuando eligen uno u otro sistema para trabajar.
Conclusión
Tanto Angular como React son excelentes sistemas para ejecutar diversas tareas en el desarrollo de proyectos web. Angular se adapta mejor a los desarrolladores que desean tener todo lo necesario listo para usar sin pensar en actualizaciones manuales ni en bibliotecas de terceros. React, a su vez, permite configurar un proyecto de manera más flexible de acuerdo con sus objetivos.
Ambas soluciones tienen sus pros y sus contras específicos. Y la comprensión de ellos debe tenerse en cuenta cuando se toma una decisión final sobre qué elegir. Los usuarios finales apenas pueden distinguir un enfoque de otro si ambos se desarrollan de manera correcta y de alta calidad.
Un desarrollador que tenga experiencia laboral con TypeScript probablemente elegirá Angular como marco básico. Quien prefiera controlar varias bibliotecas dentro de un proyecto optará por React.
No hay una solución totalmente universal disponible: la elección depende de usted de acuerdo con los objetivos del proyecto que persiga.
Artículo original -
React vs Angular: cómo una biblioteca puede competir con un marco