Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular
Code

Angular vs React: Comparación de 7 Principales Características

by
Length:LongLanguages:

Spanish (Español) translation by Alfonso Mora (you can also view the original English article)

Angular vs React

Angular vs React es un debate popular entre los desarrolladores de JavaScript front-end y, más a menudo que no, la discusión termina siendo sesgado hacia una tecnología u otra. Desarrollado por Google y Facebook respectivamente, Angular y React son las dos tecnologías popular utilizadas para construir aplicaciones interactivas de una página.

Una comparación completa entre Angular y React es inminente porque hay ciertos lugares en los que se superponen significativamente en términos de lo que ofrecen, es decir, construir la vista front-end de sus aplicaciones y otros lugares donde su funcionalidad sigue siendo incompleta a menos que con la ayuda de una biblioteca de terceros. La adopción de una tecnología sobre la otra es una cuestión de si Angular o React mejor soluciona tu problema y un poco de intuición. En este tutorial, te compare y contraste siete funciones claves de Angular y de React.

Soy un ardiente defensor del enfoque de código primero (código habla más ruidosamente que palabras, dicen). Teniendo esto en cuenta, he añadido ejemplos de código de Angular y React siempre que sea posible para que pueda desarrollar su intuición y decidir que funciona para usted y que no. Vamos a empezar.

Framework vs Bibliotecas

Angular es un framework, mientras que React es una biblioteca.

Así que ¿qué significa esto? Reaccionar por cuenta propia no permiten crear una aplicación web porque está diseñado para crear vistas (de ahí la 'V' en MVC). Qué puede hacer React es construir vistas basadas en componentes para que los datos se pueden pasar a vistas hijo. Para llenar este vacío, Facebook ha desarrollado el Flux, que es un patrón arquitectónico que complementos. Flujo de arquitectura, cuando React, ofrece el siguiente escenario:

  1. El usuario hace clic en un elemento de React.
  2. Se desencadena una acción. Esta acción es enviada a una tienda a través de una biblioteca de Dispatcher.
  3. La tienda de seguimiento de métodos de recuperación de datos y estado de la aplicación. Cualquier actualización de estado se refleja en los puntos de vista, y ayuda a mantener los puntos de vista consistentes con el estado de la aplicación.

¿No tiene sentido? Esta cifra debe clasificar hacia fuera para usted.

An image that depicts how the Flux architecture complements React
Flux complementa React e implementa el concepto de flujo de datos unidireccional.
Angular es un framework para construir aplicaciones de cliente.

AngularJS firmemente construido sobre el patrón MVC, que separa la aplicación en tres capas diferentes. La combinación de modelo, vista y controlador y la complejidad añadida en dominar las directivas, fábricas, servicios y otros componentes para crear una aplicación de una página obligó a los desarrolladores de Google para cambiar de puesto hacia una arquitectura basada en componentes.

Pero cuando la aplicación empieza a crecer, es importante tener una estructura sólida que mantiene la lógica de negocio de la aplicación de los componentes. Ser un framework,  Angular permite imponer organización estructural moviendo las reglas de negocio en un modelo de dominio (mediante una combinación de clases modelo y servicios) e inyectar el modelo en sus componentes mediante inyección de dependencia.

Este es un ejemplo de código que ilustra cómo la lógica de negocio está encapsulada dentro de un modelo de usuario y un servicio de usuario y lejos de nuestro componente.

Enfoque Basado en el Componente

Los componentes son el componente más básico de una interfaz de usuario en una aplicación Angular. Una aplicación Angular es un árbol de componentes angulares.

¿Cuáles son los componentes? En Angular, los componentes son clases de mecanografiado que tienen un decorador @Component marcado sobre ellos. Por otra parte, dentro de estos decoradores, podemos definir qué Angular llama metadatos, que incluye la plantilla, estilos, selectores y así sucesivamente.

Jerarquía de componentes en Angular está diseñado de tal manera que se pueden asociar estructura y funcionalidad en una sola entidad. Aquí es una visión de alto nivel arquitectónica de los componentes y cómo esto enlaza con todo lo demás en Angular.

The architecture of Angular
La arquitectura de Angular. Componente en el centro y todo lo demás gira en torno a él.

Intercambio entre los componentes de datos son posibles anidar componentes, como ejemplo de abajo.

El concepto de componentes está profundamente arraigado en React,  así como en Angular. Facebook llama React una biblioteca basada en componentes que le permite construir interfaces de usuario interactivas. Sin embargo, a diferencia Angular, reaccionan los componentes son sólo funciones de JavaScript con un número arbitrario de entradas y una salida. El código siguiente se muestra que un componente definida mediante una función JavaScript y usando una clase ES6.

