Tweet
Tweet

Slide 1

Slide 1 text

@mthenw Senior UI Developer at Egnyte

Slide 2

Slide 2 text

Working with single-threaded event loop

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

synchronous processes threads event loop

Slide 5

Slide 5 text

event loop no race conditions good for I/O bound tasks most web apps bad for CPU intensive tasks

Slide 6

Slide 6 text

there is a need to handle a lot of “events”

Slide 7

Slide 7 text

Callback queue Stack Heap V8 Event loop Web APIs DOM XMLHttpRequest WindowTimers …

Slide 8

Slide 8 text

Callback queue Stack Heap V8 Event loop Node.js API Process … HTTP

Slide 9

Slide 9 text

it’s good for both frontend and backend

Slide 10

Slide 10 text

Stack Heap V8

Slide 11

Slide 11 text

Stack Heap V8

Slide 12

Slide 12 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          console.log(sum);   }   ! logSum(1,  2);

Slide 13

Slide 13 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2)

Slide 14

Slide 14 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b)

Slide 15

Slide 15 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b) a  +  b

Slide 16

Slide 16 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);  -­‐>  3          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b)

Slide 17

Slide 17 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);  -­‐>  3          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2)

Slide 18

Slide 18 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);  -­‐>  3          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2) console.log(sum)

Slide 19

Slide 19 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);  -­‐>  3          console.log(sum);   }   ! logSum(1,  2); logSum(1,  2)

Slide 20

Slide 20 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);  -­‐>  3          console.log(sum);   }   ! logSum(1,  2);

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

asynchronous

Slide 23

Slide 23 text

event loop & callback queue

Slide 24

Slide 24 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); Node.js APIs Call stack

Slide 25

Slide 25 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); logSum(1,  2) Node.js APIs Call stack

Slide 26

Slide 26 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b) Node.js APIs Call stack

Slide 27

Slide 27 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b) a  +  b Node.js APIs Call stack

Slide 28

Slide 28 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); logSum(1,  2) add(a,  b) Node.js APIs Call stack

Slide 29

Slide 29 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); logSum(1,  2) setTimeout(func) Node.js APIs Call stack

Slide 30

Slide 30 text

after 10 milliseconds

Slide 31

Slide 31 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); anonymous  func Node.js APIs Call stack

Slide 32

Slide 32 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); anonymous  func Node.js APIs Call stack

Slide 33

Slide 33 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); anonymous  func console.log(sum) Node.js APIs Call stack

Slide 34

Slide 34 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); anonymous  func Node.js APIs Call stack

Slide 35

Slide 35 text

function  add(a,  b)  {          return  a  +  b;   }   ! function  logSum(a,  b)  {          var  sum  =  add(a,  b);          setTimeout(function  ()  {            console.log(sum);          },  10);   }   ! logSum(1,  2); Node.js APIs Call stack

Slide 36

Slide 36 text

real application no single message queue

Slide 37

Slide 37 text

setTimeout callbacks
 setInterval callbacks I/O callbacks setImmediate callbacks update timers

Slide 38

Slide 38 text

setInterval! setTimeout preserved order they are not accurate

Slide 39

Slide 39 text

setTimeout(function()  {      console.log(‘callback  1')   },  0);   ! setTimeout(function()  {      console.log('callback  2')   },  0);

Slide 40

Slide 40 text

setImmediate IE10 & node.js preserved order once per loop iteration

Slide 41

Slide 41 text

setImmediate more accurate that setTimeout(fn, 0) because no timers involved

Slide 42

Slide 42 text

setTimeout(function()  {      console.log('setTimeout  callback')   },  0);   ! setImmediate(function()  {      console.log('setImmediate  callback')   }); setImmediate  callback   setTimeout  callback

Slide 43

Slide 43 text

setImmediate always after I/O events callbacks always before timers break up long running operations

Slide 44

Slide 44 text

process.nextTick node.js

Slide 45

Slide 45 text

run after all currently running synchronous operations before any other I/O events fire

Slide 46

Slide 46 text

setTimeout callbacks
 setInterval callbacks I/O callbacks setImmediate callbacks update timers process.nextTick callbacks process.nextTick callbacks process.nextTick callbacks

Slide 47

Slide 47 text

function  MyThing(options)  {      this.setupOptions(options);   !    process.nextTick(function()  {          this.startDoingStuff();      }.bind(this));   }   ! var  thing  =  new  MyThing();   thing.getReadyForStuff();   ! //  thing.startDoingStuff()  gets  called  now,     //  not  before.

Slide 48

Slide 48 text

function  definitelyAsync(arg,  cb)  {      if  (arg)  {          process.nextTick(cb);          return;      }   !    fs.stat('file',  cb);   }

Slide 49

Slide 49 text

setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback’);      },  0)   },  0);

Slide 50

Slide 50 text

setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback’);      },  0)   },  0);

Slide 51

Slide 51 text

setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback’);      },  0)   },  0);

Slide 52

Slide 52 text

setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback’);      },  0)   },  0);

Slide 53

Slide 53 text

setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback');      },  0)   },  0);

Slide 54

Slide 54 text

setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback');      },  0)   },  0);

Slide 55

Slide 55 text

setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback');      },  0)   },  0);

Slide 56

Slide 56 text

setTimeout(function  ()  {   !    setImmediate(function()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (1)');          });          console.log('setImmediate  callback');      });   !    setTimeout(function  timeout()  {   !        process.nextTick(function  ()  {              console.log('nextTick  called  (2)');          });          console.log('setTimeout  callback');      },  0)   },  0);

Slide 57

Slide 57 text

process.nextTick can block event queue process.maxTickDepth

Slide 58

Slide 58 text

setTimeout callbacks
 setInterval callbacks I/O callbacks setImmediate callbacks update timers process.nextTick callbacks process.nextTick callbacks process.nextTick callbacks

Slide 59

Slide 59 text

Thanks!