Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Angular vs React

Ángel Robledano
  • Escrito por Ángel Robledano el 26 de Junio de 2019
  • 6 min de lectura | Frameworks
Angular vs React

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 día 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:

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).

Imagen 0 en Angular vs ReactImagen 1 en Angular vs React

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:

  1. Event binding: Eventos en la interacción del usuario actualizando la data del componente que está conectado.
  2. 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).

Imagen 4 en Angular vs React

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.

Imagen 5 en Angular vs React

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 openwebinars-angular

Con las opciones:

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

Este es el Scaffolding del proyecto por defecto (con Visual Studio Code y el plugin vscode-icons).

Imagen 9 en Angular vs React

cd openwebinars-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 openwebinars-react

Paso 2. Acceder y arrancar el proyecto:

cd openwebinars-react
npm start

Imagen 15 en Angular vs React

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.

  Angular React
¿Es confiable y robusto? [✔] Soportado por Google [✔] Soportado por Facebook
Aplicaciones móviles [✘] Ionic y Cordova son más lentos que React Native [✔] Código web reutilizable para React Native
¿Política de versionado? [✘] Cambio de la versión major cada poco tiempo [✔] Buena política de versionado
Data-biding [✔] Two-way [✘] One-way
DOM [✘] Al no utilizar un DOM Virtual es más lento [✔] Utiliza un DOM virtua
TypeScript [✔] JavaScript tipado ayuda a minimizar fallos [✘] No se usa con TypeScript y de hecho hay que utilizar JSX

¿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.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Curso de Angular 6

Curso de Angular 6

curso

Con este curso aprenderás:

  • Instalación y configuración de un proyecto de Angular
  • Conocimientos básicos de Typescript
  • Componentes de Angular

Duración: 6 horas y 9 minutos

Vue.js Vs. React

Vue.js Vs. React

Desarrollo Web

01 de Agosto de 2018

Realizamos una comparativa entre Vue.js y las otras opciones frontend más utilizadas en el mercado, como son React y Angular. Crea tu propia opinión y acierta en elegir la tecnología que ...

Curso de React JS

Curso de React JS

curso

Con este curso aprenderás:

  • Aprenderás a crear aplicaciones web con React JS
  • Crearás un proyecto para poner en practica lo aprendido
  • Conectar React con una API

Duración: 4 horas y 18 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars