Caracteristicas de Angular y React para Desarrollo de Interfaces de Usuario de Aplicaciones Web

UNIVERSIDAD MAYOR DE SAN SIMON
FACULTAD DE CIENCIAS Y TECNOLOGIA
DIRECCIÓN DE POSGRADO
“CARACTERÍSTICAS DE ANGULAR Y REACT

PARA EL DESARROLLO DE INTERFACES DE
USUARIO DE APLICACIONES WEB”
TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO

DE DIPLOMADO EXPERTO EN DESARROLLO DE APLICACIONES
EMPRESARIALES VERSIÓN I
.
POSTULANTE : DIPP SEJAS CRISTINA

TUTOR : ING. EDSON ARIEL TERCEROS TORRICO
Cochabamba – Bolivia
2018
CONTENIDO
ÍNDICE DE FIGURAS ........................................................................................................ 4
INDICE DE TABLAS .......................................................................................................... 5
RESUMEN ......................................................................................................................... 6
DEDICATORIA .................................................................................................................. 7
AGRADECIMIENTOS ........................................................................................................ 8
CAPÍTULO I ....................................................................................................................... 9
1. Introducción ........................................................................................................................... 9
2. Delimitación del Problema ................................................................................................ 10
3. Generalidades ..................................................................................................................... 10
3.1. Antecedentes Generales ............................................................................................... 10
3.2. Antecedentes Específicos ............................................................................................. 11
4. Metodología ......................................................................................................................... 11
5. Angular ................................................................................................................................. 12
5.1 Características de Angular ............................................................................................ 12
5.1.1. Velocidad y Rendimiento ........................................................................................... 13
5.1.2. Productividad ............................................................................................................... 14
5.1.3. Desarrollo..................................................................................................................... 14
5.2 Arquitectura de Angular ................................................................................................. 15
5.2.1. Módulos ........................................................................................................................ 16
5.2.1.1. NgModules Metadatos ........................................................................................... 16
5.2.1.2. Root NgModule ....................................................................................................... 17
5.2.1.3. NgModule y Componentes.................................................................................... 17
5.2.1.4. NgModules y modules de JavaScript .................................................................. 18
5.2.2. Componentes .............................................................................................................. 19
5.2.2.1. Metadatos y Componentes ................................................................................... 20
5.2.3. Plantillas, Directiva y Enlaces de Datos .................................................................. 21
5.2.3.1. Plantillas y Vistas .................................................................................................... 21
5.2.3.2. Directivas ................................................................................................................. 21
5.2.4. Componentes de Estilo.............................................................................................. 23
5.2.5. Servicios e Inyección de Dependencias ................................................................. 26
5.2.5.1. Servicios ................................................................................................................... 27
5.2.5.2. Inyección de Dependencia .................................................................................... 28
5.2.6. Ciclo de vida ................................................................................................................ 28
5.2.7. Formularios .................................................................................................................. 30
A) Formularios reactivos:.................................................................................................... 30
2
B) Formularios basados en planillas: ............................................................................... 30
C) Formas Dinámicas.......................................................................................................... 30
5.2.8. Observables ................................................................................................................ 31
5.2.9. Enrutamiento ............................................................................................................... 32
5.2.10. La librería RxJS (Reactive Extension for JavaScript) ....................................... 33
6. ReactJS................................................................................................................................ 34
6.1. Características de ReactJS .......................................................................................... 35
6.2. Arquitectura de React .................................................................................................... 36
6.2.1. Concepto DOM ........................................................................................................... 36
6.2.2. React Propiedades y Estado .................................................................................... 37
6.2.3. React State .................................................................................................................. 38
6.2.3.1. Componente Simple (Stateless Component) ..................................................... 38
6.2.3.2. Componente de Estado (Stateful Component) .................................................. 39
6.2.3.3. Componente que usa Complementos Externos ................................................ 44
6.2.3.4. React y Clases ........................................................................................................ 46
6.2.3.5. JSX ........................................................................................................................... 46
7. Similitudes entre Angular y ReactJS ............................................................................... 49
8. Ventajas y Desventajas de Angular y ReactJS ............................................................. 49
8.1. Ventajas y desventajas de Angular ............................................................................. 49
8.2. Ventajas y desventajas de ReactJS ............................................................................ 51
9. Caso de estudio .................................................................................................................. 52
10. Conclusiones ................................................................................................................... 59
11. Bibliografía ....................................................................................................................... 61
3
ÍNDICE DE FIGURAS
Figura 1 - Cuadro de características de Angular ....................................................................... 13

Figura 2 - Arquitectura de Angular ............................................................................................ 15
Figura 3 - Componentes y Plantillas ......................................................................................... 17
Figura 4 - Definición de Vista .................................................................................................... 18
Figura 5 - Estructura de un Componente .................................................................................. 19
Figura 6 Patrón de Diseño MVC .............................................................................................. 21
Figura 7 - Ejemplo Interfaz de Directiva de Atributo .................................................................. 23
Figura 8 - Ejemplo de Componentes de Estilo .......................................................................... 25
Figura 9 - Interfaz con método setter ........................................................................................ 26
Figura 10 - Inyector de dependencias ....................................................................................... 28
Figura 11 - Observable ............................................................................................................. 31
Figura 12 - Ejemplo de Routing en Angular .............................................................................. 33
Figura 13 - Ejemplo de Routing en Angular .............................................................................. 33
Figura 14 - Ejemplo de RxJS .................................................................................................... 34
Figura 15 - Características de React ......................................................................................... 35
Figura 16 - Propiedades y Estado ............................................................................................. 37
Figura 17 - Propiedades y Estado 2 .......................................................................................... 37
Figura 18 - Estado .................................................................................................................... 38
Figura 19 - Ejemplo de Método Render .................................................................................... 39
Figura 20 - Ejemplo de Método Render en Estados de Tiempo Inicial ...................................... 40
Figura 21 - Ejemplo de Render en Estado de Tiempo Transcurrido .......................................... 40
Figura 22 - Ejemplo Para Rastrear Lista Actual ........................................................................ 41
Figura 23 - Primer Elemento Insertado ..................................................................................... 41
Figura 24 - Segundo Elemento Insertado.................................................................................. 42
Figura 25 - Tercer Elemento a Insertar ..................................................................................... 42
Figura 26 - Componentes Que Utiliza Complementos Externos ............................................... 44
Figura 27 - Código Fuente de un Componente React ............................................................... 46
Figura 28 - Ejemplo de JSX ...................................................................................................... 47
Figura 29 - Ejemplo Tic Tac Toe aplicación con React ............................................................. 47
Figura 30 - Resultados de Tic Tac Toe con React .................................................................... 47
Figura 31 - Página de Inicio ...................................................................................................... 52
Figura 32 - Selección de Administración ................................................................................... 53
Figura 33 - Lista de Registro de Contratos................................................................................ 53
Figura 34 - Lista de Registro de Proyectos ............................................................................... 53
Figura 35 - Lista de Registro de Personal ................................................................................. 54
Figura 36 - Lista de Cargos....................................................................................................... 54
Figura 37 - Selección de Equipos ............................................................................................. 54
Figura 38 - Lista de Registro de Maquinaria ............................................................................. 55
Figura 39 - Lista de Registro de Material .................................................................................. 55
Figura 40 - Selección de Asignaciones de Equipos .................................................................. 55
Figura 41 - Lista de Registro de Asignación de Material ........................................................... 56
Figura 42 - Lista de Asignación de Equipos de Protección ....................................................... 56
Figura 43 - Selección de Estructura Organizacional.................................................................. 56
Figura 44 - Datos de la Compañía ............................................................................................ 57
4
Figura 45 - Tipos de Áreas........................................................................................................ 57
Figura 46 - Nivel de Jerarquía Organizacional .......................................................................... 57
Figura 47 - Selección de Administración de Accidentes ............................................................ 58
Figura 48 - Lista de Accidentes ................................................................................................. 58
Figura 49 - Datos Acerca de la Empresa .................................................................................. 58
Figura 50 - Contactos ............................................................................................................... 59
INDICE DE TABLAS
Tabla 1 - Descripción de Componentes de ciclo de vida ........................................................... 29

