Desarrollo web front-end con TypeScript, Angular 2 e Ionic

Micael Gallego
@micael_gallego
Desarrollo
web frontend
con
y cómo hemos
llegado hasta aquí
Febrero 2016

3
Nacimiento de la web
Hace 24 años nace la web
En 1992 dos investigadores del CERN presentan la web
Tim Berners-LeeRobert Cailliau

4
Elementos básicos
Navegador web
Servidor web
Protocolo Http
TCP/IP - Internet

5
Elementos básicos
Navegador web
Servidor web
Protocolo Http
TCP/IP - Internet
URL

6
Elementos básicos
Navegador web
Servidor web
Protocolo Http
TCP/IP - Internet
URL
HTML + Imágenes

7
CERN
(1990)

8
CERN
(1990)

9
Mosaic (1993)

10
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This paragraph one.</p>
<p>This paragraph two.</p>
<p>Bla, bla, bla, bla, bla, bla, bla,
bla, bla, bla, bla, bla, bla, bla,
bla, bla.</p>
</body>
</html>
index.html
Visualización en el navegador
HTML

11
CSS nace a los 4 años
para separar contenido y estilo (1996)
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<p>I’m blue</p>
</body>
</html>
p {
color: blue;
}
style.css
index.html

12
CSS
p {
font-family: Arial;
color: blue;
font-size: 12px;
}
h3 {
color: red;
}
span {
background-color: yellow;
}
<h3>What's CSS for?</h3>
<p>CSS is for styling HTML pages!</p>
<h3>Why use it?</h3>
<p>It makes webpages look <span>really rad</span>.</p>
<h3>What do I think of it?</h3>
<p>It's awesome!</p>

13
JavaScript nació un año antes
Aunque ha tenido diferentes nombres, el lenguaje apareció en el
navegador web Netscape en 1995
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("HellonHow are you?");
}
</script>
</body>
</html>

15
Evolución de la web
Navegadores web
http://gs.statcounter.com
2016201420122010
IE
Chrome
Firefox
Safari
Opera

16
La web ha ido creciendo
con estándares

17
Aunque algunos no los respetaban

18
También se han usado plugins
no estándares y no disponibles en
todas las plataformas

19
¿Y los servidores web?
Al principio los servidores web únicamente
servían los ficheros del disco duro
(1995)(1995)

20
Se han transformado en aplicaciones
que generan cada página con la información que
envía el usuario y/o la que está en la base de datos
Navegador
web
Servidor
web
1 - URL
Base de
datos
2 - SQL
4 - HTML 3 - Data

21
Tecnologías desarrollo web servidor

23
El desarrollo web hoy
Existen varios tipos de webs
Dependiendo de cómo usan las tecnologías
de cliente y servidor
Página web Aplicación web
Servidor estático
El servidor web sirve
contenido guardado en el
disco duro
Servidor dinámico
El servidor web sirve
contenido generado
mediante código

24
Servidor estático Servidor dinámico
● Página web
estática
● Página web
interactiva
● Aplicación web con
cliente estático
● Aplicación web
interactiva
AJAX
● Aplicación web SPA

25
● Página web
estática
● Página web
interactiva
cliente estático
● Aplicación web
interactiva
AJAX

26
•Página web estática
 El navegador hace petición al servidor mediante http
 El servidor transforma URL a ruta en disco
 El servidor devuelve el fichero de disco al navegador
 El navegador visualiza la página HTML con estilos CSS e
imágenes (sin JavaScript).
 Cuando el usuario hace clic en un enlace, el navegador
repite el proceso con la URL del link y recarga por
completo la página web

27
Arquitecturas de aplicaciones web
TECNOLOGÍAS DE DESARROLLOWEB

28

29
● Página web estática
● Se implementa con HTML y CSS
● Se utilizan librerías de componentes CSS
● Bibliotecas de componentes predefinidos
● Diseño responsive (adaptativo a móviles)
● Distribución de componentes

32
● Página web
estática
● Página web
interactiva
cliente estático
● Aplicación web
interactiva
AJAX

33
•Página web interactiva
 El contenido de la página web está alojado en el disco duro
del servidor (estático)
 El cliente es dinámico porque las páginas incluyen código
JavaScript que se ejecuta en el navegador
 Este JavaScript se usa para incluir efectos gráficos:
 Efectos gráficos que no se pueden implementar con CSS
 Mostrar u ocultar información en función de los elementos que se
