SlideShare una empresa de Scribd logo
Micael Gallego
@micael_gallego
Desarrollo
web frontend
con
y cómo hemos
llegado hasta aquí
Febrero 2016
2
Nacimiento de la web
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
Nacimiento de la web
Elementos básicos
Navegador web
Servidor web
Protocolo Http
TCP/IP - Internet
5
Nacimiento de la web
Elementos básicos
Navegador web
Servidor web
Protocolo Http
TCP/IP - Internet
URL
6
Nacimiento de la web
Elementos básicos
Navegador web
Servidor web
Protocolo Http
TCP/IP - Internet
URL
HTML + Imágenes
7
Nacimiento de la web
CERN
(1990)
8
Nacimiento de la web
CERN
(1990)
9
Nacimiento de la web
Mosaic (1993)
10
Nacimiento de la web
<!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.html
Visualización en el navegador
HTML
11
Nacimiento de la web
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
Nacimiento de la web
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
Nacimiento de la web
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>
14
Evolución de la web
15
Evolución de la web
Navegadores web
http://gs.statcounter.com
2016201420122010
IE
Chrome
Firefox
Safari
Opera
16
Evolución de la web
La web ha ido creciendo
con estándares
17
Evolución de la web
Aunque algunos no los respetaban
18
Evolución de la web
También se han usado plugins
no estándares y no disponibles en
todas las plataformas
19
Evolución de la web
¿Y los servidores web?
Al principio los servidores web únicamente
servían los ficheros del disco duro
(1995)(1995)
20
Evolución de la web
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
Evolución de la web
Tecnologías desarrollo web servidor
22
El desarrollo web hoy
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
El desarrollo web hoy
Página web Aplicación web
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
● Aplicación web con
AJAX
● Aplicación web SPA
25
El desarrollo web hoy
Página web Aplicación web
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
● Aplicación web con
AJAX
● Aplicación web SPA
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
El desarrollo web hoy
27
Arquitecturas de aplicaciones web
TECNOLOGÍAS DE DESARROLLOWEB
28
Arquitecturas de aplicaciones web
TECNOLOGÍAS DE DESARROLLOWEB
29
El desarrollo web hoy
● 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
El desarrollo web hoy
Página web Aplicación web
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
● Aplicación web con
AJAX
● Aplicación web SPA
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
El desarrollo web hoy
34
Arquitecturas de aplicaciones web
TECNOLOGÍAS DE DESARROLLOWEB
Buscador implementado en JavaScript
35
El desarrollo web hoy
● 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
El desarrollo web hoy
Página web Aplicación web
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
● Aplicación web con
AJAX
● Aplicación web SPA
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
El desarrollo web hoy
38
Arquitecturas de aplicaciones web
TECNOLOGÍAS DE DESARROLLOWEB
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
El desarrollo web hoy
40
El desarrollo web hoy
Página web Aplicación web
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
● Aplicación web con
AJAX
● Aplicación web SPA
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
El desarrollo web hoy
42
43
El desarrollo web hoy
Página web Aplicación web
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
● Aplicación web con
AJAX
● Aplicación web SPA
44
El desarrollo web hoy
•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
El desarrollo web hoy
Navegador web
Servidor web
Web sin AJAX
46
•Aplicación web con AJAX
El desarrollo web hoy
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
El desarrollo web hoy
48
El desarrollo web hoy
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
El desarrollo web hoy
50
•Aplicación web con AJAX
 Cuando el código JavaScript hace
peticiones, el servidor puede devolver:
El desarrollo web hoy
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”}
]
}
El desarrollo web hoy
52
El desarrollo web hoy
Página web Aplicación web
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
● Aplicación web con
AJAX
● Aplicación web SPA
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
El desarrollo web hoy
54
•Aplicación web SPA
 Google las popularizó con Gmail y Google Maps