Tabla 2 - Diferencias entre Formularios Reactivo y Basados en Plantillas ................................ 30
Tabla 3 - Tipo de Notificaciones de un Observable ................................................................... 32
Tabla 4 - Ventajas y Desventajas de Angular ........................................................................... 50
Tabla 5 - Ventajas y Desventajas de React .............................................................................. 51
5
RESUMEN
Angular y React son las dos herramientas más importantes del desarrollo web actualmente,
muchas personas están intentando aprenderlas. La siguiente monografía nos brinda
información sobre estas herramientas que nos facilitan el desarrollo de interfaces de usuario, las
características principales que nos ofrecen el Framework Angular y la Librería React, para el
desarrollo eficiente en Front-end dando al cliente una mejor interfaz en aplicaciones web para la
mejor interacción con los usuarios. Brinda también un caso de estudio sobre “Sistemas de
Seguridad Industrial” del módulo II del grupo B turno tarde, realizado en el Diplomado de
“Experto en el Desarrollo de Aplicaciones Empresariales” como un ejemplo.
Una de las características que tiene angular es que se puede ejecutar en múltiples plataformas
(es multiplataforma), se verá componentes, servicios, módulos, inyección de dependencias,
observables, RxJS, Formularios, enrutamiento, parte de todo lo que utiliza Angular, utiliza el
leguaje de TypeScript (superconjunto de JavaScript).
Al igual que Angular la Librería React utiliza también el lenguaje de TypeScript, se verá
concepto de DOM, propiedades y estado. React y clases.
Se dará a conocer una pequeña descripción de similitudes y diferencias entre Angular y React.
Se mostrará un ejemplo de interfaz de usuario elaborado con angular cli con el editor de código
WebStorm.
Palabras clave: Angular, React, interfaz de usuario.
6
DEDICATORIA
Dedicado a Dios, a mis padres, Alicia

Sejas Delgado, René Anibal Dipp Garcia,
mis hermanos Shirley, Ximena, Harry, a
mis abuelos Irene y Faustino (+), a mi
querido esposo Flavio, a mi hijo Rodrigo y
mi sobrina Valeria, que los amo con todo
mi corazón se los dedico a ellos con todo
cariño.
7
AGRADECIMIENTOS
Le doy gracias a Dios, a mis padres, a mi

familia, a los docentes de la Empresa
Digital Harbor, a mi tutor Ing. Edson
Terceros, por haberme guiado al realizar
este paso importante en mi vida, les
agradezco por la ayuda brindada, tanta
paciencia, constancia y confianza que
tuvieron con mi persona.
8
CAPÍTULO I
1. Introducción
Actualmente existe bastante demanda en la utilización de páginas web, así sea por un
computador o bien por celular, tablet o smartphone, por esta razón es importante la interfaz de
usuario de aplicaciones web, tomando en cuenta las nuevas herramientas tecnológicas como
frameworks y librerías, que son herramientas fundamentales para su desarrollo al momento de
introducir imágenes o gráficos, información, enlaces, datos, animaciones, validaciones e
interacciones, para cumplir los requerimientos del cliente, todos los pasos tienen que ser
entendibles, para un cliente la interfaz de usuario es muy importante al momento de obtener un
producto de software, porque será la cara de presentación para la página web donde será
utilizado por muchos usuarios, entonces este tiene que ser lo más entendible, confiable y
seguro posible.
Se busca que la interfaz de usuario para aplicaciones web sea lo más entendible, amigable,
confiable posible, donde el cliente o usuario final este seguro y conforme con su producto. Por
este motivo al ver la necesidad de mejorar la interfaz de usuario en las aplicaciones web, se
toman en cuenta diferentes herramientas para su desarrollo, es decir, lo que tendrá y manejara
la interfaz como que gráficos o imágenes tendrá, que base de datos manejara, que tipo de
información se mostrará, que enlaces tendrá, en otras palabras todas las opciones que deberá
manejar y mostrase en la interfaz pero que tenga un inicio rápido sin que este sea lento ni
pesado de cargar.
Cada desarrollador de Front-End es independiente y libre de elegir que herramienta utilizar para
realizar este servicio, cliente-servidor, pero en estos últimos años hay una serie de opciones, las
más cotizadas son: Angular y React, por ser open source principalmente o llamado también
código abierto, cada una tiene características particulares, por lo cual, cada sistema
desarrollado siempre está en constante mejora de la interfaz de usuario de aplicaciones web, el
framework Angular y la librería React en este sentido nos ofrecen varias opciones las cuales
nos facilitan en la creación de la interfaz.
Por lo mencionado anteriormente el principal problema es tener la información necesaria sobre

las características de las herramientas de software, adecuadas para la elaboración de una
mejora o creación de las interfaces de usuario de aplicaciones web.
9
Para esto, se tomará en cuenta la información necesaria de las características de las
herramientas de software, como ser Framework Angular y librería React, las metodologías
conocidas, que conllevan a tener una estructura consistente, amigable y confiable para el
usuario.
La información de estas herramientas y sus características facilitan la elaboración de cualquier

interfaz de usuario en diferentes plataformas, con esto podemos elegir cuál de ellas utilizar,
según nuestras necesidades o criterios, se podrá brindar mejor elaboración de interfaces de
usuario de aplicaciones web y cumplir con los requerimientos de los clientes.
2. Delimitación del Problema
La información recolectada de estas dos herramientas importantes, van dirigidas a todos

aquellos desarrolladores de Front-end interesados en conocer más sobre Angular y React para
el desarrollo de sus aplicaciones.
Estos dos puntos anteriores sustentan el título de la monografía “Características de Angular y

React para el Desarrollo de Interfaces de Usuario de Aplicaciones Web”
Las versiones de angular son varias actualmente, tomaremos solo como referencia conceptos
de Angular en general, conceptos de Angular 2 porque es considerada la más estable y Angular
CLI para el caso de estudio.
La información que se presentará, pretende mostrar las características más relevantes de estas
herramientas, su importancia para el desarrollo de IU en aplicaciones web y con esto se pueda
tomar en cuenta como punto de inicio de conocimiento para ayudar al desarrollador, dándole
dos opciones más (Angular o React) para la elaboración de sus IU, también crear interés o
curiosidad en personas que tengan conocimientos sobre el tema, para realizar sus propias IU
de acuerdo a sus requerimientos.
3. Generalidades
3.1. Antecedentes Generales
Las características de las diferentes herramientas de software enfocadas para el desarrollo de

Front-end son muy importantes al momento de elegir cual utilizar para la interfaz de usuario de
10
aplicación web, en este sentido se toma en cuenta la validación, imágenes o gráficos,
interacciones que hará la aplicación. Se toma en cuenta en que plataforma se trabajara, su
velocidad, rendimiento y la productividad.
3.2. Antecedentes Específicos
Para las interfaces de usuario de aplicaciones web realizadas con lenguaje TypeScript o
JavaScript existe el framework Angular y la librería React que proporcionan opciones para
facilitar su desarrollo, tanto Angular como React tienen propios mecanismos de desarrollo,
como propias características y arquitecturas.
Para la elaboración de una IU, es necesario el estudio de los conceptos de las herramientas
tecnológicas de Angular y React sobre estas aplicaciones.
El framework Angular utiliza Módulos, Componentes, Servicios, Plantillas, Enrutamiento.
La librería React permite integrarlo a otros proyectos realizados con JavaScript puro, que se
asemeja a la sintaxis de HTML.
4. Metodología
Para el presente trabajo se utilizarán los siguientes métodos de investigación:
 Método Bibliográfico, debido a que se realizará la lectura y compilación de libros relacionados

al tema de estudio.
 Método Analítico, debido a que se procederá a revisar y analizar ordenadamente documentos
relacionados al tema de estudio, para la redacción del presente trabajo.
 Método empírico o de Campo, debido a que se utilizará ejemplo de aplicación o experiencias