seleccionan (para documentos largos)
 Menús desplegables
 Buscadores

34
Buscador implementado en JavaScript

35
● Página web interactiva
● Se implementan con HTML, CSS y JavaScript
● Para implementar la interactividad en JavaScript
se suele usa la librería jQuery

36
● Página web
estática
● Página web
interactiva
cliente estático
● Aplicación web
interactiva
AJAX

37
•Aplicación web con cliente estático
 Cuando el servidor web recibe una petición, dependiendo de
la URL:
 Devuelve contenido del disco
 Ejecuta código para generar el recurso dinámicamente
 Cuando se ejecuta código, normalmente se hacen consultas
a una base de datos para recuperar la información y generar
la página HTML
 Si el usuario pulsa un link, se recarga la página al completo

38

39
•Aplicaciones web con JavaScript
• Dependiendo de cómo se usa el JavaScript se
diferencian tres tipos:
 Aplicación web interactiva
 Aplicación web con AJAX
 Aplicación web SPA

40
● Página web
estática
● Página web
interactiva
cliente estático
● Aplicación web
interactiva
AJAX

41
•Aplicación web interactiva
 El JavaScript se utiliza para crear efectos gráficos
(como las páginas web interactivas)
 También se utiliza para validaciones de datos en
formularios
 La gran mayoría de las aplicaciones web
disponibles en Internet son de este tipo
 Suelen usar jQuery

43
● Página web
estática
● Página web
interactiva
cliente estático
● Aplicación web
interactiva
AJAX

44
•Aplicación web con AJAX
●
AJAX (Asynchronous JavaScript And XML)
 JavaScript se usa para no tener que
recargar completamente la página al pulsar un link
 Permite hacer petición al servidor web en segundo plano
(oculta al usuario)
 Cuando llega al navegador el resultado de la petición, el
código JavaScript actualiza aquellas partes de la página
necesarias

45
Navegador web
Servidor web
Web sin AJAX

46
Navegador web
Servidor web
Web con AJAX

47
 Usar AJAX en una página mejora mucho la
experiencia de usuario
 No es necesario recargar la página al completo, sólo
aquellas partes que cambian
 Se suelen implementar con jQuery
 Se puede usar para simular el efecto de scroll infinito y
evitar los botones de anterior / siguiente

49
 Se puede dar realimentación al usuario antes
de enviar el formulario, por ejemplo en la selección del
nombre de usuario si tiene que ser único

50
 Cuando el código JavaScript hace
peticiones, el servidor puede devolver:
Fragmentos de
HTML
Se incrusta directamente
en la página
Scroll infinito
Información
estructurada
Se interpreta por JavaScript
para modificar la página
Error de validación

51
 Cuando un servidor web genera
información estructurada ante peticiones http se tiene
una API REST
 La información se representa en formato JSON
{
form_validation:[
{id:“name”,status:“ok”},
{id:“email”,status:“error”,message:“Invalid format”}
]
}

52
● Página web
estática
● Página web
interactiva
cliente estático
● Aplicación web
interactiva
AJAX

53
•Aplicación web SPA
 SPA (Single Page Application)
 La técnica AJAX se puede llevar al extremo y que toda la
información del servidor sea obtenida con JavaScript en
segundo plano, haciendo peticiones a la API REST y
obteniendo la información en JSON
 La aplicación web es un conjunto de recursos HTML,
CSS y JavaScript que se cargan en el navegador al
acceder a la URL principal

54
•Aplicación web SPA
 Google las popularizó con Gmail y Google Maps

55
TECNOLOGÍAS DE DESARROLLOWEBGoogle Maps

56
TECNOLOGÍAS DE DESARROLLOWEBSoundcloud

57
TECNOLOGÍAS DE DESARROLLOWEBSlides.com

58
TECNOLOGÍAS DE DESARROLLOWEBGitHub

59
● En el lado cliente son aplicaciones autónomas que se
comunican con el servidor con una API REST
● Son las más complejas de implementar
● Ofrecen una experiencia muy interactiva y dinámica al
usuario
● Las tecnologías que se usan para su desarrollo son
completamente diferentes al resto de páginas y
aplicaciones web

61
Desarrollo de webs SPA
Editores / IDEs
El desarrollo web avanzado tiene sus propias herramientas
SublimeText Visual Studio
Code
WebStorm

62
Atom

