PROGRAMACION MULTIPLATAFORMA

UNIDAD Nº I
PRINCIPIOS BASICOS DE ANGULAR IONIC NODE JS.

www.iplacex.cl
SEMANA 1

Introducción

Estimados alumnos bienvenidos a la primera semana de Programación Multiplataforma.

En esta semana se presentarán los conceptos básicos relacionados al tema, hablaremos

sobre el desarrollo orientado hacia multiplataformas, enfocándonos a las siguientes
preguntas: ¿Por qué debo desarrollar aplicaciones multiplataforma?, ¿Cuáles son las
herramientas que necesito para poder desarrollar aplicaciones multiplataformas? ¿Qué es
una aplicación híbrida?

Durante el transcurso de la semana iremos respondiendo estas preguntas e incursionando

sobre este apasionante mundo del desarrollo. También veremos un primer acercamiento a
las herramientas utilizadas como NodeJ, Angular, Ionic y TypeScript.

www.iplacex.cl 2
 Ideas Fuerza

1. TypeScript y sus Fundamentos.

TypeScript es un lenguaje de programación libre y de código abierto. Es
un superconjunto de JavaScript, eso significa que el lenguaje de
TypeScript incluye todo el lenguaje de JavaScript añadiendo una
colección de útiles mejoras. Esto en contraste con los diversos
subconjuntos de JavaScript y las diversas herramientas que buscan
reducir las funciones disponibles para crear un lenguaje reducido.
TypeScript es usado para desarrollar aplicaciones JavaScript que se
ejecutarán en el lado del cliente o del servidor, o extensiones para
programas (Node.js y Deno).

2. Desarrollo Multiplataforma
El desarrollo multiplataforma consiste en la construcción de aplicaciones
que pueda ser ejecutadas en distintos tipos de sistemas operativos ya
sea Windows, Mac OS, Linux, Android, Windows Phone, IOS una de las
ventajas del desarrollo multiplataforma es escribir el código una vez y
luego desplegarlo en la plataforma deseada.

3. Aplicación Híbrida
Una aplicación híbrida es un conjunto de herramientas web utilizadas
para desarrollar aplicaciones nativas orientadas a distintos sistemas
operativos Windows, Mac OS, Linux, Android, Windows Phone, IOS,
evitándonos la tarea de crear una aplicación para cada sistema operativo.

www.iplacex.cl 3
 Desarrollo
1. Definición de Multiplataforma:

Una aplicación o App es un software informático enfocado y diseñado para su utilización

en dispositivos móviles. Las App se caracterizan por tener una mejor calidad con
respecto a las webs tradicionales en diseño, capacidad, rendimiento y funcionalidades.
Las aplicaciones multiplataforma tienen, además una gran ventaja añadida: se pueden
utilizar en cualquier Smartphone o Tablet, independientemente de cuál sea su sistema
operativo.

Por ejemplo, una aplicación multiplataforma puede ejecutarse sin problema alguno, tanto
en Microsoft Windows en la arquitectura x86, como en Linux en la arquitectura x86 y Mac
OS X, ya sea en el PC o sistemas Apple Macintosh basados en x86. En general, una
aplicación multiplataforma se puede ejecutar tanto en todas las plataformas existentes o
como mínimo dos plataformas.

Las ventajas de las aplicaciones multiplataforma

La principal ventaja de las aplicaciones multiplataforma es que funcionan en los

principales sistemas operativos de Smartphone y tablets, eliminando la necesidad de
crear una versión distinta para cada dispositivo: Apple, Android, etc.

Basándose en los conceptos de polivalencia y versatilidad, las aplicaciones

multiplataforma tienen una serie de ventajas frente a las específicas de cada sistema
operativo, conocidas como APP nativa, y también sobre las webApp, a las que se

www.iplacex.cl 4
acceder a través de un navegador. Estos son los principales puntos a favor de las
aplicaciones multiplataforma:

• Gran ahorro de tiempo y costo de producción.

• Posibilidades de desarrollar aplicaciones con la misma calidad y prestaciones que
las nativas.
• Acceso directo descargando la aplicación, por lo que no es necesario el uso de un
navegador.
• Máxima integración con el hardware y el software específico de cada dispositivo.

Multidispositivo

El diseño multidispositivo adaptativo permite que la web o aplicación se adapte al

dispositivo que el usuario elija. Es decir, el tamaño de pantalla no supone ningún
obstáculo, ya qué tanto el contenido como la estructura de la web o aplicación se adaptan
a los diferentes formatos: ordenadores de escritorio, portátiles, móviles smartphones o
tablets (ipad y tablets Android). Se trata de que la web se adapte al visitante y no al revés.

Cumpliendo esta regla se reflejará de la siguiente forma:

• El usuario puede acceder a la misma web o app desde cualquier dispositivo o

lugar.
• Su experiencia de navegación y lectura es satisfactoria y familiar, por lo que
aumenta la probabilidad de cumplir su objetivo.
• Los costes de desarrollo y de mantenimiento de la web o app son menores, ya
que suponen una única inversión.
• Es posible conocer el número de usuarios que accede a la web desde cada
dispositivo.
• Una sola compilación es suficiente en el caso de aplicaciones hibridas o una web
en el caso de páginas para cada dispositivo.

www.iplacex.cl 5
 • Google recomienda las webs adaptativas, ya que estas ofrecen ventajas