observadas en el caso de estudio: Proyecto de “Sistema de Seguridad Industrial “ para una
Empresa de Construcción con Angular, realizado en el diplomado Módulo II (angular2 y angular
material), mostrando el Front-End, Interfaz de Usuario del Grupo B – Turno Tarde.
11
5. Angular
Angular comúnmente llamado “Angular 2+” o “Angular” es un framework para aplicaciones web
desarrollado en TypeScript, de código abierto, se utiliza para crear y mantener aplicaciones web
de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con
capacidad de Modelo – Vista – Controlador (MVC), en un esfuerzo para hacer que el desarrollo
y las pruebas sean más fáciles, Angular es un conjunto de bibliotecas de TypeScript. Gracias a
que el framework Angular utiliza Módulos, Componentes, Servicios, Plantillas, Enrutamiento,
esto ofrece una mayor eficiencia y rapidez del proyecto. Los bloques de construcción de una
aplicación angular son NgModules, proporcionan un contexto de compilación para los
componentes, NgModules recopila el código relacionado en conjunto funcionales, una
aplicación angular está definida por un conjunto de NgModules.
Fue originalmente desarrollado por Mirko Hevery en el año 2009, a la fecha, es mantenido por
equipo de desarrollo de Google donde también es parte, Adams Abrons le dio el nombre de
angular inspirado en los paréntesis angulares <> de HTML.
La biblioteca lee el HTML que contiene atributos de las etiquetas personalizadas adicionales,
entonces obedece a las directivas de los atributos personalizados y une las piezas de entrada o
salida de la página a un modelo representado por las variables estándar de JavaScript. Angular
es la evolución de AngularJS aunque incompatible con su predecesor AngularJS.
(Arizmendi, 18-03-2018, pág. 17)
5.1 Características de Angular
Reusabilidad: Permite crear componentes (directivas) fácilmente reutilizables (que permiten

aislar totalmente su función, no chocan con otros).
Pruebas: Al tener componentes aislados, podemos testear su comportamiento de manera

independiente.
Inyección de dependencias (Dependency Inyection): Si necesitamos hacer uso de un

servicio, lo inyectamos en nuestro controlador directamente y funciona.
Controlador: Es el código con la lógica que comunica el modelo con la vista.
12
Modelo: Son los datos, que junto con la plantilla producen las vistas.
Vista: Lo que el usuario visualiza. Parte de una plantilla, se funde con el modelo y se renderiza
en el árbol DOM. (Brad Geen, Abril, 2013)
Figura 1 - Cuadro de características de Angular
Fuente: (angular, 2018)
5.1.1. Velocidad y Rendimiento
Generación de Código: Angular convierte las plantillas en código altamente optimizado para
máquinas virtuales de JavaScript de hoy en día. (Angular, 2018)
Universal: Ejecuta la primera vista de la aplicación en node.js, .net, php y otros servidores, para
renderizar de forma casi instantánea obteniendo solo HTML y css, también para optimizar el
S.E.O. (Search Engine Optimization, Optimización de Motores de Búsqueda) del sitio.
13
División del código : Las aplicaciones de angular se cargan rápidamente gracias al nuevo
enrutador de componentes. Este ofrece una división automática de códigos para que los
usuarios solo carguen el código necesario para procesar la vista que necesitan. (angular,
2018).
5.1.2. Productividad
Actualmente el código del programa constituye por completo el sitio web, haciendo las nuevas
aplicaciones más interactivas, rápidas, avanzadas complejas y mucho más completas.
Plantillas: Permite crear rápidamente vistas de interfaz de usuario con una sintaxis de plantilla
simple y potente. (Angular, 2018)
Angular CLI: Las herramientas de línea de comandos permiten empezar a desarrollar

rápidamente, añadir componentes y realizar test, así como previsualizar de forma instantánea la
aplicación. (Angular, 2018)
IDEs: Obtención de sugerencias de código inteligente, detención de errores y otros comentarios

en la mayoría de los editores populares e IDEs. (Angular, 2018)
5.1.3. Desarrollo
Los proyectos generan mejores avances en las aplicaciones. Angular es una increíble
alternativa para el desarrollo de aplicaciones web de mediana y gran escala, es utilizado en
youtube, páginas de bancos, noticias, entretenimiento y otros sitios más.
Animación: Permite crear animaciones complejas y de alto rendimiento con muy poco código a
través de la intuitiva API de Angular.
Accesibilidad: Posee características para crear aplicaciones accesibles con los componentes
disponibles para A.R.I.A. (Accesible Rich Internet Applications, define como realizar contenido
web y aplicaciones web, especialmente desarrolladas con Ajax y JavaScript).
14
5.2 Arquitectura de Angular
Los bloques de construcción de una aplicación angular son NgModules, proporcionan un

contexto de compilación para los componentes, NgModules recopila el código relacionado en
conjunto funcionales, una aplicación angular está definida por un conjunto de NgModules.
Los componentes definen Vistas, que son conjunto de elementos de pantalla que Angular
puede elegir y modificar según la lógica y los datos de su programa.
Los componentes usan Servicios, los proveedores de servicios pueden inyectarse en

componentes como dependencias.
Componentes y servicios son clases que proporcionan metadatos y angular los puedan usar.
Los metadatos de una clase de componente asocian con una plantilla que define la vista,
combina HTML común con directivas angulares, para que angular lo modifique antes de su
vista.
Los metadatos de servicios proporcionan la información que angular para ponerla a disposición
de los componentes a través de la inyección de dependencia.
Angular proporciona el servicio router para ayudar a definir rutas de navegación entre vistas. El
enrutador proporciona formas de navegación en el navegador.
(Angular, 2018)
Figura 2 - Arquitectura de Angular
Fuente: (angular, 2018)

15
5.2.1. Módulos
Los módulos en Angular son una pieza fundamental en el desarrollo, sirven para organizar el
código en librerías, los módulos son contenedores de diferentes partes de nuestra aplicación
(controladores, servicios, filtros, directivas, etc). En cuanto a código es una clase con un
decorador llamado @NgModule. el propósito es: organizar las partes de nuestra aplicación.
Los NgModules angulares difieren y complementan los módulos de JavaScript, un NgModules

puede asociar sus componentes con código relacionado, como servicios, para formar unidades
funcionales.
Cada aplicación angular tiene un código raíz, denominado AppModules que inicia la aplicación,
aparte de tener varios módulos funcionales, también puede importar funcionalidades de otros
NgModules y permitir que otros NgModules exporten y utilicen su propia funcionalidad, por
ejemplo: para usar servicio enrutador en la aplicación se importa el Router NgModules.
(Angular, 2018)
Ordena el código en varios módulos funcionales y ayuda a gestionar el desarrollo de las

aplicaciones complejas y al diseño para su reutilización.
5.2.1.1. NgModules Metadatos
Se define con una clase decorada @NgModule(). Sus propiedades son:
Declarations: Los componentes, directivas y tuberías que pertenecen a este módulo.
Exports: subconjunto de declaraciones que deberían ser visibles y utilizables en las plantillas
de componentes de otros NgModules.
Imports: módulos cuyas clases exportadas son necesarias para las plantillas de componentes
declaradas para el NgModule.
Providers: creadores de servicios, se vuelven accesibles a todas partes de la aplicación.
Bootstrap: vista principal de la aplicación, llamada componente raíz que agarra todas las vistas
de la aplicación. (Angular, 2018)
16
5.2.1.2. Root NgModule
Ejemplo:
src / app / app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ] }) export class AppModule { } (Angular, 2018)
5.2.1.3. NgModule y Componentes
Un NgModule raíz siempre tiene un componente raíz que se crea durante el arranque, pero
cualquier NgModule puede incluir cualquier número de componentes adicionales, que se
pueden cargar a través del enrutador o crear a través de la plantilla. Los componentes que
pertenecen a un NgModule comparten un contexto de compilación.
Un componente y su plantilla juntos definen una vista.
Figura 3 - Componentes y Plantillas
Fuente: (Angular, 2018)
17
Figura 4 - Definición de Vista
5.2.1.4. NgModules y modules de JavaScript
En JavaScript cada archivo es un módulo y todos los objetos definidos en este archivo son de
este módulo, otros módulos utilizan la exportación de para acceder a objetos públicos desde
otros módulos. Por ejemplo:
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
export class AppModule { }
(Angular, 2018)
Ejemplos de importaciones:
import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
En el ejemplo anterior, el módulo necesita material desde adentro BrowserModule, para esto se
tiene que agregar a los metadatos con @NgModule imports
imports: [ BrowserModule ],
Con esto utilizamos los sistemas de módulos Angular y JavaScript (Angular, 2018).
18
5.2.2. Componentes
Cada aplicación angular tiene un componente raíz, que conecta una jerarquía de componentes
con el modelo de objetos del documento de página (DOM), cada componente define una clase
que contiene datos y lógica de la aplicación asociada a una plantilla que define una vista.
Figura 5 - Estructura de un Componente
Fuente: (bcn-foundation, 2016)
El decorador @Component() identifica la clase enseguida, proporciona la plantilla y metadatos

