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

2

Nacimiento de la web

3


Hace 24 años nace la webEn 1992 dos investigadores del CERN presentan la web

Tim Berners-LeeRobert Cailliau

4


Elementos básicos

Navegador web Servidor web

Protocolo HttpTCP/IP - Internet

5


Elementos básicos



URL

6


Elementos básicos



URL

HTML + Imágenes

7


CERN (1990)

8


CERN (1990)

9


Mosaic (1993)

10


<!DOCTYPE html><html> <body>

<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>

<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, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.</p>

</body></html>

index.htmlVisualización en el navegador

HTML

11


CSS nace a los 4 añospara 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 antesAunque 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("Hello\nHow are you?"); } </script>

</body></html>

14

Evolución de la web

15


Navegadores web

http://gs.statcounter.com

2016201420122010

IE

Chrome

Firefox

Safari

Opera

http://gs.statcounter.com/

16


La web ha ido creciendocon estándares

17


Aunque algunos no los respetaban

18


También se han usado pluginsno 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 aplicacionesque 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

22

El desarrollo web hoy

23


Existen varios tipos de websDependiendo de cómo usan las tecnologías

de cliente y servidor

Página web Aplicación webServidor 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


Página web Aplicación webServidor 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

● Aplicación web con AJAX

● Aplicación web SPA

25









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


2727

27

Arquitecturas de aplicaciones webTECNOLOGÍAS DE DESARROLLO WEB

2828

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

30

31

32









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


3434

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









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


3838

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









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


42

43









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

•Aplicación web con AJAX


Navegador web

Servidor web

Web sin AJAX

46

•Aplicación web con AJAX


Navegador web

Servidor web

Web con AJAX

47

•Aplicación web con AJAX 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


48


49

•Aplicación web con AJAX 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

•Aplicación web con AJAX 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

•Aplicación web con AJAX 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









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


5555

55

Arquitecturas de aplicaciones webTECNOLOGÍAS DE DESARROLLO WEBGoogle Maps

5656

56

Arquitecturas de aplicaciones webTECNOLOGÍAS DE DESARROLLO WEBSoundcloud

5757

57

Arquitecturas de aplicaciones webTECNOLOGÍAS DE DESARROLLO WEBSlides.com

5858

58

Arquitecturas de aplicaciones webTECNOLOGÍAS DE DESARROLLO WEBGitHub

59


● Aplicación web SPA● 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

60

Desarrollo de webs SPA

61


Editores / IDEsEl desarrollo web avanzado tiene sus propias herramientas

Sublime Text Visual Studio Code

WebStorm

62

Desarrollo de webs SPAAtom

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


Lenguaje programación

ES5 ES6

67


Lenguaje programación

ES5 ES6

68


Frameworks / librerías SPA

69


Frameworks / librerías SPA

70


+

71

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/

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 y TS, lo

que facilita migrar un proyecto existente

75

TypeScriptexport 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

export class Empleado {





Clase en TypeScript

function Empleado(nombre, salario){

this.nombre = nombre; this.salario = 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){ this.nombre = nombre; this.salario = salario; }

public String getNombre(){ return nombre; }

public String toString(){ return "Nombre:"+nombre+ ", Salario:"+salario; }}

Clase en Javaexport class Empleado {





Clase en TypeScript

78

TypeScript

Java vs TypeScript










Clase en TypeScript

79

TypeScript

Java vs TypeScript










Clase en TypeScript

80

TypeScript

Java vs TypeScript










Clase en TypeScript

81

TypeScript

Java vs TypeScript










Clase en TypeScript

82

TypeScript

Java vs TypeScript










Clase en TypeScript

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 vs TypeScript

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






TypeScript

85

TypeScript

Java vs TypeScript





Java






TypeScript

En Java las clases de la misma carpeta se pueden usar sin importar. En TypeScript se tienen que importar

86

TypeScript

Java vs TypeScript





Java






TypeScript

En Java usamos List y ArrayList del SDK.En TypeScript usamos el Array nativo de JavaScript

87

TypeScript

Java vs TypeScript





Java






TypeScript

En Java List el método es “add”En TypeScript Array el método es “push”

88

TypeScript

Java vs TypeScript





Java






TypeScript

89

TypeScript

Java vs TypeScript





Java






TypeScript

90

TypeScript

Editores / IDEsHay plugins para la mayoría de los editores / IDEs

Sublime Text Visual Studio Code WebStorm

91

TypeScript

Editores / IDEsHay plugins para la mayoría de los editores / IDEs

Sublime Text Visual Studio Code WebStorm

92

WebStorm 11

93

WebStorm 11

94

WebStorm 11

95

Angular 2

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/

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.htmlimport {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>



</body></html>




app.component.ts


app.html


Elemento del Componente

100

Angular 2

Componente <app>



</body></html>




app.component.ts


app.html


HTML del Componente

101

Angular 2

Componente <app>



</body></html>




app.component.ts


app.html


Lógica del Componente

102

Angular 2

Componente <app>

103

Angular 2

Componente dinámicoLa vista del componente (HTML) se genera en función

de su estado (atributos de la clase)

import {Component} from 'angular2/core';


})export class AppComponent { name = 'Anybody'; }

app.component.ts

<h1>Hello {{name}}!</h1>

app.html

104

Angular 2

Componente dinámicoLa vista del componente (HTML) se genera en función

de su estado (atributos de la clase)




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




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




app.component.ts<input type="text" [(ngModel)]="name">


app.html

107

Angular 2

Ejecución de lógicaSe puede ejecutar un método ante un evento

producido en el componente



})export class AppComponent { name = 'Anybody';

setName(name:string){ this.name = name; } }

app.component.ts

<input type="text" [(ngModel)]="name">


<button (click)="setName('John')"> Hello John</button>

app.html

108

Angular 2





})export class AppComponent { name = 'Anybody';

setName(name:string){ this.name = name; } }

app.component.ts

<input type="text" [(ngModel)]="name">


<button (click)="setName('John')"> Hello John</button>

app.html

109

Angular 2



110

Angular 2

Aplicaciones básicasEstas características son el núcleo de Angular 2 y

permiten implementar apps sencillas

111

Angular 2

Árboles de componentesEn Angular 2 un componente está formado por más

componentes formando un árbol

App

Header FooterMain

Comp1 Comp2

112

Angular 2

Árboles de componentesEn 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 {Component} from 'angular2/core';import {HeaderComponent} from './header.component';

@Component({selector: 'app',templateUrl: 'app.html',

directives: [HeaderComponent]})export class AppComponent {}

app.component.ts

<header></header>

app.html


@Component({selector: 'header',templateUrl: 'header.html'

})export class HeaderComponent {}

header.component.ts

<h1>Hello Angular 2 App</h1>

header.html

114

Angular 2


Header




app.component.ts

<header></header>

app.html




header.component.ts


header.htmlHay que indicar los componentes que se usan en el template

115

Angular 2


Header




app.component.ts

<header></header>

app.html




header.component.ts


header.htmlEn TypeScript 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● ...

117

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/

http://ionicframework.com/

123

Ionic 2

App básicaAngular 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

125

Ionic 2

126

La nueva web está aquí

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 y TypeScript 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

128

¿Preguntas?Gracias...

Micael [email protected]@micael_gallego

Desarrollo web frontend

con

Technology

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