Angular vs React

7 min readJul 9, 2019

En esta guía vamos a ver cada una de estas tecnologías Front y las diferencias entre ellas, para que puedas elegir la mejor opción para el desarrollo de tus aplicaciones Front-end con JavaScript.

¿Qué es Angular?

Angular es un framework javascript escrito en Typescript de código abierto desarrollado y soportado por Google para crear aplicaciones web de tipo Single-page application (SPA).

Versiones de Angular

Este framework tiene una política de versionado un poco más diferente que los otros frameworks. Estamos acostumbrados a librerías, lenguajes de programación y frameworks que cambian las versiones de las librerías trás mucho tiempo y muchos cambios, por ejemplo; Python 2.0 se lanzó en Octubre de 2000 y su siguiente versión major (3.0) se publicó en 2008. Vue lleva con su versión 2.0 desde Septiembre de 2016 y a dia de hoy aún no ha salido la nueva release.

Uno de los puntos por los que Angular ha perdido un poco de atractivo para las empresas es porque planifican unos cambios de versión con frencuencia y en ocasiones, para poder utilizar la última versión, hay que corregir errores de incompatibilidad entre ellas. En general, lanzan una nueva release cada 6 meses.

Es importante hacer una aclaración: AngularJS y Angular no son exactamente lo mismo. El primero hace referencia a la primera versión del Framework y el segundo a las versiones 2.0 o superiores. Esta distinción se debe a la gran cantidad de diferencias que existen entre uno y otro, y por tanto no son retrocompatibles. En el momento de escribir este artículo, existen dos últimas versiones:

7.2.15: Esta es la versión más estable.
8.0.0-rc5: Versión beta.

Arquitectura de Angular

El patrón de arquitectura software que se utiliza en la creación de aplicaciones con este framework es el Modelo-Vista-Controlador (MVC).

Podemos crear aplicaciones en HTML y TypeScript. Vamos a tratar brevemente los elementos característicos:

Módulos

Un módulo o NgModule es el elemento básico que proporciona un contexto de compilación para los componentes, es decir, es el elemento que asocia los componentes de la aplicación con sus servicios.
Todas las aplicaciones generadas con Angular deben contar con un módulo raíz el cual se suele llamar por convención AppModule. Este módulo provee de los elementos necesarios para arrancar la aplicación.
Una buena práctica para tener un código más organizado y escalable, es repartir la carga de la aplicación en distintos módulos, quedándose así el módulo principal (AppModule) justo con lo necesario para arrancar la aplicación y dependiendo de la ruta a la que se acceda, cargar un módulo u otro, utilizando así el lazy loading (que consiste en cargar solo los módulos que sean necesarios), mejorando así el rendimiento.

Servicios

Los servicios se encargan de guardar y consultar los datos, y se pueden reutilizar para compartir información entre clases que no se conocen entre sí. Todas los servicios deben importar el decorador @Injectable de Angular para permitir que tus servicios sean inyectados en componentes como dependencias import { Injectable } from '@angular/core';

Componentes

En estos elementos se definen los datos y la lógica de ellos. Es importante crear componentes con una filosofía Web Components para poder reutilizar componentes en distintas partes de la aplicación. Los componentes están vinculados a la template donde se muestran los datos.

Template

Es una mezcla de HTML con algunas etiquetas específicas de Angular. Para crear una directiva en un template se añaden unas llaves en el HTML {{ }} y dentro de ellas pueden añadirse lógica de programación y/o hacer un data binding (representar los datos de los componentes).

Existen dos tipos de data-binding:

Event binding: Eventos en la interacción del usuario actualizando la data del componente que está conectado.
Property binding: Data de nuestro componente a mostrar en el HTML.

¿Qué es React?

React o ReactJS es una librería JavaScript desarrollada y soportada por Facebook utilizada para crear Interfaces de Usuario para aplicaciones web. Importante señalar dos conceptos de esta descripción:

React siempre correrá en la parte del cliente, a diferencia de Angular el cual sí puede correr en el servidor con Angular Universal.
Se define como librería y no como un framework, definiendo como librería aquella herramienta que te facilita la construcción de tu aplicación mientras que un framework aporta menos flexibilidad que una librería pero sí más productividad, limitaciones y homogeneidad en la forma de trabajar.

