THE EVOLUTION OF WEB STANDARDS

https://evolutionofweb.appspot.com/#/evolution/day​

THE MODERN WEB

Object.observe()

ECMAScript 6

Web Components

the three main web standards behind AngularJS 2

let's skip this...

The Standard

Custom Elements

HTML Imports

Templates

Shadow DOM

Hello World

@Component({
  selector: 'app'
})
@View({
  template: `
    <div>
      <h1>Hello {{ name }}!</h1>
    </div>
  `
})
class App {
  name:string;

  constructor() {
    this.name = 'World';
  }
}

Desugaring TO ES6

class App {}
App.annotations = [
  new Component({
    selector: 'app'
  }),
  new View({
    template: `
      <div>
        <h1>Hello {{ name }}!</h1>
      </div>
    `
  })
];

@Component({
  selector: 'app'
})
@View({
  template: `
    <div>
      <h1>Hello {{ name }}!</h1>
    </div>
  `
})
class App {}

Class level meta annotations are instantiated and put into Class.annotations

Desugaring TO ES5

function App() {
  this.name = 'World';
}

App.annotations = [
  new Component({
    selector: 'app'
  }),
  new View({
    template: 
      '<div>\n' +
      '  <h1>Hello {{ name }}!</h1>\n' +
      '</div>\n'
  })
];

AngularJS 1

AngularJS 2 pre alpha 22

AngularJS 2 POST alpha 22

ELEMENT Property bindings

@Component({
  selector: 'counter'
})
@View({
  template: '<input type="text" [value]="num">'
})
class App {
  num:number = 0;

  constructor() {
    setInterval(function() {
      this.num++;
    }.bind(this), 1000);
  }
}

@Component({
  selector: 'app'
})
@View({
  template: `
    <img [src]="src" [attr.data-custom]="custom">
    <input type="number" [class.invalid]="true">
    <div [style.background-color]="bgColor">Colored</div>
  `
})
class App {

  src:string = 'http://lorempixel.com/400/200/';
  custom:string = 'Random image';
  invalid:boolean = true;
  bgColor:string = '#f00';
}

More Property bindings

No 2-way bindings

EVENT Bindings

@Component({
  selector: 'app'
})
@View({
  template: `
    <button (click)="onClick()">Click me</button>
  `
})
class App {
  onClick() {
    alert('Cool!');
  }
}

More EVENT Bindings

@Component({
  selector: 'app'
})
@View({
  template: `
    <input id="inp" type="text"
           (keyup)="onKeyup($event)" (seven)="onSeven()">
  `
})
class App {
  onKeyup(event) {
    if(event.currentTarget.value.length === 7) {
      event.currentTarget.dispatchEvent(new Event('seven'));
    }
  }
  onSeven() {
    alert('Cool!');
  }
}

View references

@Component({
  selector: 'app'
})
@View({
  template: `
    <input #inp type="text">
    <button (click)="onClick(inp.value)">Click Me</button>
  `
})
class App {
  onClick(value) {
    alert(`The value is ${value}`);
  }
}

all together

@Component({
  selector: 'app'
})
@View({
  template: `
    <input #inp type="text"
           [value]="text" (keyup)="setText(inp.value)">
    <button (click)="reverseText()">Reverse</button>
  `
})
class App {
  text:string = '';

  setText(text) {
    this.text = text;
  }
  reverseText() {
    this.text = this.text.split('').reverse().join('');
  }
}

Directive

• Directives are classes which get instantiated as a response to a particular DOM structure
• Directives are usefull for encapsulating behavior
• Multiple directives can be placed on a single element

@Directive({
  selector: 'input[pass]',
  properties: { 
    passPhrase: 'pass' 
  },
  events: ['passMatch'],
  hostListeners: { 
    keyup: 'onKeyup($event.target.value)' 
  }
})
class PassInput {
  passPhrase:string;
  passMatch:EventEmitter = new EventEmitter();
  
  onKeyup(value) {
    if(value === this.passPhrase) {
      this.passMatch.next('matched');
    }
  }
}

class MatchCounter {
  count:number = 0;
}

@Component({
  selector: 'app',
  injectables: [MatchCounter]
})
@View({
  template: `<input type="text" pass="hello123"
                    (pass-match)="onPassMatch($event)">
             Matched: {{matchCounter.count}}`,
  directives: [PassInput]
})
class App {
  constructor(matchCounter:MatchCounter) {
    this.matchCounter = matchCounter;
  }

  onPassMatch(event) {
    this.matchCounter.count++;
  }
}

Viewcontainer

• Directives that use a ViewContainer can control instantiation of child views which are then inserted into the DOM
• <template> creates a ProtoView that can be instantiated 
• The child views show up as siblings of the directive in the DOM