específicos de componentes relacionados.
Los decoradores son funciones que modifican las clases de JavaScript.
Angular define una serie de decoradores que asocian tipos específicos de metadatos a las
clases.
Define la lógica de aplicación de un componente, lo que hace para soportar la vista, dentro de
una clase, la clase interactúa con la vista a través de una API de propiedades y métodos.
Por ejemplo:
src / app / hero-list.component.ts (clase)
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; } }
(Angular, 2018)
19
5.2.2.1. Metadatos y Componentes
Un componente se basa en la creación de fragmentos con vista, estilos y controladores de

forma que puedan ser reutilizadas en distintas partes de la web. Lo cierto es que realmente se
trata de una simple clase de Javascript, hasta que le indiquemos que se trata de un
componente, gracias a los metadatos de Angular 2, la forma de añadir metadatos a una clase
en TypeScript es mediante el patrón decorador justo antes de la declaración de la clase.
Veamos:
Ejemplo:
src / app / hero-list.component.ts (metadatos)
@Component({
selector: 'app-hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ] })
export class HeroListComponent implements OnInit { /* . . . */ } (Angular, 2018)
Este ejemplo muestra algunas de las opciones de configuración más útiles
Selector: Un selector CSS que dice a angular que cree o inserte una instancia de este
componente donde encuentre la etiqueta correspondiente en la planilla HTML, por ejemplo si el
HTML de una aplicación contiene <app-hero-list></app-hero-list>, Angular inserta una
instancia de la HeroListComponent vista entre esas etiquetas.
TemplateUrl: La dirección relativa al módulo de la plantilla HTML de este componente.

Alternativamente, puede proporcionar la plantilla HTML en línea, como el valor de la
template propiedad, esta plantilla define la vista del host del componente.
Providers: Una variedad de proveedores de servicios que requiere el componente, en el

ejemplo esto le dice a angular como proporcionar la HeroService instancia que el
constructor del componente usa para mostrar la lista de héroes.
20
5.2.3. Plantillas, Directiva y Enlaces de Datos
Una plantilla combina con HTML con marcado angular que puede modificar elementos HMTL
según los datos y la lógica del programa, el enlace de eventos permite que la aplicación
responda a la entrada del usuario actualizando datos de la aplicación.
Angular evalúa las directivas y resuelve la sintaxis de enlace en la plantilla para modificar
elementos en HTML y el DOM.
5.2.3.1. Plantillas y Vistas
Se define la vista de un componente con su plantilla complementada, las vistas se ordenan

por lo general jerárquicamente lo que permite mostrar modificar u ocultar secciones o
páginas de la interfaz.
Figura 6 Patrón de Diseño MVC
5.2.3.2. Directivas
Existen dos tipos de directivas:
21
Directivas Estructurales: Alteran el diseño añadiendo, eliminando y reemplazando elementos
en el DOM, la plantilla de ejemplo utiliza dos directivas estructurales integradas. Las directivas
estructurales son fáciles de reconocer. Un asterisco (*) precede al nombre del atributo de la
directiva como en este ejemplo.
src / app / hero-list.component.html (estructural)
<li *ngFor="let hero of heroes"></li> <app-hero-detail *ngIf="selectedHero"></app-hero-detail>
(Angular, 2018)
Directiva de Atributos: Alteran la apariencia o el comportamiento de un elemento existente.
src / app / hero-detail.component.html (ngModel)
content_copy<input [(ngModel)]="hero.name">
(Angular, 2018)
Modifica el comportamiento de un elemento existente (normalmente <input>).
En esta parte la AppComponent.html se convertirá en un arnés que permite elegir el color de

resaltado con un botón de opción y vincular su elección a la directiva.
src / app / app.component.html (v2)
content_copy<h1>My First Attribute Directive</h1>
<h4>Pick a highlight color</h4>
<div>
<input type="radio" name="colors" (click)="color='lightgreen'">Green
<input type="radio" name="colors" (click)="color='yellow'">Yellow
<input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>
<p [appHighlight]="color">Highlight me!</p>
(Angular, 2018)
Revise el AppComponent.color para que no tenga un valor inicial.
src / app / app.component.ts (clase)
22
content_copy export class AppComponent {
color: string;
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]' })
export class HighlightDirective {
constructor(
private el: ElementRef) { }
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow'); }
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null); }
private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color;

}
(Angular, 2018)
Vista:
Figura 7 - Ejemplo Interfaz de Directiva de Atributo
5.2.4. Componentes de Estilo
Las aplicaciones angulares están diseñadas con CSS estándar, esto significa que puede aplicar
todo lo que se sabe sobre las hojas de estilo CSS, los selectores, las reglas y las consultas de
23
medios directamente a las aplicaciones de Angular. Además, Angular puede agrupar estilos de
componentes con componentes, lo que permite un diseño más modular que las hojas de estilo
normales, también , pueden definir no solo una plantilla HTML, sino también los estilos CSS que
van con esa plantilla, especificando todos los selectores, reglas y consultas de medios que
necesite.
Ejemplo de cómo pasar datos de padres a hijos con enlace de entrada:
component-interaction / src / app / hero-child.component.ts
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'app-hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p`
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
(Angular, 2018)
component-interaction / src / app / hero-parent.component.ts
import { HEROES } from './hero';
@Component({
selector: 'app-hero-parent',
template: `
<h2>{{master}} controls {{heroes.length}} heroes</h2>
<app-hero-child *ngFor="let hero of heroes"
[hero]="hero"
[master]="master">
</app-hero-child>`
})
24
export class HeroParentComponent {
heroes = HEROES;
master = 'Master';
(Angular, 2018)
Vista:
Figura 8 - Ejemplo de Componentes de Estilo
Interceptar cambios de entrada con un setter:
component-interaction / src / app / name-child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-name-child',
template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
private _name = '';
@Input()
set name(name: string) {
this._name = (name && name.trim()) || '<no name set>';
get name(): string { return this._name; }}
25
component-interaction / src / app / name-parent.component.ts
@Component({
selector: 'app-name-parent',
template: `
<h2>Master controls {{names.length}} names</h2>
<app-name-child *ngFor="let name of names" [name]="name"></app-name-child>`
})
export class NameParentComponent {
// Displays 'Mr. IQ', '<no name set>', 'Bombasto'
names = ['Mr. IQ', ' ', ' Bombasto '];
} (Angular, 2018)
Vista:
Figura 9 - Interfaz con método setter
5.2.5. Servicios e Inyección de Dependencias
En Angular los Servicios son las herramientas básicas para mantener el estado de la aplicación
y compartir información entre los Controllers y un sistema de Inyección de Dependencia
suministra los objetos dependientes (llamados las dependencias ) cuando crea una instancia de
un objeto.
26
5.2.5.1. Servicios
Para la lógica o los datos que no están asociadas a una vista específica y se desea compartir
con los componentes, se crea una clase servicio. La inyección de dependencia (DI) le permite
mantener las clases de componentes eficientes, no obtienen datos del servidor, validan la
entrada del usuario o inician sesión directamente en la consola.
Ejemplos de servicios:
src / app / logger.service.ts (clase)
content_copyexport class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
Pueden depender de otros servicios

src / app / hero.service.ts (clase)
content_copyexport class HeroService {
private heroes: Hero[] = [];
constructor(
private backend: BackendService,
private logger: Logger) {
getHeroes() {
this.backend.getAll(Hero).then( (heroes: Hero[]) => {
this.logger.log(`Fetched ${heroes.length} heroes.`);
this.heroes.push(...heroes); // fill cache
});
return this.heroes;
} } (Angular, 2018)
27
5.2.5.2. Inyección de Dependencia
Dependency Inyection es un patrón poderoso para administrar las dependencias de código. Son
más las oportunidades para mejorar la inyección de dependencia para componentes y objetos.
Se usa en todos lados para proporcionar nuevos componentes con los servicios u otras cosas
que se necesiten. (Singh, 2011)
El inyector es el mecanismo principal, Angular crea un inyector para toda la aplicación durante
el proceso de arranque e inyectores adicionales si lo requieren.
Un inyector crea dependencias y mantiene un contenedor de instancias de dependencia que

reutiliza si es posible.
Un provider dice a un inyector como obtener o crear una dependencia.
Figura 10 - Inyector de dependencias
Fuente: (angular.io, 2018)
5.2.6. Ciclo de vida
Un componente tiene un ciclo de vida administrado por Angular. Lo crea, lo renderiza, crea y
representa a sus hijos, lo revisa cuando cambian sus propiedades de datos y lo destruye antes
de eliminarlo del DOM.
Ejemplos de Ciclos de Vida:
28
Componente Descripción
Demuestra enlace de cada ciclo de vida. Cada método de enlace se

Peek-a-boo
escribe en el registro de pantalla.
Las directivas tienen enlace de ciclo de vida también. A SpyDirective puede

Spy
iniciar sesión cuando el elemento sobre el que spy se crea o destruye
con ngOnInity ngOnDestroy.
Este ejemplo aplica el SpyDirective a <div> en un repetidor de ngFor héroe

administrado por el padre SpyComponent.
Vea cómo Angular llama al enlace ngOnChanges() con un changes objeto

OnChanges
cada vez que cambia una de las propiedades de entrada del
componente. Muestra cómo interpretar el changes objeto.
Implementa un ngDoCheck(), método con detección de cambios

DoCheck
personalizada. Vea con qué frecuencia Angular llama a este gancho y mire
cómo cambia la publicación en un registro.
Demuestra el ngAfterViewInity los ngAfterViewCheckedhooks.

AfterView
Muestra cómo proyectar contenido externo en un componente y cómo

AfterContent
distinguir el contenido proyectado de los elementos secundarios de la vista
de un componente.
Demuestra el ngAfterContentInity los ngAfterContentCheckedhook.
Demuestra una combinación de un componente y una directiva, cada uno

Counter
con sus propios hooks.
En este ejemplo, un CounterComponent registra un cambio (a travez

de ngOnChanges) cada vez que el componente principal incrementa su
propiedad de contador de entrada. El SpyDirective del ejemplo anterior se
aplica al registro de CounterComponent donde observa los registros de
entradas que se crean y destruyen.
Tabla 1 - Descripción de Componentes de ciclo de vida
29
5.2.7. Formularios
Los formularios sirven para ingreso de datos, como también para inicio de sesión, actualizar un
perfil entre otros, angular nos muestra dos enfoques de formularios, los formularios reactivos y
los formularios basados en planillas.
A) Formularios reactivos:
Son más robustas, escalables, reutilizables y comprobables. Son basados en modelos para
manejar las entradas de formularios cuyos valores son cambiantes.
B) Formularios basados en planillas:
La siguiente tabla resume las diferencias clave entre formas reactivas y las basadas en
planillas.
Tabla 2 - Diferencias entre Formularios Reactivo y Basados en Plantillas
Fuente: (angular.io, 2018)
C) Formas Dinámicas
Crear formularios dinámicamente en función de los metadatos que describen el modelo de

