Características de La Programación Reactiva en Typescript

UNIVERSIDAD MAYOR DE SAN SIMON
FACULTAD DE CIENCIAS Y TECNOLOGIA
CARRERA INGENIERIA DE SISTEMAS
MONOGRAFÍA
“CARACTERÍSTICAS DE LA PROGRAMACIÓN REACTIVA EN TYPESCRIPT”
PARA OPTAR AL TITULO DE LICENCIATURA EN INGENIERIA DE SISTEMAS
AUTOR: RICARDO ARGOTE SEVILLANO
TUTOR: ING. EDSON ARIEL TERCEROS TORRICO
Cochabamba - Bolivia
2018
1
AGRADECIMIENTOS
Primeramente agradecer a Dios por permitirme

formarme mucho más en este diplomado.
A mis padres José Argote y Florinda Sevillano por su

apoyo incondicional que me brindaron.
A la Digital Harbor por el aporte que dan para bien de

todos los profesionales.
A los docentes de cada módulo por la dedicación y la

paciencia que dedicaron en los diferentes módulos.
A mi tutor Ing. Edson Ariel Terceros Torrico por guiarme

en el desarrollo de esta monografía.
A todos mis compañeros y amigos que de alguna manera

se involucraron en mi formación. 2
CONTENIDO
TABLA DE FIGURAS ............................................................................................................ 5
1. INTRODUCCION. ........................................................................................................... 7
2. GENERALIDADES.......................................................................................................... 8
2.1. Antecedentes generales............................................................................................. 8
2.2. Antecedentes específicos. .......................................................................................... 9
3. METODOLOGÍA............................................................................................................. 9
4. CARACTERÍSTICAS DE LA PROGRAMACIÓN REACTIVA CONSIDERANDO EL

LENGUAJE DE PROGRAMACIÓN TYPESCRIPT. ............................................................. 10
4.1. Introducción a la programación en TypeScript. ................................................ 10
4.2. Reseña histórica. .................................................................................................. 11
4.3. Definición de TypeScript ..................................................................................... 11
4.3.1. Fundamentos de TypeScript (porque TypeScript) ........................................ 12
4.4. Instalación de TypeScript .................................................................................... 14
4.5. Características. ..................................................................................................... 15
4.5.1. Sistema de Tipado. ............................................................................................ 16
4.5.2. Funciones y tipos de funciones........................................................................ 19
4.5.3. Clases ................................................................................................................. 25
4.5.4. Interfaces ........................................................................................................... 26
4.5.5. Decoradores ...................................................................................................... 28
4.5.6. Módulos ............................................................................................................. 33
5. RXJS Y LA PROGRAMACIÓN REACTIVA. ............................................................. 36
5.1. Definición de la Programación Reactiva. ............................................................ 36
5.1.1. EL manifiesto Reactivo. .................................................................................... 38
3
5.2. Aplicaciones de la programación reactiva ...................................................... 39
5.3. Rx o Reactive Extensions ...................................................................................... 39
5.3.1. Características de una librería Reactiva ......................................................... 40
5.3.2. Rx.JS ................................................................................................................... 46
6. ANGULAR ................................................................................................................. 50
6.1. Conceptos Básicos de Angular ............................................................................ 51
6.2. Componentes y características de Angular ........................................................ 54
6.2.1. Templates. .......................................................................................................... 56
6.2.2. Components Styles. ............................................................................................ 56
6.2.3. Módulos. ............................................................................................................ 57
6.2.4. Directives ........................................................................................................... 58
6.2.5. Pipes................................................................................................................... 59
7. APLICACIONES REALIZADAS CON LA PROGRAMACION REACTIVA EN

TYPESCRIPT. ...................................................................................................................... 61
8. CONCLUSIONES........................................................................................................... 61
9. BIBLIOGRAFIA ............................................................................................................ 63
4
TABLA DE FIGURAS
Figura 1: Evolución de TypeScript ................................................................................................ 12

Figura 2: TypeScript a lo largo del tiempo ...................................................................................... 13
Figura 3: Instalación de TypeScript .............................................................................................. 14
Figura 4: Verificación de la Versión TypeScript ............................................................................... 14
Figura 5: Hola Mundo en TypeScript ............................................................................................. 15
Figura 6: Ejecución de un archivo Js ............................................................................................. 15
Figura 7: Tipos en TypeScript ...................................................................................................... 17
Figura 8: Tipos Number y String ................................................................................................... 17
Figura 9: Funciones en TypeScript ................................................................................................ 21
Figura 10: Parámetros de una función ........................................................................................... 21
Figura 11: Asignación de Variables ............................................................................................... 22
Figura 12: Clase en TypeScript..................................................................................................... 26
Figura 13: Interface en TypeScript ................................................................................................ 27
Figura 14: implementación de una Interface .................................................................................... 27
Figura 15: Decoradores de TypeScript ........................................................................................... 28
Figura 16: Decoradores de Clase .................................................................................................. 30
Figura 17: Decorador de Método .................................................................................................. 31
Figura 18: Aplicación de un Decorador de método ............................................................................ 31
Figura 19: Decorador de Propiedad .............................................................................................. 32
Figura 20: Decorador de Parámetro .............................................................................................. 33
Figura 21: Módulo en TypeScript .................................................................................................. 35
Figura 22: Programación reactiva ................................................................................................ 38
Figura 23: Ejemplo de Observable ................................................................................................ 42
Figura 24: Diagrama de Marble ................................................................................................... 43
Figura 25: Funcionamiento de Rx ................................................................................................. 44
Figura 26: Sistema Observable-Scheduler-Observer .......................................................................... 45
5
Figura 27: Ejemplo Reactivo con Excel .......................................................................................... 45
Figura 28: Ejemplo reactivo Programación ..................................................................................... 46
Figura 29: Resultado sin RxJS ...................................................................................................... 48
Figura 30: Ejemplo de Código sin usar RxJS .................................................................................. 48
Figura 31: Ejemplo con RxJS ....................................................................................................... 49
Figura 32: Ejemplo de código con RxJS .......................................................................................... 49
Figura 33: Aplicación de RxJS ..................................................................................................... 50
Figura 34: Arquitectura Angular ................................................................................................... 52
Figura 35: Módulo raíz Angular ................................................................................................... 53
Figura 36: Estructura de los componentes Angular ........................................................................... 54
Figura 37: Código AppComponent ................................................................................................ 55
Figura 38: Plantilla de angular .................................................................................................... 56
Figura 39: Módulo en Angular ..................................................................................................... 58
Figura 40: Directiva Angular ....................................................................................................... 59
Figura 41: Pipe ......................................................................................................................... 60
6
1. INTRODUCCION.
A lo largo de los años el mercado de la tecnología ha ido avanzando de una manera

extremadamente rápida lo que hace que los productores de software tengan que adoptar
mejores maneras de desarrollar sus productos y que a su vez tengan que optar por
mejores herramientas de desarrollo, lo que nos lleva analizar las diferentes opciones y
nuevas tecnologías de desarrollo de aplicaciones.
Desarrollar aplicaciones en JavaScript puede convertirse en todo un desafío una vez que
empieza a crecer tanto la aplicación como el equipo, originalmente se pensó como un
lenguaje para hacer efectos sencillos en las páginas estáticas, y se está intentando usar
para hacer aplicaciones mucho más complejas de lo que se pensó originalmente posible.
Aunque JavaScript está avanzando a pasos agigantados, la compatibilidad con

navegadores antiguos es todavía un problema lo afecta especialmente a los
programadores .NET, por ello la gente de Microsoft creó TypeScript, un lenguaje Open
Source basado en JavaScript y que se integra perfectamente con otro código JavaScript,
solucionando algunos de los principales problemas que tiene JavaScript:
•Falta de tipado fuerte y estático.

•Falta de “Syntactic Sugar” para la creación de clases
•Falta de interfaces (aumenta el acoplamiento ya que obliga a programar hacia la
implementación)
•Módulos (parcialmente resuelto con require.js, aunque está lejos de ser perfecto)
Por otro lado, en los últimos tiempos están sucediendo cambios en el ámbito de la
computación y están apareciendo nuevos conceptos y paradigmas que dan respuesta a la
situación social y tecnológica actual.
Uno de los términos en auge es la programación reactiva y en este documento veremos

en que se basa y cuales son su principal beneficio.
7
La programación reactiva son un conjunto de patrones y técnicas que ganan mucha
importancia en los últimos años, esto es producido porque los requerimientos en la
computación están cambiando.
Problemas por los que sigue tropezando JavaScript como estructurar un código sea más
fácil de mantener para otros programadores, problemas para bases de código grandes,
aplicaciones en gran escala, y proyectos con muchos años de desarrollo y también los
errores de tipado por los que se siguen tropezando, hace buscar una mejor manera de
programar y desarrollar aplicaciones.
Este documento nos servirá para poder optar una mejor manera de programar de manera
que sea una ayuda para los equipos de desarrollo y para futuros programadores con
respecto al mantenimiento del código desarrollado y se pueda mejorar e incluso prevenir
los errores que siempre nos están saliendo al momento de programar y ejecutar el código,
especialmente cuando las aplicaciones se tornan más grandes y complejas.
También podremos determinar las arquitecturas y paradigmas que debemos optar para
poder estar a la altura de los avances de la tecnología y poder satisfacer las necesidades
de los usuarios, del mercado y de los mismos productores de aplicaciones.
Para este fin se hará un estudio profundo de las “características de la programación

reactiva en TypeScript.”
El resultado de esta monografía será que los programadores puedan tomar en cuenta que
con la programación reactiva en TypeScript se puede mejorar la entrega de los productos
de software y eficiencia de las aplicaciones desarrolladas de tal modo poder satisfacer de
manera óptima las necesidades de los usuarios en la actualidad.
2. GENERALIDADES.
2.1. Antecedentes generales
Los Datos del Instituto Nacional de Estadística nos indican que en los últimos 11 años la
construcción ha sido uno de los principales motores de la economía y registrando un
8
crecimiento mayor al del Producto Interno Bruto (PIB) de Bolivia durante el mismo
periodo, lo que ha convertido al rubro en el cuarto mayor generador de empleo del
mercado nacional. (Castel, 2017)
La construcción es una actividad arriesgada, hecho que está comprobado por los índices
de siniestralidad laboral, que colocan a este sector en primer lugar en comparación con
otras actividades, ya que este tipo de trabajo pueden ocasionar accidentes mortales o
producir perjuicios para la salud.
Siendo una actividad demandante, el uso de recursos y herramientas juegan un papel

importante en el rubro. Los estudios de los accidentes en este sector indican que no
tienen origen en una sola causa, por regla general cada accidente es el resultado de la
concurrencia de varias causas primarias. Entre ellas podemos mencionar la ausencia o
deficiencia de la asignación de equipamiento de seguridad, la inadecuada estructura
organizacional, además de la carencia de información respecto a la seguridad en la
empresa, entre otras causas.
Por lo cual es muy necesario que el sistema construido para resolver este tipo de
problemas deba estar constantemente actualizado y trabajar con datos o información en
tiempo real.
2.2. Antecedentes específicos.
Para realizar y aplicar la programación reactiva con TypeScript existe un framework