El desarrollo web hoy
55
Arquitecturas de aplicaciones web
TECNOLOGÍAS DE DESARROLLOWEBGoogle Maps
56
Arquitecturas de aplicaciones web
TECNOLOGÍAS DE DESARROLLOWEBSoundcloud
57
Arquitecturas de aplicaciones web
TECNOLOGÍAS DE DESARROLLOWEBSlides.com
58
Arquitecturas de aplicaciones web
TECNOLOGÍAS DE DESARROLLOWEBGitHub
59
El desarrollo web hoy
● 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
Desarrollo de webs SPA
Editores / IDEs
El desarrollo web avanzado tiene sus propias herramientas
SublimeText Visual Studio
Code
WebStorm
62
Desarrollo de webs SPA
Atom
63
Desarrollo de webs SPA
Plataforma y gestión de paquetes
Plataforma para
ejecutar aplicaciones JS
fuera del navegador
Gestor de
herramientas de
desarrollo y librerías
JavaScript
64
Desarrollo de webs SPA
Construcción de proyectos / empaquetado
65
Desarrollo de webs SPA
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
Desarrollo de webs SPA
Lenguaje programación
ES5 ES6
67
Desarrollo de webs SPA
Lenguaje programación
ES5 ES6
68
Desarrollo de webs SPA
Frameworks / librerías SPA
69
Desarrollo de webs SPA
Frameworks / librerías SPA
70
Desarrollo de webs SPA
+
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/
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
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;
}
}
Clase enTypeScript
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 Java
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;
}
}
Clase enTypeScript
78
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 Java
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;
}
}
Clase enTypeScript
79
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 Java
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;
}
}
Clase enTypeScript
80
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 Java
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;
}
}
Clase enTypeScript
81
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 Java
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;
}
}
Clase enTypeScript
82
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 Java
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;
}
}
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
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
85
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
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
En Java las clases de la misma carpeta se pueden usar sin
importar. EnTypeScript se tienen que importar
86
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
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
En Java usamos List y ArrayList del SDK.
EnTypeScript usamos el Array nativo de JavaScript
87
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
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
En Java List el método es “add”
EnTypeScript Array el método es “push”
88
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
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
89
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
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
90
TypeScript
Editores / IDEs
Hay plugins para la mayoría de los editores / IDEs
SublimeText Visual Studio
Code
WebStorm
91
TypeScript
Editores / IDEs
Hay plugins para la mayoría de los editores / IDEs
SublimeText 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/
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>
<!-- Scripts and libs -->
</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>
<!-- Scripts and libs -->
</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
Elemento del
Componente
100
Angular 2
Componente <app>
<!DOCTYPE html>
<html>
<head>
<!-- Scripts and libs -->
</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
HTML del
Componente
101
Angular 2
Componente <app>
<!DOCTYPE html>
<html>
<head>
<!-- Scripts and libs -->
</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
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)
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
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)
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
}
app.component.ts
<h1>Hello {{name}}!</h1>
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
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
}
app.component.ts
<input type="text" [(ngModel)]="name">
<h1>Hello {{name}}!</h1>
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
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
}
app.component.ts
<input type="text" [(ngModel)]="name">
<h1>Hello {{name}}!</h1>
app.html
107
Angular 2
Ejecución de lógica
Se puede ejecutar un método ante un evento
producido en el componente
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
setName(name:string){
this.name = name;
}
}
app.component.ts
<input type="text" [(ngModel)]="name">
<h1>Hello {{name}}!</h1>
<button (click)="setName('John')">
Hello John
</button>
app.html
108
Angular 2
Ejecución de lógica
Se puede ejecutar un método ante un evento
producido en el componente
import {Component} from 'angular2/core';
@Component({
selector: 'app',
templateUrl: 'app.html'
})
export class AppComponent {
name = 'Anybody';
setName(name:string){
this.name = name;
}
}
app.component.ts
<input type="text" [(ngModel)]="name">
<h1>Hello {{name}}!</h1>
<button (click)="setName('John')">
Hello John
</button>
app.html
109
Angular 2
Ejecución de lógica
Se puede ejecutar un método ante un evento
producido en el componente
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 {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
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
Á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
import {Component} from
'angular2/core';
@Component({
selector: 'header',
templateUrl: 'header.html'
})
export class HeaderComponent {}
header.component.ts
<h1>Hello Angular 2 App</h1>
header.htmlHay que indicar los
componentes que se
usan en el template
115
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
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
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
● ...
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/
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
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 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
128
¿Preguntas?
Gracias...
Micael Gallego
micael_gallego@urjc.es
@micael_gallego
Desarrollo
web frontend
con

Más contenido relacionado

La actualidad más candente

Cualidades y elementos de un buen patron de diseño
Cualidades y elementos de un buen patron de diseñoCualidades y elementos de un buen patron de diseño
Cualidades y elementos de un buen patron de diseñoAtahualpa Acosta
 
Metodos de desarrollo de software educativo
Metodos de desarrollo de software educativoMetodos de desarrollo de software educativo
Metodos de desarrollo de software educativoSaturnino Delgado
 
Scrollable Updatable
Scrollable UpdatableScrollable Updatable
Scrollable Updatableleminhvuong
 
Java for Recruiters
Java for RecruitersJava for Recruiters
Java for Recruitersph7 -
 
Introduction to Java programming - Java tutorial for beginners to teach Java ...
Introduction to Java programming - Java tutorial for beginners to teach Java ...Introduction to Java programming - Java tutorial for beginners to teach Java ...
Introduction to Java programming - Java tutorial for beginners to teach Java ...Duckademy IT courses
 
Fundamentos del Diseño de Software
Fundamentos del Diseño de SoftwareFundamentos del Diseño de Software
Fundamentos del Diseño de SoftwareNelson Guanipa
 
Responsive web design
Responsive web designResponsive web design
Responsive web designRuss Weakley
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)WebStackAcademy
 
Leading frameworks to power your front end development
Leading frameworks to power your front end developmentLeading frameworks to power your front end development
Leading frameworks to power your front end developmentBenish Balakrishnan
 
практична робота №1
практична робота №1практична робота №1
практична робота №1Юра Марчук
 
Basic Java Programming
Basic Java ProgrammingBasic Java Programming
Basic Java ProgrammingMath-Circle
 
Java database connectivity
Java database connectivityJava database connectivity
Java database connectivityVaishali Modi
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesOleksii Prohonnyi
 

