Una comparación precisa en paralelo de los aspectos generales y técnicos de Angular y React

Hay tantos artículos titulados "Angular vs React", "React vs Angular", "Angular o React" - ¡es un milagro que hayas abierto este! Sin embargo, lo que faltan en estos artículos es una comparación precisa en paralelo de Angular vs React.

Así que esto es lo que voy a hacer en esta publicación de blog: colocar React y Angular en yuxtaposición directa. Vamos a revisar y contrastar los dos marcos de JavaScript y observar cada característica posible para asegurarnos de que no perdemos ni un solo dato.

Al final, no les voy a decir qué tecnología elegir. Pero te daré suficientes reflexiones para que elijas la tecnología que mejor se adapte a ti y a tu proyecto.

1. Breve descripción

Reaccionar

React es una biblioteca de JavaScript para el desarrollo de UI. Está gestionado por Facebook y una comunidad de desarrolladores de código abierto.

El marco se introdujo en mayo de 2013.

Las últimas actualizaciones se lanzaron el 8 de agosto de 2019, hace poco más de un mes.

Angular

Angular es un marco JavaScript de código abierto para desarrollo web y móvil. Está basado en TypeScript y administrado por el equipo de Angular de Google y la comunidad de desarrolladores de Angular.

Lanzado en septiembre de 2016, Angular (también conocido como Angular 2.0) es una reescritura completa de AngularJS (Angular 1.0), que se introdujo en 2010.

Ya ha habido seis versiones de Angular, y la última versión tuvo lugar el 28 de agosto de 2019, hace casi tres semanas.

2. Universalidad

Reaccionar

React es un marco que se utiliza tanto en desarrollo web como móvil. Sin embargo, para el desarrollo móvil, debe incorporarse con Cordova. Además, para el desarrollo móvil, existe un marco adicional: React Native.

React se puede utilizar para crear aplicaciones web de una y varias páginas.

Angular

Angular es adecuado para el desarrollo web y móvil. En el desarrollo móvil, sin embargo, Ionic realiza una gran parte del trabajo. Además, de manera similar a React, Angular tiene un marco de desarrollo móvil adicional. La contraparte de React Native es NativeScript.

Angular también se puede utilizar para aplicaciones web de una o varias páginas.

3. Autosuficiencia

Reaccionar

React es un marco para el desarrollo de UI, por lo que las aplicaciones escritas con React necesitan bibliotecas adicionales para ser utilizadas. Por ejemplo, Redux, React Router o Helmet optimizan los procesos de gestión de estado, enrutamiento e interacción con la API. Funciones como el enlace de datos, el enrutamiento basado en componentes, la generación de proyectos, la validación de formularios o la inyección de dependencias requieren la instalación de módulos o bibliotecas adicionales.

Angular

Angular es un marco completo para el desarrollo de software, que generalmente no requiere bibliotecas adicionales. Todas las funciones mencionadas anteriormente (enlace de datos, enrutamiento basado en componentes, generación de proyectos, validación de formularios e inyección de dependencias) se pueden implementar con los medios del paquete Angular.

4. Curva de aprendizaje

Reaccionar

React es minimalista: sin inyección de dependencias, sin plantillas clásicas, sin funciones demasiado complicadas. El marco será bastante sencillo de entender si ya conoce bien JavaScript.

Sin embargo, se necesita bastante tiempo para aprender a configurar un proyecto porque no existe una estructura de proyecto predefinida. También necesita aprender la biblioteca Redux, que se usa en más de la mitad de las aplicaciones React para la administración del estado. Las actualizaciones constantes del marco también requieren un esfuerzo adicional por parte del desarrollador. Además, hay muchas mejores prácticas en React, que necesitará aprender a hacer las cosas bien.

Angular

Angular en sí es una biblioteca enorme y aprender todos los conceptos asociados llevará mucho más tiempo que en el caso de React. Angular es más complejo de entender, hay mucha sintaxis innecesaria y la administración de componentes es compleja. Algunas características complicadas están integradas en el núcleo del marco, lo que significa que el desarrollador no puede evitar aprenderlas y usarlas. Además, hay muchas formas de resolver un solo problema.

Aunque TypeScript se parece mucho a JavaScript, también lleva algún tiempo aprenderlo. Dado que el marco se actualiza constantemente, el desarrollador debe realizar un esfuerzo adicional de aprendizaje.

5. Comunidad

Reaccionar

React framework es uno de los frameworks JS más populares en todo el mundo, y la comunidad que lo apoya y desarrolla es enorme.

Al trabajar con React, debe ser un aprendiz continuo ya que el marco se actualiza a menudo. Si bien la comunidad intenta avanzar con la documentación más reciente lo más rápido posible, mantenerse al día con todos los cambios no es tan fácil. A veces, puede haber una falta de documentación, pero el problema a menudo se resuelve con el apoyo de la comunidad en foros temáticos.

React es utilizado activamente por empresas como Facebook, Twitter, Netflix, Airbnb, PayPal, The New York Times, Yahoo, Walmart, Uber y Microsoft.