llamado Angular donde se trabaja aplicando estas características por lo que
profundizaremos acerca de ello. Analizaremos la funcionalidad de las distintas
herramientas que con el avance del tiempo han ido desarrollándose para trabajar con
este paradigma.
3. METODOLOGÍA
Para el presente trabajo se utilizarán los siguientes métodos de investigación:
9
Método Bibliográfico, debido a que se realizará la lectura y compilación de libros y
páginas de internet 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 de la siguiente
monografía.
4. CARACTERÍSTICAS DE LA PROGRAMACIÓN REACTIVA

CONSIDERANDO EL LENGUAJE DE PROGRAMACIÓN
TYPESCRIPT.
Las características de la programación reactiva utilizando el lenguaje de programación

TypeScript son la construcción de aplicaciones escalables y de funcionamiento en tiempo
real capaces de dar respuestas inmediatas en plena ejecución y su aplicación al desarrollar
un producto de software utilizando clases, funciones y métodos como nunca antes se
había hecho en JavaScript, también las interfaces, las directivas, decoradores y la
implementación de módulos son una manera mucho más fácil de desarrollar.
4.1. Introducción a la programación en TypeScript.
Es muy importante recalcar que en años anteriores la necesidad con respecto al desarrollo
de aplicaciones no tenía tantas exigencias como las que hoy en día se tiene. Por lo cual
JavaScript que es uno de los lenguajes más populares, que de hecho ha evolucionado y
mejorado a pasos agigantados en los últimos años, ha sido un lenguaje que ha estado
cubriendo las necesidades como se ha demandado y en la medida que se requería.
Sin embargo se puede ver que JavaScript en algún punto fue un lenguaje que presentaba
muchos problemas para bases de código grandes, aplicaciones de gran escala y proyectos
con muchos años de desarrollo.
En 2012 en JavaScript no había clases, ni módulos, el ecosistema carecía de herramientas

que optimizaran el flujo de desarrollo, derivado precisamente por las carencias del
lenguaje mismo.
10
En este documento se pretende mencionar y profundizar todos los aspectos a considerar
para poder realizar una efectiva aplicación de la programación en TypeScript.
4.2. Reseña histórica.
Originalmente, productos como Bing y Office 365 despertaron en Microsoft la necesidad

de una mejora a JavaScript que permitiera construir productos escalables.
Este lenguaje de programación (TypeScript) fue creado bajo el estándar de código abierto
y desarrollado por Microsoft en el año 2012 para el desarrollo de aplicaciones con
JavaScript a gran escala, para ellos y para sus clientes. Está basado en JavaScript, con el
agregado de tipado estático y objetos basados en clases. Fue desarrollado por el mismo
creador C#, Delphi y turbo Pascal, Anders Hejlsberg, y soporta tanto desarrollos del lado
del cliente, como del lado del servidor utilizando, para este último caso, Node.JS. Está
incluido en Visual Studio desde la versión 2013, y se continuó su expansión en esta
plataforma hacia las versiones 2015 y 2017 del framework.NET. Su web oficial es
www.typwscriptlang.org (Luna & Peña, pág. 22).
Entre sus notables versiones están 0.8 (2012), 0.9 (2013), 1.0 (2014), 1.8 (2016), 3.1(2018).
Reconocido para anotaciones de tipo, control estático, Usos notables clientes web
grandes, etiquetas orientadas a objetos, estructuradas, imperativas, funcionales.
Uno de los muchos lenguajes de compilación a JavaScript para el desarrollo de lado del
cliente, el TypeScript de Microsoft, es un súper conjunto de JavaScript; conociendo
JavaScript, se puede comenzar a utilizar TypeScript de inmediato, las anotaciones de tipo
permiten que abran posibilidades para el análisis estático de código fuente. Además,
TypeScript también presenta clases, herencia, genéricos y módulos, respaldando su lema
"JavaScript que escala", descrito según (Toal & Rivera, 2017, pág. 293)
4.3. Definición de TypeScript
TypeScript es un lenguaje creado por Microsoft y es open source, próximo sintácticamente

a JavaScript y que genera código JavaScript tras su compilación. Una de las ventajas de
11
este lenguaje es su fase de compilación, durante la cual el compilador de TypeScript va a
realizar un conjunto de verificaciones sintácticas que garantizaran la consistencia del
código escrito, esto según (Sebastien, Ollivier, Mayo 2016, pág. 318)
Como se había dicho anteriormente básicamente es un súper conjunto de JavaScript que

aborda de forma elegante muchas de las carencias que JavaScript tiene. Es decir, amplía
JavaScript con una nueva sintaxis que añade, entre otras cosas, el tipado
estático opcional, genéricos, decoradores y elementos de POO como interfaces o property
accessors.
TypeScript compila código JavaScript que se ejecuta en cualquier navegador, host, sistema
operativo o motor de JavaScript que admita ECMA Script 3 (o más reciente). Se podría
decir que TypeScript es una evolución de JavaScript mejorada como podemos ver en la
figura 1, pero con la cual se puede desarrollar aplicaciones más robustas, escalables y de
mayor eficiencia.
TypeScript
- Tipos
- Atributos privados
ES7
ECMAScript 2016
-Decoradores
-asyng/await
ES6
ECMAScript2015
-Clases
-Métodos
ES5
Figura 1: Evolución de TypeScript

Fuente: (Gomez, 2018)
4.3.1. Fundamentos de TypeScript (porque TypeScript)
En los últimos años JavaScript ha crecido mucho y se ha convertido en el camino a seguir

para escribir aplicaciones multiplataforma. Las aplicaciones JavaScript pueden ejecutarse
12
en todas las plataformas, ya sea en móviles, web o escritorio. Sin embargo, cuando
JavaScript fue creado por primera vez su propósito no fue este, sino que fue diseñado
para un uso simple en aplicaciones muy pequeñas.
TypeScript trata de resolver la mayoría de los problemas con JavaScript centrándose en

mejorar la experiencia y la productividad de los desarrolladores. Nos permite utilizar
técnicas como el tipado estático opcional y/o la encapsulación para generar un código
mucho más fácil de mantener y escalable que con JavaScript tradicional, sin perder el
carácter dinámico del mismo.
TypeScript está pensado para el desarrollo de aplicaciones robustas, implementando

características en el lenguaje que nos permitan desarrollar herramientas más avanzadas
para el desarrollo de aplicaciones.
Además estos dos últimos años la popularidad de TypeScript se ha disparado y se perfila

como uno de los lenguajes de programación con más futuro como se puede observar en
la figura 2.
Figura 2: TypeScript a lo largo del tiempo

Fuente: (Gomez, 2018)
13
4.4. Instalación de TypeScript
Como cualquier otro lenguaje de programación para poder probarlo, testearlo y verificar
su potencial es necesario hacer una instalación cabe decir que es muy fácil.
Para poder instalar TypeScript el único requisito necesario es tener instalado en nuestro
equipo la herramienta NodeJs y su administrador de paquetes (npm).
Cuando nos referimos a la “instalación de TypeScript” en realidad hacemos referencia a la

instalación de su compilador, llamado tsc. Este se encarga de convertir el código
TypeScript a JavaScript con la versión ECMA Script compatible que deseemos.
Para poder instalarlo tan solo tenemos que ejecutar en una terminal de comandos la
siguiente línea:
Figura 3: Instalación de TypeScript

Fuente: Elaboración propia
Para comprobar que se instalado correctamente se ejecuta:
Figura 4: Verificación de la Versión TypeScript

Esto nos mostrará la versión, en mi caso tengo instalado la versión 3.0.3 como se ve en la
figura 4.
Para probar la instalación nos creamos un archivo helloword.ts con el contenido

console.log (“hello world”) y ejecutamos el comando tsc helloword.ts para la compilación:
14
Figura 5: Hola Mundo en TypeScript
Como se puede ver en la figura 5 observamos que se crea otro archivo helloword.js
después de la compilación, lo cual podemos ejecutar en el navegador o como lo haremos
en este caso, con node:
Figura 6: Ejecución de un archivo Js

Fuente: Elaboración propia.
Al ejecutar el archivo “js” generado después de la compilación, en la figura 6, se muestra

el resultado de la ejecución “hello world por ahor”.
4.5. Características.
TypeScript se adentra en el mundo de la programación como sustituto de JavaScript ya

que prácticamente es una herramienta mejorada de JavaScript y que hace instrucciones
de import automáticos, Transpilado automático a JavaScript, Codelens con conteo de
referencias a una clase, función o variable, Soporte para JSDoc y más.
15
A continuación se nombrará algunas características que hacen a TypeScript como un
lenguaje de programación favorito.
4.5.1. Sistema de Tipado.
La principal característica de TypeScript es el sistema de tipado estático. Decimos que un

lenguaje es de tipado estático cuando cumple con estas características:
• Las variables tienen un tipo de dato.

• Los valores sólo se pueden asignar a variables del tipo correspondiente.
Esta característica de tipado estático es simplemente una formalización de los tipos de

JavaScript, mediante una representación estática de su sistema de tipado dinámico. Esto
nos permite a los desarrolladores definir variables y funciones fuertemente tipadas sin
perder la esencia de JavaScript (su naturaleza débilmente tipada y su extremada
flexibilidad). Poder definir los tipos durante el tiempo de diseño nos ayuda a evitar errores
en tiempo de ejecución, como podría ser por ejemplo, pasar el tipo de variable incorrecto
a una función.
TypeScript es un lenguaje que añade a JavaScript una capa de tipado estático y algunas
otras incorporaciones de OOP tradicional. Esta capa puede resultarnos de muchísima
ayuda durante el desarrollo. Sin embargo, todas estas características son simplemente
para ayudar a trabajar con JavaScript en tiempo de diseño, ya que como habíamos visto
más adelante TypeScript compila todo como JavaScript tradicional. A continuación
veremos las diferencias de los tipados:
Tipado estático o fuertemente tipado: Se debe de definir el tipo de dato, obligando a que
no pueda haber errores con los tipos de datos
Tipado dinámico o débilmente tipado: No se deben o tiene porque especificar el tipo de

dato (PHP, JavaScript)
16
Figura 7: Tipos en TypeScript
Estos ejemplos son posibles problemas que tienen los lenguajes débilmente tipadas.
(Valverde Ramos, Hernandez, & Fuen, 2017, pág. 12)
Lo bueno de estos lenguajes que son los de tipado dinámico, como JavaScript, suelen ser
mucho más flexibles, lo que nos permite escribir código menos verboso.
Los lenguajes de tipado estático se prestan a la implementación de herramientas de

desarrollo más avanzadas, como:
• Autocompletado de código
• Recomendación de qué argumentos recibe una función
• Recomendación de qué tipo retorna una función
• Auto documentación del código
• Mejor análisis para detectar errores
Tipos primitivos.
String y number, estos tipos puede decirse que lo usan la gran mayoría de los lenguajes
de programación, por lo que no se profundizará mucho al respecto, ya que un ejemplo
vale más que mil palabras. Veamos con un ejemplo de las ventajas que nos ofrece:
Figura 8: Tipos Number y String