La actualidad más candente (20)

Cualidades y elementos de un buen patron de diseño
Cualidades y elementos de un buen patron de diseñoCualidades y elementos de un buen patron de diseño
Cualidades y elementos de un buen patron de diseño
 
Metodos de desarrollo de software educativo
Metodos de desarrollo de software educativoMetodos de desarrollo de software educativo
Metodos de desarrollo de software educativo
 
Scrollable Updatable
Scrollable UpdatableScrollable Updatable
Scrollable Updatable
 
HTML 5 Canvas & SVG
HTML 5 Canvas & SVGHTML 5 Canvas & SVG
HTML 5 Canvas & SVG
 
Java for Recruiters
Java for RecruitersJava for Recruiters
Java for Recruiters
 
Javascript
JavascriptJavascript
Javascript
 
Método v
Método vMétodo v
Método v
 
Java Server Pages
Java Server PagesJava Server Pages
Java Server Pages
 
Introduction to Java programming - Java tutorial for beginners to teach Java ...
Introduction to Java programming - Java tutorial for beginners to teach Java ...Introduction to Java programming - Java tutorial for beginners to teach Java ...
Introduction to Java programming - Java tutorial for beginners to teach Java ...
 
Fundamentos del Diseño de Software
Fundamentos del Diseño de SoftwareFundamentos del Diseño de Software
Fundamentos del Diseño de Software
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)
 
Core java complete notes - Contact at +91-814-614-5674
Core java complete notes - Contact at +91-814-614-5674Core java complete notes - Contact at +91-814-614-5674
Core java complete notes - Contact at +91-814-614-5674
 
Leading frameworks to power your front end development
Leading frameworks to power your front end developmentLeading frameworks to power your front end development
Leading frameworks to power your front end development
 
практична робота №1
практична робота №1практична робота №1
практична робота №1
 
Basic Java Programming
Basic Java ProgrammingBasic Java Programming
Basic Java Programming
 
Java database connectivity
Java database connectivityJava database connectivity
Java database connectivity
 
Java &amp; advanced java
Java &amp; advanced javaJava &amp; advanced java
Java &amp; advanced java
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
 
Javascript
JavascriptJavascript
Javascript
 

Destacado

TypeScript para Javeros: Cómo programar web front-end y sentirse como en casa
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casaTypeScript para Javeros: Cómo programar web front-end y sentirse como en casa
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casaMicael Gallego
 
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?Micael Gallego
 
GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016Micael Gallego
 
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)Micael Gallego
 
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browser
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browserTypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browser
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browserMicael Gallego
 
La priorización de historias de usuario (versión ampliada)
La priorización de historias de usuario (versión ampliada)La priorización de historias de usuario (versión ampliada)
La priorización de historias de usuario (versión ampliada)Micael Gallego
 
TypeScript - Angular 2 - ionic 2
TypeScript - Angular 2 - ionic 2TypeScript - Angular 2 - ionic 2
TypeScript - Angular 2 - ionic 2Micael Gallego
 
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Micael Gallego
 
Docker para Data Scientist - Master en Data Science URJC
Docker para Data Scientist - Master en Data Science URJCDocker para Data Scientist - Master en Data Science URJC
Docker para Data Scientist - Master en Data Science URJCMicael Gallego
 
El mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesorEl mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesorMicael Gallego
 
La priorización de historias de usuario (versión reducida)
La priorización de historias de usuario (versión reducida)La priorización de historias de usuario (versión reducida)
La priorización de historias de usuario (versión reducida)Micael Gallego
 
WebRTC y Kurento en el T3cgFest 2015
WebRTC y Kurento en el T3cgFest 2015WebRTC y Kurento en el T3cgFest 2015
WebRTC y Kurento en el T3cgFest 2015Micael Gallego
 
Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Micael Gallego
 
Using Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and JenkinsUsing Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and JenkinsMicael Gallego
 
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)Micael Gallego
 

Destacado (15)

TypeScript para Javeros: Cómo programar web front-end y sentirse como en casa
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casaTypeScript para Javeros: Cómo programar web front-end y sentirse como en casa
TypeScript para Javeros: Cómo programar web front-end y sentirse como en casa
 
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
 
GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016
 
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
 
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browser
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browserTypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browser
TypeScript para Javeros. Por fin un lenguaje 'de verdad' en el browser
 
La priorización de historias de usuario (versión ampliada)
La priorización de historias de usuario (versión ampliada)La priorización de historias de usuario (versión ampliada)
La priorización de historias de usuario (versión ampliada)
 
TypeScript - Angular 2 - ionic 2
TypeScript - Angular 2 - ionic 2TypeScript - Angular 2 - ionic 2
TypeScript - Angular 2 - ionic 2
 
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
 
Docker para Data Scientist - Master en Data Science URJC
Docker para Data Scientist - Master en Data Science URJCDocker para Data Scientist - Master en Data Science URJC
Docker para Data Scientist - Master en Data Science URJC
 
El mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesorEl mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesor
 
La priorización de historias de usuario (versión reducida)
La priorización de historias de usuario (versión reducida)La priorización de historias de usuario (versión reducida)
La priorización de historias de usuario (versión reducida)
 
