eugeniaperez.es
1. 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
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
1. Justificación
eugeniaperez.es
1. Justificación
Sí, todos los navegadores lo hacen
eugeniaperez.es
1. Justificación
¡Claro! JS y HTML5 son tendencia
Todo se mueve en dirección a la web
eugeniaperez.es
1. Justificación
eugeniaperez.es
1.3 ¿Cuándo utilizar Web Workers?
eugeniaperez.es
No se debe sobrecargar el hilo principal de ejecución
1.3 ¿Cuándo utilizar Web Workers?
eugeniaperez.es
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”);
1.4 Creación de un Worker
Las comunicaciones desde los subprocesos de los workers se realizan mediante el envío de mensajes:
eugeniaperez.es
var hilo= new Worker('tarea.js');
hilo.onmessage = function(respuesta) {
alert(respuesta.data);
};
postMessage('Hello Cuatrovientos!');
tarea.js
1.4 Creación de un Worker
eugeniaperez.es
1.4 Creación de un Worker
eugeniaperez.es
ECO de la información enviada del hilo principal al worker, mostrando su respuesta.
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.
1.5 Concurrencia en JavaScript
eugeniaperez.es
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.
1.6 Comunicación con Web Workers
eugeniaperez.es
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.
1.6 Comunicación con Web Workers
eugeniaperez.es
1.6 Comunicación con Web Workers
eugeniaperez.es
Realiza la práctica de los videojuegos:
1.6 Comunicación con Web Workers
eugeniaperez.es
1.6 Comunicación con Web Workers
eugeniaperez.es
Encontrar los números pares
1.11 Llamadas a servicios externos
eugeniaperez.es
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).
1.11 Llamadas a servicios externos
eugeniaperez.es
Vamos a utilizar los Web Workers para realizar el proceso de cargar los artistas del API de last.fm.
Para cargar ficheros externos, librerías o hacer llamadas a este tipo de servicios desde el Web Worker se utiliza el método importScripts.
Text
eugeniaperez.es
La llamada a la API en el fichero worker.js es:
La respuesta es esta: http://www.last.fm/api/show/artist.getInfo
var getArtistInfo = function(artistName) {
importScripts(lastfm.getApiUrl() + 'artist.getinfo&artist=' + artistName + '&api_key=' +
lastfm.getApiKey() + '&format=json&callback=sendResponse');
};