Una comparación entre Angular y React y sus idiomas principales

Angular Vs React
Última actualización: 18.01.2019

En este artículo, compararemos dos de las tecnologías web más populares en 2019, y también abordaremos su historial, las diferencias clave, los idiomas principales recomendados (TypeScript y JavaScript), etc. En general, estas tecnologías han hecho que sea mucho más fácil para los desarrolladores reutilizar, refactorizar y mantener el código al dividir las cosas en módulos / componentes.

El objetivo de este artículo no es encontrar la mejor tecnología, sino comparar, resaltar y aclarar algunos conceptos erróneos. También nos centraremos en lo que es importante en lugar de detalles menores que realmente no importan a largo plazo.

Debe tener en cuenta que la comparación entre estas dos tecnologías no se puede cubrir completamente. Angular viene con un marco completo (MVC), mientras que React es una biblioteca con muchos paquetes de código abierto para integrar.

Si desea convertirse en un mejor desarrollador web, comenzar su propio negocio, enseñar a otros o simplemente mejorar sus habilidades de desarrollo, suscríbase a mi boletín para recibir las últimas noticias y actualizaciones web.

Preguntas a abordar

  • ¿Cuáles son las diferencias clave entre Angular y React?
  • ¿Qué hace que TypeScript sea tan especial?
  • ¿Qué tan populares son estas tecnologías?
  • ¿Cuál es el estado actual de código abierto?
  • ¿Qué tecnología usan más las empresas?
  • ¿Los lenguajes tipados estáticos influyen en la calidad del código y el tiempo de desarrollo?

Las secciones futuras se agregarán según la demanda de los comentarios.

Comparaciones clave

Aquí hay una comparación rápida de lado a lado entre Angular (izquierda) y Reaccionar (derecha).

Angular y reaccionar

Una cosa que es realmente genial sobre React en términos de rendimiento es el DOM virtual, del que probablemente hayas oído hablar un par de veces. Si no, no te preocupes, ¡te lo explicaré!

Problema
Supongamos que desea actualizar la fecha de nacimiento de un usuario dentro de un bloque de etiquetas HTML.

DOM virtual
Solo actualiza la parte requerida al ver las diferencias entre la versión HTML anterior y la actual. Es un enfoque similar a cómo funciona GitHub al detectar cambios en el archivo.

DOM regular
Actualizará toda la estructura de árbol de las etiquetas HTML hasta que alcance la fecha de nacimiento.

¿Por qué eso importa?

Puede que no importe el problema descrito anteriormente. Sin embargo, si tratamos con 20–30 solicitudes de datos asíncronos en la misma página (y por cada solicitud de página reemplazamos todo el bloque HTML), influirá en el rendimiento y en la experiencia del usuario.

¿Necesitas más contexto? ¡Mira el artículo de Dace!

Pero primero, de vuelta al principio ...

Historia

Necesitaremos conocer un poco de historia (contexto) porque proporciona información sobre cómo las cosas pueden mejorar en el futuro.

No entraré en detalles sobre lo que sucedió exactamente entre Angular y AngularJS, y estoy seguro de que hay muchos recursos disponibles que lo cubren. Pero en resumen, Google reemplazó AngularJS con Angular y JavaScript con TypeScript.

Muy bien, entonces, en los días con ES4 / ES5, la curva de aprendizaje para JavaScript era realmente alta. Si viniste del mundo de Java, C # o C ++, un mundo de programación orientada a objetos (OOP), entonces aprender JavaScript simplemente no era tan intuitivo. En otras palabras, fue un dolor en el culo.

No es porque el idioma esté mal escrito, sino porque tiene un propósito diferente. Fue construido para manejar la naturaleza asincrónica de la web, como la interacción del usuario, el enlace de eventos, las transiciones / animaciones, etc. Es un animal diferente con instintos diferentes.

Popularidad

Como revela Google Trends, Angular y React son dos de las tecnologías web más populares en 2019.

Angular tiene más resultados de búsqueda que React, sin embargo, no necesariamente significa que uno sea mejor que el otro. Pero esto indica lo que la gente encuentra interesante, cualquiera sea la razón. Es importante tener en cuenta que las personas pueden mezclarse entre palabras clave como AngularJS o Angular y, por lo tanto, generar mayores resultados de búsqueda.

Una cosa es segura: ambas tecnologías están creciendo y el futuro parece brillante. Eso significa que no tiene que preocuparse si una tecnología fallará y lo dejará atrás.

Es importante que no descuidemos la historia en términos de lo que sucedió entre AngularJS y Angular, porque la historia es una forma de indicación de lo que puede suceder en el futuro. Pero si tiene algo de experiencia con Angular y AngularJS, entonces probablemente verá por qué las decisiones se tomaron para mejor. Solo por mencionar, tales cosas pueden sucederle a cualquier marco, incluido React.

Google Trends Angular vs React

Fuente abierta

React tiene más de 100,000 estrellas, junto con 1200 colaboradores y cerca de 300 problemas en espera de ser resueltos.