WebRTC y Kurento en el T3cgFest 2015
WebRTC y Kurento en el T3cgFest 2015WebRTC y Kurento en el T3cgFest 2015
WebRTC y Kurento en el T3cgFest 2015
 
Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016
 
Using Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and JenkinsUsing Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and Jenkins
 
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)
 

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

Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020Micael Gallego
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaverLuis Viteri
 
Evolución tecnologías web [01 2008]
Evolución tecnologías web [01 2008]Evolución tecnologías web [01 2008]
Evolución tecnologías web [01 2008]TIAGOSAID
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptLuis Guerrero
 
Arquitectura- Programacion WEB
Arquitectura- Programacion WEBArquitectura- Programacion WEB
Arquitectura- Programacion WEBYael_21
 
Html_Clase01_1_Intro_V2.pptx.pdf
Html_Clase01_1_Intro_V2.pptx.pdfHtml_Clase01_1_Intro_V2.pptx.pdf
Html_Clase01_1_Intro_V2.pptx.pdfAgustnSiano
 
Introducción al desarrollo web moderno
Introducción al desarrollo web modernoIntroducción al desarrollo web moderno
Introducción al desarrollo web modernoSebastián Rocco
 
[MP] AEW_Semana_01 - Teoría.pptx
[MP] AEW_Semana_01 - Teoría.pptx[MP] AEW_Semana_01 - Teoría.pptx
[MP] AEW_Semana_01 - Teoría.pptxDaniel Noriega
 
Ejemplos reales TPW
Ejemplos reales TPWEjemplos reales TPW
Ejemplos reales TPWYesenia_1226
 
Scripting cliente
Scripting clienteScripting cliente
Scripting clienteUAEH
 
Sistemas Distribuidos basados en la Web
Sistemas Distribuidos basados en la WebSistemas Distribuidos basados en la Web
Sistemas Distribuidos basados en la WebTensor
 
Clase17(introduccion a la web)
Clase17(introduccion a la web)Clase17(introduccion a la web)
Clase17(introduccion a la web)Tensor
 
Programacion web al lado del servidor.pdf
Programacion web al lado del servidor.pdfProgramacion web al lado del servidor.pdf
Programacion web al lado del servidor.pdfJoseArevalo99
 

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

S5-DAW-2022S1.pptx
S5-DAW-2022S1.pptxS5-DAW-2022S1.pptx
S5-DAW-2022S1.pptx
 
Backbeam
BackbeamBackbeam
Backbeam
 
Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaver
 
Aplicaciones web 1
Aplicaciones web 1Aplicaciones web 1
Aplicaciones web 1
 
Evolución tecnologías web [01 2008]
Evolución tecnologías web [01 2008]Evolución tecnologías web [01 2008]
Evolución tecnologías web [01 2008]
 
Proyblog
ProyblogProyblog
Proyblog
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScript
 
Arquitectura- Programacion WEB
Arquitectura- Programacion WEBArquitectura- Programacion WEB
Arquitectura- Programacion WEB
 
Html_Clase01_1_Intro_V2.pptx.pdf
Html_Clase01_1_Intro_V2.pptx.pdfHtml_Clase01_1_Intro_V2.pptx.pdf
Html_Clase01_1_Intro_V2.pptx.pdf
 
Introducción al desarrollo web moderno
Introducción al desarrollo web modernoIntroducción al desarrollo web moderno
Introducción al desarrollo web moderno
 
Unidad 1
Unidad 1Unidad 1
Unidad 1
 
[MP] AEW_Semana_01 - Teoría.pptx
[MP] AEW_Semana_01 - Teoría.pptx[MP] AEW_Semana_01 - Teoría.pptx
[MP] AEW_Semana_01 - Teoría.pptx
 
Ejemplos reales TPW
Ejemplos reales TPWEjemplos reales TPW
Ejemplos reales TPW
 
Html5
Html5Html5
Html5
 
Scripting cliente
Scripting clienteScripting cliente
Scripting cliente
 
Cappuccino
Cappuccino Cappuccino
Cappuccino
 
Sistemas Distribuidos basados en la Web
Sistemas Distribuidos basados en la WebSistemas Distribuidos basados en la Web
Sistemas Distribuidos basados en la Web
 
Clase17(introduccion a la web)
Clase17(introduccion a la web)Clase17(introduccion a la web)
Clase17(introduccion a la web)
 
Programacion web al lado del servidor.pdf
Programacion web al lado del servidor.pdfProgramacion web al lado del servidor.pdf
Programacion web al lado del servidor.pdf
 

Más de Micael Gallego

Software libre para videoconferencias
Software libre para videoconferenciasSoftware libre para videoconferencias
Software libre para videoconferenciasMicael Gallego
 
La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...Micael Gallego
 
WebRTC en tu web con OpenVidu
WebRTC en tu web con OpenViduWebRTC en tu web con OpenVidu
WebRTC en tu web con OpenViduMicael Gallego
 
¿Cómo poner software de calidad en manos del usuario de forma rápida?
¿Cómo poner software de calidad en manos del usuario de forma rápida?¿Cómo poner software de calidad en manos del usuario de forma rápida?
¿Cómo poner software de calidad en manos del usuario de forma rápida?Micael Gallego
 
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...Micael Gallego
 
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...Micael Gallego
 