considerables en el posicionamiento en buscadores.

Las ventajas de ofrecer aplicaciones o páginas web que sean responsivas conllevan a la
progresiva extinción de las web diseñadas para móviles. La aparición de estas ha
permitido a los usuarios la visualización fácil, rápida e intuitiva de contenidos a los que
hasta entonces solo tenía acceso desde un PC.

Visualización de páginas antiguamente diseñadas para dispositivos móviles

Visualización de sitios web desarrollados en la actualidad

www.iplacex.cl 6
2. Soluciones Multiplataforma

¿Qué es Node.Js?

Node.Js es un forma de ejecutar JavaScript en el

servidor (de ahí su terminación en .js haciendo
alusión al lenguaje JavaScript). Este entorno de
ejecución en tiempo real incluye todo lo que se
necesita para ejecutar un programa escrito en
JavaScript. Node.Js ejecuta JavaScript utilizando el motor V8 desarrollado por Google
Chrome, escrito en C ++, diseñado para varios sistemas operativos y muy rápido. Tanto
V8 como Node se actualizan con frecuencia, con mejoras de rendimiento, parches de
seguridad y compatibilidad con funciones modernas de JavaScript. El uso de JavaScript
también significa que la transformación de datos JSON, el formato de intercambio de
datos más común en la Web, es rápida de forma predeterminada.

¿Qué hace a una aplicación ser multiplataforma?

Es una aplicación que puede ejecutarse sin problema alguno, tanto en Microsoft
Windows en la arquitectura x86, como en Linux en la arquitectura x86 y Mac OS X, ya
sea en el PowerPC o sistemas Apple Macintosh basados en x86. En general, una
aplicación multiplataforma se puede ejecutar tanto en todas las plataformas existentes o
como mínimo dos plataformas.

¿Qué es Ionic?

www.iplacex.cl 7
Ionic es un framework para el desarrollo de aplicaciones híbridas, inicialmente pensado
para móviles y tablets, aunque ahora también capaz de implementar aplicaciones web e
incluso dentro de pocas aplicaciones de escritorio multiplataforma. Su característica
fundamental es que usa por debajo Angular 2 y una cantidad de componentes enorme,
que facilita mucho el desarrollo de las aplicaciones.
Se trata de una estupenda herramienta para la creación de aplicaciones sorprendentes,
pensada para obtener resultados de una manera rápida y con una menor inversión
económica, ya que permite crear aplicaciones para distintas plataformas móviles con una
misma base de código.

Angular

Angular es un framework de desarrollo de aplicaciones web. Está pensado en dividir un

proyecto en componentes y ser reutilizado en proyectos de gran escala.
Sus principales contrapartes son Vue, React. Angular tiene su salida al mercado en 2016
pero tiene una versión previa no compatible debido a que al realizar el lanzamiento de
Angular este fue rescrito totalmente, Angular es propiedad de Google de tipo opensource.
Desde su creación, Angular ha sido el framework preferido por la mayoría de los
desarrolladores JavaScript. Este éxito ha provocado que los desarrolladores quieran usar
el framework para más y más cosas.

De ser una plataforma para la creación de Web Apps, ha evolucionado como motor de
una enorme cantidad de proyectos del ámbito empresarial y de ahí para aplicaciones en
la Web Mobile Híbrida, llevando la tecnología al límite de sus posibilidades.
Es el motivo por el que comenzaron a detectarse problemas en Angular 1, o necesidades
donde no se alcanzaba una solución a la altura de lo deseable.
Entre ellas están las siguientes:

JavaScript:

www.iplacex.cl 8
Para comenzar se encontraron problemas en la creación de aplicaciones debido al propio
Javascript. Es un lenguaje con carácter dinámico, asíncrono y de complicada depuración.
Al ser tan particular resulta difícil adaptarse a él, sobre todo para personas que están
acostumbradas a manejar lenguajes más tradicionales como Java o C#, porque muchas
cosas que serían básicas en esos lenguajes no funcionan igualmente en Javascript.

Desarrollo del lado del cliente:

Ya sabemos que con Angular se lleva al navegador mucha programación que antes
estaba del lado del servidor, comenzando por el renderizado de las vistas. Esto hace que
surjan nuevos problemas y desafíos. Uno de ellos es la sobrecarga en el navegador,
haciendo que algunas aplicaciones sean lentas usando Angular 1 como motor.

Soluciones Implementadas en el Nuevo Angular 2

Todos esos problemas, difíciles de solucionar con la tecnología usada por Angular 1, han
impulsado a sus creadores a desarrollar desde cero una nueva versión del framework.
La nueva herramienta está pensada para dar cabida a todos los usos dados por los
desarrolladores, llevar a JavaScript a un nuevo nivel comparable a lenguajes más
tradicionales, siendo además capaz de resolver de una manera adecuada las
necesidades y problemas de la programación del lado del cliente.

En la siguiente imagen puedes ver algunas de las soluciones aportadas en Angular 2.

www.iplacex.cl 9
TypeScript /JavaScript

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

optimizaran el flujo de desarrollo, derivado precisamente por las carencias del lenguaje
mismo.

