thread local storage execution contexts in javascript with zonejs
DESCRIPTION
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.TRANSCRIPT
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