63
Plataforma y gestión de paquetes
Plataforma para
ejecutar aplicaciones JS
fuera del navegador
Gestor de
herramientas de
desarrollo y librerías
JavaScript

64
Construcción de proyectos / empaquetado

65
Lenguaje programación
● Los navegadores web sólo entienden JavaScript
● La última versión de JavaScript (ES6) no está
soportada por la mayoría de los navegadores
● Hay traductores de ES6 a ES5 (versión soportada)
● Existen lenguajes de programación que se
traducen a JavaScript y se ejecutan en los
navegadores

66
ES5 ES6

67
ES5 ES6

68
Frameworks / librerías SPA

69
Frameworks / librerías SPA

72
TypeScript
Características
● Añade tipos estáticos a JavaScript ES6
● Inferencia de tipos
● Tipos opcionales
● El compilador genera código JavaScript ES5
(compatible con los navegadores web actuales)
● Orientado a Objetos con clases (no como ES5)
● Anotaciones
http://www.typescriptlang.org/

73
TypeScript
Ventajas frente a JavaScript
● Con el tipado estático el compilador puede verificar
la corrección de muchas más cosas que con el
tipado dinámico
● Los programas grandes son menos propensos a
errores
● Los IDEs y editores pueden: Autocompletar,
Refactorizar, Navegar a la definición
● Muy parecido a Java y C#

74
TypeScript
Facilidad de adopción para JavaScripters
● Los tipos son opcionales
● La inferencia de tipos permite no tener que
escribir los tipos constantemente
● En realidad es JavaScript con más cosas, así que
todo lo conocido se puede aplicar
● Un mismo proyecto puede combinar JS yTS, lo
que facilita migrar un proyecto existente

75
TypeScript
export class Empleado {
private nombre:string;
private salario:number;
constructor(nombre:string,
salario:number){
this.nombre = nombre;
this.salario = salario;
}
getNombre(){
return this.nombre;
}
toString(){
return "Nombre:"+this.nombre+
", Salario:"+this.salario;
}
}
TypeScript

76
TypeScript
TypeScript vs JavaScript ES5
salario:number){
}
getNombre(){
return this.nombre;
}
toString(){
}
}
Clase enTypeScript
function Empleado(nombre, salario){
}
Empleado.prototype.getNombre = function(){
return nombre;
};
Empleado.prototype.toString = function(){
return "Nombre:"+this.nombre+",
Salario:"+this.salario;
};
Simulación de clase en JS ES5 con prototipos

77
TypeScript
Java vs TypeScript
public class Empleado {
private String nombre;
private double salario;
public Empleado(String nombre,
double salario){
}
public String getNombre(){
return nombre;
}
public String toString(){
return "Nombre:"+nombre+
", Salario:"+salario;
}
}
Clase en Java
salario:number){
}
getNombre(){
return this.nombre;
}
toString(){
}
}
Clase enTypeScript

78
TypeScript
Java vs TypeScript
double salario){
}
return nombre;
}
}
}
Clase en Java
salario:number){
}
getNombre(){
return this.nombre;
}
toString(){
}
}
Clase enTypeScript

79
TypeScript
Java vs TypeScript
double salario){
}
return nombre;
}
}
}
Clase en Java
salario:number){
}
getNombre(){
return this.nombre;
}
toString(){
}
}
Clase enTypeScript

80
TypeScript
Java vs TypeScript
double salario){
}
return nombre;
}
}
}
Clase en Java
salario:number){
}
getNombre(){
return this.nombre;
}
toString(){
}
}
Clase enTypeScript

81
TypeScript
Java vs TypeScript
double salario){
}
return nombre;
}
}
}
Clase en Java
salario:number){
}
getNombre(){
return this.nombre;
}
toString(){
}
}
Clase enTypeScript

82
TypeScript
Java vs TypeScript
double salario){
}
return nombre;
}
}
}
Clase en Java
salario:number){
}
getNombre(){
return this.nombre;
}
toString(){
}
}
Clase enTypeScript

83
TypeScript
import { Empleado } from "./Empleado";
let emps = new Array<Empleado>();
emps.push(new Empleado('Pepe', 500));
emps.push(new Empleado('Juan', 200));
for(let emp of emps){
console.log(emp.getNombre());
}
empleados.forEach(emp => {
console.log(emp);
});
TypeScript

