Saltar al contenido

ReactJS vs AngularJS | Vinova

¿Qué vamos a comparar?

A medida que pasa el tiempo, la respuesta a esta pregunta se vuelve más complicada. Si lo miramos desde el ángulo de dos bibliotecas de Javascript, aquí lo que obtendremos: una biblioteca ReactJS relativamente pequeña para construir interfaces de usuario y un marco de desarrollo de aplicaciones web AngularJS completo. Bueno, si fuera así de sencillo, lo más probable es que este artículo no existiera.

Las cosas son más complicadas de lo que pueden parecer al principio, en parte debido a las diferencias entre las versiones de AngularJS. Por otro lado, ReactJS no es tan simple como puede suponer. Ha adquirido componentes como React Router y Redux, que junto con la propia biblioteca funcionan como un ecosistema serio. En este artículo, a veces me referiré a ReactJS en sí, mientras que otras veces mencionaré el ecosistema de ReactJS. En cuanto a AngularJS, me referiré a diferentes versiones, incluido el nuevo AngularJS 4 (que estuvo disponible el 23 de marzo de 2017), que es compatible con Angular 2.

Este es un artículo actualizado del que se publicó el 8 de julio de 2016. Por eso, quisiera mencionar las principales noticias que se han producido desde el primer artículo. Angular 2 salió con el control de versiones del sistema semántico que estaba destinado a hacer que el cambio entre versiones fuera más significativo. Sin embargo, más tarde, cuando llegó el momento de cambiar a Angular 3, esta mejora causó en parte el problema. Finalmente, debido a desalineaciones en las versiones de Angular, el enrutador de paquetes no pudo encontrar Angular 3. Así es como se omitió la tercera versión y después de varias versiones beta, Angular v4 se lanzó recientemente.

Marco vs conjunto de bibliotecas

AngularJS es un marco de desarrollo de aplicaciones web y, como todos los demás marcos, proporciona muchas soluciones listas para usar, por lo que muchas decisiones de diseño funcional solo están prescritas por el marco. No significa que comenzar un nuevo proyecto con AngularJS sea pan comido. Pero después de pasar un tiempo leyendo y jugando con el marco, sabrá en qué partes consta, cuáles son sus responsabilidades / propósitos, qué convenciones existen, dónde tienen que estar las cosas, etc.

El lado oscuro de la luna aquí es que puede encontrarse luchando con el marco a veces en lugar de lidiar con las tareas del proyecto. Si algo sale mal, o necesita algo para lo que el marco no está diseñado, puede terminar dedicando una gran cantidad de tiempo a resolver las cosas. Sin embargo, esto no es algo exclusivo de AngularJS. AngularJS es un buen marco para desarrolladores con una gran comunidad llena de consejos útiles y extensiones útiles.

A diferencia de AngularJS, el ecosistema ReactJS es una solución construida con muchas herramientas componibles y de un solo propósito en las que ReactJS es solo un bloque de construcción. Puede agregar solo lo que necesita para su aplicación, lo cual es bueno porque puede crear una solución liviana de alto rendimiento que aborde exactamente el problema que necesita abordar.

Este enfoque, por supuesto, tiene sus desventajas. En las primeras etapas del trabajo con ReactJS, los desarrolladores necesitarán dedicar mucho tiempo a averiguar qué biblioteca necesita usar para una tarea en particular, cómo integrarla con otras bibliotecas y, finalmente, aprender las bibliotecas que probablemente estén escritas por diferentes equipos y desarrolladores, y pueden utilizar diferentes convenciones y filosofía.

Es probable que los recién llegados hagan preguntas que pueden parecer extrañas, como “¿Dónde escribo las llamadas a la API?”, Que, de hecho, no son tan obvias. Por supuesto, con la experiencia práctica y las hojas de ruta de aprendizaje para recién llegados, las cosas mejorarán pronto.

