Your Cloud.Your Business.
ZoneJS (Thread/JavaScript/etc.) Jeremy Likness Principal Architect @JeremyLikness
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!)
BACKGROUND
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
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
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
DEMO: Zone in Action
Questions?
Source for this deckhttps://github.com/JeremyLikness/LearnZoneJs
Running example for this deckhttp://jeremylikness.github.io/LearnZoneJs
Get Zonehttps://github.com/angular/zone.js
Jeremy Likness, Principal Architect @JeremyLikness