El 2012 fue el año en que TypeScript apareció (luego de 2 años de desarrollo), una
solución de Microsoft para el desarrollo de aplicaciones con JavaScript a gran escala,
para ellos y para sus clientes. Steve Lucco y un equipo de más de 50 personas que
incluía a Anders Hejlsberg, Lead Architect de C# y creador de Delphi y Turbo Pascal
desarrollaron Typescript en Microsoft, un proyecto que originalmente se conoció como
Strada.

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

de una mejora a JavaScript que permitiera construir productos escalables.

TypeScript es la solución a muchos de los problemas de JavaScript, 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.

www.iplacex.cl 10
La sugerencia de usar TypeScript para desarrollar en Angular es casi una imposición
porque la documentación y los generadores de código están pensados en TypeScript.

Se supone que en un futuro también estarán disponibles para Javascript, pero de

momento no es así. De todos modos, para la tranquilidad de muchos, TypeScript no
agrega más necesidad de procesamiento a las aplicaciones con Angular 2, ya que este
lenguaje solamente lo utilizas en la etapa de desarrollo y todo el código que se ejecuta
en el navegador es al final JavaScript, ya que existe una compilación previa.

www.iplacex.cl 11
3. Escalabilidad como Objetivo Principal

Node.Js fue formulado para generar un sistema escalable y que tuviese la consistencia
suficiente como para poder generar un elevado número de conexiones de forma
simultánea con el servidor. Generalmente cuando se crea un gran número de conexiones
el rendimiento y la velocidad de las aplicaciones y páginas web se ven perjudicados. Esto
se debe a que la gran mayoría de tecnologías que trabajan desde el lado del servidor
accionan las peticiones de forma aislada y mediante hilos independientes. Por eso,
cuando la cantidad de solicitudes que se hacen van en incremento, los recursos y el
consumo de estos también se incrementan. A este tipo de limitaciones que se generan
en el propio servidor, también es necesario sumar todas aquellas que posee el cliente
(desde la velocidad de su conexión a internet o la memoria RAM de su dispositivo, por
ejemplo). La cantidad de solicitudes, así como los procesos entrantes y salientes se
convierten en uno de los factores limitantes y Node.js ha sido concebido para optimizar
este inconveniente.

Su propuesta se basa en el tratamiento de estas conexiones de forma unificada a partir

de un único hilo complementado con un bucle de eventos (Event Loop) de tipo asíncrono.

De este modo las peticiones que se vayan generando reciben un tratamiento en forma
de eventos y pertenecen a este único bucle.

Además, Node.Js adopta la escalabilidad de la aplicación desde el principio, con

funciones potentes como el módulo Cluster que permite el equilibrio de carga en varios
núcleos de CPU. Las herramientas robustas, como el administrador de procesos PM2,
facilitan aún más el monitoreo, la optimización y la implementación de aplicaciones Node.

Por este motivo los rasgos de asincronía y el uso de eventos en JavaScript resultan tan
interesante para los creadores de Node.Js. Este nuevo replanteamiento proporciona un
lenguaje con la capacidad de gestionar una gran cantidad de solicitudes y conexiones
con la máxima eficiencia.

www.iplacex.cl 12
No es extraño entonces que se haya convertido en una de las alternativas más utilizadas
por todo tipo de desarrolladores y aplicaciones que requieren la gestión de una gran
cantidad de conexiones simultáneas. Algunos ejemplos son aplicaciones que se basan
en las notificaciones push como ZaroMQ o aquellas que realizan solicitudes de forma
constante a servicios como Ajax. Sin embargo, Node.Js no es la alternativa más
recomendable si vamos a trabajar en APPS que generen pocas solicitudes.

4. Operaciones Asíncronas

Un servidor se encarga de ejecutar diferentes tareas para facilitar la comunicación con

los diferentes clientes. Estas tareas se aglutinan bajo las siglas I/O que hacen referencia
a aquellas que están destinadas a la entrada (input) y a la salida (output) de información.

En los lenguajes clásicos de programación como Java este tipo de tareas se

desarrollaban de una forma sincrónica. ¿Qué quiere decir esto? Que todas se ejecutaban
de una forma lineal por lo que hasta que no se llevaba a cabo un proceso no se podía
ejecutar el siguiente. Esto trae bastantes inconvenientes como por ejemplo el
alargamiento innecesario de los procesos de trabajo y la tendencia a que se produzcan
bloqueos. Sin embargo, Node.Js emplea un I/O de tipo asíncrono. Esto significa que
todas las tareas que se desarrollan por el servidor se hacen de forma paralela por lo que
pueden efectuarse de forma simultánea y sin que se produzca ningún tipo de bloqueo en
el flujo de trabajo. El resultado es una ventaja competitiva considerable que proporciona
a la arquitectura de las aplicaciones web una mayor potencia y velocidad de
procesamiento.

www.iplacex.cl 13
5. Tipos de Proyectos que utilizan Node.Js

Al ser Node.Js una herramienta versátil para todo tipo de cosas, como aplicaciones web,
aplicaciones en línea de comandos, scripts para administración de sistemas, todo tipo de
aplicaciones de red, etc.

Es rápido, muy rápido. Y esto es importante por varias razones:

• El desarrollo es más rápido.
• La ejecución de Pruebas Unitarias se puede hacer más rápido.
• Las aplicaciones son más rápidas y por tanto la experiencia de usuario es mejor.
• El menor coste de infraestructura.

Algunas empresas que utilizan en la actualidad Node.Js son, por ejemplo:

PayPal Node.Js