Para concluir, AngularJS y ReactJS ofrecen diferentes enfoques para crear aplicaciones para empresas de desarrollo, y ninguno de ellos es mejor que el otro. Dependiendo de los casos de uso de la aplicación y los requisitos específicos del sistema, pasará del desarrollo de AngularJS a ReactJS y viceversa.

Cuando opta por AngularJS, generalmente significa que será el marco principal para una aplicación frontend, mientras que ReactJS se puede usar para mejorar partes particulares de la aplicación. Por ejemplo, puede usarlo solo para una sola página en su sitio web, o puede integrarlo con otros marcos, como Backbone o incluso AngularJS (así es, diríjase aquí para ver un ejemplo).

Estamos hablando de desarrollo de frontend aquí, por lo que la forma en que una herramienta en particular crea la interfaz de usuario es muy importante.

La primera diferencia es que AngularJS pone JavaScript en HTML, mientras que ReactJS pone HTML en JavaScript. Sin duda, el enfoque de AngularJS es más conveniente para muchos desarrolladores frontend. Además, poner HTML en JavaScript se ha considerado una mala práctica durante mucho tiempo. Tal decisión puede parecer extraña, pero tiene sus beneficios.

El equipo de desarrollo de ReactJS describió muy bien el fundamento de esta decisión:

“Creemos firmemente que los componentes son la forma correcta de separar preocupaciones en lugar de” plantillas “y” lógica de visualización “. Creemos que el marcado y el código que lo genera están íntimamente ligados. Además, la lógica de visualización es a menudo muy compleja y utilizar lenguajes de plantilla para expresarla se vuelve engorroso.

Descubrimos que la mejor solución para este problema es generar HTML y árboles de componentes directamente desde el código JavaScript, de modo que pueda usar todo el poder expresivo de un lenguaje de programación real para crear interfaces de usuario.

Para facilitar esto, hemos agregado una sintaxis similar a HTML opcional muy simple para crear estos nodos de árbol de React “.

Sin JSX (una extensión de la sintaxis de Javascript que se parece a XML), definitivamente votaría por el enfoque AngularJS. Sin embargo, JSX ayuda a crear un código de componente de interfaz de usuario más legible que hace la vida mucho más fácil. Aún así, los desarrolladores se tomarán un tiempo para familiarizarse con JSX.

La segunda diferencia es que ReactJS ha sido una herramienta de “enlace unidireccional” desde el principio. AngularJS 1.x era una herramienta de “enlace bidireccional”. Si bien el “enlace bidireccional” era un enfoque amado por muchos desarrolladores, en Angular 2.x, se eliminó. Debido a esto, no voy a comparar estos enfoques. Solo mencionaré que “enlace unidireccional” en Angular 2.xy en ReactJS no es lo mismo.

El mecanismo de unión es completamente diferente. Proporciona una funcionalidad más amplia en Angular 2.x en comparación con ReactJS. En ReactJS, el flujo de renderizado unidireccional es muy sencillo, rápido y fácil de entender, depurar y rastrear en comparación con el “enlace bidireccional” implementado en AngularJS 1.x.

En Angular 2.x, hay un nuevo enfoque de detección de cambios (y un enfoque de manipulación de dom), que está destinado a basarse en clases de detector de cambios generadas en tiempo de ejecución y acelerar el rendimiento. Angular v4 está hecho para volverse más pequeño y más rápido al mismo tiempo, pero mediante un enfoque diferente: el tamaño del código generado por AOT se redujo a más de la mitad.

El enfoque de detección de cambios de ReactJS se basa en Virtual DOM, lo que significa que ReactJS diferencia el DOM del nuevo estado con el estado anterior y solo muestra la diferencia. Este enfoque es fácil de entender y rastrear con los complementos de depuración de ReactJS. Incluso si el enfoque de Angular 2.x tiene un mejor rendimiento, sigo pensando que el enfoque de ReactJS seguirá siendo más simple y mejor.

IDE, HERRAMIENTAS