objeto comercial. Como por ejemplo con formGroup puede representar dinámicamente un
formulario simple con diferentes tipos de control y validación.
30
5.2.8. Observables
Proporcionan soporte para pasar mensajes entre editores y suscriptores en la aplicación, entre
sus ventajas podemos decir que tienen programación asíncrona y valores de manejo múltiples.
Definen una función para publicar valores pero solo se ejecuta hasta que un consumidor se
suscribe.
Un observable puede entregar múltiples valores de cualquier tipo como ser: literales, mensajes
o eventos según el contexto. Debido a que tienen muchas ventajas, los observables se usan en
angular y se recomiendan para el desarrollo de aplicaciones.
Un controlador para recibir notificaciones observables implementa la interfaz Observer, es un

objeto que define los métodos de devolución de llamada para manejar las notificaciones que un
observable puede enviar.
Figura 11 - Observable
Fuente: (medium, 2017)
Tipos de notificación:
TIPO DE
DESCRIPCIÓN
NOTIFICACIÓN
next Necesario. Un controlador para cada valor entregado. Se llama cero o más
veces después de que comience la ejecución.
error Opcional. Un controlador para una notificación de error. Un error detiene la

ejecución de la instancia observable.
31
complete Opcional. Un controlador para la ejecución: notificación completa. Los
valores demorados pueden continuar entregándose al siguiente controlador
después de que se complete la ejecución.
Tabla 3 - Tipo de Notificaciones de un Observable
El constructor observable se usa para crea una secuencia observable de cualquier tipo. El
constructor toma como argumento la función del suscriptor para ejecutar el método suscribe(),
una función de suscriptor recibe un objeto observer y puede publicar valores en el método next()
del observador.
5.2.9. Enrutamiento
Permite definir una ruta de navegación entre los diferentes estados de aplicación y ver
jerarquías en su aplicación, se basa en convenciones de navegación como por ejemplo:
Ingresar URL en la barra de direcciones y el navegador navegara a la página correspondiente
Hacer Clic en los enlaces de la página y esta abrirá la página correspondiente.
Hacer clic en los botones para retroceder y avanzar en el navegador el cual hace las acciones
correspondientes.
El enrutador mapea rutas de tipo URL a vistas en lugar de paginas
El enrutador interpreta una URL de enlace según las reglas de navegación de la vista de su
aplicación y el estado de los datos. Se puede navegar a otras vistas desde un botón o cuadro
desplegable que funcione, registra la actividad en el historial del navegador. (Angular, 2018)
Ejemplo: Fruteria
app.routing.ts
32
Figura 12 - Ejemplo de Routing en Angular
Fuente: (pixelmouse, 2017)
app.module.ts
Figura 13 - Ejemplo de Routing en Angular
Fuente: (pixelmouse, 2017)
5.2.10.La librería RxJS (Reactive Extension for JavaScript)
Es una biblioteca de programación que utiliza observables que facilita la redacción del código.
Proporciona una implementación de tipo observable, también proporciona funciones de utilidad
para crear y trabajar con observables, estas pueden ser usadas para:
Conversión de código, iterar a través de los valores de una secuencia, mapeo, filtrado de flujos,
componer múltiples transmisiones.
Se puede crear observables de un contador, de un evento, de una solicitud de Ajax.
33
Figura 14 - Ejemplo de RxJS
Fuente: (rxjs, 2018)
6. ReactJS
React es una biblioteca de JavaScript mantenida por Facebook, para crear interfaces de
usuario y aplicaciones JavaScript reutilizables, con el objetivo de facilitar el desarrollo de una
sola página, es un software libre (open source). Fue lanzado en marzo del 2013 y mantenido
por Facebook. También hay empresas que la utilizan como: Instagram, Dropbox y otras.
Permite un desarrollo ágil y ordenado, aunque React no se encarga de todas las partes
necesarias para hacer una aplicación web compleja, la serie de componentes y herramientas
diversas que se basan en React permite encontrar una alternativa capaz de hacer cualquier
cosa que podríamos hacer con un complejo framework.
La gran particularidad de esta librería es que implementa un Virtual DOM, de tal manera que,
en lugar de renderizar todo el DOM en cada cambio, esto se realiza en una copia en memoria y
después usa un algoritmo para comparar las propiedades de la copia en memoria con las de la
versión del DOM y así aplicar cambios exclusivamente en las partes que varían. En
consecuencia, funciona de una forma mucho más eficiente que el método tradicional.
(digitalhouse.com)
34
6.1. Características de ReactJS
Figura 15 - Características de React
Fuente: (reactjs, 2018)
Considerada como la Vista en el patrón de diseño MVC (Modelo, Vista, Controlador)
Sirve para desarrollar aplicaciones web de manera ordenada y con menor código, centrada en
el DOM, permite que se asocien las vistas con los datos, si cambian los datos cambian las
vistas.
React también podría ocupar bastante campo en lo que sería el controlador (C de MVC), todo
depende a la manera de trabajar.
Permite isomorfismo, es decir que con el mismo código podemos renderizar tanto en el cliente
como en el servidor cuando llega a un buscador como Google, con la misma base de código se
le puede entregar el HTML con el contenido ya renderizado, lo que lleva a que una aplicación
React sea capaz de posicionarse como una aplicación web tradicional que renderice el lado del
servidor, todo esto consigue con NodeJS.
35
Permite un desarrollo ágil y ordenado, aunque React no se encarga de todas las partes
necesarias para hacer una aplicación web compleja, la serie de componentes y herramientas
diversas que se basan en React nos permite encontrar una alternativa capaz de hacer cualquier
cosa que podríamos hacer con un complejo framework.
Esta librería brinda muchas ventajas en performance, modularidad y promueve un flujo de datos
y eventos muy claro, lo que facilita la planeación y el desarrollo de apps complejas.
Algunas ventajas: Re-uso de código, Pruebas más sencillas, Separación de responsabilidades.
La gran particularidad de esta librería es que implementa un Virtual DOM, de tal manera que,
en lugar de renderizar todo el DOM en cada cambio, esto se realiza en una copia en memoria y
después usa un algoritmo para comparar las propiedades de la copia en memoria con las de la
versión del DOM y así aplicar cambios exclusivamente en las partes que varían. En
consecuencia, funciona de una forma mucho más eficiente que el método tradicional.
(digitalhouse.com)
React.JS promueve el flujo de datos en un solo sentido, en lugar de hacerlo en forma