PayPal gestiona más de 200 Millones de cuentas de usuarios registrados en su

plataforma procedentes de todos los países, uno de los principales problemas que
presentaba era la existencia de entornos dispersos dentro de su semántica que realizaba
tareas de forma independente entre las aplicaciones y el servidor. Esta debilidad fue el
detonante para que la plataforma líder en transacciones electrónica de dinero recurriese
a Node.Js, Desde entonces la plataforma hace uso de JavaScript como único lenguaje
de desarrollo web. PayPal confirmo que después de implementar Node.Js no solo logro
trabajar el doble de rápido en las tareas de desarrollo web, sino que además había
reducido en un tercio la cantidad de código.

Netflix Node.Js

Uno de los servicios de Streamig más grande del mundo, contaba con diversos
problemas en su infraestructura siendo el más grave el de los largos tiempos de carga,
desde que se implementó Node.Js obtuvo una mejora abismal en términos de

www.iplacex.cl 14
rendimiento ya que pudo reducir el tiempo de carga de su web en torno a un 70 %.
Gracias a Node.Js la plataforma logró perfeccionar notablemente las interfaces del
usuario y optimizar la compilación de sus directorios.

Linkedin Node.Js

En la red profesional más grande del mundo. Hoy cuenta con la suma de más de 600
millones de usuarios registrados. Su aplicación para móviles está desarrollada
íntegramente con Node.Js el gran potencial de Node y su agilidad fueron las principales
razones para que Linkedin recurriese a él. Y es que la eficiencia de la implementación
se refleja muy bien en sus números:

• Linkedin ha conseguido una notable reducción de recursos: Pasando de contar

con 15 servidores a contar con 4, es decir casi cinco veces menos.
• Mejora indiscutible en la experiencia del usuario: gracias al gran potencial de su
interfaz ha logrado multiplicar por dos las visitas y el tráfico que genera.
• Optimiza la velocidad de carga: Además, ha conseguido multiplicar su velocidad
consiguiendo reducirla a de dos a 10 veces trabajando desde el lado del cliente.

6. Integración de Angular con Soluciones de Software.

Angular nos permite integrar nuestras aplicaciones desarrolladas en distintas

plataformas, uno de los ejemplos más común es mediante la integración con Web
Services los que comunican nuestra aplicación desarrollada en Angular mediante los
métodos con nuestra API a través de los métodos http get, post, put y/o delete a los que
denominamos como servicios REST cuando se cumple a cabalidad la integración de
nuestra aplicación incluyendo los 4 métodos mencionados quiere decir que nuestra
aplicación está integrada mediante REST FULL.

www.iplacex.cl 15
 A modo de ejemplo platearemos la siguiente situación:

Tenemos un sitio desarrollado en angular, este sitio interactuará solamente con la parte
del cliente, esta aplicación si bien está desarrollada, el cliente la puede utilizar sin
inconvenientes, pero esta aplicación necesita comunicar con un servidor central, este
servidor esta desarrollado con su BackEnd en Java utilizando el framework Spring,
entonces para su integración y lograr la correcta comunicación con nuestro servidor
emplearemos una api REST que nos permite disponibilizar los servicios de nuestro
BackEnd para poder consumir estos con nuestra aplicación desarrollada en Angular
como lo muestra en el siguiente diagrama:

Ilustración 1

Aplicación Híbrida

Una aplicación híbrida es aquella que permite

desarrollar apps para móviles en base a las
tecnologías web: HTML + CSS + Javascript.

Son como cualquier otra aplicación de las que

puedes instalar a través de las tiendas de
Ilustración 2
aplicaciones para cada sistema, por lo que en

www.iplacex.cl 16
principio usuarios finales no percibirán la diferencia con respecto a otros tipos de
aproximaciones diferentes, como las aplicaciones nativas.

Al ejecutarse con tecnologías web, los desarrolladores que ya tienen experiencia en el

desarrollo en este medio pueden aprovechar sus conocimientos para lanzarse de una
manera más rápida en el desarrollo de apps para móviles. Para hacer esto posible, las
aplicaciones híbridas se ejecutan en lo que se denomina un “web view”, que no es más
que una especie de navegador integrado en el móvil y en el que solamente se ejecuta la
app híbrida.

Motivos por las cual desarrollar aplicaciones híbridas:

• Con una misma base de código serán capaces de compilar apps para funcionar
correctamente en una gran cantidad de sistemas operativos de móviles o tablets.
Generalmente nos será suficiente que nuestra app funcione en iOS y Android,
pero Ionic es capaz de compilar a otros sistemas como Windows Phone.

• El coste del desarrollo es sensiblemente menor, ya que no es necesario contar

con varios equipos de desarrollo para cada lenguaje concreto de cada plataforma.

• El tiempo de desarrollo también es menor, ya que solo es necesario construir la

aplicación una vez e inmediatamente la tendremos en todas las plataformas a las
que nos dirigimos.

• Es de más fácil adaptación para los desarrolladores que vienen de la web.

www.iplacex.cl 17
React

React es una librería JavaScript focalizada en el

desarrollo de interfaces de usuario. Así se define
la propia librería y evidentemente, esa es su
principal área de trabajo. Sin embargo, lo cierto
Ilustración 3 es que en React encontramos un excelente
aliado para hacer todo tipo de aplicaciones web,
SPA (Single Page Application) o incluso aplicaciones para móviles. Para ello, alrededor
de React existe un completo ecosistema de módulos, herramientas y componentes
capaces de ayudar al desarrollador a cubrir objetivos avanzados con relativamente poco
esfuerzo.