Fue desarrollada por Facebook con el objetivo de mantener mejor el código dentro de la plataforma y solucionar problemas de rendimiento. Esto la convierte en una librería bastante confiable y robusta ya que es usado por el propio Facebook en sus productos, incluyendo también a otras empresas como Twitter o Dropbox.

Versiones de React

React al igual que Angular, sigue una política de versionado Semver. Esta política es la más usada en desarrollo de software aunque son más estrictos con las versiones major, ya que Semver recomienda que las versiones major se minimicen, por ejemplo; React 15 se lanzó en abril de 2016 y React 16 se lanzó en septiembre de 2017 (es la versión actual). React 17 no se espera hasta 2019.

Arquitectura de React

En React también podemos encontrar el patrón MVC (Modelo-Vista-Controlador) o MVVM(Modelo-vista-modelo de vista).

Uno de los puntos más diferenciadores de React es que decidió combinar las templates y la lógica de JavaScript. El resultado se llama JSX. React usa los componente los cuales contienen lógica y el marcado, todo en el mismo archivo. También utiliza un lenguaje similar a XML que le permite escribir“markup”directamente en el código JavaScript. JSX es una gran ventaja para el desarrollo, ya que tiene todo en un solo fichero.

import React from 'react';
import logo from './logo.svg';
import './App.css';function App() {return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" /
      </header>
    </div>
  );
}export default App;

Estos son algunos puntos también importantes de esta librería:

Virtual DOM
Este es uno de los puntos por los que React hace que sus aplicaciones sean tan eficientes. React mantiene un DOM virtual propio, ya que trabajar con el DOM real del navegador es bastante más costoso en rendimiento mientras que el DOM virtual es más rápida en la lectura. Esto deja a la biblioteca determinar qué partes del DOM han cambiado comparando contenidos entre la versión nueva y la almacenada, y utilizando el resultado para determinar cómo actualizar eficientemente el DOM del navegador.

Ciclos de vida

El ciclo de vida es una secuencia de estados por los cuales se encuentra un componente desde que se crea hasta que se destruye. Cada etapa (hook) del ciclo de vida tiene un método que es lanzado en la vida de un componente.

Las propiedades

Las propiedades (también conocidas como ‘props’) se definen como los datos/atributos de un componente. Son recibidas desde donde se instancia el componente y son inmutables, solo podrán cambiar en el nivel superior donde se define.

El Estado

El estado de un componente es una instantánea en un momento concreto. Existen dos tipos de componentes con y sin estado, denominados statefull y stateless.

Crear una aplicación semilla con Angular

Vamos a crear unas aplicaciones semilla con el CLI de Angular. Se necesita Node.js con una versión 8.x o 10.x.

Paso 1. Instalar Angular CLI de forma global

npm install -g @angular/cli

Paso 2.Crear un workspace y aplicación inicial

ng new tutorial-angular

Con las opciones:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

Paso 3. Lanzar el proyecto en local

cd tutorial-angular ng serve --open

Crear una aplicación semilla con React

Para poder crear un proyecto semilla de React necesitamos instalar create-react-app. Igual que con Angular, se necesita Node.js con una versión 8.10.0+.

Paso 1. Instalar create-react-app y crear la aplicación (npx está disponible desde la versión 5.2 de npm).

npx create-react-app tutorial-react

Paso 2. Acceder y arrancar el proyecto:

cd tutorial-react npm start

Ventaja y desventajas de Angular y React

En esta tabla vamos a ver algunos puntos importantes a destacar de cada librería, recopilando un poco lo hablado en todo el artículo y comparando entre ambas.

¿Ganador?

Realmente, en la industria existen muchos frameworks y librerías, y más concretamente en JavaScript. Angular y React llevan muchos años en el top de los framework/librería más usados por los desarrolladores para crear aplicaciones web, teniendo una gran comunidad, un gran soporte y muchísima documentación. Por lo que no puede haber ganador, porque con cualquiera de las dos, seguro que has ganado.