Angular

Angular es menos admirado que React y enfrenta mucho escepticismo, en parte debido a la impopularidad de Angular 1.0. Los desarrolladores solían descartar el marco como demasiado complicado, ya que requería mucho tiempo para aprender. Sin embargo, este marco ha sido desarrollado por Google, que trabaja a favor de la credibilidad de Angular.

Google proporciona el soporte a largo plazo del marco y lo mejora constantemente. Sin embargo, las actualizaciones son tan rápidas que la documentación a menudo se retrasa.

Angular también es utilizado por empresas como McDonald's, AT&T, HBO, Apple, Forbes, Adobe, Nike y Microsoft.

6. Desempeño

Reaccionar

El rendimiento de React ha mejorado enormemente con la introducción del DOM virtual. Dado que todos los árboles DOM virtuales son livianos y están integrados en el servidor, se reduce la carga en el navegador. Además, dado que el proceso de enlace de datos es unidireccional, los enlaces no se asignan a los observadores como en el caso de Angular. Respectivamente, no se crea una carga de trabajo adicional.

Angular

Angular funciona peor, especialmente en el caso de aplicaciones web complejas y dinámicas.

The performance of Angular apps is negatively affected by bidirectional data-binding. Each binding is assigned a watcher to track changes, and each loop continues until all the watchers and associated values are checked. Because of this, the more bindings you have, the more watchers are created, and the more cumbersome the process becomes.

However, the most recent update of Angular has greatly improved its performance, and it does not lose to React anymore. Moreover, the size of an Angular application is slightly smaller than the size of a React app.

7. Language

React

React is based on JavaScript ES6+ combined with JSX script. JSX is an extension for syntax, which makes a JavaScript code resemble that written in HTML. This makes the code easier to understand, and typos are easier to spot. For the JSX code to be compiled in a browser, React is augmented with Babel – a code translation tool.

Angular

Angular can use JavaScript or TypeScript, which is a superset of JS developed specifically for larger projects. TypeScript is more compact than JavaScript, the code is easier to navigate, and typos are easily spotted. Code refactoring process also becomes simpler and faster.

8. App Structure

React

The structure of React provides developers with the freedom to choose. There is no “the only right structure” for a React app. However, the necessity to design the app structure at the beginning of each project makes it more difficult and longer to start.

Besides, React offers only View layer, while Model and Controller are added with the usage of other libraries.

The architecture of a React app is component-based. The code is made of React components, which are rendered with React DOM library and directed in two ways: functional (with a function that returns JSX)...

function Hello(props){ return Hello {props.name} }

...and class-based (with ES6 classes).

class Hello extends React.Component { render() { return 
Hello, {this.props.name}
; }

Angular

The structure of Angular is fixed and complex, suitable for experienced developers.

Angular is based on three layers – Model, Controller, and View. An object responsible for the Model is initialized by the Controller and displayed with the View.

The application code consists of different Angular components, each being written in four separate files: a TypeScript to implement the component, an HTML file to define the view, a CSS file to define the stylistic features, and a special file for testing purposes. Links to these files are written in the app directive, which displays the structural logic of the app. Respectively, Angular components are also reusable.

import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { }

9. UI Components

React

UI tools for React are developed by the community. There are a lot of free and paid UI components on the React portal. To use material design components in React, you would have to install an additional library – Material-UI Library & Dependencies.

Angular

Angular has a built-in Material toolset, and it offers a variety of pre-built material design components. There are various buttons, layouts, indicators, pop-ups, and form controls. Because of this, UI configuration becomes simpler and faster.

10. Directives

React

In React, templates and logic are explained in one place – at the end of the component. It allows the reader to quickly grasp the meaning of the code even if they do not know the syntax.

Angular

In Angular, each template is returned with an attribute – a directive of how the object has to be set. The syntax of Angular directives is complex and sophisticated, which makes it incomprehensible for a reader without any experience in working with this technology.

11. State Management

React

In React, each component has its own state. A React developer can create special components for holding the state of the entire application or a particular part of it. The major disadvantage here consists in the fact that the global state needs to be stored in multiple different parts of the app with data being manually passed around different component tree levels.

class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( 
Hello world!
Now is {this.state.date.toLocaleTimeString()}.
 ); } }

To solve this problem, there is a special state management library – Redux. The idea of it is that the global state is represented as a single stateful object, which is altered in different parts of the app with the help of reducers – special Redux functions.

Another solution is offered by the state management library MobX. Unlike Redux with the global state stored in a single immutable stateful object, MobX offers storing only the minimal required state, while the rest of it can be derived.

Angular

In Angular, component data is stored in component properties. Parent components pass data through to children ones. State changes in some parts can be identified and recalculated, but in a large app, it can cause a multi-directional tree series of updates, which will be difficult to track. The features can be improved with the help of state management libraries, such as NgRx or RxJS , which would make sure that the data flow is unidirectional.

