[spankalee]

One thing missing from this picture is Streams - the multivalued analog to Promises (Futures in Dart). The button click example would be quite easy to handle, even without Zones, if the button had an onClick event stream, rather than taking a callback.

This code, which doesn't work as intended:

  function thirdPartyFunction() {
     function fakeXHR() {
       throw new Error("Invalid dependencies");
     }
 
    setTimeout(fakeXHR, 100);
   }
 
  function main() {
     button.on("click", function onClick() {
       thirdPartyFunction();
     });
   }
 
  main();

would instead look like this with a Streams-based API (I'm assuming a Dart-like API, since I don't know the proposed Stream API for JS):

  function thirdPartyFunction() {
     function fakeXHR() {
       throw new Error("Invalid dependencies");
     }
 
    setTimeout(fakeXHR, 100);
   }
 
  function main() {
     button.on("click")
       .listen(function onClick() {
         thirdPartyFunction();
       })
       .onError(function onError() {
         console.log("now it works with errors");
       })
   }
 
  main();

Since onClick is executed by the Stream, even a synchronous exception in thirdPartyFunction will be caught and given to the onError callback. JavaScript could really use a better DOM API with Promises and Streams in place of most callbacks. I think most of the Streams work is here: https://github.com/whatwg/streams

So Zones aren't really needed here. They are very useful though. AngularDart uses them to intercept any external trigger of the event loop so that it can run it's change detection code (this is why they ported Zones to JavaScript). Dart's unittest library runs each test in a Zone to wait for outstanding microtasks and catch async errors that might happen after a test appears to have completed and associate it with the correct test. And of course using Zones to string together async stack traces or debugging is invaluable.