Web workers

1. Link:www.slideshare.com
Alumnos: Antonio Álvarez de la rocha
Andrés Leonardo Guerra Portillo
Fecha de entrega: 3/sep/2014

2. RESULTADOS

3. Web Workers - Qué son y para que
sirven
Con la llegada de HTML5 llegan nuevas
funcionalidades a los navegadores web, es el
caso del Storage (almacenamiento en el
cliente), Geolocation (geolocalización) o los
Web Workers (ejecución de scripts en
procesos en segundo plano).

4.  Los Workers no son más que una API que permite a los
desarrolladores web ejecutar procesos en segundo
plano, son totalmente independientemente a los
procesos de la interfaz de usuario.
Esto permite que las secuencias de comandos de larga
duración no se vean interrumpidas por secuencias de
comandos que responden a clicks u otras interacciones
por parte del usuario.
Los Workers son relativamente gruesos y resistentes, y
no están destinados a ser utilizados en grandes
cantidades.

5. ¿Qué es JavaScript?
 JavaScript es un entorno de subproceso único, es decir, que
no se pueden ejecutar varias secuencias de comandos al
mismo tiempo
 Por ejemplo, imagina un sitio que necesite gestionar eventos
de interfaz de usuario, solicitar y procesar grandes
cantidades de datos de API y manipular los DOM. Algo muy
común, ¿verdad? Desafortunadamente, todo esto no puede
realizarse de forma simultánea debido a las limitaciones en
el tiempo de ejecución de los navegadores de JavaScript. La
ejecución de secuencias de comandos se realiza en un único
subproceso.

6.  Los desarrolladores imitan la "simultaneidad" utilizando
técnicas como setTimeout(), setInterval() y
XMLHttpRequest, así como gestores de eventos. Sí, todas
estas funciones se ejecutan de forma asíncrona; sin
embargo, que no se bloqueen unas a otras no significa
necesariamente que tengan lugar de forma simultánea. Los
eventos asíncronos se procesan después de haber generado
la secuencia de comandos que se esté ejecutando en ese
momento. La buena noticia es que HTML5 nos ofrece algo
mejor que este tipo de trucos de hacker.

7. Compatibilidad de los navegadores
 Los Web Workers acaban de aparecer en la versión
preliminar de IE10 (IE10 Platform Preview).
 También están soportados en Firefox (desde la versión
3.6)
 Safari (desde la 4.0)
 Chrome
 Opera 11
 Las versiones de móviles de estos navegadores no los
soportan.

8. Introducción a los Web Workers:
implementar subprocesos en
JavaScript
 Los Web Workers te permiten realizar acciones como activar
secuencias de comandos con tiempos de ejecución largos
para gestionar tareas intensivas de computación, pero sin
bloquear la interfaz de usuario u otras secuencias de
comandos para gestionar las interacciones del usuario.
 Nos ayudarán a acabar con esos molestos cuadros de diálogo
que informan de que la secuencia de comandos no responde.

9.  Cuadro de diálogo habitual para informar de que la
secuencia de comandos no responde
 Los Web Workers utilizan una transferencia de mensajes
similar a los subprocesos para alcanzar el paralelismo. Son
perfectos para mantener tu interfaz actualizada, eficiente y
receptiva para los usuarios.

10. Crear un Worker
 Los Web Workers se ejecutan en un subproceso aislado.
Como resultado, es necesario que el código que ejecutan se
encuentre en un archivo independiente.
 lo primero que tienes que hacer es crear un nuevo objeto
Worker en tu página principal.
 El constructor toma el nombre de la secuencia de comandos
del Worker.
 var worker = new Worker('task.js');

11.  Si el archivo especificado existe, el navegador generará un
nuevo subproceso de Worker que lo descargará de forma
asíncrona.
 El Worker no empezará hasta que el archivo se haya
descargado completamente y se haya ejecutado.
 Si la ruta a tu Worker devuelve un error 404, el Worker
fallará automáticamente.
 Después de crear el Worker, comienza ejecutando el método
postMessage().
 worker.postMessage(); // Start the worker.

12. Cómo establecer comunicación con
un Worker mediante transferencia
de mensajes
 La comunicación entre un Worker y su página principal se
realiza mediante un modelo de evento y el método
postMessage().
 En función del navegador o de la versión, postMessage()
puede aceptar una cadena o un objeto JSON como argumento
único.
 Las últimas versiones de los navegadores modernos son
compatibles con la transferencia de objetos JSON.