Va estar adhiriéndose a las normas de la ES6 para componer componentes en adelante porque eso es lo que recomienda Facebook. Cada componente reaccione acepta un número arbitrario de entradas, que se almacena dentro de un objeto denominado props.

Tiene también un método render, y como su nombre indica, este método determina lo que se mostrará cuando se invoca el componente. Cada componente mantiene un estado interno (vía this.state), y cada vez los cambios de estado, la función de procesamiento de ese componente se invoca otra vez.

Características del Lenguaje: TypeScript vs ES6

Aplicaciones angulares están escritas en TypeScript  que es un superconjunto de ECMA2015 y utiliza un transpiler para compilar el archivo .ts inflexible a un archivo .js normal. TypeScript ofrece extensiones de lenguaje que están diseñadas para hacer escritura en JavaScript más fácil, y asocia la información de tipo con entidades de JavaScript para hacer cumplir la comprobación de tipos y mejorar el flujo de trabajo de desarrollo.

Algunas de las características claves de TypeScript incluyen la tipificación estática opcional y soporte para interfaces, clases y decoradores. (Decoradores son funciones que llevan el prefijo ' @' y seguido de una clase, parámetro o una propiedad.)

Vamos a bucear en reaccionar, ¿vamos? Una de las características importantes de la lengua en reaccionar es evidente en este ejemplo de código.

¿No esta genial? Reaccionar le permite incrustar etiquetas XML/HTML en el archivo de JavaScript, y esto se hace mediante JSX, que ofrece capacidad de extensión de sintaxis para JavaScript. Tenemos que usar un compilador como Babel, que recoge nuestro código JSX en el JavaScript que los navegadores puedan entender. El código anterior compila abajo a esto:

Aunque se recomienda usar JSX, puede pegar con React.createElement() si usted está en contra de la idea de incrustar las etiquetas HTML en JavaScript.

Además, puede utilizar ES6 estándares o la forma tradicional de JavaScript mientras trabajaba con reaccionar. Aunque ES6 es relativamente nueva, añade un montón de características tales como clases, flecha funciones, literales de la plantilla, destructiva y el uso de const y deje. La única desventaja que puedo pensar es que agrega un poco de código repetitivo como la necesidad de llamar a super() cada vez que llames un constructor(), y que no enlazar automáticamente métodos de control de eventos con este.

Tipo de Comprobación Angular vs PropTypes en React

Comprobación de tipo estático se realiza en tiempo de compilación. El compilador advierte sobre potencial tipo uniones mal hechas y detecta algunos errores de que otra manera pasaría desapercibidos. Además, definir un contrato en una variable, una propiedad o los parámetros de una función puede resultar en código más legible y mantenible.

Las declaraciones de variable y función se hacen más expresivas declarando sus tipos de datos. Usted puede leer más acerca de los tipos de datos primitivos en la documentación de TypeScript.

Definir la firma de un API usando una interfaz hace el código menos ambiguo y más fácil de comprender. La interfaz sirve como una guía de inicio rápido que le ayuda a empezar inmediatamente con el código y ahorra tiempo si no en leer la documentación o la aplicación real de la biblioteca.

La palabra clave de type de inicio puede utilizarse para crear un alias para un tipo. Usted puede crear nuevos tipos que son una Unión o intersección de estos tipos primitivos.

React ha limitado soporte para comprobación de tipos porque el ES6 subyacente no lo admite. Sin embargo, puede implementar comprobación de tipos utilizando la biblioteca de prop-types desarrollada por el equipo de React . Type comprueba los props de un componente para comprobar si una cadena se puede hacer como se muestra a continuación.

Pero los prop-types no se limitan a cadenas, números y booleanos. Usted puede hacer mucho más, como se describe en la documentación de la biblioteca de prop-types. Sin embargo, si usted toma estática tipo comprobar seriamente, debe usar algo como Flow, que es una biblioteca estático type-checker para JavaScript.

Andamio: Angular CLI vs create-react-app

Iniciando un proyecto de la tierra puede parecer divertido inicialmente. Sin embargo, el proceso de creación de la estructura de directorios, escribir código repetitivo para componentes y conseguir la aplicación que hizo es un ejercicio inútil e improductivo. Tu estrategia debe ser con ella tan pronto como sea posible y centrarse en el desarrollo de la aplicación. Gracias a Google y Facebook, usted dispone de herramientas crear y sus aplicaciones del andamio con facilidad.

Configuración Angular-CLI para angular y create-react-app para React es sencillo usando MNP.

Para crear una nueva aplicación Angular, debe utilizar el siguiente comando:

Pero eso no es todo. El comando ng generate permite genera componentes, rutas, pipas, directivas y servicios.

Angular CLI puede hacer mucho más, como la creación de una estructura de tu aplicación Angular, comandos para ejecutar pruebas unitarias y las pruebas de extremo a extremo. Puedes leer más sobre él en GitHub.