17
Además de los tipos String y Number, TypeScript también admite los siguientes tipos
básicos primitivos:
• Boolean: tipo de dato lógico que representa verdadero o falso. De igual manera son
tipos muy simples que responden a la pregunta con un sí o un no.
• Array: tipo de dato estructurado que permite almacenar una colección de elementos.
• Null: Es cuando un objeto o variable no está accesible.
• Undefined: Es cuando un objeto o variable existe pero no tiene un valor. Si nuestro
código interactua con alguna API podemos recibir null como respuesta.
Void
Indica que una función no devolverá ningún valor. Este tipo solo está disponible en
TypeScript.
Any
Indica que la variable puede ser de cualquier tipo. Es muy útil a la hora de trabajar con
librerías externas donde podría tener datos que ni están tipeados y no se sabe de qué tipo
es. Está disponible solo para TypeScript, es el tipo más flexible en lo que se asemeja más a
la naturaleza libre de JavaScript.
Tuple/Tuplas
Similar al array, pero con un número fijo de elementos escritos, esto se define al
momento de crear el tipo. También disponible solo para TypeScript.
Enum
Representa al tipo enumeración. Una enumeración es una forma de dar nombres

descriptivos a los conjuntos de valores numéricos, sin tener que arrastrarse a las
complejidades de los objetos o arrays. También disponible solo para TypeScript.
18
Let
En JavaScript hay dos formas de declarar variables: var y let, var no tiene un ámbito de
bloque mientras que let si.
Const
Ha sido añadido en ES6 / TypeScript permitiéndonos añadir variables inmutables también

conocidas como constantes. El uso de const es una buena práctica de mantenimiento y
legibilidad. Las constantes deben ser declaradas y asignadas siempre.
Funciones
Este tipo de funciones hacen referencia al objeto que llama a esta función. Lo que hacen
es que el this no hace referencia al padre sino al objeto que contiene la función.
Genéricos
Los tipos genéricos, son aquellos que como las interfaces no se verán compiladas en
JavaScript ya que solo están accesibles en tiempo de compilación, La manera adecuada de
realizar la sobrecarga de métodos es con los tipos genéricos.
(Valverde Ramos, Hernandez, & Fuen, 2017, págs. 12-38)
4.5.2. Funciones y tipos de funciones
Quizás la mayor diferencia entre JavaScript y los lenguajes .NET actuales es la forma en
que se usan las funciones. Ambos los usan para agrupar declaraciones de código para
reutilización, pero en JavaScript (actualmente), las funciones también son la única forma
de estructurar el contenido.
Pero todavía JavaScript tiene sus falencias en cuanto al manejo de tipos dentro de las
funciones. He ahí de donde muchas veces se vienen los errores.
Las clases y módulos en TypeScript se compilan en funciones de constructor que ponen

propiedades en una instancia de objeto. Las funciones también son objetos de primera
19
clase en JavaScript / TypeScript, por lo que pueden asignarse a una variable, pasarse como
un parámetro (por ejemplo, como una devolución de llamada) o devueltos de una función
(de fábrica).
En palabras simples podemos resumir que las funciones en TypeScript son las máquinas
de procesamiento que se encargan de analizar entradas y digerir la información y aplicar
las transformaciones necesarias a los datos que se les proveen ya sea para modificar el
estado de una aplicación o para devolver salidas que posteriormente servirá en la toma de
decisiones de la empresa o simplemente para uso del usuario final.
TypeScript distingue tres tipos de funciones:
• Las funciones de nivel superior (global) se definen fuera de una clase o módulo.
Tienen alcance global y se pueden llamar en cualquier punto del código. Ellos
tienen un nombre.
• Los métodos de clase, se denominan funciones declaradas como parte de una
clase de objeto. Se pueden llamar solo después de que la clase haya sido
instanciada a menos que estén marcados como estáticos.
• Las funciones anónimas, no tienen un nombre. Normalmente se usan al declarar
una función que se usará en un solo lugar.
Al igual que con las declaraciones de variables, TypeScript permite escribir con firmeza la
firma de una función con el resultado neto de que TLS (Servicio de Lenguaje TypeScript) te
alerta sobre cualquier valor de parámetro pasado inválido También le proporciona
IntelliSense para esos parámetros cuando llama a la función (que resulta invaluable
cuando intenta pasar funciones de devolución de llamada). Por ejemplo:
20
Figura 9: Funciones en TypeScript
Se puede proporcionar un tipo para cada argumento en la firma de una función y su tipo
de retorno utilizando la misma sintaxis de postfijo para escribir variables.
Los parámetros para la función se declaran como una lista separada por comas dentro de
un par de paréntesis, seguidos por dos puntos y el tipo de retorno. Si la función no
devuelve un tipo, debe indicarlo utilizando el tipo Void. Al igual que con las variables, TLS
hará todo lo posible para inferir la firma correcta para aquellas funciones que no tienen
tipos explícitos. Simplemente coloque el cursor sobre un parámetro o el valor de retorno,
y aparecerá una información sobre herramientas, que mostrará lo que el TLS considera
que es el tipo correcto, aunque de manera predeterminada será el tipo any si su uso es
ambiguo de alguna manera.
Figura 10: Parámetros de una función

De hecho, el resultado neto es exactamente el mismo que debería declarar un tipo para
una expresión de función (una variable que tiene una función) con un cambio opcional. El
tipo de retorno de la función puede estar precedido por dos puntos o una flecha (=>). Por
ejemplo:
21
Figura 11: Asignación de Variables
Las funciones se pueden asignar a variables solo si su firma coincide completamente con
la "marca" de la variable. En otras palabras, todos los nombres y tipos de parámetros
deben coincidir, no solo los tipos. La comparación no se basa únicamente en la posición de
los parámetros y sus tipos.
Las funciones de TypeScript pueden tomar tres tipos de parámetros cuando se definen:
• Parámetros posicionales
• Parámetros opcionales
• Parámetro Rest o de reposo
Todo esto según (Naharry, 2013, pág. 36), lo cual más adelante veremos también.
Por otro lado (Nwamba, 2017, págs. 37-38) en su libro dice que: Las funciones de
JavaScript están mal escritas y son algunas de las fuentes más comunes de errores en el
lenguaje. Así es como se ve una función básica:
function stringToArray(char) {
return char.split(' ')
}
Por ejemplo la seguridad de que ese char no es un número. Bueno, es posible que no
tengamos ningún control sobre lo que el desarrollador que consume stringToArray pasará.
Por eso tenemos que ser estrictos con los tipos de valores que usan TypeScript.
Las funciones usan tipos en dos partes diferentes de su declaración:

22
1. Parámetros de función
2. Valor de retorno de la función
Parámetros de función
Estos parámetros pueden decirle a TypeScript qué tipo de valores debe esperar una
función, y se adherirá estrictamente a ella. El siguiente ejemplo muestra una función que
recibe una cadena de caracteres y un número como sus parámetros:
// Typed parameters
function stringIndex(char: string, index: number) {
const arr = char.split(' ')
return arr[number];
}
Los parámetros de stringIndex tienen los tipos de cadena y número, respectivamente.