84
TypeScript
Java vsTypeScript
List<Empleado> emps = new ArrayList<>();
emps.add(new Empleado('Pepe', 500));
emps.add(new Empleado('Juan', 200));
for(Empleado emp : emps){
System.out.println(emp.getNombre());
}
empleados.forEach(emp -> {
System.out.println(emp);
});
Java
}
console.log(emp);
});
TypeScript

85
TypeScript
Java vsTypeScript
}
});
Java
}
console.log(emp);
});
TypeScript
En Java las clases de la misma carpeta se pueden usar sin
importar. EnTypeScript se tienen que importar

86
TypeScript
Java vsTypeScript
}
});
Java
}
console.log(emp);
});
TypeScript
En Java usamos List y ArrayList del SDK.
EnTypeScript usamos el Array nativo de JavaScript

87
TypeScript
Java vsTypeScript
}
});
Java
}
console.log(emp);
});
TypeScript
En Java List el método es “add”
EnTypeScript Array el método es “push”

88
TypeScript
Java vsTypeScript
}
});
Java
}
console.log(emp);
});
TypeScript

89
TypeScript
Java vsTypeScript
}
});
Java
}
console.log(emp);
});
TypeScript

90
TypeScript
Editores / IDEs
Hay plugins para la mayoría de los editores / IDEs
Code
WebStorm

91
TypeScript
Editores / IDEs
Hay plugins para la mayoría de los editores / IDEs
Code
WebStorm

96
Angular 2
Características
● Angular es un framework para desarrollo SPA
● Permite extender el HTML con etiquetas propias
● Con contenido personalizado (HTML)
● Con comportamiento personalizado (JavaScript)
● Interfaz basado en componentes (no en páginas)
● Se recomienda usar con TypeScript (aunque se
puede con ES5 y ES6)
● Inyección de dependencias
https://angular.io/

97
Angular 2
Angular 2 vs Angular 1
● Está en beta (Feb 2016)
● Está implementado desde cero, no como una
evolución de Angular 1
● Angular 2 no es compatible con Angular 1
● Cuidado, la documentación de Angular 1 no sirve
para Angular 2
$scope

98
Angular 2
Componente <app>
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<app>Loading...</app>
</body>
</html>
index.html
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
}
app.component.ts
<h1>My First Angular 2 App</h1>
app.html
Uso del componente Implementación del componente

99
Angular 2
Componente <app>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
index.html
@Component({
selector: 'app',
})
}
app.component.ts
app.html
Elemento del
Componente

100
Angular 2
Componente <app>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
index.html
@Component({
selector: 'app',
})
}
app.component.ts
app.html
HTML del
Componente

101
Angular 2
Componente <app>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
index.html
@Component({
selector: 'app',
})
}
app.component.ts
app.html
Lógica del
Componente

102
Angular 2
Componente <app>

103
Angular 2
Componente dinámico
La vista del componente (HTML) se genera en función
de su estado (atributos de la clase)
@Component({
selector: 'app',
})
name = 'Anybody';
}
app.component.ts
<h1>Hello {{name}}!</h1>
app.html

104
Angular 2
Componente dinámico
La vista del componente (HTML) se genera en función
de su estado (atributos de la clase)
@Component({
selector: 'app',
})
name = 'Anybody';
}
app.component.ts
app.html

105
Angular 2
Datos enlazados (data binding)
Un campo de texto se puede “enlazar” a un atributo
para que los cambios se reflejen al escribir
@Component({
selector: 'app',
})
name = 'Anybody';
}
app.component.ts
<input type="text" [(ngModel)]="name">
app.html

106
Angular 2
Datos enlazados (data binding)
Un campo de texto se puede “enlazar” a un atributo
para que los cambios se reflejen al escribir
@Component({
selector: 'app',
})
name = 'Anybody';
}
app.component.ts
app.html

107
Angular 2
Ejecución de lógica
Se puede ejecutar un método ante un evento
producido en el componente
@Component({
selector: 'app',
})
name = 'Anybody';
setName(name:string){
this.name = name;
}
}
app.component.ts
<button (click)="setName('John')">
Hello John
</button>
app.html

108
Angular 2
@Component({
selector: 'app',
})
name = 'Anybody';
setName(name:string){
this.name = name;
}
}
app.component.ts
<button (click)="setName('John')">
Hello John
</button>
app.html

109
Angular 2

110
Angular 2
Aplicaciones básicas
Estas características son el núcleo de Angular 2 y
permiten implementar apps sencillas

