JavaScript se creó originalmente para dotar de interactividad a páginas HTML. Aunque es de un solo hilo, permite ejecutar código de manera asíncrona mediante callbacks y eventos para evitar que aplicaciones complejas se vuelvan inutilizables. El bucle de eventos maneja la cola de mensajes y el stack para la ejecución asíncrona, mientras que los Web Workers permiten usar múltiples hilos de forma independiente al flujo principal.

1. JavaScript Async
Veamos lo básico y juguemos un poco con JavaScript
Juan Miguel Alcalá

2. JavaScript - un poco de historia -
• Ideado para ser incorporado en
Netscape Navigator como una
forma de dotar de interactividad
a páginas html.
• Microsoft crea su propia versión
llamada Jscript y la incorpora en
Internet Explorer 3
• Sun se acerca a Ecma, a fin de
que su versión se convirtiera en
el estándar a utilizar (Ecma-262)

3. Single Thread Process?
• JavaScript es un lenguaje “single-thread”
• Solo posee un hilo de ejecución en el cual todo el código es procesado.
• Si el bloque de código a ejecutar es demasiado grande o muy complejo puede
causar que nuestra aplicación se vuelva inutilizable.
• JavaScript permite ejecutar código de manera asíncrona, para ellos se
basa en el uso de eventos.
• El código basado en eventos es más simple que el código multithread y posee
menos dependencias

4. JavaScript asíncrono
• Callbacks
• El elemento base de la
programación asíncrona en
JavaScript
• Observer Pattern
• Messaging
(publish – Suscription)
• Promises
• Finite State Machines

5. Event loop
• Stack
• Las llamadas a funciones crean los
frames.
• Heap
• El área en la memoria donde se
almacenan los objetos
• (Message) Queue
• Contiene una lista de “mensajes” a
procesar
• Event Loop

6. Event Loop

7. Web Workers
• Su especificación pertenece al estándar de Html 5
• No están definidos en el estándar Ecma
• Permite el uso de multithread
• Cada Web Worker se ejecuta en un nuevo thread; es independiente
del flujo de ejecución principal
• No tiene acceso al DOM, el objeto Window, la consola, etc.
• Puede realizar operaciones ajax
• Se comunica con el Thread principal mediante mensajes

8. Web Workers -Event Loop-

9. ¡GRACIAS!
www.scio.com.mx