Zone.js Deep Dive - Understanding the JavaScript Event Loop and Zones

A B O U T M E
{
"name": "Ilia Idakiev",
"experience": [
“Google Developer Expert (GDE)“,
"Developer & Co-founder @ HILLGRAND",
"Lecturer in 'Advanced JS' @ Sofia University",
"Contractor / Consultant",
"Public / Private Courses”
],
"involvedIn": [
"Angular Sofia", "SofiaJS / BeerJS",
]
}

Macrotask Queue
STACK
JS enginesetTimeout(…)

Macrotask Queue
STACK
JS engine

STACK
Macrotask Queue
JS engine

STACK
Macrotask Queue
Promise.resolve().then(fn) JS engine

STACK
Macrotask Queue
Microtask Queue
JS engine

Macrotask Queue
STACK
Microtask Queue
JS engine

Macrotask Queue
STACK
Microtask Queue
setTimeout(…, 0) JS engine

Macrotask Queue
STACK
Microtask Queue
requestAnimationFrame(…) JS engine

Macrotask Queue
STACK
Microtask Queue
Request Animation Frame Queue
JS engine

Macrotask Queue
STACK
Microtask Queue
Request Animation Frame Queue
Promise.resolve().then(fn) JS engine

! Micro Tasks - A microtask is work which will execute as soon as possible on empty stack frame. A
microtask is guaranteed to run before host environment performs rendering or I/O operations. A
microtask queue must be empty before another MacroTask or EventTask runs. 
(i.e. Promise.then() executes in microtask)
! Macro Tasks - Macro tasks are interleaved with rendering and I/O operations of the host environment.
(ie setTimeout, setInterval, etc..). Macro tasks are guaranteed to run at least once or canceled
(some can run repeatedly such as setInterval). Macro tasks have an implied execution order.
! Event Tasks - Event tasks are similar to macro tasks, but unlike macro tasks they may never
run. Event tasks are scheduled using addEventListener('click', eventCallback), or similar mechanisms.
Tasks

A zone is an execution context that persists across async tasks, and allows
the creator of the zone to observe and control the execution of the code
within the zone.
Zone

! Knowing when a task has executed and when the micro task queue is empty allows frameworks to know
when it’s time to re-render the UIs.
! Enforcing that no tasks are scheduled allows test frameworks to ensure that the tests are synchronous and
fast (controlling time).
! Tracking when all scheduled tasks are executed allows a test framework to know when an async test has
completed.
! Long stack traces between async operations.
! Measuring latency for user operations (Profiling).
! And many more…
Use Cases

The zone library ships with code which monkey patches all of the browsers's
asynchronous API and redirects them through the zone for interception.
Zone.js

const originalSetTimeout = global.setTimeout;

global.setTimeout = function (...args) {
console.log('Timeout was called');
}

return originalSetTimeout(...args);
}

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

}
setTimeout(function () {
  console.log('Hello!')
}, 0);
// > 'Timeout was called'
// > 'Hello!'

BROWSER
ZONE.JS
setTimeout Promise.resolve().then

const rootZone = Zone.current;

const rootZone = Zone.current;
const myZone = rootZone.fork({
name: 'myZone',
properties: { user: null, debug: false }
});

myZone.run(() => {
  console.log(Zone.current.name);
  // > 'myZone' (get the name of the current zone)
  console.log(Zone.current.get('user'));
  // > null (get the poperty called user)
  console.log(Zone.current.parent.name)
  // > '<root>' (get the name of the root zone)
});

myZone.run(() => {
...
  const myZoneChild = myZone.fork({
    name: 'MyZoneChild',
    properties: { user: { name: 'Ivan' } }
  });

});

myZone.run(() => {
...
  });
  myZoneChild.run(() => {

  });
});

myZone.run(() => {
...
  });
  myZoneChild.run(() => {
    console.log(Zone.current.name);
    // > 'myZoneChild' (get the name of the current zone)
    console.log(Zone.current.get('user'));
    // > { name: 'Ivan' } (get the property called user)
    console.log(Zone.current.get('debug'));
    // > false (get the property called user)
    console.log(Zone.current.parent.name)
    // > 'MyZone' (get the name of the parent zone)
  });
});

! Each stack frame is associated with one zone (execution context).
! Data attached to the zone is shallow immutable.
! Once the zone is forked its properties cannot be changed.
! Child zones inherit parent zones properties (we can use them for communication).
Zones Basics Summary

const timingZone = Zone.current.fork({
name: 'timingZone',

});

  name: 'timingZone',
  onInvoke: function (
    parentZoneDelegate, currentZone,
    targetZone, callback, applyThis,
    applyArgs, source
  ) {

  }
});

import { performance } from 'perf_hooks';
  name: 'timingZone',
    applyArgs, source
  ) {

  }
});

  name: 'timingZone',
    applyArgs, source
  ) {
    var start = performance.now();
  }
});

  name: 'timingZone',
    applyArgs, source
  ) {
    parentZoneDelegate.invoke(targetZone, callback, applyThis, applyArgs, source);
  }
});

  name: 'timingZone',
    applyArgs, source
  ) {
    var end = performance.now();

  }
});

  name: 'timingZone',
    applyArgs, source
  ) {
    var end = performance.now();
    console.log(
      'Zone:', targetZone.name,
      'Intercepting zone:', currentZone.name,
      'Duration:', end - start
    );
  }
});