Por tanto, React representa una base sólida sobre la cual se puede construir casi
cualquier cosa con Javascript. Además, facilita mucho el desarrollo, ya que nos ofrece
muchas cosas ya listas, en las que no necesitamos invertir tiempo de trabajo. En este
artículo te ampliaremos esta información, aportando además diversos motivos por los
que usar React como librería del lado del cliente.

React vs otras librerías o frameworks

Con respecto a librerías sencillas como jQuery, React aporta una serie de posibilidades
muy importantes. Al tener las vistas asociadas a los datos, no necesitamos escribir
código para manipular la página cuando los datos cambian. Esta parte en librerías
sencillas es muy laboriosa de conseguir y es algo que React hace automáticamente.
También en comparación con jQuery nos permite una arquitectura de desarrollo más
avanzada, con diversos beneficios como la encapsulación del código en componentes,
que nos ofrecen una serie de ventajas más importantes que los plugin, como la
posibilidad de que esos componentes conversen e interaccionen entre sí, algo que sería
muy difícil de conseguir con Plugins.

www.iplacex.cl 18
ReactJS solapa por completo las funcionalidades de jQuery, por lo que resulta una
evolución natural para todos los sitios que usan esa librería. Podrían convivir, pero no es
algo que realmente sea necesario y recargaría un poco la página, por lo que tampoco
sería muy recomendable.

Ya luego en comparación con frameworks como es el caso de Angular o Ember, React

se queda a mitad de camino, pues no incluye todo lo que suele ofrecer un framework
completo. Pero ojo, a partir de todo el ecosistema de React se llega más o menos a las
mismas funcionalidades, así que es una alternativa perfecta.

Fundamentos de TypeScript

TypeScript es un superconjunto de JavaScript eso significa que el lenguaje de TypeScript

incluye todo el lenguaje de JavaScript añadiendo una colección de útiles mejoras. Esto
en contraste con los diversos subconjuntos de JavaScript y las diversas herramientas
que buscan reducir las funciones disponibles para crear un lenguaje reducido en
extrañezas.

Lo importante que hay que recordar es que todas las estructuras de control estándar que
se encuentra en JavaScript son compatibles dentro de un programa TypeScript. Esto
incluye:

• Flujos de control.

• Tipos de datos.

• Operadores.

• Subrutina.

Los componentes básicos de un programa que vienen de JavaScript, incluso sus

declaraciones, declaraciones de cambio, bucles, aritmética, pruebas lógicas y funciones.

www.iplacex.cl 19
Esta es unas de las fortalezas claves de TypeScript: se basa en un lenguaje (y un
conjunto de lenguajes) que ya es común para los programadores. JavaScript es
completamente documentado no solo en la especificación ECMA-262, sino también en
libros, en portales de redes de desarrolladores, foros y sitios web de preguntas y
respuestas.

Antes de indagar más sobre la sintaxis de TypeScript, recalcar el hecho de que todo
JavaScript es válido TypeScript, con un solo pequeño número de excepciones. Puede
tomar el código de JavaScript existente, agregarlo a un archivo TypeScript, y todas las
declaraciones serán válidas. Hay una sutil diferencia entre un código válido y un código
libre de errores en TypeScript; porque, aunque su código puede funcionar, el compilador
de TypeScript le advertirá sobre cualquier problema potencial que haya detectado.

Si transfiere una lista de JavaScript a un archivo TypeScript, puede recibir errores o

advertencias, aunque el código se considera valido. Un ejemplo común proviene del
sistema de tipo dinámico en JavaScript en el que es perfectamente aceptable para
asignar valores de diferentes tipos a la misma variable durante su vida útil. TypeScript
detecta asigna y genera errores para advertir que la asignación ha cambiado el tipo de
la variable.

Debido a que esta es una causa común de errores creando variables separadas,
realizando una aserción de tipo, o haciendo que la variable sea dinámica.

A diferencia de algunos compiladores que solo crearan resultados donde no se detectan

errores de compilación, el compilador de TypeScript seguirá intentando generar un
código JavaScript sensible. En el código que se muestra a continuación generara un
error, pero en la salida de JavaScript todavía se produce. Esta es una característica
admirable de TypeScript, pero como siempre con las advertencias y errores del
compilador, debe corregir el problema en su código fuente y obtener una compilación
limpia. Si habitualmente ignora las advertencias, su programa eventualmente exhibirá un
comportamiento inesperado. En algunos casos, el listado puede contener errores, donde
el compilador no podrá generar la salida de JavaScript.

www.iplacex.cl 20
El JavaScript muestra dos ejemplos de la misma rutina. Aunque el primero llama a
Math.pi explícitamente, el segundo usa una declaración with, que agrega las propiedades
y funciones de Math al ámbito actual. Las sentencias anidadas dentro de la sentencia
with pueden omitir el prefijo Math y llamar directamente a propiedades y funciones, por
ejemplo, la propiedad PI o la función floor.