111
Angular 2
Árboles de componentes
En Angular 2 un componente está formado por más
componentes formando un árbol
App
Header FooterMain
Comp1 Comp2

112
Angular 2
Árboles de componentes
En Angular 2 un componente está formado por más
componentes formando un árbol
App
Header FooterMain
Comp1 Comp2

113
Angular 2
Árboles de componentes App
Header
import {HeaderComponent} from
'./header.component';
@Component({
selector: 'app',
templateUrl: 'app.html',
directives: [HeaderComponent]
})
export class AppComponent {}
app.component.ts
<header></header>
app.html
import {Component} from
'angular2/core';
@Component({
selector: 'header',
templateUrl: 'header.html'
})
export class HeaderComponent {}
header.component.ts
<h1>Hello Angular 2 App</h1>
header.html

114
Angular 2
Header
@Component({
selector: 'app',
})
app.component.ts
<header></header>
app.html
'angular2/core';
@Component({
selector: 'header',
})
header.component.ts
header.htmlHay que indicar los
componentes que se
usan en el template

115
Angular 2
Header
@Component({
selector: 'app',
})
app.component.ts
<header></header>
app.html
'angular2/core';
@Component({
selector: 'header',
})
header.component.ts
header.html
EnTypeScript hay que
importar todas las clases
que se usen (aunque
sean de la misma app)

116
Angular 2
Angular 2 es mucho más
● Inyección de dependencias
● Servicios
● Navegación por la app (Router)
● Cliente http (APIs REST)
● Animaciones
● Internacionalización
● Testing
● Librerías de componentes: Material Design
● ...

118
Ionic 2
● Desarrollo apps móviles
● Plataformas principales: Android, iOS, Windows
Phone
● Cada plataforma móvil tiene su propia tecnología de
desarrollo
● Diferentes lenguajes, entornos, librerías
● Alto coste de desarrollo apps multiplataforma

119
Ionic 2
● Apps híbridas
● Aplicaciones implementadas con tecnologías web
(HTML, CSS y JS)
● Se instalan y actualizan como una app normal
● Acceden a los recursos del dispositivo con plugins
nativos

120
Ionic 2
● Las apps nativas…
● Se integran mejor con el
sistema operativo
● Aprovechan mejor las
funcionalidades de los
dispositivos
● Pueden tener mejor
rendimiento
● Las apps híbridas…
● Son mucho más fáciles de
desarrollar (tecnologías
web)
● Un mismo código,
múltiples plataformas
● Pueden compartir parte
del código con webs SPA
Apps nativas vs híbridas

121
Ionic 2
Frameworks apps híbridas

122
Ionic 2
● ¿Qué es ionic 2?
● Es un framework de desarrollo de apps para móviles y
tablets
● Con tecnologías web (HTML, CSS y JavaScript)
● Basado en Angular 2
● La misma app se ejecuta en Android y iOS
● Basado en Apache Cordova
http://ionicframework.com/

123
Ionic 2
App básica
Angular 2 con anotaciones nuevas y
componentes predefinidos
@Page({
templateUrl: 'profile.html'
})
export class Profile {
first = 'Biff';
last = 'Tannen';
}
<ion-navbar>
<ion-title>Profile</ion-title>
</ion-navbar>
<ion-content>
{{first}} {{last}}
</ion-content>
profile.page.ts profile.html

124
Ionic 2
Componentes para
móviles
● Ionic 2 ofrece una librería
de componentes para
móviles
● La misma app se ve y se
comporta diferente en
Android y en iOS

127
La nueva web está aquí
● Las tecnologías web han madurado mucho en los
últimos años
● Los navegadores son cada vez más eficientes y
compatibles entre sí
● Los nuevos lenguajes como ES6 yTypeScript
permiten el desarrollo de grandes aplicaciones
● Los frameworks SPA como Angular 2 facilitan el
desarrollo de aplicaciones complejas
● Las tecnologías web son la plataforma de
desarrollo universal

Micael Gallego
micael_gallego@urjc.es
@micael_gallego
Desarrollo
web frontend
con

Desarrollo web front-end con TypeScript, Angular 2 e Ionic

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (14)

Similar a Desarrollo web front-end con TypeScript, Angular 2 e Ionic

Similar a Desarrollo web front-end con TypeScript, Angular 2 e Ionic (20)

Más de Micael Gallego

Más de Micael Gallego (18)

Último

Último (20)

Desarrollo web front-end con TypeScript, Angular 2 e Ionic