Zone.js

ABOUT ME
{
"name": "Ilia Idakiev",
"about": [
"Lecturer in 'Advanced JS' @ FMI",
"Developer / Manager / Owner @ HNS",
"Consultant"
],
"otherAchievements": [
"Angular Course 2016 @ HackBulgaria",
"Angular Course 2017 @ HackBulgaria",
"Advanced JS + Angular Course 2017 @ Innovative Labs"
]
}

WHAT IS ZONE.JS
• Library written by the team that is inspired by DART
• It provides a mechanism for encapsulating and intercepting
asynchronous activities in the browser

WHY ZONE.JS
• Useful for accessing data which persist across async operations.
• Useful for frameworks/applications to be able to schedule and
intercept async tasks
• Helps us detect theVM turns
• Useful for debugging, testing and proﬁling

ZONE
• A zone is an execution context that persists across asynchronous tasks.
• It allows us to control execution of the code within the zone.

ZONES.JS
• The library monkey patches all the async browser APIs.
• Redirects all the async operations trough a zone of interception.
• Creates a <root> zone.
• Provides a global Zone object used for zone management.

MONKEY PATCH
A monkey patch is a way for a program to extend or modify
supporting system software locally (affecting only the running instance
of the program).
( wikipedia )

MONKEY PATCH EXAMPLE
https://github.com/angular/zone.js/blob/0d0ee53974601738fb16235baa3e5cca8b95be4e/lib/
browser/browser.ts#L24
zone.js patching:

CONTEXT PROPAGATION
• A zone keeps a reference to its parent zone.
• A given stack frame can be only associated with one zone.
• Data attached to the zone is shallow-immutable.
• Child zone inherit parent zone properties.

WRAPPING
Zone.prototype.wrap method provides convenience for wrapping callbacks.

ZONESPEC HOOKS
• onFork
• onIntercept - interception of the wrapping of the callback
• onInvoke
• onHandleError
• onScheduleTask
• onInvokeTask
• onCancelTask
• onHasTask

ZONE DELEGATE
• A delegate which handles the interception of the current zone
methods.
• This way a child zone can invoke a method on a parent zone.
• The wrap method delegates to intercept and the run method to
invoke.

TASKTYPES
• MicroTask - work which will execute as ASAP on empty stack frame.A microtask is
guaranteed to run before host environment performs rendering or I/O operations.
• MacroTask - 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. Macro tasks have an implied execution order.
• EventTask - Similar to macro tasks, but unlike macro tasks they may never run.
When an EventTask is run, it pre-empts whatever the next task is the macro task
queue. Event tasks do not create a queue.

TASK METHODS
• runTask
• scheduleMicroTask
• scheduleMacroTask
• scheduleEventTask
• scheduleTask
• cancelTask

THE PROBLEM
How to understand that something changed and we need to update
the views?

NGZONE AND CHANGE DETECTION
Tick runs when there is no
more microtasks enqueue in
the currentVMTurn.

PERFORMANCE OPTIMIZATION
• Asynchronous tasks that don't require UI updates or error handling
to be handled by Angular can be kicked off via "runOutsideAngular".
• If needed, these tasks can reenter the Angular zone via "run".

FAKEASYNC
• Instead of calling the browser, it saves all the calls into an array.
• It can then emulate the passage of time by going through that array
and invoking the stored functions.

HTTPS://BLOG.NRWL.IO/CONTROLLING-TIME-WITH-ZONE-JS-AND-FAKEASYNC-
F0002DFBF48C

ZONE.JS/DIST/LONG-STACK-TRACE-ZONE.JS

ZONES ARE IN STAGE 0 PROPOSALS
https://github.com/tc39/proposals/blob/master/stage-0-proposals.md

SLIDES
https://github.com/iliaidakiev/slides

Zone.js

More Related Content

Zone.js