const appZone = timingZone.fork({ name: 'appZome' });

appZone.run(function myApp() {
});

console.log('Zone:', Zone.current.name, 'Hello World!')
});

console.log('Zone:', Zone.current.name, 'Hello World!')
});
// Output:
// > Zone: appZone Hello World!
// > Zone: appZone Intercepting zone: timingZone Duration: 919.128399014473

! We can intercept zone.run using the onInvoke hook and delegate.invoke inside.
! We can intercept zone.wrap using the onIntercept hook and delegate.intercept inside.
! We can intercept zone.form using the onFork hook and delegate.fork inside.
! We can’t use inheritance because the Zone.current is dynamic and we can’t know it on define time so we
need to use hooks and delegates.
! We can’t simply call a parent zone method because doing so would create a callback which is bound to
the parent zone and we are interested in intercepting the callback before it is bound to any zone so we
need to use hooks and delegates.
Zones Interception Summary

! Zone composition
! Observability of task execution
! Centralised error handling
Zones Interception Benefits

global.setTimeout = function (callback, delay) {
};

  const task = Zone.current.scheduleMacroTask(

  );
  return task;
};

    'setTimeout',

  );
  return task;
};

    'setTimeout',
    function () {
    },

  );
  return task;
};

    'setTimeout',
    function () {
      callback();
    },

  );
  return task;
};

    'setTimeout',
    function () {
      callback();
      console.log('task end');
    },

  );
  return task;
};

    'setTimeout',
    function () {
      callback();
    },
    null,

  );
  return task;
};

    'setTimeout',
    function () {
      callback();
    },
    null,
    task => {
      console.log('task start');
    }
  );
  return task;
};

    'setTimeout',
    function () {
      callback();
    },
    null,
    task => {
      originalSetTimeout(
        task.invoke,
        delay
      );
    }
  );
  return task;
};

const task = setTimeout(function () {
console.log(123);
}, 1000);
// > task start
// > 123
// > task end

What if we want to clear the
timeout? 🤔

  return Zone.current.scheduleMacroTask(
    'setTimeout',
    function () {
      callback();
    },
    null,
    task => {
originalSetTimeout(
        task.invoke,
        delay
      );
    }
  );
};

  let id;
    'setTimeout',
    function () {
      callback();
    },
    null,
    task => {
originalSetTimeout(
        task.invoke,
        delay
      );
    }
  );
};

  let id;
    'setTimeout',
    function () {
      callback();
    },
    null,
    task => {
      id = originalSetTimeout(
        task.invoke,
        delay
      );
    }
  );
};

const originalClearTimeout = global.clearTimeout;
  let id;
    'setTimeout',
    function () {
      callback();
    },
    null,
    task => {
        task.invoke,
        delay
      );
    }
  );
};

const originalClearTimeout = global.clearTimeout;
  let id;
    'setTimeout',
    function () {
      callback();
    },
    null,
    task => {
        task.invoke,
        delay
      );
    },
    () => originalClearTimeout(id)
  );
};

But aren’t we returning a task?  
How will clearTimeout work?
🤔

global.clearTimeout = function (task) {
Zone.current.cancelTask(task);
}

global.clearTimeout = function (task) {
Zone.current.cancelTask(task);
}
const task = setTimeout(function () {
console.log(123);
}, 1000);
clearTimeout(task);

! We can scheduleMacroTask, scheduleMicroTask, scheduleEventTask and
scheduleTask (mostly useful for existing task when they were cancelled and we want to
reschedule them).
! We can intercept task scheduling with onScheduleTask, onInvokeTask, onCancelTask,
onHasTask, onHandleError.
! Task Lifecycle
Zones Tasks Summary

Why is the interception API
so confusing? 🤔

! We can’t use inheritance because the Zone.current is dynamic and we can’t know it on
define time so we need to use hooks and delegates.
! We can’t simply call a parent zone method because doing so would create a callback
which is bound to the parent zone and we are interested in intercepting the callback before it is
bound to any zone so we need to use hooks and delegates.
Why do we need hooks and delegates?

DEMO TIME
(Custom Change Detection Implementation)

! async-listener - a similar library for node
! vizone - control flow visualizer that uses zone.js
Additional Resources

THANK YOU!
GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events)
Twitter > @ilia_idakiev

Zone.js Deep Dive - Understanding the JavaScript Event Loop and Zones

Recommended

Recommended

More Related Content

Similar to Zone.js Deep Dive - Understanding the JavaScript Event Loop and Zones

Similar to Zone.js Deep Dive - Understanding the JavaScript Event Loop and Zones (20)

More from Ilia Idakiev

More from Ilia Idakiev (18)

Recently uploaded

Recently uploaded (20)

Zone.js Deep Dive - Understanding the JavaScript Event Loop and Zones