Dev Tools para Kubernetes - Codemotion 2019
Dev Tools para Kubernetes - Codemotion 2019Dev Tools para Kubernetes - Codemotion 2019
Dev Tools para Kubernetes - Codemotion 2019Micael Gallego
 
Testing cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTestTesting cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTestMicael Gallego
 
Curso Kubernetes CodeURJC
Curso Kubernetes CodeURJCCurso Kubernetes CodeURJC
Curso Kubernetes CodeURJCMicael Gallego
 
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallosTesteando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallosMicael Gallego
 
OpenVidu Commitconf 2018
OpenVidu Commitconf 2018 OpenVidu Commitconf 2018
OpenVidu Commitconf 2018 Micael Gallego
 
Introducción a las Pruebas Software
Introducción a las Pruebas SoftwareIntroducción a las Pruebas Software
Introducción a las Pruebas SoftwareMicael Gallego
 
Node para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigoNode para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigoMicael Gallego
 
Testing fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornosTesting fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornosMicael Gallego
 
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Micael Gallego
 
Como ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicacionesComo ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicacionesMicael Gallego
 
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristesTypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristesMicael Gallego
 
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...Micael Gallego
 

Más de Micael Gallego (18)

Software libre para videoconferencias
Software libre para videoconferenciasSoftware libre para videoconferencias
Software libre para videoconferencias
 
La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...
 
WebRTC en tu web con OpenVidu
WebRTC en tu web con OpenViduWebRTC en tu web con OpenVidu
WebRTC en tu web con OpenVidu
 
¿Cómo poner software de calidad en manos del usuario de forma rápida?
¿Cómo poner software de calidad en manos del usuario de forma rápida?¿Cómo poner software de calidad en manos del usuario de forma rápida?
¿Cómo poner software de calidad en manos del usuario de forma rápida?
 
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...
 
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
 
Dev Tools para Kubernetes - Codemotion 2019
Dev Tools para Kubernetes - Codemotion 2019Dev Tools para Kubernetes - Codemotion 2019
Dev Tools para Kubernetes - Codemotion 2019
 
Testing cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTestTesting cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTest
 
Curso Kubernetes CodeURJC
Curso Kubernetes CodeURJCCurso Kubernetes CodeURJC
Curso Kubernetes CodeURJC
 
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallosTesteando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
 
OpenVidu Commitconf 2018
OpenVidu Commitconf 2018 OpenVidu Commitconf 2018
OpenVidu Commitconf 2018
 
Introducción a las Pruebas Software
Introducción a las Pruebas SoftwareIntroducción a las Pruebas Software
Introducción a las Pruebas Software
 
Node para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigoNode para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigo
 
Testing fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornosTesting fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornos
 
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
 
Como ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicacionesComo ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicaciones
 
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristesTypeScript: Un lenguaje aburrido para programadores torpes y tristes
TypeScript: Un lenguaje aburrido para programadores torpes y tristes
 
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
 

Último

Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...Luis Fernando Uribe Villamil
 
Herramientas informáticas. Sara Torres R.
Herramientas informáticas. Sara Torres R.Herramientas informáticas. Sara Torres R.
Herramientas informáticas. Sara Torres R.saravalentinat22
 
Bloque 1 _ Lectura base - Sistemas Distribuidos
Bloque 1 _ Lectura base - Sistemas DistribuidosBloque 1 _ Lectura base - Sistemas Distribuidos
Bloque 1 _ Lectura base - Sistemas DistribuidosLuisAntonioLopezGome
 
Inteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicialInteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicialEducática
 
¡Mira mi nuevo diseño hecho en Canva!.pdf
¡Mira mi nuevo diseño hecho en Canva!.pdf¡Mira mi nuevo diseño hecho en Canva!.pdf
¡Mira mi nuevo diseño hecho en Canva!.pdf7adelosriosarangojua
 
HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...
HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...
HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...Kevin Serna
 
manual-de-oleohidraulica-industrial-vickers.pdf
manual-de-oleohidraulica-industrial-vickers.pdfmanual-de-oleohidraulica-industrial-vickers.pdf
manual-de-oleohidraulica-industrial-vickers.pdfprofmartinsuarez
 
herramientas informaticas mas utilizadas
herramientas informaticas mas utilizadasherramientas informaticas mas utilizadas
herramientas informaticas mas utilizadaspqeilyn0827
 
Uso de las TIC en la vida cotidiana .
Uso de las TIC en la vida cotidiana       .Uso de las TIC en la vida cotidiana       .
Uso de las TIC en la vida cotidiana .itzyrivera61103
 
Estudio de la geometría analitica. Pptx.
Estudio de la geometría analitica. Pptx.Estudio de la geometría analitica. Pptx.
Estudio de la geometría analitica. Pptx.sofiasonder
 
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdfPons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdffrank0071
 
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docxPRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docxencinasm992
 