bidireccional, tal como ocurre en los Frameworks modernos. Gracias a este detalle, es más
sencilla la planeación y detección de errores en aplicaciones complejas.
6.2. Arquitectura de React
6.2.1. Concepto DOM
Es un conjunto de etiquetas relacionadas para construir páginas con gran rendimiento para lo
cual conocemos los conceptos de:
Componente: Es un conjunto de etiquetas relacionadas de forma lógica que se renderiza en

una página HTML y permite reutilización. Es una representación de la interfaz, estilos.
DOM: (Document object Model) es una estructura que define todas las etiquetas de una página
HTML, es esencialmente una interfaz de plataforma que proporciona un conjunto estándar de
objetos para representar documentos HTML, XHTML y XML, un modelo estándar sobre cómo
puede combinarse dichos objetos y una interfaz para acceder a ellos y manipularlos. El
responsable del DOM es el Word Wide Web Consortium (W3C). (Caules Alvarez, 2 de Abril de
2017)
Es decir, en vez de renderizar todo el DOM en cada cambio, este hace los cambios en una
copia en memoria y después usa un algoritmo para comparar las propiedades de la copia en
36
memoria con la de la versión del DOM y así aplicar cambios exclusivamente en las partes que
varían.
Para poder trabajar necesitamos instalar primero nodejs y por la línea de comandos: npm install
express y npm install body-parser
6.2.2. React Propiedades y Estado
Todos los componentes de React pueden incluir propiedades como parámetros para añadir
flexibilidad.
Figura 16 - Propiedades y Estado
Fuente: (Caules Alvarez, 2 de Abril de 2017)
Tendríamos la posibilidad de modificar el componente para que reciba ambos mensajes a

través de dos propiedades y los muestre.
Figura 17 - Propiedades y Estado 2
37
6.2.3. React State
Utilizando el concepto de propiedad para añadir flexibilidad a los componentes, las propiedades
son conceptos estáticos y no pueden modificarse, lo cual es un problema porque normalmente
necesitamos cambiar parte de la información que un componente almacena. El estado en React
es la parte del componente con capacidad de almacenar información que puede ser modificada.
(Caules Alvarez, 2 de Abril de 2017)
Figura 18 - Estado
El estado de un componente se define como una presentación del mismo en un momento

