Overview of zone.js (Monkey Patching, Forking, Interception). How its used in Angular for triggering Change Detection and a demo in NodeJS for authentication handling. All my slides and demos can be found here: https://github.com/IliaIdakiev/slides

1. ZONE.JS

2. 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"
]
}

3. I LOVE PLAYINGVINYL

4. 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

5. 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 profiling

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

7. 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.

8. 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 )

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

10. ENTERING ZONES

11. CREATION EXAMPLE 1

12. CREATION EXAMPLE 2

13. 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.

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

15. INTERCEPTION

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

17. INTERCEPTION

18. INTERCEPTION EXAMPLE (1)

19. INTERCEPTION EXAMPLE (2)

20. 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.

21. 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.

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

23. ANGULAR

24. ANGULAR COMPILATION

25. ZONEJS INSIDE ANGULAR

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

27. ANGULARJS
$digest / $apply

28. NGZONE EVENT INTERCEPTION

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

30. ANGULAR CHANGE DETECTION

31. ANGULAR CHANGE DETECTION

32. ANGULAR CHANGE DETECTION

33. 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".

34. CONTROLLINGTIME

35. 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.

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

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

38. NODEJS AND ZONE.JS DEMO

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

40. WTF

41. WEBTRACING FRAMEWORK

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

43. THANKYOU!