template syntax

<ul>
  <li *foo="bar" title="text"></li>
</ul>

<ul>
  <template [foo]="bar">
    <li title="text"></li>
  </template>
</ul>

Becomes this

the new ng-repeat

<ul>
  <li *for="#item of todoService.items"></li>
</ul>

Everything is a Component!

Everything is a Component!

Injection resolution stages

pre-existing injectors

• The terminal injector throws exception or resolves @Optional to null
• The platform injector resolves browser singleton resources like cookies and location

pre-existing injectors

component injectors

element injectors

1. Dependencies on the current element
2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
3. Dependencies on component injectors and their parents until it encounters the root component
4. Dependencies on pre-existing injectors

Injection resolution Order

class ListService {
  list:Array<string> = ['One', 'Two', 'Three'];
}

@Component({
  selector: 'app',
  injectables: [ListService]
})
@View({
  template: `List: {{ list }}`
})
class App {
  constructor(listService:ListService) {
    this.list = listService.list;
  }
}

Simple injection

class HelloAbstract {
  hello() { throw new Error('Abstract!'); }
}
class HelloAmerican extends HelloAbstract {
  hello() { return 'Howdy doodie?'; }
}

@Component({
  selector: 'app',
  injectables: [
    HelloAmerican
  ]
})
@View({template: '{{ helloService.hello() }}' })
class App {
  helloService:HelloAbstract;
  constructor(helloService:HelloAmerican) {
    this.helloService = helloService;
  }
}

Using Abstract CLASSES

With @Inject

class HelloAbstract {
  hello() { throw new Error('Abstract!'); }
}
class HelloAmerican extends HelloAbstract {
  hello() { return 'Howdy doodie?'; }
}

@Component({
  selector: 'app',
  injectables: [
    HelloAmerican
  ]
})
@View({template: '{{ helloService.hello() }}' })
class App {
  helloService:HelloAbstract;
  constructor(@Inject(HelloAmerican) helloService:HelloAbstract) {
    this.helloService = helloService;
  }
}

With Injector Binding

class HelloAbstract {
  hello() { throw new Error('Abstract!'); }
}
class HelloAmerican extends HelloAbstract {
  hello() { return 'Howdy doodie?'; }
}

@Component({
  selector: 'app',
  injectables: [
    bind(HelloAbstract).toClass(HelloAmerican)
  ]
})
@View({template: '{{ helloService.hello() }}' })
class App {
  helloService:HelloAbstract;
  constructor(helloService:HelloAbstract) {
    this.helloService = helloService;
  }
}

Promise Injection

class Store {
  values:Array<number> = [1, 2, 3, 4];
  static asyncFactory() {
    return new Promise(function(resolve) {
      setTimeout(function() {
        resolve(new Store());
      }, 5000);
    });
  }
}

@Component({
  selector: 'app',
  injectables: [ bind(Store).toAsyncFactory(Store.asyncFactory) ]
})
@View({ template: 'Values: {{ values }}' })
class App {
  constructor(@InjectPromise(Store) promise:Promise<Store>) {
    promise.then(function(valueStore) {
      this.values = valueStore.values;
    }.bind(this));
  }
}

Element Level Injection

@Directive({
  selector: 'button[kamikaze]'
})
class KamikazeButton {
  constructor(elem:NgElement) {
    elem.domElement.addEventListener('click', function(event) {
      event.currentTarget.style.display = 'none';
    }.bind(this));
  }
}

@Component({ selector: 'app' })
@View({
  template: '<button kamikaze>Remove me</button>',
  directives: [KamikazeButton]
})
class App {}

More Element Level Injection

@Directive({
  selector: '[color-button]',
  hostListeners: {click: 'onClick()'}
})
class ColorButton {
  constructor(@Parent() panel:ColorPanel,
              @Attribute('color-button') color:string) {
    this.color = color;
    this.panel = panel;
  }
  onClick() {
    this.panel.bgColor(this.color);
  }
}

@Directive({ selector: 'color-panel' })
class ColorPanel {
  constructor(@PropertySetter('style.background-color') bgColor:Function) {
    this.bgColor = bgColor;
  }
}

Things need to stabilize first

• Still very experimental and things are changing a lot
• Router is not fully ported / documented yet
• No ngResource alternative yet
• Forms module has not matured yet

My Personal Opinion
Not proven yet

• Use ECMAScript 6
• Make everything a directive
• Always use controllerAs syntax
• Avoid $scope.$watch and use reactive approaches
• Only create services
• Use ES6 classes for controllers and services
• Use the new router for 1.4 (angular-new-router)