Al final de la declaración with, se restaura el alcance léxico original, por lo que las
llamadas posteriores fuera del bloque with deben usar el prefijo Math. La sentencia with
no está permitida en modo estricto en ECMAScript 5 y en ECMAScript 6 clases y módulos
serán tratados como en modo estricto por defecto. TypeScript trata con sentencias como
un error y tratará todos los tipos dentro de la declaración with como tipos dinámicos. Esto
se debe a lo siguiente:

• El hecho de que no se permite en modo estricto.

• La opinión general de que la declaración con es peligrosa.

• Las cuestiones prácticas de determinar los identificadores que están en el

alcance en tiempo de compilación.

Por lo tanto, con estas excepciones menores a la regla en mente, puede colocar
cualquier JavaScript válido en un archivo TypeScript y será TypeScript válido. A modo
de ejemplo, aquí está el script de cálculo de área transferido a un archivo TypeScript.

www.iplacex.cl 21
En el listado 1-2, las declaraciones son simplemente JavaScript, pero en TypeScript las
variables radio y área se beneficiarán de la inferencia de tipo. Debido a que el radio se
inicializa con el valor 4, se puede inferir que el tipo de radio es número. Con sólo un ligero
aumento en el esfuerzo, el resultado de multiplicar Math.pi, que se sabe que es un
número, con la variable de radio que se ha inferido que es un número, es posible inferir
que el tipo de área es también un número.

Con la inferencia de tipo en el trabajo, las asignaciones se pueden comprobar para la

seguridad del tipo. La figura 1-1 muestra cómo se detecta una asignación no segura
cuando se asigna una cadena a la variable de radio.

Variables

Las variables TypeScript deben seguir las reglas de nomenclatura de JavaScript. El

identificador utilizado para nombrar una variable debe cumplir las siguientes condiciones.
El primer carácter debe ser uno de los siguientes:

• Una letra mayúscula.

• Una letra minúscula.

• Un guión bajo.

• Un signo de dólar.

www.iplacex.cl 22
• Un carácter Unicode de categorías: letra mayúscula, letra minúscula, letra minúscula,
letra modificadora, otra letra o número de letra.

Las variables tienen un ámbito funcional. Si se declaran en el nivel superior de su

programa, están disponibles en el ámbito global. Debe minimizar el número de variables
en el ámbito global para reducir la probabilidad de colisiones de nombres. Las variables
declaradas dentro de funciones, módulos o clases están disponibles en el contexto en el
que se declaran, así como en contextos anidados.

En JavaScript es posible crear una variable global declarándola sin la palabra clave var.
Esto se hace comúnmente inadvertidamente cuando la palabra clave var se pierde
accidentalmente; rara vez se hace deliberadamente. En un programa TypeScript, esto
causará un error, que evita toda una categoría de errores difíciles de diagnosticar en su
código. En la imagen siguiente muestra una función JavaScript válida que contiene una
variable global implícita, para la cual TypeScript generará un error «No se pudo encontrar
el símbolo». Este error se puede corregir agregando la palabra clave var, lo que haría
que la variable tenga un alcance local a la función AddNumbers, o declarando
explícitamente una variable en el ámbito global.

function addNumbers(a, b) {
// missing var keyword
total = a + b;
return total;
}

TypeScript se escribe de forma opcional estática; esto significa que los tipos se
comprueban automáticamente para evitar asignaciones accidentales de valores no
válidos. Es posible excluirse de esto declarando variables dinámicas. La comprobación
estática de tipos reduce los errores causados por el mal uso accidental de los tipos.
www.iplacex.cl 23
También puede crear tipos para reemplazar los tipos primitivos para evitar errores de
ordenación de parámetros.

Lo más importante, la tipificación estática permite que las herramientas de desarrollo

proporcionen autocompletado inteligente. La figura siguiente muestra la finalización
automática que conoce el tipo de variable y proporciona una lista relevante de opciones.
También muestra la información extendida conocida acerca de las propiedades y
métodos en la lista de autocompletado. La autocompletado contextual es lo
suficientemente útil para tipos primitivos, pero la mayoría de los entornos de desarrollo
integrados razonables pueden replicar inferencia simple incluso en un archivo
JavaScript. Sin embargo, en un programa con un gran número de tipos personalizados,
módulos y clases, el conocimiento profundo del tipo del servicio de lenguaje TypeScript
significa que tendrá autocompletado sensato a lo largo de todo el programa.

Type Annotations

Aunque el servicio de lenguaje TypeScript es experto en inferir tipos automáticamente,

hay momentos en los que no puede determinar el tipo. También habrá ocasiones en las
que deseará hacer un tipo explícito ya sea por seguridad o legibilidad. En todos estos
casos, puede utilizar una anotación de tipo para especificar el tipo.

Para una variable, la anotación de tipo viene después del identificador y está precedida
por dos puntos. La figura siguiente muestra las combinaciones que dan como resultado
una variable mecanografiada. El estilo más detallado es agregar una anotación de tipo y
asignar el valor. Aunque este es el estilo que se muestra en muchos ejemplos de este

www.iplacex.cl 24
capítulo, en la práctica este es el que menos usarás. La segunda variación muestra una
anotación de tipo sin asignación de valor; la anotación de tipo aquí es necesaria porque
TypeScript no puede inferir el tipo cuando no hay ningún valor presente. El ejemplo final
es como JavaScript simple; una variable se declara e inicializa en la misma línea. En
TypeScript, el tipo de la variable se deduce del valor asignado.

Para demostrar las anotaciones de tipo en el código, el código siguiente muestra un