Incluso antes de que las cosas lleguen al navegador, TypeScript lo alertará cuando pruebe
algo raro:
function stringIndex(char: string, index: number) {

return arr[number];
}
stringIndex(true, 'silly') // Types don't match
Por supuesto, las expresiones de función no se quedan afuera:
const stringIndex = function (char: string, index: number) {

return arr[number];
}
Además, las funciones de flecha también son bienvenidas:
const stringIndex = (char: string, index: number) => char.split('

')[number];
23
Valor de retorno de la función
El valor esperado de una función cuando se ejecuta también se puede escribir

estrictamente:
function stringIndex(char: string, index: number): string {

return arr[number];
}
Como se puede observar en el fragmento de código anterior, el tipo de retorno viene

después de los corchetes que contienen los parámetros y antes del corchete inicial del
cuerpo de la función. Se espera que la función anterior devuelva una cadena. Cualquier
cosa que no sea cuerda TypeScript simplemente se quejará, demostrándote que tienes
errores.
Parámetros opcionales
Cuando el parámetro de una función está estrictamente tipado, se siente rígido cuando la
función necesita ser flexible.
Cuando se omite el parámetro de índice al llamar a la función, TypeScript lanzará un error.

Para solucionar este problema, podemos declarar el parámetro de índice como opcional:
function stringIndex(char: string, index?: number): string {

// Just return string as is
// if index is not passed in
if(!index) return char;
// else, return the index
// that was passed in
return arr[number];
}
El signo de interrogación que sucede al nombre del parámetro le dice a TypeScript que
está bien si el parámetro falta al llamar. Aunque se debe tener cuidado de manejar casos
24
de parámetros que no se suministren en el cuerpo de la función, como se muestra en el
ejemplo anterior.
Parámetros Rest
El parámetro rest, declarado como en muchas ocasiones como paramName [:

paramType], representa el último argumento en una llamada a un procedimiento y puede
contener un número arbitrario de argumentos además de los especificados antes. Estos
argumentos se mantienen en una matriz de tipo T [] que se puede iterar utilizando un
bucle for:
function CountDwarvesTallerThan(minHeight: number, ...dwarves:

Dwarf[]):
number {
var count: number = 0;
for (var i = 0; i < dwarves.length; i++) {
if (dwarves[i].height > minHeight) {
count++;
}
}
return count;
}
Los parámetros Rest o de reposo también sirven para que TypeScript siga teniendo la
misma flexibilidad de JavaScript.
4.5.3. Clases
Las clases son los bloques de construcción de este lenguaje de programación, aunque el
nombre class fue una palabra reservada en JavaScript, este lenguaje no tubo nunca una
implementación real para las clases orientadas a objeto tradicionales como lo hacen otros
lenguajes java o c++ por ejemplo.
Los desarrolladores de JavaScript por mucho tiempo intentaron imitar este tipo de
funcionalidad aprovechando el objeto function como un tipo constructor que podía
posteriormente ser instanciado con el operador new. Otras tácticas comunes como las de
25
extender estos objetos function se implementaba mediante la aplicación de herencia de
prototipos usando composition, se tratan en general de apaños que intentaban solucionar
el problema de que JavaScript no era un lenguaje orientado a objetos.
Ahora con TypeScript contamos con una real funcionalidad class que es flexible y lo
bastante poderosa para implementar la funcionalidad que nuestras aplicaciones
requieren. Es una de las principales causas de la revolución ECMA Script 6 y TypeScript de
convertir a JavaScript en un verdadero lenguaje de programación orientada a objetos.
Figura 12: Clase en TypeScript

4.5.4. Interfaces
A medida que las aplicaciones escalan se van creando más clases y constructores
entonces necesitamos asegurar la consistencia y el cumplimiento de determinadas
normas por parte de nuestro código, como puede ser la validación de tipos y uno de los
mejores modos de hacerlo es creando interfaces.
En pocas palabras una interface es un proyecto de código que define un esquema, este
esquema contiene ciertos campos o tipos que pueden ser de clases o firmas de funciones.
Cuando una clase o método implemente estas interfaces, tiene que cumplir con este
esquema, esto es muy útil cuando queremos forzar el tipado estricto en clases cuando
26
definimos firmas de función para asegurarnos que un cierto tipado de propiedad se
encontrara en la carga, veremos en algunos de los ejemplos en la cual el uso de las
interfaces puede ser de gran ayuda.
Las interfaces son contratos que nuestro código también cumple. Es un acuerdo que las
estructuras de datos deben seguir. Esto ayuda a que cada dato/lógica que implementa
una interfaz se mantenga a salvo de tipos inadecuados o no coincidentes. También valida
los tipos y la disponibilidad de los valores pasados.
En TypeScript, las interfaces se utilizan para lo siguiente:
1. Crear tipos para objetos de JavaScript.

2. Establecer contratos para que las clases se adhieran.
Las interfaces se declaran utilizando la palabra clave de interfaz y puede hacer que una
interfaz esté disponible fuera de un módulo utilizando la palabra clave export, de la misma
manera que lo hace con una clase.
Figura 13: Interface en TypeScript

Para implementar la interfaz en la clase ILogger, use la palabra clave implements.

TypeScript ahora comprobará que la clase tenga las variables y funciones requeridas que
promete la interfaz, y generará una advertencia si algo no se ha implementado, o si la
implementación no coincide correctamente con la firma de la interfaz.
Figura 14: implementación de una Interface

Ahora es posible escribir nuevas clases de registro que también implementen la interfaz
de ILogger de forma segura sabiendo que se pueden usar en el lugar de cada una de ellas
27
donde se requiera un ILogger. Esto no afectará el código de llamada porque puede
garantizar que las clases concretas sean compatibles. (Fenton, 2013, pág. 43)
4.5.5. Decoradores
Los decoradores son un modo de añadir metadatos a declaraciones de clase para ser
usados por inyecciones de dependencia o compiladores de directivas, son anotaciones
especiales que modifican el comportamiento de las clases, también aumentan
poderosamente las funcionalidades de los tipos sin tener que crear sub-clases o heredar
de otros tipos. Es una de las características más importantes por las que TypeScript se
vuelve favorito. Aunque todavía son una propuesta de etapa 2 para JavaScript están
disponibles como una característica experimental de TypeScript.
Los decoradores, a primera vista, son confusos debido al signo @ inusual que precede a su
uso:
Figura 15: Decoradores de TypeScript

La captura de pantalla anterior es un fragmento de código de una aplicación angular.

Muestra un decorador de componentes que decora una clase llamada AppComponent.
Al principio, esto puede parecer abrumador porque, en la historia de JavaScript, nunca se

ha visto el literal @ usado de esta manera. Aunque es solo una función que tiene acceso a
28
los miembros de lo que está decorando. Las clases, propiedades, métodos y accesorios
están autorizados a ser decorados. (Nwamba, 2017, págs. 43-44)
Tipos de Decoradores
Los tipos de decoradores dependiendo del tipo de elemento que estén destinados a
decorar son:
Decoradores de clase.
Estos decoradores nos permiten aumentar el contenido y ampliar las características de las
clases a las cuales se decora o realizar operaciones sobre cualquiera de sus miembros,
estos decoradores se ejecutan justo antes de que la clase sea instanciada.
De hecho, en Angular, casi todas las clases (componentes, servicios, módulos, filtros y
directivas) están decoradas. Por eso es importante comprender la importancia de la
existencia de decoradores. El decorador de clases se aplica al constructor de la clase y se
puede usar para observar, modificar o reemplazar una definición de clase. Un decorador
de clase no se puede usar en un archivo de declaración ni en ningún otro contexto
ambiental (como por ejemplo en una declaración de clase).
La expresión para el decorador de clase se llamará como una función en tiempo de

ejecución, con el constructor de la clase decorada como su único argumento.
Si el decorador de clase devuelve un valor, reemplazará la declaración de clase con la

función de constructor proporcionada.
Para su mejor comprensión veremos un ejemplo:
29
Figura 16: Decoradores de Clase
Decoradores de métodos
Un Decorador de métodos se declara justo antes de una declaración de método. El

decorador se aplica al Descriptor de propiedad para el método y se puede usar para
observar, modificar o reemplazar una definición de método. Un decorador de métodos no
se puede usar en un archivo de declaración, sobrecarga o en cualquier otro contexto
ambiental (como una declaración de clase al igual que decorador de clase).
La expresión del decorador de métodos se llamará como una función en tiempo de

ejecución, con los siguientes tres argumentos:
1. O bien la función de constructor de la clase para un miembro estático, o el

prototipo de la clase para un miembro de instancia.
2. El nombre del miembro.
3. El descriptor de propiedad para el miembro.
Aquí un ejemplo donde aplicamos los tres argumentos de lo que son los decoradores de
métodos:
30
Figura 17: Decorador de Método
El siguiente es un ejemplo de un método decorator (@enumerable) aplicado a un método

en la Greeterclase:
Figura 18: Aplicación de un Decorador de método

El @enumerable (false) decorador aquí es una fábrica decoradora. Cuando @enumerable

(false) se llama al decorador, modifica la propiedad enumerable del descriptor de
propiedad.
Decoradores de propiedad
Estos decoradores están destinados a ser aplicados dentro de campos de una clase y
pueden ser definidos mediante la creación de una función property decorator cuya firma
toma dos parámetros; el primero target el prototipo de clase que queremos decorar y el
segundo key el nombre de la propiedad que queremos decorar.
31
El decorador de propiedad se declara justo antes de la declaración de la propiedad. Como
tal, un decorador de propiedades solo puede usarse para observar que una propiedad de
un nombre específico ha sido declarada para una clase.
Vamos a un ejemplo para ver la aplicación de este decorador:
Figura 19: Decorador de Propiedad

Decoradores de parámetro
Un decorador de parámetros se declara justo antes de una declaración de parámetro. El

decorador de parámetros se aplica a la función para un constructor de clase o declaración
de método. Un decorador de parámetros no se puede usar en un archivo de declaración,
una sobrecarga o en cualquier otro contexto ambiental (como en una declare class).
La expresión del decorador de parámetros se llamará como una función en tiempo de

ejecución, con los siguientes tres argumentos:
1. O bien la función de constructor de la clase para un miembro estático, o el

prototipo de la clase para un miembro de instancia.
2. El nombre del miembro.
32
3. El índice ordinal del parámetro en la lista de parámetros de la función.
En el siguiente ejemplo aplicamos un decorador de parámetros:
Figura 20: Decorador de Parámetro

4.5.6. Módulos
En cuanto a la definición de modulo en TypeScript, aún sigue compartiendo la misma

definición que manejan ECMAScript 2015 y JavaScript.
Los módulos se ejecutan dentro de su propio alcance, no en el alcance global; esto

significa que las variables, funciones, clases, etc. declaradas en un módulo no son visibles
fuera del módulo a menos que se exporten explícitamente utilizando uno de los
formularios de exportación. Por el contrario, para consumir una variable, función, clase,
interfaz, etc. exportado desde un módulo diferente, debe importarse utilizando uno de los
formularios de importación.
Los módulos son declarativos; las relaciones entre los módulos se especifican en términos
de importaciones y exportaciones a nivel de archivo.
Los módulos se importan entre sí usando un cargador de módulos. En tiempo de

ejecución, el cargador de módulos es responsable de localizar y ejecutar todas las
dependencias de un módulo antes de ejecutarlo. Los cargadores de módulos conocidos
33
que se usan en JavaScript son el cargador de módulos CommonJS para Node.js y require.js
para aplicaciones web.
En TypeScript, al igual que en ECMAScript 2015, cualquier archivo que contenga una
importación o exportación de alto nivel se considera un módulo. Por el contrario, un
archivo sin ninguna declaración de importación o exportación de alto nivel se trata como
un script cuyos contenidos están disponibles en el ámbito global (y por lo tanto también
para los módulos).
Como pudimos ver, tenemos módulos externos e internos los cuales los vamos a definir de
la siguiente manera:
Los módulos internos son envoltorios simples que contienen una variedad de clases,
objetos, funciones o variables que tienen el ámbito interno que están lejos del alcance
global o externo, para poder exponer públicamente a una clase de modulo se utiliza la
palabra export antepuesto a la clase, lo cual para poder acceder desde fuera del módulo
se debe utilizar la palabra import.
Los módulos externos son la solución para realizar aplicaciones diseñadas para ser
escalables, con la diferencia de que estos módulos son visibles de manera global. Para
acceder al módulo también se hace el uso de la palabra import pero también debemos
llamar al archivo con el uso de require.
Los módulos son clases decoradas con el decorador NgModule. El decorador toma un
objeto, al igual que el decorador de componentes. Este objeto describe todos los
miembros de funciones que necesita asociar a este módulo. Los posibles miembros
(aunque no todos los miembros) son los siguientes:
Declarations: Estos incluyen components, directives y pipes
Providers: Estos incluyen servicios inyectables.
Imports: Estos incluyen otros módulos importados.
34
Bootstrap: Este es el componente de entrada para iniciar la aplicación.
Aquí tenemos un ejemplo de un módulo, que es AppModule:
Figura 21: Módulo en TypeScript

Para entender mejor vamos a describir los elementos en este módulo:
Declarations: AppComponent y QuoteComponent son componentes. Por lo tanto, caen en

esta categoría. Una cosa sorprendente que hizo Angular CLI que por cierto veremos
posteriormente, es que después de generar el componente de cotización fue agregarlo a
las declaraciones automáticamente para nosotros. De lo contrario, incluso cuando utilice
el selector de componentes en alguna parte de la aplicación, los contenidos de los
componentes de la oferta aún no se mostrarán, y obtendrá un error en la consola.
Imports: BrowserModule es un módulo. Es un módulo que contiene tareas de navegador

comunes, especialmente directivas para plantillas, como * ngFor y más.
Providers: Dado que aún no tenemos ningún servicio, los proveedores pueden omitirse o
la matriz puede dejarse vacía.
Bootstrap: El módulo de la aplicación es nuestro módulo de entrada. Por lo tanto, debe

definir el componente de entrada, que es AppComponent. Esto es lo que hace la
propiedad bootstrap. (Nwamba, 2017, págs. 59-61)
35
5. RXJS Y LA PROGRAMACIÓN REACTIVA.
La programación reactiva permite propagar los cambios de un sistema requiriendo la

menor cantidad de esfuerzos y hace más sencillo el trabajo con flujo de datos. Sus
características principales son Escalabilidad, Resistencia a fallos, Garantía de respuestas,
Arquitectura orientada a eventos. (Bonér, Farley, & Kuhn, 2014)
El mundo de hoy está avanzando de manera muy rápida lo cual hace que las personas y
usuarios de las aplicaciones modernas requieran de mayores necesidades, que los
programas sean también más eficientes al momento de su uso. Hace solo unos años una
aplicación grande tenia decenas de servidores, segundos de tiempo de respuesta, horas
de mantenimiento sin conexión y gigabytes de datos.
Hoy en día las aplicaciones se implementan en todo, desde dispositivos móviles hasta
clusters basados en la nube que ejecutan miles de procesadores multi-core.
Los usuarios esperan tiempos de milisegundos de respuesta y un tiempo de actividad del

100 %, es decir que sus aplicaciones puedan estar actualizadas sin tener que dejar de
usarlos, por lo cual las arquitecturas del ayer ya no satisfacen las necesidades y demandas
de hoy.
Estos puntos que acabamos de tocar nos hacen buscar nuevas maneras de desarrollar
aplicaciones para hoy y el futuro, lo que nos lleva a investigar y analizar las nuevas
tecnologías que se tienen como respuestas a estas demandas, como por ejemplo la
programación reactiva.
5.1. Definición de la Programación Reactiva.
La programación reactiva es un paradigma de programación, la cual se basa en realizar

una programación con flujo de datos asíncronos, que son los encargados de transmitir los
cambios a nuestra aplicación, es decir si tenemos dos bloques de código no siempre se
van a ejecutar al mismo tiempo vale decir sincronizados, por ejemplo, cuando en una
aplicación el usuario hace una llamada dentro del programa donde es necesario
36
información de la base de datos, mientras la base de datos vaya a enviar la información la
aplicación sigue ejecutándose sin pausa alguna y al momento donde llega la información
la aplicación realiza una serie de eventos que fue programada cuando fue desarrollado
(esto es programación asíncrona). (Chakraborty, 2017, pág. 9)
Para encaminarnos al objetivo de este documento es necesario adentrarnos a analizar y

conocer algunas características de la programación reactiva las que ya habíamos
mencionado anteriormente:
Escalabilidad. Una aplicación es escalable cuando es capaz de aumentar o disminuir los

recursos en función de su uso. Existen dos niveles de escalabilidad:
Scale up: hace uso del paralelismo en sistemas con múltiples core.
Slace out: hace uso de múltiples servidores (nodos).
Resistencia a fallos. Se considera que una aplicación es resistente a fallos cuando es capaz
de recuperarse rápidamente por si misma de los fallos del tipo:
• Fallos en el software.
• Fallos en el hardware.
• Fallos de conectividad.
Garantía de respuestas (Responsiva). Una aplicación es “Responsiva” si garantiza una

respuesta rica y en tiempo real a sus usuarios incluso bajo condiciones de carga y en
presencia de fallos.
Las aplicaciones responsivas son construidas con arquitecturas orientadas a eventos,

escalables y resistentes al fallo pero se deben tener en cuenta otros factores como los
mecanismos de contra presión (back-pressure).
Arquitectura orientada a eventos. En un modelo orientado al evento se componen de

diferentes manejadores de eventos poco acoplados, de esta forma los eventos pueden ser
manejados de forma asíncrona y sin bloqueos.
37
El intercambio de mensajes garantiza bajo acoplamiento entre componentes, aislamiento
y transparencia en la ubicación. La minimización de los bloqueos garantiza menor
consumo de recursos.
5.1.1. EL manifiesto Reactivo.
Investigando sobre este tema, se encuentra que el manifiesto Reactivo fue publicado el
año 2014, con el objetivo de diseñar aplicaciones altamente escalables y confiables
también pensando en los que estén inmersos en el desarrollo de esta, por ejemplo:
desarrolladores, arquitectos, líderes de proyectos, ingenieros de gestión de calidad, etc.
Propone que los sistemas reactivos son más flexibles, ligeramente acoplados (loosely-
coupled) y escalables. Esto los hace más fáciles de ser desarrollados y susceptibles a los
cambios. Son de manera significativamente más tolerantes a las fallas, y cuando suelen
haber fallas lo satisfacen responden de manera muy elegante en lugar de que se produzca
un desastre. Los sistemas reactivos son altamente receptivos y brindan a los usuarios un
feedback interactivo efectivo. De ahí la fama de introducir estos principios que, la
programación reactiva propone construir sistemas Responsivos, Resilentes, Elásticos y
Guiados por mensajes o eventos.
Responsive
VALUE
FORM Elastic Resilient
MEANS Message Driven
Figura 22: Programación reactiva

Fuente: (Ahumada, 2018)
38
“Las arquitecturas de software de ayer simplemente no satisfacen las demandas de hoy”.
(Chakraborty, 2017, pág. 11)
5.2. Aplicaciones de la programación reactiva
Algo muy importante de destacar es la aplicación de la programación reactiva, o al menos

resaltar los tipos de aplicaciones las cuales necesitan de la programación reactiva. Como
se vio anteriormente, la Programación Reactiva sirve para manejar la propagación de
datos durante la ejecución de una aplicación. Por consiguiente, un ataque perfecto para
este paradigma sería una aplicación de datos de tiempo real como una consola financiera
o cualquier mecanismo de supervisión por ejemplo. En resumen se puede decir, cualquier
aplicación que necesite trabajar con datos en tiempo real es un candidato para
desarrollar con programación reactiva.
Obviamente, no quiere decir que no se debiera usar este paradigma en otras aplicaciones,
pero las aplicaciones basadas en Web de tiempo real con inmensas transacciones
asincrónicas es donde la Programación Reactiva realmente brilla.
Hoy en día el internet está lleno de bastantes ejemplos reactivos y aplicaciones trabajadas
en lo reactivo y están teniendo un gran éxito por su gran desempeño para con los usuarios
y también para con los desarrolladores.
La Corporación Microsoft y Google, por ejemplo, es un gran contribuyente del movimiento
Reactivo (http://reactivex.io/) de Programación.
Netflix, también, es otra compañía que está pesadamente contribuyendo a la evolución de
este paradigma con Rx.JS 5, y Programación Reactiva son aplicados en varias
implementaciones actualmente en la producción. (Mezzalira, 2018, págs. 16-17)
5.3. Rx o Reactive Extensions
Los usuarios esperan datos en tiempo real. Ellos quieren sus tweets ahora. Su orden
confirmada ahora. Necesitan precios precisos a partir de ahora. Sus juegos en línea deben
ser receptivos. Como desarrollador, exiges mensajes de fuego y olvido. No se quiere ser
bloqueado esperando un resultado. Desea que se le envíe el resultado cuando esté
listo. Aún mejor, cuando trabaje con conjuntos de resultados, desea recibir resultados
39
individuales cuando estén listos. No desea esperar a que se procese todo el conjunto
antes de ver la primera fila. Los usuarios esperan datos reales. Los desarrolladores
necesitan herramientas para reaccionar a los datos de empuje.
5.3.1. Características de una librería Reactiva
Las bibliotecas de Reactive Extensions de Microsoft son las implementaciones de estas

interfaces que están rápidamente adquiriendo fuerza con Servidores, clientes y
desarrolladores web por igual. Rx es una herramienta de desarrollo poderosamente
productiva. Rx permite a los desarrolladores resolver problemas en un estilo elegante,
familiar y declarativo; A menudo es crucial con menos código de lo que era posible sin
Rx. Esta librería ofrece un paradigma natural para tratar con secuencias de eventos. Una
secuencia puede contener cero o más eventos. Rx demuestra ser más valioso al componer
secuencias de eventos.
La gestión de eventos como estos es para lo que se creó Rx:
• Eventos de la interfaz de usuario como mover el mouse, hacer clic en el botón

• Eventos de dominio como propiedad cambiada, colección actualizada, "Pedido
completado", "Registro aceptado", etc.
• Eventos de infraestructura como desde el observador de archivos, el sistema y los
eventos de WMI
• Eventos de integración como una transmisión desde un bus de mensajes o un
evento push desde la API de WebSockets u otro middleware de baja latencia
como Nirvana
• La integración con un motor CEP como StreamInsight o StreamBase .
Rx también se puede utilizar para llamadas asíncronas. Estas son efectivamente

secuencias de un evento.
• Resultado de una tarea o tarea <T>
• Resultado de una llamada de método APM como FileStream BeginRead / EndRead
40
Se ve y se entiende entonces que Rx es una librería para .NET al igual que las distintas
librerías creadas para los distintos lenguajes de programación según sus características,
(ReactiveX, 2018, pág. 1). Más adelante veremos una específicamente para cumplir el
objetivo de este documento (RxJS).
Rx se compone de tres puntos clave.
En la mayoría de los libros actuales encontrados acerca de la programación reactiva se

puede ver este tipo de componentes básicos aunque mucho depende del lenguaje de
programación en el cual se aplica. En algunos libros se toma como pilares de Rx a
observables, observadores y sujetos; (Chakraborty, 2017, pág. 41) , como también Rx =
Observable + Observer + Schedulers.
Observable: Los Observables son las secuencias de datos. El observable empaqueta los
datos que se pueden pasar de un hilo a otro. Básicamente emiten los datos
periódicamente o solo una vez en su ciclo de vida en función de sus configuraciones y
basado en empuje es decir el observable empuja el valor o dato al observador. Existen
varios operadores que pueden ayudar al observador a emitir algunos datos específicos
basados en ciertos. Por ahora, podemos pensar en los observables como proveedores.
Procesan y suministran los datos a otros componentes.
Observadores: los observadores consumen la secuencia de datos emitida por el

observable. Los observadores se suscriben al observable utilizando el método
subscribeOn() para recibir los datos emitidos por el observable. Cada vez que el
observable emite los datos, todo observador registrado recibe los datos en la devolución
de llamada onNext(). Aquí pueden realizar varias operaciones, como analizar la respuesta
JSON o actualizar la interfaz de usuario. Si se produce un error de observable, el
observador lo recibirá en onError() y en el caso de que termine onComplete(). Vamos a
dividir las cosas secuencialmente para poder entenderlo de mejor manera:
• Observer se subscribe a Observable.

• Observable comienza a emitir elementos que tiene él.
41
• El Observer reacciona a cualquier elemento que emite el Observable.
Cuando un observador está suscrito a un observable, recibirá los valores en la secuencia a

medida que estén disponibles, sin tener que solicitarlos.
Pareciera que no hay mucha diferencia con el patrón tradicional de Observer. Pero en
realidad hay dos diferencias esenciales:
• Un Observable no comienza a transmitir elementos hasta que tenga al menos un

Observador suscrito.
• Como iteradores, un Observable puede señalar cuando se completa la secuencia.
Usando Observables, se puede declarar cómo reaccionar a la secuencia de elementos que

emiten, en lugar de reaccionar a elementos individuales. Se puede copiar, transformar y
consultar la secuencia de manera eficiente, y estas operaciones se aplicarán a todos los
elementos de la secuencia.
Creando Observables
Hay varias maneras de crear Observables, siendo el operador de creación el más obvio. El
operador de creación en el objeto Rx.Observable toma una devolución de llamada que
acepta un Observer como parámetro. Esa función define cómo el Observable emitirá
valores. Así es como creamos un Observable simple:
Figura 23: Ejemplo de Observable

42
El método creado en el objeto Rx.Observer toma funciones para los casos onNext,
onCompleted y onError y devuelve una instancia de Observer. Estas tres funciones son
opcionales y puede decidir cuáles incluir. Por ejemplo, si nos suscribimos a una secuencia
infinita, como clics en un botón (el usuario podría seguir haciendo clic para siempre),
nunca se llamará al controlador onCompleted.
Según, (Mansilla, 2015, págs. 10-11) si confiamos en que la secuencia no puede generar
errores (por ejemplo, al hacer un Observable a partir de una matriz de números), no
necesitamos el método onError.
Figura 24: Diagrama de Marble

Fuente: (ReactiveX, 2018)
Schedulers: Rx se usa en programación asincrónica y por tanto, necesitamos un

administrador de subprocesos. Allí es donde los schedulers entran en escena. Son el
componente que le indican a los observables y observadores, en qué hilo deben
ejecutarse. Puede usar el método observeOn() para indicar a los observadores, qué hilo
debe observar. Además, puede usar scheduleOn() para indicar al observable en qué hilo se
debe ejecutar.
Como se muestra en esta figura 25, el operador SubscribeOn designa en qué subproceso
comenzará el funcionamiento del Observable, sin importar en qué punto de la cadena de
operadores se llame al operador.ObserveOn , por otro lado, afecta el hilo que el
43
Observable usará debajo de donde aparece ese operador. Por esta razón, puede llamar
a ObserveOn varias veces en varios puntos durante la cadena de operadores Observable
para cambiar en qué subprocesos operan algunos de esos operadores.
Figura 25: Funcionamiento de Rx

Fuente: (ReactiveX, 2018)
Pasos para usar Rx en nuestras aplicaciones:
El siguiente diagrama presenta un ejemplo del conjunto del sistema Observanle-Scheduler-

Observer:
44
Observable: Emits data
Thread 1
Sherduler: Manages Concurency
Thread 2
Observer: Data Consumer
Figura 26: Sistema Observable-Scheduler-Observer

Fuente: (Ahumada, 2018)
Se puede encontrar una implementación del paradigma para distintos lenguajes de

programación en la librería ReactiveX. Esta implementación cumple con los requisitos que
hemos mencionado previamente.
ReactiveX es una librería para componer programas asincrónicos y basados en eventos

mediante el uso de secuencias observables.
Es importante mencionar que extiende del patrón Observador para admitir secuencias de
datos y/o eventos. Además propone operadores que permiten componer secuencias de
forma declarativa; mientras abstrae el subprocesamiento de bajo nivel como el threading,
sincronización, seguridad de subprocesos, estructuras de datos concurrentes y entradas y
salidas no bloqueante.
Se realizara una aproximación de manera sencilla tomando en cuenta el concepto de

Excel. Imaginémonos que disponemos del siguiente Excel.
Flujo
10 5 15 Flujo 13,5
Flujo
Suma 10% descuento
Figura 27: Ejemplo Reactivo con Excel
Fuente: (Caules & Álvarez, 2016)
45
Son dos celdas iniciales que sumamos en otra celda para finalmente aplicar un descuento
del 10% en otra. Hemos construido un flujo de datos y cualquier administrativo lo
entiende. Es algo muy natural, cada vez que cambiemos un dato de las celdas actuales el
resto se actualizará. Si enfocamos esto desde el mundo del desarrollo clásico como en la
figura 28 nos encontraremos con un enfoque muy diferente:
array bucle cálcul

10 5 15 13,5
Suma 10% descuento
Figura 28: Ejemplo reactivo Programación
Dispondremos de un array, calcularemos la suma recorriendo con un bucle for y

finalmente realizaremos el cálculo del descuento. No se parece en nada a lo anterior y es
mucho más abstracto. Una vez explicadas estas diferencias vamos a abordar un ejemplo
con programación reactiva y RxJS.
5.3.2. Rx.JS
Rx.JS es una de las librerías JavaScript que cada día se usa más y más en el desarrollo de
aplicaciones de la actualidad, es uno de los representantes de la programación reactiva.
Es decir RxJS es una implementación de JavaScript de Reactive Extensions, o Rx.2. Rx es un

modelo de programación reactiva creado originalmente en Microsoft que permite a los
desarrolladores componer fácilmente flujos de datos asincrónicos. Con una interfaz
común para combinar y transformar datos de fuentes muy diferentes, como las
operaciones del sistema de archivos, la interacción del usuario y las actualizaciones de
redes sociales.
Rx comenzó con una implementación para .NET, pero hoy tiene una implementación de
código abierto bien mantenida en todos los lenguajes principales (y algunos menores).
46
Se está convirtiendo en el estándar para programar aplicaciones reactivas, y el tipo
principal de datos de Rx, el Observable, se propone para su inclusión en ECMAScript 7
como parte integral de JavaScript. Esto según el libro Reactive Programming with RxJS de
mansilla. (Mansilla, 2015, pág. 2)
Rx.JS es la biblioteca reactiva más famosa y usada en este momento; se usa en casi todas
partes, desde Angular 2, donde la biblioteca está integrada dentro del framework a
muchos otros framework más pequeños o más grandes que están adoptando esta
biblioteca y aprovechando su poder.
Es una de las bibliotecas reactivas más completas con muchos operadores y una gran
documentación, Rx.JS es parte de Reactive Extensions, (http://reactivex.io) en esta página
se puede seguir de más cerca todas las actualizaciones sobre esta librería.
Rx.JS se puede utilizar en aplicaciones de front-end y en aplicaciones back-end con

Node.js; obviamente su naturaleza asíncrona ayudará en ambos lados del desarrollo de
una aplicación. (Mezzalira, 2018, págs. 71-72)
Teniendo en cuenta qué tan grande es Rx.JS es importante tener bien en claro todos
conceptos y que mejor desde una fuente oficial como es su página. Como ya
mencionamos más adelante adentrándonos en la página oficial de Rx sabemos que las
extensiones reactivas para JavaScript son un conjunto de bibliotecas para componer
programas asíncronos y basados en eventos que utilizan secuencias observables y
operadores de consultas fluidas que muchos desarrolladores ya conocen por Array #
extras en JavaScript. Usando RxJS, los desarrolladores representan flujos de datos
asíncronos con Observables, consultan flujos de datos asincrónicos usando nuestros
muchos operadores, y parametrizan la concurrencia en las secuencias de datos
asincrónicas usando Schedulers. En pocas palabras, RxJS = Observables + Operadores +
Programadores (Observables + Operators + Schedulers).
Debido a que las secuencias observables son flujos de datos, se puede consultar utilizando
operadores de consulta estándar implementados por el tipo Observable. Por lo tanto,
47
puede filtrar, proyectar, agregar, componer y realizar operaciones basadas en el tiempo
en múltiples eventos fácilmente mediante el uso de estos operadores. Además, hay varios
otros operadores de flujo reactivo específicos que permiten escribir consultas potentes. La
cancelación, las excepciones y la sincronización también se manejan con elegancia
utilizando los métodos en el objeto Observable. https://github.com/Reactive-
Extensions/RxJS.
Para poder entender de forma sencilla RxJS debemos de empezar a trabajar con un
ejemplo (figura 30). En este caso se eligió un simple botón que cada vez que le pulsamos
nos imprime por consola las veces que hemos hecho click.
Figura 29: Resultado sin RxJS

Figura 30: Ejemplo de Código sin usar RxJS

48
Vamos a convertir ahora nuestro código a un enfoque más reactivo. En este caso vamos a
usar RxJS para convertir los clicks en un flujo de datos.
Flujo de
click click click click click
Boto Figura 31: Ejemplo con RxJS

A continuación se muestra la solución en el siguiente código:
Figura 32: Ejemplo de código con RxJS

Como se ve usar RxJS , no es excesivamente complejo. El primer paso es generar un
Stream (flujo de datos) a partir de un conjunto de eventos (en este caso el click). Una vez
hecho esto usamos dos operaciones clásicas de programación funcional map y scan (scan
es similar a reduce) para convertir los eventos en números y finalmente sumarlos. El
49
último paso es subscribirse al stream o flujo de datos e imprimir su resultado por consola,
para ello usamos el método subscribe.
El código es mucho más reutilizable que el anterior y el resultado idéntico.
click
fromEvent
stream send map 1 scan
sum
subscribe
Figura 33: Aplicación de RxJS
6. ANGULAR
Angular es un poderoso framework que integra la programación reactiva con RxJS y el

Lenguaje de Programación TypeScript facilitando en gran manera la construcción de
aplicaciones reactivas, robustas y escalables demandados hoy en día.
En los últimos años Angular ha ido haciéndose más popular como uno de los mejores
frameworks para desarrollar aplicaciones. Pero para seguir adelante con este subtema de
este documento, revisaremos la definición de qué es en realidad angular.
Angular es una plataforma que facilita la creación de aplicaciones con la web. Angular
combina plantillas declarativas, inyección de dependencia, herramientas de extremo a
extremo y mejores prácticas integradas para resolver los desafíos de desarrollo. Angular
permite a los desarrolladores crear aplicaciones que viven en la web, el móvil o el
escritorio. (Angular, 2018)
Angular está escrito en TypeScript lo cual facilita más aun el desarrollo con dicho lenguaje
de programación.
50
Para estar más al tanto y entender mejor de este poderoso framework Angular y la
aplicación de la programación reactiva se hacen una breve introducción sobre Angular.
6.1. Conceptos Básicos de Angular
Angular es un marco de trabajo (framework) de código abierto creado y mantenido por

Google. Ha estado presente desde 2010 y ha llegado recientemente a la versión 6. Este
framework pasó por diferentes etapas en los últimos años, a partir de una enorme
exageración cuando se lanzó con la versión 1; luego, después de que el anuncio de la
versión 2 no sea retro compatible con la versión anterior, muchos desarrolladores
decidieron alejarse de él y adoptar otros frameworks, en particular, React y Flux o Redux o
combinaciones similares.
Recientemente, como en 2017, Google lanzó una nueva versión que debería mejorar la
experiencia de los desarrolladores de JavaScript con Angular, proporcionando un
ecosistema completo de herramientas y patrones para trabajar fácilmente con este
framework sin la necesidad de eliminar la Web para ensamblar múltiples bibliotecas
dentro del mismo proyecto
Desde la versión 2, Angular adopta TypeScript como su idioma principal; JavaScript ES6 y
Dart también son compatibles, pero la gran mayoría de los recursos en el sitio web
Angular están preparados con TypeScript; lo cual es el objetivo de esta monografía,
inducir a la programación reactiva de aplicaciones con TypeScript.
Angular como framework proporciona una arquitectura completa y utilidades listas para
usar con una herramienta CLI interesante para acelerar la productividad de un
desarrollador. (Mezzalira, 2018, pág. 51)
Funcionamiento de Angular
La arquitectura que se evaluara en esta sección está relacionada con Angular 2 y la

siguiente (Figura 34) trata de mostrar más o menos como es el funcionamiento de la
51
arquitectura de angular, por lo que no se tomará en cuenta la anterior versión porque se
ha comprobado anteriormente que funciona de manera diferente.
Descrito en el componente decorador
app.component.css app.component.html
Objetos
UpdatetotalService.ts
Módulo raíz
app.module.ts app.component.ts CalculatorModel.ts
Figura 34: Arquitectura Angular

La arquitectura angular presenta cuatro conceptos interesantes:
• Inyección de dependencia.
• Modularidad con NgModules y componentes.
• Enlace de datos entre plantillas y los componentes
• Gran uso de decoradores para definir objetos como Componentes o Módulos
Ahora profundizaremos más en esta arquitectura, analizando las diferentes partes que
componen un proyecto angular.
Cualquier aplicación angular tiene al menos un NgModule llamado módulo raíz; un

NgModule no es como un Módulo de JavaScript normal. La peculiaridad del NgModule son
los metadatos; en cada NgModule (módulo raíz incluido), describiremos cómo se
compone el módulo y, en particular, definiremos qué componentes pertenecen a un
módulo, si un módulo tiene dependencias de otros módulos, directivas o componentes; y
también describimos los servicios utilizados por los componentes presentes en el módulo.
Como se describió anteriormente, cualquier aplicación angular contiene al menos un

módulo llamado módulo raíz.
52
Por ejemplo este es el código de un módulo raíz de la arquitectura declarada en la imagen
anterior:
Figura 35: Módulo raíz Angular

Como se puede ver en este fragmento de código, Angular está compuesto principalmente
por decoradores (@NgModule) para envolver nuestro código dentro del marco angular.
Decoradores Los decoradores en JavaScript están realmente en la propuesta (etapa 2)

para convertirse en parte del lenguaje pero en TypeScript ya es posible usarse (más
información sobre la propuesta en este enlace: https://github.com/tc39/proposal-
decorators).
Se basan en un concepto simple: un decorador envuelve una función, aumentando sus

funcionalidades sin manipular la función decorada.
Por lo general, en un decorador, agregamos métodos o propiedades que deberían ser

comunes en nuestro proyecto en tiempo de ejecución; es por eso que Angular usa una
gran cantidad de ellos. Es así que podemos escribir nuestra lógica sin heredar de una clase
base, creando así una estrecha conexión acoplada y decorando con las funcionalidades
built-in disponibles en el marco de trabajo, (Mezzalira, 2018, págs. 41-43).
Otra cosa muy importante de saber es que el equipo de Angular desarrolló una
herramienta todo en uno para ayudarlo a prestar menos atención a las herramientas que
lo rodean pero a prestar más atención a la construcción de su proyecto. Se conoce como
53
Angular CLI, y con solo unos pocos comandos CLI está construyendo su aplicación. El
tiempo dedicado a la administración de herramientas de JavaScript en estos días es
alarmante, y nadie desea quedarse atrapado en ese lío.
Para instalar la Angular CLI, debe ejecutar el siguiente comando con npm:
npm install -g @ angular/cli
Cuando se complete la instalación, para verificar ejecute los siguientes comandos:
# Ayuda comando
ng help
# Comando de versión
ng version
# crear una nueva
Aplicación.
ng new miAplicacion
Esta es la estructura (Figura 36) de la creación de una
nueva aplicación mediante el comando anterior
también se instala las dependencias de npm y para
verificar debería revisar package.json, también
podemos encontrar la librería RxJS para la
programación reactiva (por la que estamos
desarrollando este documento) y una serie de
archivos que ayudan en el proceso de compilación y la Figura 36: Estructura de los componentes Angular
gestión de paquetes, de lo cual el desarrollador no se
tiene que preocupar. (Nwamba, 2017, págs. 47-54)
6.2. Componentes y características de Angular

Para poder comprender de manera óptima las características de una programación
reactiva con TypeScript es muy importante analizar algunos conceptos básicos del
framework Angular con el cual se aplica al desarrollar una aplicación web.
54
Los componentes son pequeñas clases que cumplen tareas específicas. Una aplicación en
angular debería estar basada en múltiples componentes.
Los componentes son el corazón de cualquier proyecto angular. Son los componentes
básicos, y todas las demás funciones solo están destinadas a admitir componentes. Los
archivos mencionados contienen componentes angulares escritos en TypeScript. Esto es lo
que se ve en app.component.ts:
Figura 37: Código AppComponent

Un componente es una clase decorada con una plantilla. El tipo de decoración es lo que
importa, en este caso, un decorador de componentes. Como habíamos visto
anteriormente que los decoradores son solo funciones que amplían la función que están
decorando. Eso es lo que está sucediendo en el ejemplo anterior (Figura 37).
Primero, importamos este decorador desde el módulo core de Angular, @ angular/core.

Luego colocamos el decorador justo encima de nuestra clase AppComponent. El
decorador toma un objeto JavaScript como argumento para describir el componente. El
objeto contiene o está compuesto por lo siguiente:
selector: Esto es lo que el componente identificará cuando se llame en cualquier parte de

la aplicación. Porque este componente es el punto de entrada de su aplicación, se usará
directamente en el cuerpo al incluir su selector:

...
<body>
<app-root></app-root>
</body>
55
templateUrl: los componentes representan una plantilla para la vista. Necesitamos una
forma de decirle al componente qué plantilla representar. Esto es posible a través del
template o la propiedad templateUrl. La propiedad template toma una cadena de
contenido HTML mientras que templateUrl toma una URL para el archivo HTML de
plantilla.
styleUrls: esta es una matriz de Urls de estilo que se aplican a la plantilla definida.
6.2.1. Templates.
Las plantillas o templates son solo archivos normales html, aunque sobrealimentados con
interpolación y directives. La siguiente imagen es una plantilla app.component.html del
AppComponent continuando al anterior ejemplo.
Figura 38: Plantilla de angular

Las plantillas pueden realizar muchas tareas como por ejemplo interpolación con valores
vinculantes al componente perteneciente, enlace de propiedad de evento, enlace
bidireccional, iteraciones y condiciones, estilos y clases vinculantes, expresiones simples,
pipes, directives, etc.
6.2.2. Components Styles.

Los componentes tienen mucha reusabilidad, de ahí la importancia de los beneficios de
usar la arquitectura de componentes y por eso las plantillas y estilos tienen un gran
alcance para su componente.
56
La propiedad styleUrls en el argumento del decorador del componente toma una matriz
de URL que apuntan a los estilos que desea aplicar al componente. La mayoría de las
veces, solo se necesita un solo archivo; por lo tanto, la matriz solo contendrá un único
elemento de URL, en nuestro caso, app.component.css. Pero si se desea se puede usar el
archivo para cambiar algunos estilos de ese componente o también de manera global con
solo utilizar el operador *. (Nwamba, 2017, págs. 55-59)
6.2.3. Módulos.
Los módulos son contenedores o también se podría decir que son agrupaciones lógicas de
componentes y otros servicios.
Vale decir que una aplicación angular está dividida en módulos, pero también cada
módulo puede ser una aplicación, de hecho una aplicación siempre debe tener por lo
menos un módulo o modulo raíz. CLI nos genera ese modulo del cual hablamos cada vez
que creamos una nueva aplicación con npm el cual se llama app.Module.ts y está
decorado por @NgModule. Este decorador toma y describe todos los miembros de
funciones que necesita asociar el modulo, estos son los posibles miembros:
Declarations: estos incluyen componentes, directivas y tuberías (pipes)
Providers: estos incluyen servicios inyectables
Imports: estos incluyen otros módulos importados
Bootstrap: este es el componente de entrada para iniciar con la app.
57
Figura 39: Módulo en Angular
6.2.4. Directives
La manipulación del DOM también lo manejan los componentes pero se quiere que su
código sea más simple y reutilizable entonces es necesario que otras instrucciones se
encarguen de esta manipulación ahí es donde entran las directivas.
Las directivas en Angular son instrucciones para la plantilla HTML sobre cómo la plantilla
debe manejar el DOM.
Existen tres tipos de directives:
Los componentes, también son directivas con acceso directo a la plantilla que se
manipula. Pero anteriormente ya habíamos visto sobre los componentes así que
pasaremos a analizar las otras directivas.
Las directivas de atributo, son conocidas por agregar características de comportamiento

al DOM, pero no agrega ni elimina ningún contenido DOM. Hace cosas como cambiar
apariencia, mostrar u ocultar elementos, manipular los atributos de los elementos, etc.
Para crear una nueva directiva en el proyecto se lo puede hacer mediante el comando:
ng generate directive myDirectiva

Esto creara una directiva más o menos con el siguiente contenido:
58
Figura 40: Directiva Angular
Las directivas estructurales, tienen mucho en común con las directivas de atributo, en
términos de cómo se crean, pero son muy diferentes en cómo se espera que se
comporten. Se espera que una directiva estructural, a diferencia de una directiva de
atributos, cree o elimine un elemento DOM. Esto es diferente de usar una propiedad de
pantalla CSS para mostrar u ocultar un elemento. En este caso, el elemento aún se
encuentra en el árbol DOM, pero no está visible para el usuario final cuando está oculto.
Un buen ejemplo es * ngIf. Cuando se elimina un elemento del DOM utilizando una
directiva estructural * ngIf, la directiva desaparece de la pantalla y se elimina del árbol
DOM.
Obviamente para poder contar una funcionalidad precisa de una directiva tenemos que
hacer una serie de artificios programando por ejemplo en el componente plantilla, por
ejemplo utilizando el método ElementRef en el constructor de la directiva podemos
realizar cambios en los estilos, o también nativeElement para dar acceso al elemento al
que se aplica la directiva de atributo, o también Object.assing para reducir la cantidad de
código que tengamos que escribir. Para más detalles revise el libro de: (Nwamba, 2017,
págs. 135-142)
6.2.5. Pipes
Otra característica de gran funcionalidad en la plantilla son las Pipes. Las Pipes le permiten
formatear el contenido de la plantilla en el lugar, directamente en la plantilla. En lugar de
formatear el contenido en el componente, puede simplemente escribir un pipe para
hacerlo directamente en la plantilla.
59
Aquí hay un buen ejemplo para una Pipe:
<div class="container">
<h2>{{0.5 | percent}}</h2>
<h3>{{'this is uppercase' | uppercase}}</h3>
</div>
Algunos pipes toman argumentos, que ayudan a ajustar el comportamiento del pipe
cuando se aplica a algún contenido. Un ejemplo de tales canalizaciones es el pipe de
divisas, que toma un argumento para definir con qué moneda se formateará un contenido
en realidad hay distintas maneras de aplicar las pipes.
Creando pipes
Se vio para qué podemos usar pipes y dónde podemos usarlas. Lo siguiente que se debe
entender es cómo crear nuestros propios pipes personalizados utilizando clases de
TypeScript. Pero primero se necesita tener generado un pipe y se hace ejecutando el
siguiente comando:
ng generate pipe mypipe
A continuación, es necesario actualizar el archivo de clase generada de la siguiente

manera:
Figura 41: Pipe

Este ejemplo toma una cadena y devuelve la versión invertida de la cadena. La clase
ReversePipe implementa una interfaz PipeTransform, que define un método de
transformación que se debe crear con una firma determinada, como se vio anteriormente.
60
La clase está decorada con un decorador Pipe, el cual toma la configuración de un objeto
como un argumento.
El objeto debe definir una propiedad de nombre, que sirve como el identificador para el
pipe cuando se aplica a una plantilla. En este caso, el nombre de la pipe es reverse.
Para poder aprender más sobre pipes y estar siempre actualizado es bueno revisar la
documentación oficial. https://angular.io/guide/pipes.
7. APLICACIONES REALIZADAS CON LA PROGRAMACION

REACTIVA EN TYPESCRIPT.
Mientras se investigaba, se encontró este amplio portafolio que ilustra las compañías que
actualmente usan las versiones Angular 2.0 y posteriores: Google, VMWare, Teradata,
Youtube TV, CVS, Barnes & Noble, Citibank, Freelancer, AIESEC, Chase, Air Asia, Udacity,
Crunchbase, y Kaplan, entre las principales marcas.
Se puede ver que muchas compañías están volcando su mirada a la programación

reactiva, porque eso es lo que angular hace al facilitarnos trabajar con la librería RXJS y
también con el lenguaje de programación TypeScript.
8. CONCLUSIONES.
TypeScript es uno de los lenguajes de programación con mayor futuro. Estas son algunas
características con las que TypeScript se convierte en un lenguaje de programación muy
poderosa: Fuertemente tipado, es una de sus más importantes características que tiene,
con la que se pueden construir aplicaciones más robustas y en gran manera escalables,
también la estructura de los componentes y módulos que hacen al código más
mantenible y que las aplicaciones modernas puedan desarrollarse también de manera
reactiva con RxJS al desarrollar con Angular; lo que hace que las aplicaciones puedan dar
61
respuestas en tiempo real. Decoradores/Anotaciones, El uso de decoradores o
anotaciones (metadatos) es clave para conseguir diseñar aplicaciones potentes.
Por otro lado tal como se ha observado anteriormente, la necesidad de la programación

reactiva viene de la mano de mejorar la experiencia de usuario al usar las aplicaciones
desarrolladas y las de los desarrolladores de trabajar con flujos de datos y generar
sistemas y aplicaciones más escalables, responsivos, resilentes y elásticos. Que los
sistemas RxJS se basa en tres componentes principales: Observables, Observers y
Schedulers. Estos componentes vienen de la mano de la librería ReactiveX, que nos
proporcionará los mecanismos basados en mensajes para controlar los actores del sistema
e implementar de una manera elegante el paradigma da la programación reactiva.
Como se pudo ver el framework Angular es una buena herramienta y muy poderosa que
combina plantillas declarativas, inyección de dependencia, herramientas de extremo a
extremo y mejores prácticas integradas para resolver los desafíos de desarrollo. Es el
mejor framework para crear aplicaciones complejas listas para usar con una capa de
presentación rica y lo mejor aún; poder desarrollar aplicaciones reactivas. Dado que
cuenta con el respaldo del Team Angular en Google los cuales integraron las librerías
necesarias para trabajar de manera asíncrona RxJS y también un JavaScript mucho más
mejorado podemos decir; hablamos de TypeScript, también cuenta con el apoyo de una
gran comunidad de desarrolladores de todo el mundo, existe una gran cantidad de ayuda
para que los ingenieros de software puedan consultar. Para estar mejor informado y
actualizado invito al lector poder revisar la documentación oficial de angular.
https://angular.io.
La aplicación de una gran cantidad de compañías muestra la importancia que está

comenzando a tener el desarrollo de aplicaciones de manera asíncrona es decir
reactivamente, con Angular y por su puesto con el ahora lenguaje de programación
JavaScript que es TypeScript. No cabe duda que es una de las mejores opciones por las
que las empresas de desarrollo de software deben optar, teniendo en cuenta las
necesidades tecnológicas de hoy y del futuro.
62
9. BIBLIOGRAFIA
Ahumada, R. (2018). Computer Training. Obtenido de Computer Training:

https://www.bit.es/knowledge-center/introduccion-a-la-programacion-reactiva-
rx/
Angular. (2018). Angular. Recuperado el Octubre de 2018, de Angular: https://angular.io
Angular, D. (2018). Angular. Obtenido de Angular: https://angular.io/docs
Bonér, J., Farley, D., & Kuhn, R. (2014). Manifiesto Reactivo. Recuperado el Octubre de
2018, de Manifiesto Reactivo: https://www.reactivemanifesto.org/
Castel, J. (2017). Estadisticas Nacionales. Obtenido de Estadisticas Nacionales:

http://www.la-razon.com/suplementos/financiero/causales-aumentan-riesgo-
muerte-construccion-financiero_0_2720727931.html
Caules, & Álvarez, C. (2016). ArquitecturaJava. Obtenido de ArquitecturaJava:

https://www.arquitecturajava.com/rxjs-la-programacion-reactiva/
Chakraborty, R. (2017). Reactive Programming in kotlin. Birmingham: Packt Publishing Ltd.
Fenton, S. (2013). TypeScript, succinctly. Morrisville, NC 27560: Aerial Center Parkway.
Gomez, M. (2018). Sorftware Crafters. Obtenido de Sorftware Crafters:

https://trends.google.com/trends/explore?date=today%205-y&q=typescript
Luna, F., & Peña, C. (s.f.). 18-fundamentos del ecosistema mobile.
Mansilla, S. (2015). Reactive Programming with RxJs. Dallas: The Pragmatic programers.
Mezzalira, L. (2018). Front-End Reactive Architectures. London, Surrey: Apress.
Naharry, D. (2013). TypeScript Revealed (TypeScript revelado). New york: appress Media.
Nwamba, C. (2017). TypsScript 2.x for Angular Developers. Birmingham: Packt Publishing
Ltd.
63
ReactiveX. (2018). ReactiveX Introduction. Obtenido de ReactiveX:
http://reactivex.io/intro.html
ReactiveX. (2018). ReactiveX Observable. Recuperado el Octubre de 2018, de ReactiveX:

reactivex.io/documentation/observable.html
ReactiveX. (2018). ReactiveX Scheduler. Recuperado el Octubre de 2018, de ReactiveX:

http://reactivex.io/documentation/scheduler.html
Sebastien, Ollivier. (Mayo 2016). AngularJS, Desarrolle hoy las aplicaciones web de
mañana. Barcelona: Editions ENI.
Toal, R., & Rivera, R. (2017). Programming Languaje Explorations. London New York: Acid-
Free paper.
Valverde Ramos, E., Hernandez, P., & Fuen, M. (2017). TypeScript. Creative Commons.
64

Características de La Programación Reactiva en Typescript

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Características de La Programación Reactiva en Typescript

Încărcat de

Drepturi de autor:

Formate disponibile

UNIVERSIDAD MAYOR DE SAN SIMON

FACULTAD DE CIENCIAS Y TECNOLOGIA

CARRERA INGENIERIA DE SISTEMAS

“CARACTERÍSTICAS DE LA PROGRAMACIÓN REACTIVA EN TYPESCRIPT”

PARA OPTAR AL TITULO DE LICENCIATURA EN INGENIERIA DE SISTEMAS

AUTOR: RICARDO ARGOTE SEVILLANO

TUTOR: ING. EDSON ARIEL TERCEROS TORRICO

Primeramente agradecer a Dios por permitirme

A mis padres José Argote y Florinda Sevillano por su

A la Digital Harbor por el aporte que dan para bien de

A los docentes de cada módulo por la dedicación y la

A mi tutor Ing. Edson Ariel Terceros Torrico por guiarme

A todos mis compañeros y amigos que de alguna manera

2.1. Antecedentes generales............................................................................................. 8

2.2. Antecedentes específicos. .......................................................................................... 9

4. CARACTERÍSTICAS DE LA PROGRAMACIÓN REACTIVA CONSIDERANDO EL

4.1. Introducción a la programación en TypeScript. ................................................ 10

4.2. Reseña histórica. .................................................................................................. 11

4.3. Definición de TypeScript ..................................................................................... 11

4.3.1. Fundamentos de TypeScript (porque TypeScript) ........................................ 12

4.4. Instalación de TypeScript .................................................................................... 14

4.5. Características. ..................................................................................................... 15

4.5.1. Sistema de Tipado. ............................................................................................ 16

4.5.2. Funciones y tipos de funciones........................................................................ 19

4.5.3. Clases ................................................................................................................. 25

4.5.4. Interfaces ........................................................................................................... 26

4.5.5. Decoradores ...................................................................................................... 28

4.5.6. Módulos ............................................................................................................. 33

5. RXJS Y LA PROGRAMACIÓN REACTIVA. ............................................................. 36

5.1. Definición de la Programación Reactiva. ............................................................ 36

5.1.1. EL manifiesto Reactivo. .................................................................................... 38

5.3. Rx o Reactive Extensions ...................................................................................... 39

5.3.1. Características de una librería Reactiva ......................................................... 40

5.3.2. Rx.JS ................................................................................................................... 46

6.1. Conceptos Básicos de Angular ............................................................................ 51

6.2. Componentes y características de Angular ........................................................ 54

6.2.1. Templates. .......................................................................................................... 56

6.2.2. Components Styles. ............................................................................................ 56

6.2.3. Módulos. ............................................................................................................ 57

6.2.4. Directives ........................................................................................................... 58

7. APLICACIONES REALIZADAS CON LA PROGRAMACION REACTIVA EN

Figura 1: Evolución de TypeScript ................................................................................................ 12

A lo largo de los años el mercado de la tecnología ha ido avanzando de una manera

Aunque JavaScript está avanzando a pasos agigantados, la compatibilidad con

•Falta de tipado fuerte y estático.

Uno de los términos en auge es la programación reactiva y en este documento veremos

Para este fin se hará un estudio profundo de las “características de la programación

Siendo una actividad demandante, el uso de recursos y herramientas juegan un papel

2.2. Antecedentes específicos.

Para realizar y aplicar la programación reactiva con TypeScript existe un framework

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

Método Analítico, debido a que se procederá a revisar y analizar ordenadamente

4. CARACTERÍSTICAS DE LA PROGRAMACIÓN REACTIVA

Las características de la programación reactiva utilizando el lenguaje de programación

4.1. Introducción a la programación en TypeScript.

En 2012 en JavaScript no había clases, ni módulos, el ecosistema carecía de herramientas

4.2. Reseña histórica.

Originalmente, productos como Bing y Office 365 despertaron en Microsoft la necesidad

4.3. Definición de TypeScript

TypeScript es un lenguaje creado por Microsoft y es open source, próximo sintácticamente

Como se había dicho anteriormente básicamente es un súper conjunto de JavaScript que

Figura 1: Evolución de TypeScript

4.3.1. Fundamentos de TypeScript (porque TypeScript)