1 of 39

The Future

of Angular

Miško Hevery

misko@hevery.com

http://goo.gl/8oqVDn

2 of 39

Goal

  • Love for everyone�
  • Lower the cost of writing apps, not only to write more apps, but to write apps which would have not been written.

​

Make world better through technology

3 of 39

Disclaimer

  • This is highly speculative.�
  • The finished product will look different.�
  • It will be built far far in the future.

4 of 39

Agenda

  • Browsers�
  • Standards�
  • Community�
  • Ideas (a bit crazy)

5 of 39

Browsers

6 of 39

Support

Browsers

  • Modern Browsers Only�
  • Old browsers supported through �Angular v1.x branch �
  • Allows us to push the envelope of possible

7 of 39

Standards

8 of 39

Web Components

Standards

  • Shadow DOM�
  • document.register()�
  • <template>�
  • Packaging standard

9 of 39

Web Components

Standards

  • content re-projection => transclusion�
  • Web Components are just elements�
  • Angular acts as a facade: �Components => Web Components

10 of 39

Object.observe

Standards

  • Object.observe influenced by Angular�
  • Any object no getters/setters/proxies�
  • Asynchronous�
  • Angular does not have to do dirty checking

11 of 39

DOM Mutation Observers

Standards

  • Get notified of structural changes�
  • 3rd party components work out-of-box�
  • Angular compiler => implementation detail

12 of 39

Polyfill

Standards

  • Shadow DOM: https://github.com/Polymer/ShadowDOM�
  • Object.observe:�https://github.com/Polymer/observe-js�
  • DOM Mutation Observers:�https://github.com/Polymer/MutationObservers

13 of 39

Polyfill

Standards

  • transclusion => Shadow DOM�
  • $digest => Object.observe�
  • $compile => DOM Mutation Observers

14 of 39

Community

15 of 39

Current State

Community

  • Angular has innovative features
    • Directives
    • Dependency Injection
    • DataBinding
    • Expression Evaluator
    • minErr�
  • All or nothing proposition

16 of 39

Break it up

Community

  • Break it up into small libraries�
  • Angular becomes an umbrella project�
  • Community benefits

17 of 39

Reuse

Community

  • Community can build better Angular�
  • Better implementation for each piece�
  • Easier to create derivative work

18 of 39

Ideas�(the crazy kind)

19 of 39

Asynchronous DI

Ideas

GOAL

Make lazy loading of code easy

20 of 39

Asynchronous DI

Ideas

  • DI vs AMD�
  • AMD => in what order to load code� (asynchronous)�
  • DI => In which order to instantiate classes� (synchronous)

21 of 39

Asynchronous DI

Ideas

module {

size: 5,

users: Future<XHR> ...,

storage: Future<Code>

}

class App(size, users, storage) {

…

}

22 of 39

Zone

Ideas

GOAL�

Remove $apply/$digest�Use existing libraries in Angular

Make stack traces sane

23 of 39

Zone

Ideas

future1 =xhr.get(url).then(fn);

​

var ngZone = new AngularZone();

ngZone.run(function(){

future2 = xhr.get(url).then(fn);

});

24 of 39

Zone

Ideas

  • Monkey patch all async API in browser�
  • Propagates zone across callbacks�
  • Zone is callback-chain-local variable�
  • Detect VM turns => Object.observe polyfill

25 of 39

Zone

Ideas

  • DefaultZone: behaves just like browser�
  • StackTraceZone: long-stack-traces�
  • AngularZone: applies data-binding�
  • MockZone: makes testing your code easy

26 of 39

ES6

Ideas

  • Feature: Classes�
  • Feature: Modules�
  • Makes DI better�
  • https://github.com/google/traceur-compiler

27 of 39

ES6

Ideas

class MyApp {

constructor(size, users, storage) {

...

}

}

28 of 39

ES6 & Annotations

Ideas

@NgDirective({

selector: '[ng-bind]',

map: {'ng-bind': '@ngBind'} })

class NgBindDirective {

@Inject([Element])

constructor(element) { … }

set ngBind(value) { element.text=value; }

}

29 of 39

ES6 & Types???

Ideas

@NgDirective({

selector: ['ng-bind'],

map: {'ng-bind': '@ngBind'} })

class NgBindDirective {

constructor(element:Element) { … }

set ngBind(value) { element.text=value; }

}

30 of 39

ES6 & Types???

Ideas

function NgBindDirective(element)…;

NgBindDirective.__annotation__ = {

type: new NgDirective(...)

arguments: [{type:Element}]

}

31 of 39

ES6 & Contracts

Ideas

  • Static types spread like cancer�
  • Types don't help with non-typed libraries�

32 of 39

ES6 & Contracts

Ideas

  • Static Types => TypeScript (structural)�
  • Optional Types => Dart (nominal)�
  • Type inference => (Static Types with less typing)�
  • JSON (and 3rd party libs) have no type

33 of 39

ES6 & Contracts

Ideas

  • Dynamic Types or Contracts�
  • Really just an assert()�
  • Contract is a function which is evaluated at type declaration

34 of 39

ES6 & Contracts

Ideas

var a = …;

String b = 'foo';

JQuery c = $('#foo');

RegExp d = '/some\s+(regexp?)/';

List<CSS> = ['.foo', 'a[b]'];

35 of 39

ES6 & Contracts

Ideas

class MyController {

constructor(e:Element, s:CSS) {

JQuery b = $(e.find(s);

}

}

36 of 39

ES6 & Contracts

Ideas

  • Contracts are asserts
    • No cost at production
    • Verification in development runtime only�
  • Contracts are composable functions
    • Assert a list of CSS
    • Assert the JSON has right structure

37 of 39

ES6.next???

Ideas

  • If Angular uses ES6
    • It can benefit from adding
      • Annotations
      • Contracts
    • To create a seamless DI/lazy code loading story

38 of 39

Questions?

39 of 39

Fin