psp-b2 html5 web workers

UT 4: introducción a web workers

eugeniaperez.es

UT 4: introducción a web workers

1. Justificación

JUSTIFICACIÓN 

Hoy en día se hacen necesarias tecnologías que permitan mejorar la experiencia de usuario, optimizando el rendimiento de la carga de aplicaciones web mediante la realización de tareas costosas en segundo plano.

eugeniaperez.es

UT 4: introducción a web workers

1. Justificación

Gracias a la tecnología que vamos a ver, Web Workers, Tareas pesadas puedan ser ejecutadas sin que tengan un impacto tan elevado en las esperas de carga de  interfaz del usuario, ni la bloqueen... 

eugeniaperez.es

UT 4: introducción a web workers

1. Justificación

• Mientras que Java presenta mecanismos para abordar la programación concurrente, JavaScript hasta ahora no poseía la característica de la concurrencia.
•  Los Web Workers surgen para intentar llenar este hueco. Pero son relativamente pesados y consumen recursos del sistema (CPU, ancho de banda, etc.) 

eugeniaperez.es

UT 4: introducción a web workers

1. Justificación

PERO ENTONCES, ¿ESTO DE LOS WEB WORKERS SE UTILIZA...?

Sí, todos los navegadores lo hacen

eugeniaperez.es

UT 4: introducción a web workers

1. Justificación

¿LOS WEB WORKERS Son útiles...?

¡Claro! JS y HTML5 son tendencia

Todo se mueve en dirección a la web

eugeniaperez.es

UT 4: introducción a web workers

1.3 ¿Cuándo utilizar Web Workers?

• Como norma general una aplicación web no debería necesitar más de entorno a 175 mseg para completar una tarea...
• En caso contrario se debería plantear el uso de Web Workers. Más si cabe cuando el navegador y hardware utilizados son dependientes de una aplicación web para móviles. 

eugeniaperez.es

No se debe sobrecargar el hilo principal de ejecución

UT 4: introducción a web workers

1.3 ¿Cuándo utilizar Web Workers?

• En Java hemos emulado la concurrencia de hilos que ejecutaban tareas sencillas, haciendo que tuvieran un cierto tiempo de ejecución  mediante el bloqueo de los hilos/sleep.
• Con los web workers veremos la ejecución de tareas sencillas en 2º plano (envío de mensajes).

eugeniaperez.es

UT 4: introducción a web workers

1.4 Creación de un Worker

La anterior línea cargará el script nombrado como worker.js y ejecutará su código en paralelo a la página principal. 

"Un hilo en HTML5 JS..."

eugeniaperez.es

var worker = new Worker(“worker.js”);

UT 4: introducción a web workers

1.4 Creación de un Worker

Las comunicaciones desde los subprocesos de los workers se realizan mediante el envío de mensajes:

• postMessage: intercambiar mensajes
• onmessage: evento que espera una respuesta

eugeniaperez.es

var hilo= new Worker('tarea.js');
hilo.onmessage = function(respuesta) {
	alert(respuesta.data);
};

postMessage('Hello Cuatrovientos!');

tarea.js

UT 4: introducción a web workers

1.4 Creación de un Worker

eugeniaperez.es

Descarga los ejemplos del aula.

UT 4: introducción a web workers

1.4 Creación de un Worker

eugeniaperez.es

EJEMPLO 1

ECO de la información enviada del hilo principal al worker, mostrando su respuesta.

UT 4: introducción a web workers

1.5 Concurrencia en JavaScript

eugeniaperez.es

Antes de seguir vamos a ver cómo se ha conseguido emular el problema de la concurrencia en JavaScript. Para ello se utilizan funciones de manejo de tiempos como setTimeout() o setInterval(). 

function execute() {
	// ToDo
	if (stop)
		return;
	window.setTimeout(execute, 1);
}

Se consultan las peticiones constantemente

cada 1 mseg. permitiendo si la variable stop ha sido

modificada. En este caso se detiene el bucle.

UT 4: introducción a web workers

1.5 Concurrencia en JavaScript

eugeniaperez.es

EJEMPLO 2

Aunque no se trata de concurrencia sí se produce esa sensación dado que, se efectúa una desconexión cada cierto tiempo para ejecutar una tarea. Aunque funciona, no es ni lo más conveniente y ni óptimo puesto que realmente la tarea no se está ejecutando en segundo plano.

UT 4: introducción a web workers

1.6 Comunicación con Web Workers

eugeniaperez.es

EJEMPLO 3

Para intercambiar información entre subprocesos, la información se envía en formato JSON:

postMessage({”value1”:”abc”,”value2”:123}) tendríamos en el destino las variables disponibles en event.data.value1 y event.data.value2.

UT 4: introducción a web workers

1.6 Comunicación con Web Workers

eugeniaperez.es

EJEMPLO 3

• El Worker no es capaz de acceder a variables globales por motivos de integridad.
• Los datos enviados se clonan, son una copia.
• El tiempo de la copia  puede afectar a la ejecución. 

UT 4: introducción a web workers

1.6 Comunicación con Web Workers

eugeniaperez.es

entrega 1 - Domingo 8

Realiza la práctica de los videojuegos:

UT 4: introducción a web workers

1.6 Comunicación con Web Workers

eugeniaperez.es

EJEMPLO 4

• Se accede a la propiedad msg del mensaje JSON desde las dos ubicaciones. Ni la página y ni el Worker comparten la misma instancia, si no un duplicado.
• La mayoría de los navegadores implementan esta función mediante la codificación/descodificación de estructuras JSON automáticamente en cada fase de la comunicación. 

UT 4: introducción a web workers

1.6 Comunicación con Web Workers

eugeniaperez.es

EJEMPLO 5

Encontrar los números pares

UT 4: introducción a web workers

1.11 Llamadas a servicios externos

eugeniaperez.es

APIs

Muchos de los servicios de internet ofrecen actualmente APIs que permiten extender la funcionalidad de nuestra aplicaciones (Spotify, Github, etc). 

Imaginémonos que queremos invocar a una API remota mediante un Web Worker, para así realizar esta operación en segundo plano (similar a AJAX).

UT 4: introducción a web workers

1.11 Llamadas a servicios externos

eugeniaperez.es

EJEMPLO 6

Vamos a utilizar los Web Workers para realizar el proceso de cargar los artistas del API de last.fm.

http://www.lastfm.es/api

Para cargar ficheros externos, librerías o hacer llamadas a este tipo de servicios desde el Web Worker se utiliza el método importScripts.