React tiene una ventaja de tiempo de comercialización, ya que se lanzó 3 años antes de Angular. Y eso significa que se ha enfrentado a muchos problemas del mundo real, ha pasado por pruebas críticas y, en general, se ha convertido en una biblioteca con frente adaptable y flexible que muchos adoran.

Cuando se trata de Angular, a primera vista, podemos ver claramente que Angular tiene 6 veces más problemas que React (no es bueno). Sin embargo, no debemos olvidar que Angular es un marco mucho más grande y también tiene menos desarrolladores que lo usan (actualmente) porque se lanzó en 2016.

Angular y reaccionar: popularidad de Github
Estadísticas tomadas de la página Angular y Reacts GitHub.

Qué compañías están usando

React se desarrolló inicialmente en Facebook para Facebook para optimizar y facilitar el desarrollo de componentes. Un artículo escrito por Chris Cordle señala que React tiene un mayor uso en Facebook que Angular en Google.

Entonces, ¿quién usa qué tecnología?

# Reaccionar

  • Facebook
  • AirBnb
  • Uber
  • Netflix
  • Instagram
  • Whatsapp
  • Dropbox

# Angular

  • Eat24
  • Tienda de CVS
  • onefootball
  • Google Express
  • NBA
  • Delta
  • wix.com
Si conoce empresas grandes (conocidas) que utilizan Angular, comparta con un enlace.

TypeScript y JavaScript (ES6 +)

Como mencioné, puede ser engañoso comparar solo Angular y React sin enfocarse en el lenguaje central que cada uno enfatiza (de acuerdo con sus documentos).

¡Nota! El objetivo de esta sección no es decidir si elegiremos Angular o React. Pero aclare algunos conceptos erróneos entre lenguajes de tipo estático frente a los de tipo dinámico que han estado sucediendo durante un tiempo, respaldados por investigaciones.
TypeScript (izquierda) vs JavaScript (derecha)

En términos de base de usuarios, JavaScript es superior. Pero TypeScript está aumentando rápidamente, así que quién sabe qué traerá entre 10 y 15 años.

Popularidad de TypeScript en los últimos 5 años

Tendencias de Google: popularidad de TypeScript

Popularidad de JavaScript en los últimos 5 años

Tendencias de Google: popularidad de JavaScript

Popularidad de JavaScript vs TypeScript en los últimos 5 años

Tendencias de Google: popularidad de TypeScript y JavaScript

TypeScript fue desarrollado inicialmente por Microsoft para facilitar JavaScript (en otras palabras, para facilitar ES5). Fue lanzado en octubre de 2012. Y es simplemente un transpilador que compila TypeScript en código JavaScript, lo que también significa que puede escribir código ES5 en un archivo TypeScript. TypeScript se conoce como un superconjunto de JavaScript.

En general, TypeScript proporciona una transición suave para programadores con un fondo de programación orientada a objetos (OOP). Es importante tener en cuenta que TypeScript se lanzó en el período de ES5, y durante ese tiempo, ES5 no era un lenguaje OOP basado en clases.

En resumen, lo más cerca que se podía llegar a clases y objetos en ese momento era a través de la herencia de prototipos. Y como sabemos, esta fue una transición difícil para la mayoría de los desarrolladores con experiencia en OOP. Por lo tanto, la decisión ideal era, por supuesto, elegir algo con lo que se sintiera cómodo y familiar, que probablemente era TypeScript.

Sin embargo, en los últimos años, JavaScript ha evolucionado e implementado muchos cambios excelentes, como módulos, clases, operadores de propagación, funciones de flecha, literales de plantilla, etc. En general, permite a los desarrolladores escribir código declarativo, al tiempo que admite las características de un verdadero lenguaje OOP (es decir, incluida la estructura basada en clases).

Lenguajes de tipo estático y dinámico

Un lenguaje de tipo estático básicamente significa que puede definir el tipo de variable (cadena, número o matriz, etc.). Puede preguntar por qué esto es importante. Aquí hay una analogía del mundo real que configuré (creatividad en su mejor momento).

Supongamos que desea reabastecer de combustible su automóvil con gasolina. Una cosa que es importante es alimentar con el gas adecuado: gasolina o diésel. Y si no lo sabe, es posible que deba comprar un auto nuevo.

Por supuesto, la gravedad no es así con la codificación, sin embargo, en algunos casos puede ser. Piénsalo. Si trabaja con una aplicación grande, le gustaría saber el argumento y el tipo de propiedad que se pasa; de lo contrario, puede romper el código.

Muy bien, así que si aún estás confundido sobre lo que significa estáticamente escrito, mira esto:

Propiedad con tipo estático

Comparación de propiedades de tipo estático entre JavaScript y TypeScript

Argumento escrito estático

Comparación de argumentos de tipo estático entre JavaScript y TypeScript

Aprendí que mucha gente cree que un lenguaje escrito de forma estática significa código confiable, y se usa con mayor frecuencia como argumento ganador sobre los idiomas escritos dinámicamente. Y, francamente, es bastante difícil refutar esta afirmación porque se basa fundamentalmente en el entorno de desarrollo, la experiencia de los programadores y, por supuesto, los requisitos del proyecto.