proyectos_social_y_socioproductivos _mapas_conceptuales
proyectos_social_y_socioproductivos _mapas_conceptualesproyectos_social_y_socioproductivos _mapas_conceptuales
proyectos_social_y_socioproductivos _mapas_conceptualesssuserbe0d1c
 
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docxwerito139410
 
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALJORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALGuadalinfoHuscarGuad
 
NIVEL DE MADUREZ TECNOLÓGICA (TRL).pptx
NIVEL DE  MADUREZ TECNOLÓGICA (TRL).pptxNIVEL DE  MADUREZ TECNOLÓGICA (TRL).pptx
NIVEL DE MADUREZ TECNOLÓGICA (TRL).pptxjarniel1
 
Unidad 1- Historia y Evolucion de las computadoras.pdf
Unidad 1- Historia y Evolucion de las computadoras.pdfUnidad 1- Historia y Evolucion de las computadoras.pdf
Unidad 1- Historia y Evolucion de las computadoras.pdfMarianneBAyn
 
Gestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL ServerGestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL ServerRobertoCarrancioFern
 
Introducción a la robótica con arduino..pptx
Introducción a la robótica con arduino..pptxIntroducción a la robótica con arduino..pptx
Introducción a la robótica con arduino..pptxJohanna4222
 
Presentacion y Extension de tema para Blogger.pptx
Presentacion y Extension de tema para Blogger.pptxPresentacion y Extension de tema para Blogger.pptx
Presentacion y Extension de tema para Blogger.pptxTaim11
 

Último (20)

Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
 
Herramientas informáticas. Sara Torres R.
Herramientas informáticas. Sara Torres R.Herramientas informáticas. Sara Torres R.
Herramientas informáticas. Sara Torres R.
 
Bloque 1 _ Lectura base - Sistemas Distribuidos
Bloque 1 _ Lectura base - Sistemas DistribuidosBloque 1 _ Lectura base - Sistemas Distribuidos
Bloque 1 _ Lectura base - Sistemas Distribuidos
 
Inteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicialInteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicial
 
¡Mira mi nuevo diseño hecho en Canva!.pdf
¡Mira mi nuevo diseño hecho en Canva!.pdf¡Mira mi nuevo diseño hecho en Canva!.pdf
¡Mira mi nuevo diseño hecho en Canva!.pdf
 
HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...
HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...
HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...
 
manual-de-oleohidraulica-industrial-vickers.pdf
manual-de-oleohidraulica-industrial-vickers.pdfmanual-de-oleohidraulica-industrial-vickers.pdf
manual-de-oleohidraulica-industrial-vickers.pdf
 
herramientas informaticas mas utilizadas
herramientas informaticas mas utilizadasherramientas informaticas mas utilizadas
herramientas informaticas mas utilizadas
 
Uso de las TIC en la vida cotidiana .
Uso de las TIC en la vida cotidiana       .Uso de las TIC en la vida cotidiana       .
Uso de las TIC en la vida cotidiana .
 
Estudio de la geometría analitica. Pptx.
Estudio de la geometría analitica. Pptx.Estudio de la geometría analitica. Pptx.
Estudio de la geometría analitica. Pptx.
 
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdfPons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
Pons, A. - El desorden digital - guia para historiadores y humanistas [2013].pdf
 
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docxPRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
PRÁCTICAS DEL MÓDULO I Y II DE EDUCACIÓN Y SOCIEDAD.docx
 
proyectos_social_y_socioproductivos _mapas_conceptuales
proyectos_social_y_socioproductivos _mapas_conceptualesproyectos_social_y_socioproductivos _mapas_conceptuales
proyectos_social_y_socioproductivos _mapas_conceptuales
 
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
 
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUALJORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
JORNADA INTELIGENCIA ARTIFICIAL Y REALIDAD VIRTUAL
 
NIVEL DE MADUREZ TECNOLÓGICA (TRL).pptx
NIVEL DE  MADUREZ TECNOLÓGICA (TRL).pptxNIVEL DE  MADUREZ TECNOLÓGICA (TRL).pptx
NIVEL DE MADUREZ TECNOLÓGICA (TRL).pptx
 
Unidad 1- Historia y Evolucion de las computadoras.pdf
Unidad 1- Historia y Evolucion de las computadoras.pdfUnidad 1- Historia y Evolucion de las computadoras.pdf
Unidad 1- Historia y Evolucion de las computadoras.pdf
 
Gestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL ServerGestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL Server
 
Introducción a la robótica con arduino..pptx
Introducción a la robótica con arduino..pptxIntroducción a la robótica con arduino..pptx
Introducción a la robótica con arduino..pptx
 