Por otro lado, create-react-app es lo apoyo oficial de la creación de una aplicación de React sin los ficheros de configuración.

$ npm install -g create-react-app

Esto debe crear una aplicación funcional para React con todas las dependencias de Babel y webpack cuidadas. Puede comenzar a ejecutar la aplicación en su navegador utilizando el npm start.

Puede encontrar los scripts disponibles para react de la aplicación en el archivo package.json.

Enlace de Datos: Enlace Bidireccional vs Enlace Unidireccional

Enlace de datos es una característica que permite la sincronización de datos entre la vista y el estado de la aplicación (modelo). En una rutina de enlace de datos unidireccional, cualquier cambio en el estado de la aplicación automáticamente actualiza la vista. Por el contrario, enlace de datos bidireccional une propiedades y eventos bajo una sola entidad, es decir, cualquier modificación del modelo actualiza la vista y viceversa.

En React, las propiedades se transmiten de padres a los componentes hijo, que se conoce como el flujo de datos unidireccional o de arriba hacia abajo. El estado de un componente se encapsula y no es accesible a otros componentes a menos que se transmite a un componente hijo como un apoyo, es decir, el estado de un componente se convierte en el apoyo del componente hijo.

Pero ¿qué pasa si usted necesita propagar los datos hacia arriba a través del árbol de componentes? Esto se hace a través de eventos hijo y devoluciones de llamada de los padres. La documentación de React incluye un buen ejemplo que se ocupa de este caso.

Técnicas de enlace de datos disponibles en Angular están entre algunas de las características que lo hacen interesante. Angular tiene fuera de la caja soporte para interpolación, enlace unidireccional, enlace bidireccional y enlace del evento.

Interpolación es la manera más simple de enlazar la propiedad del componente dentro del texto entre las etiquetas HTML y las asignaciones de atributo.

<p>Welcome back {{currentUser.name}}!</p>

Enlace de la propiedad es similar a la interpolación en el sentido que puede enlazar las propiedades de los elementos de la vista a propiedades de componentes. Enlace de propiedad favorece la comunicación componente y es idéntica a cómo se transmiten apoyos en React.

<img [src]="userImgUrl">

<user-child [user]="currentUser"></user-child>

Enlaces de evento permiten flujo de datos en la dirección opuesta, es decir, de un elemento a un componente. Aquí, clic es un evento objetivo, y a la derecha, tenemos el método onSave() que recibe se invoca cuando se produce el evento.

<button (click)="onSave()">Save</button>

Pero la característica más importante es el enlace bidireccional usando el [(ngModel)]. Esto combina la enlace de propiedad y evento vinculante bajo una directiva y es particularmente útil con las formas y campos de entrada.

Procesamiento del Lado del Servidor

Procesamiento de servidor es una técnica de representación tradicional. Aquí, el servidor devuelve todo el archivo HTML a petición, y el navegador se queda con la simple tarea de mostrar al usuario. Representación del lado del cliente, por el contrario, devuelve un documento escueto HTML, la hoja de estilos y un archivo JavaScript.

JavaScript hace solicitudes posteriores para el resto de la página web utilizando un navegador. React, Angular y todos otros modernos front-end librerías JavaScript son buenos ejemplos de procesamiento del lado del cliente. Esto es evidente si se ve la fuente de la aplicación de Angular/React.

Pero representación del lado del cliente tiene los inconvenientes que no funciona ideal para SEO y que devuelve HTML incompleta contenido cuando compartes tu enlace en sitios de medios sociales. Angular una solución llama Angular Universal que se encarga de hacer amigable su aplicación búsqueda motor amable y social media. Es una biblioteca construida por el equipo de Angular, y usarlo es definitivamente favorecido.

Universal hace uso de una técnica antes de la representación donde se procesa toda la web desde el servidor primero, y después de un par de segundos, el usuario se conecta a la representación del lado del cliente. Puesto que todo esto sucede bajo el capó, el usuario no nota nada diferente.

Si está usando React con Redux, la documentación Redux tiene un buen tutorial sobre la configuración de servidor de representación. También puede configurar React para representar desde el servidor utilizando los componentes BrowserRouter y StaticRouter disponibles en la biblioteca de react-router. Puedes leer más sobre ello en este artículo en Medium. Pero si estás en rendimiento y optimización, usted puede intentar next.js, que es una biblioteca para SSR en React.

Envolviéndolo

Comparando un auténtico, framework a una robusta biblioteca de interfaz de usuario podría no me parece justo. Sin embargo, son tecnologías avanzadas de JavaScript permite crear aplicaciones interactivas de una página, y en ese sentido, este artículo debería ayudarle a decidir en elegir uno de ellos.

¿Cuáles son sus pensamientos de Angular vs React? Compartir en los comentarios.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.