Afortunadamente, la investigación (tl; dr video) se ha tomado esto en serio y ha puesto a prueba este mito con 49 sujetos.

Las observaciones de la investigación son:

  • El lenguaje estáticamente escrito requiere más tiempo debido a la corrección de errores tipográficos
  • El lenguaje escrito dinámicamente es legible y más fácil de escribir (código declarativo)

La Figura 5 muestra que, en promedio, los desarrolladores reducen su tiempo de desarrollo en un factor de dos cuando escriben un lenguaje de tipo dinámico.

Si desea profundizar en este tema, le sugiero que lea este artículo de Eric Elliott que dice que es posible que no necesite TypeScript (o lenguajes estáticamente escritos).

Que elegir

Por lo tanto, la pregunta no es solo sobre qué ofrece Angular o React, sino también sobre en qué idioma principal debe invertir tiempo. Y en realidad no importa mientras elija algo que se ajuste a sus requisitos y complejidad.

Si no eres fanático de los tipos, entonces no hay nada que se interponga en tu camino al escribir código ES6 en TypeScript. Es solo que si lo necesitas, entonces está ahí.

Pero si crea una aplicación front-end bastante grande con Angular que maneja muchas solicitudes HTTP, entonces tener tipos realmente ayuda con preguntas como "¿Qué tipo de objeto es este, qué campos puedo usar y qué tipo es este campo, etc." . Funciona muy bien para la colaboración y para aclarar cosas pequeñas.

Aquí hay una comparación simple de clase-objeto entre TS y JS (ES6).

MecanografiadoJavaScript (ES6)

OMI

La escritura estática se siente estructurada, segura, legible y fácil de colaborar con otros (evita que las personas pasen valores inesperados). Sin embargo, cuando trabajo con tipos dinámicamente, tengo la flexibilidad y la creatividad para centrarme más en la creación que en pensar mucho en los tipos, interfaces y genéricos, etc.

Y a partir de las aplicaciones web anteriores que he creado, realmente no he tenido grandes problemas con no tener tipeo estático. No significa que no me guste, solo que no lo necesito, pero tal vez lo haga en el futuro.

Aquí hay una actualización: actualmente estoy trabajando con un par de desarrolladores de Microsoft para crear una aplicación usando Angular Framework. La razón por la que hemos seleccionado Angular es porque la mayoría de los paquetes ya están definidos y la documentación de todo está en un solo lugar. También hace hincapié en TypeScript, que es una opción perfecta porque la mayoría de los desarrolladores ya tienen mucha experiencia con la programación orientada a objetos.

Por otro lado, he visto aplicaciones similares con las que estamos trabajando creadas con React. Por lo tanto, en general, ambas son herramientas poderosas y dependen principalmente de cómo configura la arquitectura.

Notas para llevar

  • TypeScript es simplemente un transpilador, se puede usar con React o cualquier otro marco JS
  • React maneja la gestión de memoria de manera eficiente (DOM virtual)
  • React utiliza JavaScript (ES6), un lenguaje web reconocido desde 1995
  • Angular usa TypeScript, lanzado en 2012
  • El lenguaje estáticamente escrito es excelente, pero no es obligatorio
  • Los idiomas escritos dinámicamente requieren menos tiempo para escribir y más flexibilidad para usar la creatividad.
  • Aprender un lenguaje de tipo estático puede ser un desafío, especialmente si solo ha estado trabajando con idiomas de tipo dinámico
  • ES6 ha implementado muchas características excelentes, como módulos, clases, operador de propagación, funciones de flecha, literales de plantilla que le permiten escribir menos código, más limpio y más estructurado (azúcar sintáctico)
  • TS es simplemente ES6 + con tipos y mucho más

Conclusión

El marco / biblioteca de componentes que elija puede influir en la cantidad de tiempo que dedica a la programación y su presupuesto. Si tiene un equipo con desarrolladores de C #, Java o C ++, entonces probablemente optaría por Angular, ya que TypeScript comparte muchas similitudes con estos lenguajes.

La mejor recomendación que puedo ofrecer es configurar una aplicación básica tanto en Angular como en React, y luego evaluar el lenguaje y el flujo de trabajo antes de tomar una decisión.

Como se mencionó anteriormente, ambas tecnologías tienen su propio conjunto de ventajas y similitudes, y realmente se reduce a qué tipo de requisitos ofrece la aplicación, la complejidad y el nivel de experiencia que tienen los desarrolladores.

Aquí hay algunos artículos que he escrito sobre el ecosistema web junto con consejos y trucos de programación personal.

  • Una mente caótica conduce a un código caótico.
  • Desarrolladores que constantemente quieren aprender cosas nuevas.
  • Una guía práctica para los módulos ES6.
  • Aprenda estos conceptos web básicos
  • Mejora tus habilidades con estos importantes métodos de JavaScript
  • Programe más rápido creando comandos bash personalizados

Puedes encontrarme en Medium donde publico semanalmente. O puede seguirme en Twitter, donde publico consejos y trucos relevantes para el desarrollo web junto con historias personales.

PD Si disfrutaste este artículo y quieres más, aplaude ❤ y compártelo con amigos que lo necesiten, es buen karma.