concreto, es decir, una instantánea del propio componente. Existen dos tipos de componentes
con y sin estado, denominado statefull y stateless (Caules Alvarez, 2 de Abril de 2017)
6.2.3.1. Componente Simple (Stateless Component)
Los componentes de React implementan un método render() que toma datos de entrada y
devuelve lo que se muestra, este ejemplo utiliza una sintaxis similar a XML llamada JSX. Se
puede acceder a los datos de entrada que pasan al componente render() a través de this.props.
Ejemplo:
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}}
38
ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);
(reactjs, 2018)
Figura 19 - Ejemplo de Método Render
6.2.3.2. Componente de Estado (Stateful Component)
A demás de tomar datos de entrada (a los que accede a través de this.props), un componente
puede mantener datos de estados internos (a los que accede a través de this.state). Cuando los
datos de estado de un componente cambian, la marcación renderizada se actualizará mediante
una nueva invocación render().
Ejemplo:
class Timer extends React.Component {

constructor(props) {
super(props);
this.state = { seconds: 0 }; }
tick() { this.setState(state => ({
seconds: state.seconds + 1
})); }
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000); }
componentWillUnmount() {
39
clearInterval(this.interval); }
render() { return (
<div> Seconds: {this.state.seconds} </div> );
}
}
ReactDOM.render(<Timer />, mountNode);
(reactjs, 2018)
Figura 20 - Ejemplo de Método Render en Estados de Tiempo Inicial
Figura 21 - Ejemplo de Render en Estado de Tiempo Transcurrido
40
Aplicación
Usando props y state, podemos armar una pequeña aplicación de Todo. Este ejemplo se
utiliza state para rastrear la lista actual de elementos, así como el texto que el usuario ha
ingresado. Aunque los controladores de eventos parecen estar representados en línea, se
recopilarán e implementarán mediante la delegación de eventos.
Figura 22 - Ejemplo Para Rastrear Lista Actual
Figura 23 - Primer Elemento Insertado
41
Figura 24 - Segundo Elemento Insertado
Figura 25 - Tercer Elemento a Insertar
class TodoApp extends React.Component {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
render() {
return (
<div>
<h3>TODO</h3>
42
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
handleChange(e) {
this.setState({ text: e.target.value });
handleSubmit(e) {
e.preventDefault();
if (!this.state.text.length) {
return;
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
43
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
ReactDOM.render(<TodoApp />, mountNode);
(reactjs, 2018)
6.2.3.3. Componente que usa Complementos Externos
React es flexible y proporciona enlaces que le permiten interactuar con otras Libraries y
Frameworks. Este ejemplo utiliza una notable biblioteca externa de Markdown, para
convertir el valor de <textarea> en tiempo real.
Figura 26 - Componentes Que Utiliza Complementos Externos

44
class MarkdownEditor extends React.Component {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = { value: 'Hello, **world**!' };
handleChange(e) {
this.setState({ value: e.target.value });
getRawMarkup() {
const md = new Remarkable();
return { __html: md.render(this.state.value) };
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<label htmlFor="markdown-content">
Enter some markdown
</label>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value} />
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()} />
</div>
); }
ReactDOM.render(<MarkdownEditor />, mountNode);
(reactjs, 2018)
45
6.2.3.4. React y Clases
En programación orientada a objetos los componentes se definen con el concepto de clase, en

React sucede lo mismo,
Ejemplo: Primer componente React
Figura 27 - Código Fuente de un Componente React
6.2.3.5. JSX
JSX es un preprocesador opcional para la sintaxis similar a HTML que se compilará en

JavaScript más adelante. “Tiene algunos caprichos: por ejemplo, necesita usar className
en lugar de class, porque este último es un nombre protegido en JavaScript. JSX es una gran
ventaja para el desarrollo, porque tiene todo en un solo lugar, y la finalización del código y las
comprobaciones en tiempo de compilación funcionan mejor. Cuando crea un error tipográfico en
JSX, React no se compilará e imprimirá el número de línea donde ocurrió el error
tipográfico. Angular 2 falla silenciosamente en tiempo de ejecución (este argumento es
probablemente inválido si usa AOT con Angular).” (CODEPEN.IO, 2018)
JSX implica que todo en React es JavaScript: se usa tanto para las plantillas JSX como para la
lógica.
46
Figura 28 - Ejemplo de JSX
Figura 29 - Ejemplo Tic Tac Toe aplicación con React
Fuente: (CODEPEN.IO, 2018)
Figura 30 - Resultados de Tic Tac Toe con React
Fuente: (CODEPEN.IO, 2018)
Código fuente : https://codepen.io/gaearon/pen/gWWZgR
HTML:
background: #c00;
47
color: #fff;
display: none;
margin: -20px -20px 20px;
padding: 20px;
white-space: pre-wrap;
"></div>
<div id="root"></div>
<script>
window.addEventListener('mousedown', function(e) {
document.body.classList.add('mouse-navigation');
document.body.classList.remove('kbd-navigation');
});
window.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
document.body.classList.add('kbd-navigation');
document.body.classList.remove('mouse-navigation');
});
window.addEventListener('click', function(e) {
if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') {
e.preventDefault();
});
window.onerror = function(message, source, line, col, error) {
var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col
+ ')';
errors.textContent += text + '\n';
errors.style.display = '';
};
console.error = (function(old) {
return function error() {
errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '\n';
errors.style.display = '';
48
old.apply(this, arguments);
})(console.error);
</script>
(CODEPEN.IO, 2018)
7. Similitudes entre Angular y ReactJS
En conclusión, ambas tienen similitud como por ejemplo, ambas son open source, nos permiten
crear proyectos de una manera más rápida, a través de angular o react, ambas están basadas
en componentes que nos permiten separar una aplicación en múltiples componentes, es decir
que este al unirse de nuevo tendría que funcionar.
Ambas están soportadas por grandes compañías como Google y Facebook.
Ambas utilizan TypeScript.
8. Ventajas y Desventajas de Angular y ReactJS
8.1. Ventajas y desventajas de Angular
Ventajas Desventajas
La Popularidad sigue siendo mayor, esto genera que Problemas de migración que
muchos proyectos decidan por Angular como su pueden aparecer al pasar de la
framework de desarrollo client-side versión anterior a la última.
Angular tiene todo en uno, es una solución completa. Menor libertad en la elección de
componentes. Angular propone una
arquitectura definida que puede dar
Angular es atractivo tiene más características y
problemas si el desarrollador quiere
funcionalidades que cualquier otro framework.
experimentar otras opciones para
realizar un proyecto
La dificultad de las pruebas se reduce drásticamente por El performance es más lento
49
la forma en que el código está estructurado. cuando despliega grandes
cantidades de datos.
Permite la reutilización de cliente y del servidor ya que

se puede trabajar en paralelo. Requiere mayor conocimiento de
lenguajes de programación.
Reducción de tiempo en el desarrollo a través de

componentes reutilizables
Angular se puede integrar con otros frameworks,

bibliotecas, plugins, trabajando en conjunto.
Enlace bidireccional: Angular mantiene los datos y la

capa de presentación sincronizados. Ahora no necesita
escribir código JavaScript adicional para mantener los
datos en su código HTML y sus datos posteriormente
sincronizados.
Angular puede ocuparse del enrutamiento, lo que

significa moverse de una vista a otra. Esta es la clave
fundamental de las aplicaciones de una sola página; en
el que puede moverse a diferentes funcionalidades en
su aplicación web en función de la interacción del
usuario pero permanecer en la misma página.
Angular tiene características de testeo avanzada.
Tiene proceso de desarrollo rápido, demanda menos

código.
Tabla 4 - Ventajas y Desventajas de Angular
Fuente: (reactjs, 2018) (medium, 2018) (nnodes, 2016)
50
8.2. Ventajas y desventajas de ReactJS
Ventajas Desventajas
Tiene mejor performance al manejar una gran cantidad React a diferencia de angular no
de datos, debido a que el renderizado es más rápido, posee animaciones, enrutamiento,
por la característica del Virtual DOM. inyección de dependencias o
pruebas por defecto, sino que
nosotros tendríamos que agregarlo
La curva de aprendizaje es menor al requerir
por módulos o partes o crearlos por
básicamente solo el conocimiento de JavaScript.
nosotros mismos, pero ya
encontraremos muchos módulos ya
El Soporte de Navegadores, soporta versiones creados porque la librería es muy

antiguas de IE. conocida y hay muchas personas
que han desarrollado en ella,
entonces vamos a encontrar
React tiene un algoritmo muy eficiente para determinar muchas bibliotecas
las diferencias entre la representación virtual de la
página y la nueva, gracias a eso hace el mínimo de
cambios necesarios en el DOM. React solo es un motor de
renderización, no hace routing o
comunicación con el servidor, para
Es mucho más ligero porque el núcleo de React es tan esto tiene que buscar terceras
solo una librería, entonces al ser una librería podemos librerías para integrarlas a la
instalarla o integrarla en proyectos que ya vienen aplicación y tener todas las
escritos con JavaScript puro o con otras bibliotecas. capacidades necesarias.
Tabla 5 - Ventajas y Desventajas de React
Fuente: (reactjs, 2018) (medium, 2018) (nnodes, 2016)
Ahora si queremos a aprender a utilizar React, también tendremos que aprender a utilizar uno
de estos manejadores de estado, además el núcleo de react es pequeño y debido a esto es
51
fácil de aprender y más natural para las personas que han desarrollado en JavaScript hace
muchos años.
9. Caso de estudio
Tomando en cuenta el proyecto que elaboramos dentro el Diplomado, para el ejemplo de

Angular, fue adecuada la opción para nuestro caso de estudio: “Sistema de Seguridad
Industrial” para una Empresa de Construcción con Angular, debido su complejidad, comparada
con React, además que exigían los tiempos de entrega del módulo correspondiente, se
mostrará la interfaz de usuario elaborada de los diferentes módulos
Considerando aspectos como:
La instalación: IntelliJ, Webstorm, Angular 2 (Angular CLI 1.7.4), Nodejs, java 1.8.0, maven
3.5.4, SQL Server, configuración de git2.17.0 y un inicializador como inicializador de spring.
Los Datos o información de registros:
Registros de Administración: contratos, proyectos, personal, posición.
Registros de Equipos: maquinaria, material, equipos de protección
Registros de Asignación de Equipos: Asignaciones de maquinaria, material, equipos de

protección
Registro y Datos sobre la Estructura Organizacional: Nivel de Jerarquía organizacional
Vista de la Interfaz de Usuario del “Sistema de Seguridad Industrial” en Angular 2 (Angular CLI)
Figura 31 - Página de Inicio
Fuente: Elaboración Propia
52
Figura 32 - Selección de Administración
Figura 33 - Lista de Registro de Contratos
Figura 34 - Lista de Registro de Proyectos
53
Figura 35 - Lista de Registro de Personal
Figura 36 - Lista de Cargos
Figura 37 - Selección de Equipos
54
Figura 38 - Lista de Registro de Maquinaria
Figura 39 - Lista de Registro de Material
Figura 40 - Selección de Asignaciones de Equipos
55
Figura 41 - Lista de Registro de Asignación de Material
Figura 42 - Lista de Asignación de Equipos de Protección
Figura 43 - Selección de Estructura Organizacional
56
Figura 44 - Datos de la Compañía
Figura 45 - Tipos de Áreas
Figura 46 - Nivel de Jerarquía Organizacional
57
Figura 47 - Selección de Administración de Accidentes
Figura 48 - Lista de Accidentes
Figura 49 - Datos Acerca de la Empresa
58
Figura 50 - Contactos
10. Conclusiones
En conclusión “Angular” es un framework para aplicaciones web desarrollado en TypeScript, de

código abierto, se utiliza para crear y mantener aplicaciones web de una sola página. Su
objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo - Vista -
Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles,
Angular es un conjunto de bibliotecas de TypeScript. Gracias a que el framework Angular utiliza
Módulos, Componentes, Servicios, Plantillas, Enrutamiento, esto nos ofrece una mayor
eficiencia y rapidez del proyecto
La gran particularidad de la librería React es que implementa un Virtual DOM, de tal manera
que, en lugar de renderizar todo el DOM en cada cambio, esto se realiza en una copia en
memoria y después usa un algoritmo para comparar las propiedades de la copia en memoria
con las de la versión del DOM y así aplicar cambios exclusivamente en las partes que varían.
En consecuencia, funciona de una forma mucho más eficiente que el método tradicional.
Ambas son open source, nos permiten crear proyectos de una manera más rápida, a través de
angular cli o react, ambas están basadas en componentes que nos permiten separar una
aplicación en múltiples componentes, es decir que este al unirse de nuevo tendría que
funcionar.
React solo es un motor de renderización, no hace routing o comunicación con el servidor, para
esto tiene que buscar terceras librerías para integrarlas a la aplicación y tener todas las
59
capacidades necesarias. Angular en cambio hace una reducción de tiempo en el desarrollo a
través de componentes reutilizables nos permite ser más rápidos en un mundo donde las
metodologías ágiles predominan, el tiempo de respuesta, calidad y muchos otros factores son
cruciales.
Un caso de estudio de Angular fue el proyecto elaborado en el Diplomado, el cual nos mostró
variedad de elementos que facilitan el desarrollo de la interfaz en la aplicación, aprendiendo así
a utilizar el modelo vista controlador (MVC) del framework Angular, juntamente con Gitlab para
la codificación grupal y simultanea que sirvió para actualizar rápidamente los avances del
sistema y de esta manera poder elaborar el proyecto por partes separadas, que en este caso
fue por módulos.
Si lo que interesa es el performance teniendo gran cantidad de datos y/o componentes un buen
candidato es React, si no es muy importante el performance un candidato es Angular. También
dependiendo del conocimiento y experiencia del equipo de desarrollo se puede elegir
cualquiera de las dos.
60
11. Bibliografía
(21 de Septiembre de 2018). Recuperado el 5 de 10 de 2018, de reactjs.org: https://reactjs.org/
angular. (2018). angular. Obtenido de angular.io: https://angular.io/guide/architecture
Angular. (2 de Septiembre de 2018). Angular. Obtenido de Feactures: https://angular.io
Angular. (10 de Septiembre de 2018). architecture. Obtenido de angular.io:

https://angular.io/guide/architecture
Angular. (3 de Septiembre de 2018). architecture-modules. Recuperado el 12 de 09 de 2018, de angular:

https://angular.io/guide/architecture-modules
Angular. (Septiembre de 2018). component-interaction. Recuperado el 20 de Septiembre de 2018, de

angular.io: https://angular.io/guide/component-interaction
angular. (2 de Septiembre de 2018). Features. Obtenido de angular.io: https://angular.io
Angular. (9 de Septiembre de 2018). lifecycle-hooks. Recuperado el 9 de Septiembre de 2018, de

angular.io: https://angular.io/guide/lifecycle-hooks
angular.io. (2018). Recuperado el 10 de Sepiembre de 2018, de https://angular.io/guide/architecture-

services
angular.io. (2018). Recuperado el 15 de Septiembre de 2018, de https://angular.io/guide/forms-

overview
Angular.io. (2018). Recuperado el 9 de Septiembre de 2018, de https://angular.io/guide/architecture-

components
Arizmendi, P. (18-03-2018). Introducción. En P. Arizmendi, AngularJS. Kindle.
bcn-foundation. (27 de Mayo de 2016). bcn fundacion. Obtenido de http://bcn.foundation-

sp.com/2016/07/27/estructura-de-angular-2/
Brad Geen, S. s. (Abril, 2013). AngularJS. En S. s. Brad Geen, AngularJS (pág. 196). Tokio: O'Reilly.
Caules Alvarez, C. (2 de Abril de 2017). Desarrollo Web con React. Kindle.
CODEPEN.IO. (2018). Recuperado el 6 de Octubre de 2018, de https://codepen.io/gaearon/pen/gWWZgR
digitalhouse.com. (s.f.). Recuperado el 28 de 09 de 2018, de

https://www.digitalhouse.com/noticias/funciona-react-js/
frostqui. (16 de Noviembre de 2018). frostqui.github.io. Obtenido de https://frostqui.github.io/angular-

componentes-routing
medium. (29 de Octubre de 2017). medium. Obtenido de medium.com: https://medium.com
61
medium. (marzo de 2018). @TechMagic. Obtenido de medium:
https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-
b91e028fa91d
nnodes. (9 de Agosto de 2016). react-vs-angular-2. Obtenido de nnodes:

https://nnodes.com/blog/2016/react-vs-angular-2
pixelmouse. (15 de Febrero de 2017). pixelmouse. Obtenido de pixelmouse: https://pixelmouse.es
reactjs. (3 de Septiembre de 2018). Características. Obtenido de angular: http://reactjs.org
reactjs. (octubre de 2018). docs. Obtenido de reactjs: https://reactjs.org/docs/getting-started.html?no-

cache=1
rxjs. (2018). rxjs.dev. Obtenido de rxjs: https://rxjs-dev.firebaseapp.com/guide/observable
Singh, A. (2011). Preguntas y respuestas de la entrevista de Angular 2: con Typescript y Angular 4. En A.

Singh, Preguntas y respuestas de la entrevista de Angular 2: con Typescript y Angular 4 (pág. 2).
India: Reena Singh.
62

Caracteristicas de Angular y React para Desarrollo de Interfaces de Usuario de Aplicaciones Web

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Caracteristicas de Angular y React para Desarrollo de Interfaces de Usuario de Aplicaciones Web

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD MAYOR DE SAN SIMON

FACULTAD DE CIENCIAS Y TECNOLOGIA

“CARACTERÍSTICAS DE ANGULAR Y REACT

TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO

POSTULANTE : DIPP SEJAS CRISTINA

Figura 1 - Cuadro de características de Angular ....................................................................... 13

Tabla 1 - Descripción de Componentes de ciclo de vida ........................................................... 29

Palabras clave: Angular, React, interfaz de usuario.

Dedicado a Dios, a mis padres, Alicia

Le doy gracias a Dios, a mis padres, a mi

Por lo mencionado anteriormente el principal problema es tener la información necesaria sobre

La información de estas herramientas y sus características facilitan la elaboración de cualquier

2. Delimitación del Problema

La información recolectada de estas dos herramientas importantes, van dirigidas a todos

Estos dos puntos anteriores sustentan el título de la monografía “Características de Angular y

3.1. Antecedentes Generales

Las características de las diferentes herramientas de software enfocadas para el desarrollo de

3.2. Antecedentes Específicos

El framework Angular utiliza Módulos, Componentes, Servicios, Plantillas, Enrutamiento.

Para el presente trabajo se utilizarán los siguientes métodos de investigación:

 Método Bibliográfico, debido a que se realizará la lectura y compilación de libros relacionados

(Arizmendi, 18-03-2018, pág. 17)

5.1 Características de Angular

Reusabilidad: Permite crear componentes (directivas) fácilmente reutilizables (que permiten

Pruebas: Al tener componentes aislados, podemos testear su comportamiento de manera

Inyección de dependencias (Dependency Inyection): Si necesitamos hacer uso de un

Controlador: Es el código con la lógica que comunica el modelo con la vista.

Figura 1 - Cuadro de características de Angular

Fuente: (angular, 2018)

5.1.1. Velocidad y Rendimiento

Angular CLI: Las herramientas de línea de comandos permiten empezar a desarrollar

IDEs: Obtención de sugerencias de código inteligente, detención de errores y otros comentarios

Los bloques de construcción de una aplicación angular son NgModules, proporcionan un

Los componentes usan Servicios, los proveedores de servicios pueden inyectarse en

Figura 2 - Arquitectura de Angular

Fuente: (angular, 2018)

Los NgModules angulares difieren y complementan los módulos de JavaScript, un NgModules

Ordena el código en varios módulos funcionales y ayuda a gestionar el desarrollo de las

5.2.1.1. NgModules Metadatos

Se define con una clase decorada @NgModule(). Sus propiedades son:

Declarations: Los componentes, directivas y tuberías que pertenecen a este módulo.

Providers: creadores de servicios, se vuelven accesibles a todas partes de la aplicación.

src / app / app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

bootstrap: [ AppComponent ] }) export class AppModule { } (Angular, 2018)

5.2.1.3. NgModule y Componentes

Un componente y su plantilla juntos definen una vista.

Figura 3 - Componentes y Plantillas

Fuente: (Angular, 2018)

Fuente: (Angular, 2018)

5.2.1.4. NgModules y modules de JavaScript

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

Fuente: (Angular, 2018)

Figura 5 - Estructura de un Componente

Fuente: (bcn-foundation, 2016)

El decorador @Component() identifica la clase enseguida, proporciona la plantilla y metadatos

Los decoradores son funciones que modifican las clases de JavaScript.

src / app / hero-list.component.ts (clase)

export class HeroListComponent implements OnInit {

<li ngFor="let hero of heroes"></li> <app-hero-detail ngIf="selectedHero"></app-hero-detail>