Presentacion y Extension de tema para Blogger.pptx
Presentacion y Extension de tema para Blogger.pptxPresentacion y Extension de tema para Blogger.pptx
Presentacion y Extension de tema para Blogger.pptx
 

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

  • 1. Micael Gallego @micael_gallego Desarrollo web frontend con y cómo hemos llegado hasta aquí Febrero 2016
  • 3. 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. 4 Nacimiento de la web Elementos básicos Navegador web Servidor web Protocolo Http TCP/IP - Internet
  • 5. 5 Nacimiento de la web Elementos básicos Navegador web Servidor web Protocolo Http TCP/IP - Internet URL
  • 6. 6 Nacimiento de la web Elementos básicos Navegador web Servidor web Protocolo Http TCP/IP - Internet URL HTML + Imágenes
  • 7. 7 Nacimiento de la web CERN (1990)
  • 8. 8 Nacimiento de la web CERN (1990)
  • 9. 9 Nacimiento de la web Mosaic (1993)
  • 10. 10 Nacimiento de la web <!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.html Visualización en el navegador HTML
  • 11. 11 Nacimiento de la web 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. 12 Nacimiento de la web 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. 13 Nacimiento de la web 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. 15 Evolución de la web Navegadores web http://gs.statcounter.com 2016201420122010 IE Chrome Firefox Safari Opera
  • 16. 16 Evolución de la web La web ha ido creciendo con estándares
  • 17. 17 Evolución de la web Aunque algunos no los respetaban
  • 18. 18 Evolución de la web También se han usado plugins no estándares y no disponibles en todas las plataformas
  • 19. 19 Evolución de la web ¿Y los servidores web? Al principio los servidores web únicamente servían los ficheros del disco duro (1995)(1995)
  • 20. 20 Evolución de la web 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. 21 Evolución de la web Tecnologías desarrollo web servidor
  • 23. 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. 24 El desarrollo web hoy Página web Aplicación web 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 ● Aplicación web con AJAX ● Aplicación web SPA
  • 25. 25 El desarrollo web hoy Página web Aplicación web 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 ● Aplicación web con AJAX ● Aplicación web SPA
  • 26. 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 El desarrollo web hoy
  • 27. 27 Arquitecturas de aplicaciones web TECNOLOGÍAS DE DESARROLLOWEB
  • 28. 28 Arquitecturas de aplicaciones web TECNOLOGÍAS DE DESARROLLOWEB
  • 29. 29 El desarrollo web hoy ● 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. 30
  • 31. 31
  • 32. 32 El desarrollo web hoy Página web Aplicación web 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 ● Aplicación web con AJAX ● Aplicación web SPA
  • 33. 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 El desarrollo web hoy
  • 34. 34 Arquitecturas de aplicaciones web TECNOLOGÍAS DE DESARROLLOWEB Buscador implementado en JavaScript
  • 35. 35 El desarrollo web hoy ● 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. 36 El desarrollo web hoy Página web Aplicación web 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 ● Aplicación web con AJAX ● Aplicación web SPA
  • 37. 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 El desarrollo web hoy
  • 38. 38 Arquitecturas de aplicaciones web TECNOLOGÍAS DE DESARROLLOWEB
  • 39. 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 El desarrollo web hoy
  • 40. 40 El desarrollo web hoy Página web Aplicación web 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 ● Aplicación web con AJAX ● Aplicación web SPA
  • 41. 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 El desarrollo web hoy
  • 42. 42
  • 43. 43 El desarrollo web hoy Página web Aplicación web 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 ● Aplicación web con AJAX ● Aplicación web SPA
  • 44. 44 El desarrollo web hoy •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. 45 •Aplicación web con AJAX El desarrollo web hoy Navegador web Servidor web Web sin AJAX
  • 46. 46 •Aplicación web con AJAX El desarrollo web hoy Navegador web Servidor web Web con AJAX
  • 47. 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 El desarrollo web hoy
  • 49. 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 El desarrollo web hoy
  • 50. 50 •Aplicación web con AJAX  Cuando el código JavaScript hace peticiones, el servidor puede devolver: El desarrollo web hoy 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. 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”} ] } El desarrollo web hoy
  • 52. 52 El desarrollo web hoy Página web Aplicación web 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 ● Aplicación web con AJAX ● Aplicación web SPA
  • 53. 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 El desarrollo web hoy
  • 54. 54 •Aplicación web SPA  Google las popularizó con Gmail y Google Maps El desarrollo web hoy
  • 55. 55 Arquitecturas de aplicaciones web TECNOLOGÍAS DE DESARROLLOWEBGoogle Maps
  • 56. 56 Arquitecturas de aplicaciones web TECNOLOGÍAS DE DESARROLLOWEBSoundcloud
  • 57. 57 Arquitecturas de aplicaciones web TECNOLOGÍAS DE DESARROLLOWEBSlides.com
  • 58. 58 Arquitecturas de aplicaciones web TECNOLOGÍAS DE DESARROLLOWEBGitHub
  • 59. 59 El desarrollo web hoy ● 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
  • 61. 61 Desarrollo de webs SPA Editores / IDEs El desarrollo web avanzado tiene sus propias herramientas SublimeText Visual Studio Code WebStorm
  • 63. 63 Desarrollo de webs SPA Plataforma y gestión de paquetes Plataforma para ejecutar aplicaciones JS fuera del navegador Gestor de herramientas de desarrollo y librerías JavaScript
  • 64. 64 Desarrollo de webs SPA Construcción de proyectos / empaquetado
  • 65. 65 Desarrollo de webs SPA 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. 66 Desarrollo de webs SPA Lenguaje programación ES5 ES6
  • 67. 67 Desarrollo de webs SPA Lenguaje programación ES5 ES6
  • 68. 68 Desarrollo de webs SPA Frameworks / librerías SPA
  • 69. 69 Desarrollo de webs SPA Frameworks / librerías SPA
  • 71. 71
  • 72. 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. 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. 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. 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. 76 TypeScript TypeScript vs JavaScript ES5 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; } } Clase enTypeScript 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. 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 Java 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; } } Clase enTypeScript
  • 78. 78 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 Java 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; } } Clase enTypeScript
  • 79. 79 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 Java 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; } } Clase enTypeScript
  • 80. 80 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 Java 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; } } Clase enTypeScript
  • 81. 81 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 Java 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; } } Clase enTypeScript
  • 82. 82 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 Java 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; } } Clase enTypeScript
  • 83. 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. 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 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
  • 85. 85 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 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 En Java las clases de la misma carpeta se pueden usar sin importar. EnTypeScript se tienen que importar
  • 86. 86 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 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 En Java usamos List y ArrayList del SDK. EnTypeScript usamos el Array nativo de JavaScript
  • 87. 87 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 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 En Java List el método es “add” EnTypeScript Array el método es “push”
  • 88. 88 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 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
  • 89. 89 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 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
  • 90. 90 TypeScript Editores / IDEs Hay plugins para la mayoría de los editores / IDEs SublimeText Visual Studio Code WebStorm
  • 91. 91 TypeScript Editores / IDEs Hay plugins para la mayoría de los editores / IDEs SublimeText Visual Studio Code WebStorm
  • 96. 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. 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. 98 Angular 2 Componente <app> <!DOCTYPE html> <html> <head> <!-- Scripts and libs --> </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. 99 Angular 2 Componente <app> <!DOCTYPE html> <html> <head> <!-- Scripts and libs --> </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 Elemento del Componente
  • 100. 100 Angular 2 Componente <app> <!DOCTYPE html> <html> <head> <!-- Scripts and libs --> </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 HTML del Componente
  • 101. 101 Angular 2 Componente <app> <!DOCTYPE html> <html> <head> <!-- Scripts and libs --> </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 Lógica del Componente
  • 103. 103 Angular 2 Componente dinámico La vista del componente (HTML) se genera en función de su estado (atributos de la clase) import {Component} from 'angular2/core'; @Component({ selector: 'app', templateUrl: 'app.html' }) export class AppComponent { name = 'Anybody'; } app.component.ts <h1>Hello {{name}}!</h1> app.html
  • 104. 104 Angular 2 Componente dinámico La vista del componente (HTML) se genera en función de su estado (atributos de la clase) import {Component} from 'angular2/core'; @Component({ selector: 'app', templateUrl: 'app.html' }) export class AppComponent { name = 'Anybody'; } app.component.ts <h1>Hello {{name}}!</h1> app.html
  • 105. 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 import {Component} from 'angular2/core'; @Component({ selector: 'app', templateUrl: 'app.html' }) export class AppComponent { name = 'Anybody'; } app.component.ts <input type="text" [(ngModel)]="name"> <h1>Hello {{name}}!</h1> app.html
  • 106. 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 import {Component} from 'angular2/core'; @Component({ selector: 'app', templateUrl: 'app.html' }) export class AppComponent { name = 'Anybody'; } app.component.ts <input type="text" [(ngModel)]="name"> <h1>Hello {{name}}!</h1> app.html
  • 107. 107 Angular 2 Ejecución de lógica Se puede ejecutar un método ante un evento producido en el componente import {Component} from 'angular2/core'; @Component({ selector: 'app', templateUrl: 'app.html' }) export class AppComponent { name = 'Anybody'; setName(name:string){ this.name = name; } } app.component.ts <input type="text" [(ngModel)]="name"> <h1>Hello {{name}}!</h1> <button (click)="setName('John')"> Hello John </button> app.html
  • 108. 108 Angular 2 Ejecución de lógica Se puede ejecutar un método ante un evento producido en el componente import {Component} from 'angular2/core'; @Component({ selector: 'app', templateUrl: 'app.html' }) export class AppComponent { name = 'Anybody'; setName(name:string){ this.name = name; } } app.component.ts <input type="text" [(ngModel)]="name"> <h1>Hello {{name}}!</h1> <button (click)="setName('John')"> Hello John </button> app.html
  • 109. 109 Angular 2 Ejecución de lógica Se puede ejecutar un método ante un evento producido en el componente
  • 110. 110 Angular 2 Aplicaciones básicas Estas características son el núcleo de Angular 2 y permiten implementar apps sencillas
  • 111. 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. 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. 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 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. 114 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 import {Component} from 'angular2/core'; @Component({ selector: 'header', templateUrl: 'header.html' }) export class HeaderComponent {} header.component.ts <h1>Hello Angular 2 App</h1> header.htmlHay que indicar los componentes que se usan en el template
  • 115. 115 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 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 EnTypeScript hay que importar todas las clases que se usen (aunque sean de la misma app)
  • 116. 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. 117
  • 118. 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. 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. 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
  • 122. 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. 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. 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
  • 126. 126 La nueva web está aquí
  • 127. 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