Concurrencia, Paralelismo y el Event-loop

Concurrencia, Paralelismo y el Event-loop

Esta es una platica que di en GDLJS. El demo se encuentra en github.com/orlando/event-loop-demo

A0574e5093df6afd68f1c109c5a9bf22?s=128

Orlando Del Aguila

June 28, 2016
Tweet

Transcript

  1. CONCURRENCIA PARALELISMO EVENT-LOOP

  2. ORLANDO DEL AGUILA

  3. None
  4. None
  5. CONCURRENCIA Es cuando 2 o más procesos pueden empezar, correr,

    y completarse en periodos compartidos de tiempo. No necesariamente significa que van a correr al mismo tiempo, puede correr uno primero, luego el otro hasta que terminan y cambiar quien se ejecuta hasta que terminen. Esto es lo que pase cuando por ejemplo corres varios procesos cuando tienes 1 core en tu procesador
  6. CONCURRENCIA Para poner un ejemplo, acá tenemos un gopher con

    una carretilla, que su trabajo es quemar libros de excel y word 98 
 Estos los tome prestado de una platica de Rob Pike, unos de los creadores de Go. Su platica va a estar en los recursos al final de la presentación Entonces, el gopher va de un lado a otro quemando libros. Este proceso digamos que es lento y lo podemos optimizar un poco. Como?
  7. CONCURRENCIA Puedes agregando otro gopher con una carretilla, ahora los

    2 van a estar trabajando concurrentemente. Pero esto nos trae otro problema, digamos que los gophers solo pueden usar la pila de libros y el incinerador uno a la vez. Por lo tanto es posible que se hagan colas y uno gopher espere al otro para poder usar uno de los recursos.
  8. PARALELISMO Y esto nos lleva a paralelismo, Paralelismo es cuando

    2 o mas procesos se ejecutan a la misma vez, en paralelo, uno no bloquea al otro.
  9. CONCURRENCIA Y volviendo al ejemplo anterior de concurrencia, como hacemos

    que esto trabaje en paralelo?
  10. PARALELISMO Le damos a cada gopher su incinerador y su

    pila de libros. Así los 2 van a trabajar simultáneamente sin que uno bloqueé al otro
  11. PARALELISMO Y podemos ir mas allá y poner a 4

    gophers a trabajar el paralelo, pero allí ya entienden la idea.
  12. EVENT-LOOP Y allí acaba nuestra introducción a los conceptos de

    concurrencia y paralelismo. Estos conceptos sin independientes del lenguaje que usemos.
 Ahora vamos con algo un poco mas especifico a lenguajes, lenguajes como JavaScript JavaScript es single threaded, lo que significa que solo puede ejecutar 1 sola cosa a la vez. Es un lenguaje que maneja concurrencia usando un event loop. JavaScript siempre ejecuta el código hasta que se complete, nunca deja nada a medias. El event loop de javascript, es que el que se encarga de pasar eventos del Callback stack al call stack. Si se los explico así probablemente no lo entiendan, así que vamos a explicar todo lo que tiene en teoría un runtime de JavaScript
  13. EVENT-LOOP + FRIENDS Y vamos a llamarlo Event-loop y sus

    amigos. Las otras piezas que ayudan al event-loop a hacer su trabajo son
  14. EVENT-LOOP + FRIENDS Call Stack Callback Stack Web APIs Event-Loop

    El Call stack, El Callback Stack y Las Web APIs El Call Stack es una pila (FILO, first in last out), que describe esencialmente que funciones se están corriendo. El Callback stack son las funciones que están encoladas para próxima ejecución Las Web APIs, son API nativas que tiene el runtime, estas APIs pueden ser asíncronas o sincronías y tienen acceso al Callback stack Ahora como podemos diagramar todo esto junto?
  15. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    Podemos hacerlo así,
  16. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); Vamos a poner un poco de código para ver como funciona,
  17. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); Primero el compilador evaluar todo el código
  18. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); Vamos a poner un poco de código para ver como funciona,
  19. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); Luego cuando consegui una funcion para ejecutar, la ejecuta
  20. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); printHello y va llenando el call stack
  21. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); printHello Vamos a poner un poco de código para ver como funciona,
  22. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); printHello print Vamos a poner un poco de código para ver como funciona,
  23. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); printHello print console.log Vamos a poner un poco de código para ver como funciona,
  24. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); printHello print console.log En este momento, ya que la primera función del stack puede retornar, empezamos a sacar elementos del call stack, recuerden que el ultimo que entra es el primero que sale
  25. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); printHello print
  26. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello(); printHello
  27. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } printHello();
  28. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 ); Ahora vamos a ver como se comporta con un Web API, setTimeout. setTimeout es un API que nos da timers, acepta como primer parámetro una función, que llamamos callback, y como segundo parámetro un entero que es el tiempo del timer en millisegundos.
  29. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 );
  30. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 ); setTimeout
  31. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 );
  32. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 ); timer El API Crea un timer
  33. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 ); printHello Cuando el tiempo pasa, el API pone el function en el callback stack
  34. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 ); printHello Luego el event loop, en la siguiente iteracion, ve que tiene una función en el callback stack y lo que hace es moverla al Call stack
  35. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 ); printHello print Luego continua la ejecución como antes
  36. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 ); printHello print console.log
  37. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 ); printHello print
  38. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    function print(text) { console.log(text); } function printHello() { print("Hello GDLJS"); } setTimeout( printHello, 5000 ); printHello
  39. EVENT-LOOP + FRIENDS Call Stack Web APIs Callback Stack Code

    setTimeout(printHello, 5000 ); setTimeout(printBye, 2000 ); function printBye() { log("Bye GDLJS"); } function printHello() { log("Hello GDLJS"); } function log(t) { console.log(t); } Ahora que pasa si tenemos esto, esto lo vamos a ver en el siguiente link. http://latentflip.com/loupe/? code=c2V0VGltZW91dChwcmludEhlbGxvLAogNTAwMAopOwoKc2V0VGltZW91dChwcmludEJ5ZSwKIDIwMDAKKTsKCmZ1bmN0aW9uIHByaW50QnllKCkgewogIGxvZy giQnllIEdETEpTIik7Cn0KCmZ1bmN0aW9uIHByaW50SGVsbG8oKSB7CiAgbG9nKCJIZWxsbyBHRExKUyIpOwp9CgpmdW5jdGlvbiBsb2codCkgewogIGNvbnNvbGUubG 9nKHQpOwp9!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D 
 Luego que pasa si la ejecución es lenta? Vamos a ver el siguiente demo
 
 http://latentflip.com/loupe/? code=c2V0VGltZW91dChwcmludEhlbGxvLAogNTAwMAopOwoKc2V0VGltZW91dChwcmludEJ5ZSwKIDIwMDAKKTsKCmZ1bmN0aW9uIHByaW50QnllKCkgewogIGxvZy giQnllIEdETEpTIik7Cn0KCmZ1bmN0aW9uIHByaW50SGVsbG8oKSB7CiAgbG9nKCJIZWxsbyBHRExKUyIpOwp9CgpmdW5jdGlvbiBsb2codCkgewogIGRlbGF5KCk7CiA gZGVsYXkoKTsKICBkZWxheSgpOwogIGNvbnNvbGUubG9nKHQpOwp9!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D
  40. PARALELISMO EN JS La forma en que JS puede procesar

    cosas en paralelo, es levantando varios procesos y sincronizando entre otros procesos. Así que no, no van a ver una solución mágica, es un problema del lenguaje.
  41. PARALELISMO EN JS La forma en que JS puede procesar

    cosas en paralelo, es levantando varios procesos y sincronizando entre otros procesos. Así que no, no van a ver una solución mágica, es un problema del lenguaje.
  42. PARALELISMO EN GO La manera en que Go maneja concurrencia,

    es usando Go routines, Goroutines son como unos lightweight threads, que se multiplexean en los threads del OS. Son bastante baratos, un Goroutine cuesta alrededor de 5kb en memoria.
  43. DEMO En el Demo voy a mostrar como se comporta

    Node.js mandando paquetes por medio de un websocket, Y hacer lo mismo en Go. El demo esta en en mi repo github.com/orlando/event-loop-demo
  44. RECURSOS https:/ /vimeo.com/49718712 https:/ /www.youtube.com/ watch?v=8aGhZQkoFbQ https:/ /egghead.io/lessons/ javascript-call-stack La

    manera en que Go maneja concurrencia, es usando Go routines, Goroutines son unos weight threads, que se multiplexean en los threads del OS. Son bastante baratos, un Goroutine cuesta alrededor de 5kb en memoria.