export class HeroListComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; constructor(private service: HeroService) { } ngOnInit() { this.heroes = this.service.getHeroes(); } selectHero(hero: Hero) { this.selectedHero = hero; } } 

12. Dependency Injection

React

React does not fully support dependency injection as it does not fully comply with the idea of functional programming and data immutability. Instead, it has a global state for all components.

Angular

The greatest advantage of Angular rests in the fact that, unlike React, it supports dependency injection. Therefore, Angular allows having different lifecycles for different stores.

import { Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; @Injectable({ // we declare that this service should be created // by the root application injector. providedIn: 'root', }) export class HeroService { getHeroes() { return HEROES; } }

13. Data Binding

React

Data binding stands for the data synchronization process between Model and View. React should be augmented with Redux, which allows you to work with immutable data and makes data flow unidirectional. Unidirectional binding is predictable, which facilitates the debugging process.

Angular

Angular works with bidirectional data-binding and mutable data. While the advantages of mutable and immutable data are a matter of a heated discussion, it is definitely easier to work with bidirectional data-binding rather than with the unidirectional approach. At the same time, bidirectional data-binding negatively affects the performance since Angular automatically develops a watcher for each binding.

The ways of data-binding in Angular:

{{expression}} Interpolation [target]="expression" Property bind-target="expression" Attribute

(target)="statement" Event on-target="statement" Event

[(target)]="expression" Two-way bindon-target="expression" Two-way

14. Change Rendering

React

React uses a virtual Document Object Model (DOM), which enables easily implementing minor data changes in one element without updating the structure of the entire tree. The framework creates an in-memory cache of data structure, computes the changes, and efficiently updates the DOM displayed in the browser. This way, the entire page seems to be rendered on each change, whereas actually, the libraries render changed subcomponents only.

The React team is constantly improving Fiber – a mechanism aimed at boosting the productivity of change rendering.

Angular

Angular uses a real DOM, which updates the entire tree structure even when the changes have taken place in a single element. The real DOM is considered to be slower and less effective than the virtual DOM.

To compensate for this disadvantage, Angular uses change detection to identify components that need to be altered. Therefore, the real DOM on Angular performs as effectively as the virtual DOM on React.

15. Tools

React

React is supported by multiple code editors. For instance, the code in React can be edited with Sublime Text, Visual Studio, and Atom. To bootstrap a project, you can use the Create React App (CLI) tool. In turn, server-side rendering is completed with the use of Next.js framework.

To test the entire app written in React, you would need multiple tools. For instance, Enzyme for component testing, Jest for testing JS code, React-unit for unit testing and so on. To debug the app in the development mode, you can use a browser extension React Dev Tools.

Another interesting tool is React 360, which is a library used for creating AR and VR applications.

Angular

Similarly to React, Angular is supported by a variety of code editing tools. For example, you may work with such code editors as Aptana, Sublime Text, and Visual Studio. A project can be promptly set up with Angular CLI. Server-side rendering is completed with the help of Angular Universal.

Unlike React, Angular can be fully tested with a single tool. For the end-to-end testing in Angular, the platforms are Jasmine, Protractor, and Karma. Another tool that debugs the app in the development mode is a browser extension Augury.

To Wrap Up

Angular is a full-fledged mobile and web development framework. React is a framework only for UI development, which can be turned into a full-fledged solution with the help of additional libraries.

React seems simpler at first sight, and it takes less time to start working on a React project. However, that simplicity as the main advantage of React is neutralized because you have to learn to work with additional JavaScript frameworks and tools.

Angular itself is more complex and takes quite some time to master. Yet, it is a powerful tool that offers a holistic web development experience, and once you learn how to work with it, you reap the fruits.

There is no better framework. Both are updated continuously to keep up with the competitor. For instance, while React was believed to win because of its virtual DOM, Angular equaled the score by implementing change detection. While Angular was considered to be winning because of being developed by such an authoritative company as Google, the immense devoted React community fully compensated for Google's reputation and made React similar to Angular.

In the end, React vs Angular is all a matter of personal preference, a matter of skills and habits. As a beginner in programming, you would probably benefit more from starting with React. As an experienced developer, you just keep working with what you know better.

Do not forget to challenge yourself and start learning a new framework, React or Angular. As a Project Manager or a business owner outsourcing developers, you should talk to your web development team and together choose the framework that suits all of you best, whether it be Angular or React.

Do you have an idea for either an Angular or React project?

My company KeenEthics is experienced in react development, and we, also, provide outstanding agularjs developers for your projects. In case you need the following services, feel free to get in touch.

If you have enjoyed the article, you should definitely read another wonderful comparison of 2 JS frameworks: React vs Svelte: How to Build Messaging Components.

P.S.

Me gustaría agradecer a todos los que contribuyeron a este artículo, incluidos Sergey Gornostaev y Volodya Andrushchak, desarrolladores de software de pila completa @ KeenEthics.

El artículo original publicado en el blog de KeenEthics se puede encontrar aquí: Angular vs React: cuál elegir para su aplicación.