Zone.js 2017 changelog.

1. Zone.js 2017~
@JiaLiPassion

2. 自己紹介
● 名前: 李嘉
● 会社: 利達ソフト
● Zone.js: Collaborator
● Angular: Contributor
● Twitter: @jialipassion
● Github: JiaLiPassion

3. Agenda
● Zone.js とは
● Angular と Zone.js
● 2017年Zone.js メインのChangelog
● これからZone.jsでやりたいこと

4. Zone.jsとは
1. Brian Ford さんが2013年DartのZoneのIdeaから作成したライブラリ
a. Provide an execution Context
b. Provide async task lifecycle hook
c. Provide async error handler

5. Sample Code: Execution Context
Zone.current.fork({
name: 'zone',
properties: {
key: 'value'
}
}).run(() => {
setTimeout(() => {
console.log('in zone', Zone.current.name, Zone.current.get('key')); // will print `in zone zone value
});
})

6. Sample Code: Lifecycle hook
Zone.current.fork({
name: 'zone',
onScheduleTask: (delegate, curr, target, task) => {
console.log('schedule task', task.source);
return delegate.scheduleTask(target, task);
},
onInvokeTask: (delegate, curr, target, task, applyThis, applyArgs) => {
console.log('before invoke task', task.source);
delegate.invokeTask(target, task, applyThis, applyArgs);
console.log('after invoke task', task.source);
}
}).run(() => {
setTimeout(() => { // 1. onScheduleTask
// 2. onInvokeTask
console.log('timout callback invoked');
});
})
● onScheduleTask
● onInvokeTask
● onCancelTask
● onHasTask
● onHandleError
● onInvoke
● onIntercept
● onFork

7. Error Handling
Zone.current.fork(
{
name: 'error',
onHandleError: (delegate, curr, target, error) => {
return delegate.handleError(target, error);
}
}).run(() => {
setTimeout(() => {
throw new Error('timeout error');
});
const xhr = new XMLHttpRequest();
xhr.open('get', 'http://notexists', true);
...
xhr.send();
});

8. Zone Propagation vs Zone Frame
const zoneA = Zone.current.fork({name: 'zoneA'}, onScheduleTask: ...);
const zoneB = Zone.current.fork({name: 'zoneB'}, onScheduleTask: ...);
const zoneC = zoneA.fork({name: 'zoneC', onScheduleTask: ...});
zoneB.run(() => {
// in zoneB
zoneC.run(() => {
// in zoneC
setTimeout(() => {}); // zoneC onScheduleTask => zoneA.onScheduleTask
});
// back in zoneB
});

9. Implementation: Monkey Patch
const nativeTimeout = window.setTimeout;
window.setTimeout = function(callback) {
const zone = Zone.current;
const wrappedCallback = function() {
zone.onInvokeTask('setTimeout'); // invoke hook
return callback.apply(this, arguments);
}
zone.onScheduleTask('setTimeout'); // schedule hook
nativeTimeout.apply(this, wrappedCallback);
}

10. Zone.js in Angular
● Change Detection: NgZone
○ onHasTask
○ onInvoke
○ onInvokeTask
● Error Handling
○ onHandleError
● Test
○ SyncTestZoneSpec
○ AsyncTestZoneSpec
○ ProxyZoneSpec
○ LongStackTraceZoneSpec

11. 過去一年のZone.js
1. Performance
2. Better Promise support
3. More API support
4. Better Rxjs Support
5. Better Error handling
6. Module system
7. Closure Build Support

12. Performance
● GC is the top bottleneck
● Zone.js
○ DOM
■ addEventListener/removeEventListener/onXXX(onClick etc..)
■ BlackListEvent Support (scroll, mousemove…) , __zone_symbol__BLACK_LISTED_EVENTS
○ NodeJS
■ EventEmitter
Reduce objects, especially short live objects. Remove all closures below.
const wrappedCallback = () => {zone.run(eventListener)};
※ Angular DomEvent use more aggressive way to improve performance. It is under testing.

13. Promise
● Promise A+ Spec Passed
● ZoneAwarePromise load order improvment
○ can load es6/core-js/other 3rdParty promise before/after zone.js without reporting
Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been
overwritten
’

14. More API support
1. Nw/Electron
2. MediaQuery
3. Notification
4. RTCPeerConnction
5. ShadyDom
6. Cordova

15. Better Rxjs zone support
// constructor zone.
zoneA.run(() => { observable = new Observable((_subscribe) => subscribe = _subscribe;
console.log('constructing:', Zone.current.name);});});
// operator zone
zoneB.run(() => {observable.map(value => {console.log('mapping:',
Zone.current.name);return value;});});
// subscription zone
zoneC.run(() => {observable.subscribe(value => {console.log('subscription:',
Zone.current.name);});});
// emitter zone
zoneD.run(() => {subscribe.next(1);subscribe.complete();});

16. Better Error Handling
1. By default, ZoneAware Error will not loaded ( for Chrome Debugger issue)
2. DevMode, import `zone-error` in polyfill.
a. Every stack frame will have zone information
b. Zone.js stack traces will be removed
at eval (app.component.ts:24)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4747)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at ZoneTask.invokeTask (zone.js:499)
at ZoneTask.invoke (zone.js:488)
at timer (zone.js:2040)
at eval (app.component.ts:24) [angular]
at Object.onInvokeTask (core.js:4747) [angular]
at timer (zone.js:2040) [<root>]

17. Module
- Promise
- Timer
- EventTarget
- requestAnimationFrame
- toString
- XHR
- Block
- Geolocation
- ….
- Disable module Sample: __Zone_disable_toString = true
- Flag:
- __Zone_disable_IE_check = true
- __Zone_enable_cross_context_check = true

18. Closure Build: zone-extern
/**
* @param {string} source
* @param {!Function} callback
* @param {?TaskData=} data
* @param {?function(!Task)=} customSchedule
* @return {!MicroTask} microTask
*/
Zone.prototype.scheduleMicroTask = function(source, callback, data, customSchedule) {};

19. これからのZone.js
● Fix bugs of Angular NgNoopZone
● Better document
○ Module enable/disable flags
○ Built in ZoneSpec(AsyncTest/SyncTest/Proxy/LongStackTrace/WTF…) usage
○ Tips, such as target[Zone.__symbol__(method)] to access non patched method.
● Unify Dom Event Listener behavior
○ <button (click) = “handler();”></button>
○ btn.addEventListener(‘click’, handler);
○ btn.onclick = handler;
○ <button onclick=”handler();”></button>
● Read only zone implementation with Nodejs asynchooks instead of monkey patch
● Native async/await support with asynchooks + PromiseHook
const p1 = new Promise(() => {}); // This will never be resolved
const p2 = new Promise((resolve) => setTimeout(resolve, 1000, p1)); // resolve p2 with p1 after 1s
● Zone TC39 proposal implementation?
● More API support
○ Electron native API
○ Bluebird