$30 off During Our Annual Pro Sale. View Details »

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

Orlando Del Aguila

June 28, 2016
Tweet

More Decks by Orlando Del Aguila

Other Decks in Programming

Transcript

  1. CONCURRENCIA
    PARALELISMO
    EVENT-LOOP

    View Slide

  2. ORLANDO
    DEL AGUILA

    View Slide

  3. View Slide

  4. View Slide

  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

    View Slide

  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?

    View Slide

  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.

    View Slide

  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.

    View Slide

  9. CONCURRENCIA
    Y volviendo al ejemplo anterior de concurrencia, como hacemos que esto trabaje en paralelo?

    View Slide

  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

    View Slide

  11. PARALELISMO
    Y podemos ir mas allá y poner a 4 gophers a trabajar el paralelo, pero allí ya entienden la idea.

    View Slide

  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

    View Slide

  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

    View Slide

  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?

    View Slide

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

    View Slide

  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,

    View Slide

  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

    View Slide

  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,

    View Slide

  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

    View Slide

  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

    View Slide

  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,

    View Slide

  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,

    View Slide

  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,

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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
    );

    View Slide

  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

    View Slide

  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
    );

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

  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.

    View Slide