execution context that persists across async tasks

• Inspired by a feature in Dart
• Wrap functionality (sync or async) in a context
• Add hooks at start and end of execution
• Monkey-patch native async event handlers

Zone.js

function foo() {...}
function bar() {...}
function baz() {...}

foo();
bar();
baz();

Naive Example: Profiling

*Example adapted from Thougtram.io blog & Brian Ford's zone.js talk

/* start */
start = Date.now();

foo();
bar();
baz();

/* stop */
time = Date.now() - start;

/* log */
console.log(time);

Measure time elapsed

/* start */
start = Date.now();

foo();
setTimeout(bar, 2000);
/* ^^^ ??? */
baz();

/* stop */
time = Date.now() - start;

/* log */
console.log(time);

... But what about Async?

function main() {
  foo();
  setTimeout(bar, 2000);
  baz();
}

var myZoneSpec = {
  beforeTask: function () {
    console.log('Before task');
    /* start timer */
  },
  afterTask: function () {
    console.log('After task');
    /* end timer */
  }
};

var myZone = zone.fork(myZoneSpec);
myZone.run(main);

Hooray Zones!

Monkey-patched hooks

Zone.setInterval()
Zone.alert()
Zone.prompt()
Zone.requestAnimationFrame()
Zone.addEventListener()
Zone.removeEventListener()

NgZone

• Fork of Zone.js global zone
• Extended with Angular Behaviors
• Exposes RxJS Observables to trigger change detection / re-rendering

Reactive Extensions for JavaScript

• "Observable" sequences
• Asynchronous data streams
• Combine, filter, create multiple observables

RxJS

http://rxmarbles.com/

http://rxmarbles.com/

hierarchy of UI elements

• React-like structure
• Encapsulate templates, styles, functionality, and ui state in discrete components
• Compositional

Components

<subscribeComponent></subscribeComponent>

Typed superset of Javascript

• Complies to plain javascript
• Adds static typing

Typescript

• Better tooling and feedback 
• Great for large projects and/or teams

function Greeter(greeting) {
    this.greeting = greeting;
}

Greeter.prototype.greet = function() {
    return "Hello, " + this.greeting;
}

let greeter = new Greeter({message: "world"});
/*  
    No Errors! Totally Valid! :(
   "Hello, [object Object]" instead of 
   "Hello, world" 
*/

Classic Javascript

function Greeter(greeting: string) {
    this.greeting = greeting;
}

Greeter.prototype.greet = function() {
    return "Hello, " + this.greeting;
}

let greeter = new Greeter({message: "world"});
/*  
    Compilation Error! 
    Argument of type '{ message: string; }' 
    is not assignable to parameter of type 'string'.

    Editor can highlight errors as you work!
*/

Typescript

class Student {
    fullName: string;
    constructor(public firstName, 
        public middleInitial, 
        public lastName) { 
          this.fullName = firstName + " " 
                        + middleInitial + " " 
                        + lastName; 
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " 
           + person.firstName + " " 
           + person.lastName;
}

var user = new Student("Jane", "M.", "User");
console.log(greeter(user)); // "Hello Jane User"