The Angular team has released a small tool called Zone that is less than 200 lines of code but will revolutionize how you use JavaScript. A zone is an execution context for asynchronous JavaScript that provides local storage and allows you to hook into various events. Imagine being able to debug a call stack that doesn't end at the click handler but goes all the way back to the code that wired in the handler. Imagine being able to instrument asynchronous calls without changing a line of your existing code but with the ability to see the performance in a continuous line of active and elapsed time from the initial request. Zone can run with any JavaScript library and does not require Angular but can enhance the way you integrate third-party components with Angular. Witness for yourself the power of this library through live examples.

1. Your Cloud.
Your Business.
ZoneJS (Thread/JavaScript/etc.)
Jeremy Likness
Principal Architect
@JeremyLikness

2. www.ivision.com

3. TODAY’S AGENDA
1. Background JavaScript’s event loop and where zone fits in
2. Example Example of an app without Zone
3. Zone Deep Dive Hands on demos of Zone capabilities
4. Q&A Questions (hopefully answers!)

4. BACKGROUND

5. BACKGROUND
• For all practical purposes, JavaScript runs on a single thread
• There is always a global context, but to avoid collisions and
enable modular code it is recommended you avoid using it
• JavaScript executes in an event loop. Keyboard, mouse, and
network events are all placed in a queue.
• Timers simply place callbacks in the queue with restrictions (i.e.
don’t pull this for another 2 seconds)
• The event loop simply pulls the next entry in the queue and
processes it

6. The Event Loop
Grab
Event
Check
for
Handler
Execute
Handler
Mouse
Click
Text
Input
Timer
Callback
Keyboard Mouse Network Timer Events
Event loop
Event queue

7. Why Zone?
• Each pass of the event loop can be considered a turn
• You may want to carry context within a turn
• Plugging into turns enables instrumentation and metrics
• Zone does this at a global level so you don’t have to change
existing code
• A turn has the following lifecycle:
Enqueue Before During After Dequeue

8. DEMO: Zone in Action

9. Questions?
Source for this deck
https://github.com/JeremyLikness/LearnZoneJs
Running example for this deck
http://jeremylikness.github.io/LearnZoneJs
Get Zone
https://github.com/angular/zone.js
Jeremy Likness, Principal Architect @JeremyLikness