ejemplo de una variable que tiene una anotación de tipo explícita que marca la variable
como una cadena. Los tipos primitivos son la forma más simple de anotación de tipo,
pero no está restringido a tales tipos simples.

var nombre: string = 'Steve';

El tipo utilizado para especificar una anotación puede ser un tipo primitivo, un tipo de
matriz, una firma de función o cualquier estructura compleja que desee representar,
incluidos los nombres de las clases y las interfaces que cree. Si desea desactivar la
comprobación de tipo estático, puede usar el tipo especial any, que marca el tipo de una
variable como dinámico. No se realizan comprobaciones en los tipos dinámicos. El

www.iplacex.cl 25
siguiente código de un rango de anotaciones de tipo que cubren algunos de estos
escenarios diferentes.

// tipo de anotación primitiva

var nombre: string = 'Steve';
var heightInCentimeters: number = 182.88;
var isActive: boolean = true;

// array anotation
var names: string[] = ['James', 'Nick', 'Rebecca', 'Lily'];

// funcion annotation con un parámetro que retorna una anotación

var decirHola: (name: string) => string;

// implementación de decir hola

decirHola = function (name: string) {
return Hola ' + name;
};

// objeto tipo annotation

var persona: { name: string; heightInCentimeters: number; };

// implementación de objeto persona

persona = {
name: 'Mark',
heightInCentimeters: 183
};

www.iplacex.cl 26
Si una anotación de tipo se vuelve demasiado compleja, puede crear una interfaz para
representar el tipo y simplificar las anotaciones. El listado 1-6 muestra cómo simplificar
la anotación de tipo para el objeto persona, que se mostró al final del ejemplo anterior en
siguiente código. Esta técnica es especialmente útil si tiene la intención de reutilizar el
tipo, ya que proporciona una definición reutilizable. Las interfaces no se limitan a describir
tipos de objetos; son lo suficientemente flexibles como para describir cualquier estructura
que sea probable que encuentre.

interface Person {
name: string;
heightInCentimeters: number;
}
var person: Person = {
name: 'Mark',
heightInCentimeters: 183
}

7.Tipos de datos primitivos

Aunque los tipos primitivos parecen limitados en TypeScript, representan directamente

los tipos de JavaScript subyacentes y siguen los estándares establecidos para esos
tipos. Las variables de cadena pueden contener una secuencia de unidades de código
UTF-16. A un tipo booleano se le puede asignar sólo los literales trues o false. Las
variables numéricas pueden contener un valor de coma flotante de 64 bits de doble
precisión. No hay tipos especiales para representar enteros u otras variaciones
específicas en un número, ya que no sería práctico realizar análisis estático para
garantizar que todos los valores posibles asignados sean válidos.

www.iplacex.cl 27
El tipo any es exclusivo de TypeScript y denota un tipo dinámico. Este tipo se utiliza
siempre que TypeScript no puede inferir un tipo, o cuando explícitamente desea hacer
que un tipo sea dinámico. Usar cualquier tipo equivale a optar por no verificar el tipo para
la vida útil de la variable.

El compilador también contiene tres tipos que no están destinados a utilizarse como
anotaciones de tipo, sino que se refieren a la ausencia de valores.

• El tipo indefinido es el valor de una variable a la que no se ha asignado un valor.

• El tipo nulo se puede utilizar para representar una ausencia intencional de un

valor de objeto.

Por ejemplo, si tenía un método que buscó en una matriz de objetos para
encontrar una coincidencia, podría devolver null para indicar que no se encontró
ninguna coincidencia.

• El tipo void se utiliza sólo en tipos de retorno de funciones para representar

funciones que no devuelven un valor o como argumento de tipo para una clase o
función genérica.

Arreglos o Arrays

Los Arreglos de TypeScript tienen una escritura precisa para su contenido. Para
especificar un tipo de matriz, simplemente agregue corchetes después del nombre del
tipo. Esto funciona para todos los tipos, ya sean primitivos o personalizados. Cuando
agrega un elemento a la matriz, su tipo se comprobará para asegurarse de que es
compatible. Cuando acceda a los elementos de la matriz, obtendrá autocompletado de
calidad porque se conoce el tipo de cada elemento. El listado de Array muestra cada una
de estas comprobaciones de tipo.

www.iplacex.cl 28
interface Monument {
name: string;
heightInMeters: number;
}
// el arreglo utilizando la interfaz Monument
var monuments: Monument[] = [];

// Cada ítem es añadido al arreglo además de comprobar el tipo si es compatilbe

monuments.push({
name: 'Statue of Liberty',
heightInMeters: 46,
location: 'USA'
});

Se agregan elementos al arreglo previamente definidos.

monuments.push({
name: 'Peter the Great',
heightInMeters: 96
});

monuments.push({
name: 'Angel of the North',
heightInMeters: 20
});

www.iplacex.cl 29
function compareMonumentHeights(a: Monument, b: Monument) {
if (a.heightInMeters > b.heightInMeters) {
return -1;
}
if (a.heightInMeters < b.heightInMeters) {
return 1;
}
return 0;
}

//El método array.sort a diferencia de comparer acepta dos monumentos

var monumentsOrderedByHeight = monuments.sort(compareMonumentHeights);

//Obtiene el primer elemento del arreglo

var tallestMonument = monumentsOrderedByHeight[0];

