Thread Local Storage Execution Contexts in JavaScript with ZoneJS

2,011 views

Published on

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.

Published in: Software
  • Be the first to comment

Thread Local Storage Execution Contexts in JavaScript with ZoneJS

  1. 1. Your Cloud. Your Business. ZoneJS (Thread/JavaScript/etc.) Jeremy Likness Principal Architect @JeremyLikness
  2. 2. www.ivision.com
  3. 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. 4. BACKGROUND
  5. 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. 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. 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. 8. DEMO: Zone in Action
  9. 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

×