ES.next - class, arrow, quasi etc.








Presenter Notes

This slide is based on rev9 draft

Presenter Notes

Preparation 1

  • You can try harmony syntax by esprima
  • Instructions
    • git clone https://github.com/ariya/esprima.git
    • cd esprima
    • git checkout -b harmony origin/harmony
    • open demo/parse.html

Presenter Notes

Preparation 2

  • Yesterday,
    I've implemented Template strings for esprima
  • If you would like to use quasi (2012/08/12)
    • git remote add constellation https://github.com/Constellation/esprima.git
    • git fetch constellation
    • git checkout -b harmony-template-strings constellation/harmony-template-strings

Presenter Notes

class Class extends ECMAScript

Presenter Notes

Class - overview

// extends Base
class Derived extends Base {
  // constructor
  constructor() {
    this.type = 'derived';
  }

  sayHello() {
    console.log('derived');
    // we can call super of own method
    super();
  }

  sayHello2() {
    // we can call other super mathod
    super.sayHello();
  }
}

Presenter Notes

DEMO - esprima harmony

Presenter Notes

How to resolve super

Presenter Notes

Abstract code (not precise)

  • sayHello method function
    holds own method name and home

    function sayHello() {
  ...
}
sayHello.__MethodName__ = 'sayHello';
sayHello.__Home__ = Derived.prototype;
Derived.prototype.sayHello = sayHello;

Presenter Notes

MethodEnvironment

Presenter Notes

MethodEnvironment summary

  • Holds method.[[Home]] object
    as environment.[[HomeObject]]
  • Holds method.[[MethodName]] object
    as environment.[[MethodName]]
  • environment.[[GetSuperBase]]() returns
    environment.[[HomeObject]].[[Prototype]]

Presenter Notes

Reference - internal type

Presenter Notes

Super reference - super()

Presenter Notes

Super reference - super.sayHello()

Presenter Notes

Conclusion - Class

  • Described
    • class overview
    • super resolution

Presenter Notes

Next => ArrowFunction

Presenter Notes

ArrowFunction - overview

class Dog {
  bow(n) {
    console.log(n + ' bow!');
  }

  say() {
    // `this` is Dog instance
    // arrow can take expression as body
    [1, 2, 3, 4].forEach(e => this.bow(e));

    // this also works fine
    () => {
      this.bow(100);
    };
  }
}

Presenter Notes

DEMO - esprima harmony

Presenter Notes

Declarative & Method Environment

  • Declarative Environment
    • Block, ArrowFunction
    • doesn't hold thisValue
  • Method Environment
    • normal Function
    • holds thisValue

Presenter Notes

This Resolution

  • Searching thisValue recursively

Presenter Notes

Conclusion - ArrowFunction

  • Described
    • ArrowFunction overview
    • this resolution

Presenter Notes

Last`template strings`

Presenter Notes

template strings - overview

// using expression in ${}
let hello = `Hello ${name}!`;

// We can write raw string
let raw = String.raw`This is
raw string including
LineTerminator`;

// And we can use it like this
let html = escapeHTML`<p>${url}</p>`;

Presenter Notes

DEMO esprima harmony with my patch

Presenter Notes

raw & cooked

  • QuasiLiteral has 2 modes
    • cooked
      • interpret escape sequences
    • raw
      • escape sequences are interpreted literally

Presenter Notes

QuasiLiteral CallSite

  • // example quasi literal
let name = "Yusuke Suzuki";
re`hello ${name}!\nGood afternoon.`;

  • // comes to re function
cooked = ['hello ', '!\nGood afternoon.'];
cooked.raw = ['hello ', '!\\nGood afternoon'];
re(cooked, name);

Presenter Notes

String.raw impl (not precise)

function StringRaw(callSite) {
  var raw = callSite.raw;
  var len = raw.length;
  if (!len) {
    return '';
  }
  var next = 0;
  var result = '';
  while (true) {
    result += raw[next];
    ++next;
    if (next === len) {
      return result;
    }
    result += arguments[next];
  }
}

Presenter Notes

Conclusion - template strings

  • Described
    • template strings overview
    • raw & cooked modes
    • how callsite works

Presenter Notes

shibuya - ES.next

Presenter Notes

WIP: Shibuya ES.next engine

  • Implement ES.next engine in ES5.1
    • To understand ES.next interpretation algorithm
    • To research how to create ES.next engine efficiently in my engine lv5 written in C++
  • GitHub
  • Use esprima as parser
  • Now implementing...
    • very poor
    • A lot of functions are not implemented yet.

Presenter Notes

DEMO - Shibuya

Presenter Notes

Conclusion

  • Described
    • class system
    • arrow function
    • quasi literal (template strings)

Presenter Notes

Thank you!

Presenter Notes