Hay algunas observaciones interesantes que se pueden hacer en el listado de Array.

Cuando se declara la variable monumentos, la anotación de tipo para una matriz de
objetos Monument puede ser la abreviatura: Monument [] o la longitud:
Array<Monument>: no hay diferencia de significado entre estos dos estilos. Por lo tanto,
debe optar por lo que sienta que es más legible. Tenga en cuenta que la matriz se crea
una instancia después del signo igual usando el literal de matriz vacía ([]). También
puede crear una instancia con valores, añadiéndolos dentro de los corchetes, separados
por comas. Los objetos que se agregan a la matriz mediante monuments.push (...) no
son explícitamente objetos Monument. Esto está permitido porque son compatibles con
la interfaz Monument. Esto es incluso el caso del objeto Estatua de la Libertad, que tiene
una propiedad de ubicación que no forma parte de la interfaz Monumento.

www.iplacex.cl 30
La matriz se ordena usando monuments.sort (...), que toma una función para comparar
valores. Cuando la comparación es numérica, la función comparador puede simplemente
devolver a - b, en otros casos puede escribir código personalizado para realizar la
comparación y devolver un número positivo o negativo para ser utilizado para ordenar (o
un cero si los valores son los mismos).

Se accede a los elementos de una matriz mediante un índice. El índice está basado en
cero, por lo que el primer elemento de la matriz MonumentSorderedByHeight es
monumentSorderedByHeight [0]. Cuando se accede a un elemento desde la matriz, se
proporciona autocompletado para las propiedades name y heightInMeters. La propiedad
de ubicación que aparece en el objeto Estatua de la Libertad no se proporciona en la lista
de finalización automática, ya que no forma parte de la interfaz Monumento. Para obtener
más información sobre el uso de matrices y bucles.

8. Orientación a Objetos

La programación orientada a objetos permite que los conceptos del mundo real se
representen por código que contiene tanto los datos como el comportamiento
relacionado. Los conceptos se modelan normalmente como clases, con propiedades
para los datos y métodos para el comportamiento, y las instancias específicas de estas
clases se denominan objetos.

A lo largo de los años ha habido muchas discusiones sobre la orientación de los objetos
y estoy seguro de que el debate sigue siendo lo suficientemente animado como para
continuar durante muchos años. Debido a que la programación es un proceso heurístico,
rara vez encontrará una respuesta absoluta.

Esta es la razón por la que escuchará la frase «depende» tan a menudo en el desarrollo
de software. Ningún paradigma de programación se adapta a todas las situaciones, por
lo que cualquiera que le diga que la programación funcional, la programación orientada

www.iplacex.cl 31
a objetos u otro estilo de programación es la respuesta a todos los problemas no ha
estado expuesto a una gran variedad de problemas complejos.

Debido a esto, los lenguajes de programación se están volviendo cada vez más
multiparadigma. La programación orientada a objetos es una formalización de muchas
buenas prácticas que surgieron al principio de la programación informática. Proporciona
los conceptos para facilitar la aplicación de estas buenas prácticas. Al modelar objetos
del mundo real del dominio problemático usando objetos en el código, el programa puede
hablar el mismo idioma que el dominio al que sirve. Los objetos también permiten la
encapsulación y la ocultación de información, lo que impide que diferentes partes de un
programa modifiquen datos en los que depende otra parte del programa.

Orientación a Objetos en TypeScript

TypeScript proporciona todas las herramientas clave que necesita para utilizar la
orientación de objetos en su programa:

• Clases
• Instancias de clases
• Métodos
• Herencia
• Recursión abierta
• Encapsulación
• Delegación
• Clases de polimorfismo, instancias de clases, métodos y herencia.

Estos son los bloques de construcción de un programa orientado a objetos y son

posibles de una manera simple por el lenguaje mismo. Todo lo que necesita para cada
uno de estos conceptos es una o dos palabras clave de idioma. Los demás términos de

www.iplacex.cl 32
esta lista merecen una explicación más detallada, especialmente en lo que respecta a
cómo funcionan dentro del sistema de tipos TypeScript.

www.iplacex.cl 33
 Conclusión

En esta semana hemos visto los fundamentos para poder desarrollar nuestras primeras
aplicaciones orientadas hacia multiplataforma. Las ventajas que nos da hacer este tipo
de desarrollo son: reducción de costos de mantención, mejor control sobre el desarrollo,
escritura de código de forma centralizada (escribe una vez despliega en distintas
plataformas).
Además, cabe destacar que herramientas como NodeJS son utilizadas por empresas de
gran nivel mundial como lo son Netflix, LinkedIn etc.

Herramientas que nos facilitan el desarrollo, como lo son, Ionic, Angular, NodeJs, React,
llevan bastante tiempo siendo desarrolladas, mejorando y facilitando nuestra labor al
momento de construir una aplicación multiplataforma.

www.iplacex.cl 34
 Bibliografía

Steve Fenton. (2014). Pro TypeScript: Application-Scale JavaScript Development.

Apress.

Alberto Basalo. (2016). Manual de Angular. Sitio web:

https://desarrolloweb.com/manuales/manual-angular-2.html

Alejandro Morales. (2000). Introducción a NodeJS. Sitio web:

https://desarrolloweb.com/articulos/intro-nodejs.html

www.iplacex.cl 35
www.iplacex.cl 36