13.  A continuación, se muestra un ejemplo sobre cómo utilizar
una cadena para transferir "HelloWorld" a un Worker en
doWork.js.
 El Worker simplemente devuelve el mensaje que se le
transfiere.
 Secuencia de comandos principal:
 var worker = new Worker('doWork.js');
worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data); }, false);
worker.postMessage('HelloWorld'); // Send data to our
worker.

14.  doWork.js (el Worker):
 self.addEventListener('message', function(e) {
self.postMessage(e.data); }, false);

15.  Cuando se ejecuta postMessage() desde la página principal,
nuestro Worker gestiona este mensaje definiendo un gestor
onmessage para el evento message.
 Se puede acceder a la carga del mensaje (en este caso "Hello
World") en Event.data.
 Aunque este ejemplo concreto no es demasiado
emocionante, demuestra que postMessage() también sirve
para transferir datos de vuelta al subproceso principal. Algo
que resulta conveniente.
 Los mensajes que se transfieren entre la página principal y
los Workers se copian, no se comparten.

16. Subworkers
 Los Workers tienen la capacidad de generar Workers
secundarios. Esto es algo fantástico para dividir aún más las
tareas intensivas en el tiempo de ejecución. Sin embargo, a la
hora de utilizar los Subworkers es necesario tener en cuenta
los siguientes aspectos:
 Los Subworkers deben estar alojados en el mismo origen que
la página principal.
 La resolución de las URI de los Subworkers está relacionada
con la ubicación de su Worker principal (en oposición a la
página principal).

17.  La mayoría de los navegadores generan procesos
independientes para cada Worker.
 Una de las razones de esta advertencia se debe a que los
mensajes transferidos entre las páginas principales y los
Workers se copian, no se comparten.

18. Casos prácticos
 Entonces, ¿qué tipo de aplicación deben utilizar los
Web Workers? Desafortunadamente, los Web Workers
aún son tecnologías relativamente nuevas y la mayoría
de los ejemplos y tutoriales que existen están
relacionados con la computación de números primos.
Aunque no resulta demasiado interesante, es útil para
entender los conceptos básicos de los Web Workers.

19. Aumenta el rendimiento de
JavaScript con Web Worker
 JavaScript nunca había sido un lenguaje donde se
procesan grandes cantidades de datos, peroHTML5 ha
incorporado la API deWeb Worker, que permite
paralelizar procesos de JavaScript, ejecutándolos en
segundo plano.
La principal ventaja deWeb Worker es que nos
permite crear subprocesos de nuestro hilo de ejecución
principal, para poder procesar lo que queramos sin
necesidad de bloquear el navegador y de una forma
muy simple.

20. Ejemplos de código

21.  //ejemplo 1 de worker y sin worker con prueba de paralelismo
<html>
<head>
<title>Campos de texto</title>
</head>
<style type="text/css">
#caja { width: 60%; float:right; border: 1px solid black; }
</style>
<script type="text/javascript">
var t = 0;
function con() {
var war = new Worker('worker.js');
war.onmessage = function(event) {
document.getElementById('result').textContent = "con workers: " +
event.data;
};}
function sin() {
escribir = document.getElementById("caja");
for (var t = 0; t <= 8000000; t++) {
document.getElementById('result').textContent = "sin workers: " + t;}
document.getElementById('result').textContent = "Termino agotando los
recursos de este equipo con " + t + " ciclos";}

22.  function comp() {
 escribir = document.getElementById("caja")
 escribir.innerHTML =
 "Dato escrito es: " + document.rellenar.a1.value;}
 function stop() {
 document.getElementById('result').textContent = "Worker Detendio ";
 war.terminate();
 war.close();}
 window.onload = function() {
 document.rellenar.enviar1.onclick = con;
 document.rellenar.enviar2.onclick = sin;
 document.rellenar.enviar3.onclick = comp;
 document.rellenar.enviar4.onclick = stop;
 }
 </script>
 <body>
 <div id="caja" >
 <p>Pulsa comprobar para ver si existe paralelismo</p>
 </div>

23.  <form name="rellenar" action="#" >
 <h2>Web Workers</h2>
 <h4>Preciona un boton para ver los numeros</h4>
 <p><input name="enviar1" id="ver" type="button" value="Con Workers" />
 <p><input name="enviar2" id="ver" type="button" value="Sin Workers" />
 <p><input name="enviar4" id="ver" type="button" value="DetenerWorker" />
 <h4>Para comprobar que esto funciona:</h4>
 <h4>Escribe cualquier cosa que quieras</h4>
 <input name="a1" type="text"/> <br>
 <p><input name="enviar3" id="ver" type="button" value="Comporbar" />
 <p><h2><b>Resultado:</b> </h2><output id="result">
 <output id="result">
 </form>
 </body>
 </html>

24.  Worker.js

25.  //ejemplo 2.-varios workers en paralelo
 <html>
 <head>
 <title>TODO supply a title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script>
 // Primer proceso
 varworkerUno = new Worker('w1.js');
 workerUno.addEventListener('message', function(e) {
 document.getElementById('r1').textContent = "Primer worker a 500ms: " + e.data;
 }, false);
 // Segundo proceso
 varworkerDos = new Worker('w2.js');
 workerDos.addEventListener('message', function(e) {
 document.getElementById('r2').textContent = "Segundo worker a 100ms" + e.data;
 }, false);
 </script>
 </head>
 <body>
 <form>
 <h2>Resultados:</h2>
 <output id="r1">dato1</output><br>
 <output id="r2">dato2</output>
 </form>
 </body>
 </html>

26.  W1.js
 W12.js

27.  //ejemplo 3.- realiza cancelación de worker.
 <html>
 <body>
 <p>Count numbers: <output id="result"></output></p>
 <button onclick="startWorker()">StartWorker</button>
 <button onclick="stopWorker()">Stop Worker</button>
 <br><br>
 <script>
 var w;
 function startWorker() {
 if(typeof(Worker) !== "undefined") {
 if(typeof(w) == "undefined") {
 w = new Worker("ejemplo3.js");
 }
 w.onmessage = function(event) {
 document.getElementById("result").innerHTML = event.data;};
 } else {
 document.getElementById("result").innerHTML = "no se soportan los workers en en este navegador";}}
 function stopWorker() {
 w.terminate();}
 </script>
 </body>
 </html>

28. Ejemplo3.js

29. conclusiónes:
 Los Web workers: esta herramienta es una de las mas
importantes para la ejecución de scripts para ejecutar
procesos en segundo plano, ya que antes se utilizaban
herramientas que solo simulaban este proceso,
consumiendo muchos recursos lo cual ocasionaba que
se tuviera que detener el proceso actual para poder
continuar con la carga de la información, en el caso de
que el script estuviera bien hecho ya que de lo
contrario ni siquiera se pudiera detener el proceso
simplemente se congelaría el equipo .

30. contratiempos
 Encontramos mucha información repetida
 Tardamos para entender el código
 Internet lento
 La computadora se trababa al ejecutar los procesos sin
worker

31. opinión
 En lo personal pensamos que esta herramienta es muy
útil por que así podemos realizar varios procesos al
cargar nuestra pagina y no tenemos que esperar tanto
tiempo para que cargue, tomando en cuenta que esto
requiere de muchos recursos y no se nos debe de
olvidar detenerlos para no provocar un fallo en la
memoria, hay que ser muy cuidadoso con eso pero sin
embargo las tareas en segundo plano con worker serán
de muy gran ayuda para realizar muchos procesos que
necesitemos sin que se trabe la maquina.

32. Tiempo de Realizacion
 Viernes 29 de agosto 2014 2:00 hr buscando información
 Sábado 30 de agosto 2014 4:00 hr recolectando información
 Sábado 30 de agosto 2014 4:00 hr comprendiendo el código
 Domingo 31 de agosto 2014 6:00 hr programando y haciendo nuestros
propios ejemplos
 Lunes 1 de septiembre 2014 3:00 hr organizando información
 Martes 2 de septiembre 2014 2:00 hr concluyendo el proyecto
 Miércoles 3 de septiembre 2014 00:10 minutos subiendo el proyecto

33. Referencias  Eric Bidelman. julio 26th, 2010 Introducción a los Web
Workers. Recuperado el 30 de agosto del 2014. de:
http://www.html5rocks.com/es/tutorials/workers/basics/
 David Rousset. 13 de febrero de 2012. Web Worker en
HTML5. Recuperado el 30 de agosto del 2014. de:
http://www.desarrolloweb.com/articulos/web-worker-html5.
html
 David Rousset. 13 de febrero de 2012. Web Worker en
HTML5. Recuperado el 30 de agosto del 2014. de:
http://msdn.microsoft.com/es-es/
library/ie/hh673568%28v=vs.85%29.aspx