El desarrollo de AngularJS no requiere nada especial, por lo que puede continuar usando su IDE favorito con soporte de JavaScript sin ningún problema. Con AngularJS, necesitaría usar ES5, mientras que con Angular 2.x, sería TypeScript y sus versiones más nuevas (2.1 y 2.2) para Angular v4. Finalmente, podrá administrar plantillas en HTML para todos ellos.

Con ReactJS, puede ver el código escrito en ES5, ES6 o incluso en TypeScript, además probablemente tendrá que escribir JSX. Esta gran variedad puede causar problemas con la toma de decisiones: ¿qué lenguaje de secuencias de comandos debería usar y qué tal el soporte IDE?

Parece que en este momento, el mejor IDE que admite todas estas cosas es WebStorm. Si esta no es una opción, y usted, por ejemplo, usa Microsoft Visual Studio, simplemente instale las extensiones necesarias (solo para tener en cuenta, Web Essentials hace la vida más fácil) disponibles para Angular y ReactJS.

En resumen, es posible crear un entorno de desarrollo funcional para todas estas opciones, pero habrá que esforzarse un poco. Muchos proveedores de IDE están trabajando en la compatibilidad con ES6. Por ejemplo, Microsoft Visual Studio Code ya es compatible con ES6.

RUTA DE APRENDIZAJE

Según mi experiencia personal, la ruta de aprendizaje del ecosistema ReactJS no es tan fácil, pero sigue siendo más fácil que la ruta de aprendizaje de AngularJS. Para ser más precisos, es más fácil comenzar con AngularJS, pero la segunda etapa, en la que te encuentras con complicaciones y, a veces, luchas con el framework / bibliotecas, es mucho más fácil con el desarrollo de ReactJS.

Por ejemplo, en nuestros proyectos, tuvimos problemas de renderizado y enrutamiento, y fue mucho más fácil encontrar las causas de estos problemas en los proyectos React que en los proyectos AngularJS. Sin embargo, Angular 2 ya tenía una opción para usar las posibilidades de pre-renderización del lado del servidor por medio de Angular Universal, mientras que en Angular 4, incluso mejor, está incluido en el marco.

De hecho, el soporte de renderizado del lado del servidor, disponible en Angular 4, está destinado a mejorar significativamente el rendimiento y ayudar con la optimización para los motores de búsqueda.

UNA COSA MÁS

AngularJS es mantenido por Google y se usa en algunos proyectos de Google, pero eso no lo convierte en una misión crucial para el gigante tecnológico. ReactJS fue desarrollado por Facebook para sus propias necesidades y todavía juega un papel muy importante en la empresa. Entonces, ahora mismo podemos esperar una mejora más suave de la biblioteca ReactJS y el ecosistema relacionado.

El control de versiones semántico en Angular ha dado sentido a la forma en que están saliendo las versiones y ha facilitado la forma en que uno cambia entre versiones. En comparación con la dolorosa forma de cambiar entre AngularJS y Angular 2, la actualización a Angular 4 parece ser diferente según lo que dice el equipo de Angular. Además, características como la representación del lado del servidor y la reducción del código generado por AOT son bastante prometedoras para resolver problemas de representación y rendimiento.

Al mismo tiempo, el ecosistema de desarrollo de ReactJS ha estado proporcionando todo lo necesario para desarrollar aplicaciones web con todas las funciones durante un buen tiempo, además de representación isomórfica (incluida la representación del lado del servidor y la representación de la interfaz de usuario nativa) y un gran nivel de rendimiento.

Teniendo en cuenta todo lo que acabamos de describir, tanto Angular 4 como ReactJS serían ideales para aplicaciones de una sola página. Al mismo tiempo, Angular 4 también sería una opción número uno para casos más complicados, donde ReactJS probablemente no se convierta en una gran combinación. De todos modos, tanto Angular 4 como ReactJS merecen probarlos y descubrir cuál se adapta mejor a sus propósitos.

Lea también:

Este contenido se publicó originalmente aquí.