Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ES6 Deep Dive

dherman
August 30, 2012

ES6 Deep Dive

A deep dive into three features of ECMAScript Edition 6: symbols, structs, and generators.

dherman

August 30, 2012
Tweet

More Decks by dherman

Other Decks in Programming

Transcript

  1. Dave Herman
    ES6 Deep Dive
    Symbols, Structs, Generators

    View Slide

  2. View Slide

  3. About me
    • @littlecalculist
    • http://calculist.org
    • http://github.com/dherman
    • Mozilla Research
    • TC39
    • Also…

    View Slide

  4. In print this December
    http://effectivejs.com

    View Slide

  5. Symbols

    View Slide

  6. JS property names are strings
    var obj = { foo: 42 };
    obj["foo"]; // 42

    View Slide

  7. The all-powerful _ character
    function Dict() {
    this._entries = {};
    }
    Don’t touch me,
    I’m private!

    View Slide

  8. When you mean business…
    __proto__
    private SO PRIVATE
    REALLY GUYS
    SOOO TOTALLY
    PRIVATE
    private!

    View Slide

  9. Conventions are no guarantee
    function SuperClass() {
    this._data = "superclass private data";
    }
    function SubClass() {
    SuperClass.call(this);
    this._data = "subclass private data"; // collision!
    }
    SubClass.prototype = Object.create(SuperClass.prototype);

    View Slide

  10. Closures for information hiding
    function SuperClass() {
    var data = "private data";
    this.method = function() {
    /* ... */ data /* ... */
    };
    }
    no sharing: one
    method per
    instance!

    View Slide

  11. Introducing symbols

    View Slide

  12. Introducing symbols
    var sym = new Symbol("data");

    View Slide

  13. Introducing symbols
    var sym = new Symbol("data");
    function SuperClass() {
    this[sym] = "private data";
    }

    View Slide

  14. Introducing symbols
    var sym = new Symbol("data");
    function SuperClass() {
    this[sym] = "private data";
    }
    SuperClass.prototype.method = function() {
    /* ... */ this[sym] /* ... */
    };

    View Slide

  15. Introducing symbols
    var obj = new SuperClass();
    "data" in obj; // false
    "_data" in obj; // false
    sym in obj; // true

    View Slide

  16. Performance
    • Engines already do string interning
    • Convertible to a fixed offset with inline caches

    View Slide

  17. Proposal: scoped symbols
    private @sym;
    function SuperClass() {
    this.@sym = "private data";
    }
    SuperClass.prototype.method = function() {
    /* ... */ this.@sym /* ... */
    };

    View Slide

  18. Structured binary data

    View Slide

  19. Typed arrays
    var a = new Uint32Array(1024);
    a[17] = 42;

    View Slide

  20. Typed arrays
    var vertices = new Float32Array([
    -1.0, -1.0, 0.0, // vertex 1
    0.0, 1.0, 0.0, // vertex 2
    1.0, -1.0, 0.0 // vertex 3
    ]);
    -1.0
    -1.0
    0.0
    0.0
    1.0
    0.0
    1.0
    -1.0
    0.0
    0
    4
    8
    12
    16
    20
    24
    28
    32

    View Slide

  21. Structs
    var Point = struct({
    x: float32,
    y: float32,
    z: float32
    });
    var origin = new Point(0.0, 0.0, 0.0);
    origin.x; // 0.0
    origin.y; // 0.0

    View Slide

  22. Arrays of structs
    var vertices = new Point.array([
    { x: -1.0, y: -1.0, z: 0.0 },
    { x: 0.0, y: 1.0, z: 0.0 },
    { x: 1.0, y: -1.0, z: 0.0 }
    ]);
    -1.0
    -1.0
    0.0
    0.0
    1.0
    0.0
    1.0
    -1.0
    0.0
    0
    4
    8
    12
    16
    20
    24
    28
    32

    View Slide

  23. JIT compilers — types

    View Slide

  24. Applications of structs
    • WebGL data
    • File and network I/O
    • Compiling other languages to JS

    View Slide

  25. Generators

    View Slide

  26. Lies, lies, lies
    “JS doesn’t have concurrency.”
    “JS is single-threaded so it can’t have race conditions.”
    “Event-based programming is easy.”

    View Slide

  27. Download three files
    load("foo", function(foo) {
    load("bar", function(bar) { // why wait?
    load("baz", function(baz) {
    use([foo, bar, baz]);
    });
    });
    });

    View Slide

  28. Download three files
    load("foo", function(foo) {
    load("bar", function(bar) { // why wait?
    load("baz", function(baz) {
    use([foo, bar, baz]);
    });
    });
    });

    View Slide

  29. Download three files
    var files = [];
    ["foo", "bar", "baz"].forEach(function(url, i) {
    load(url, function(file) {
    files.push(file); // no!
    if (i === 3) // no!
    use(files);
    });
    });

    View Slide

  30. Download three files
    var files = [];
    ["foo", "bar", "baz"].forEach(function(url, i) {
    load(url, function(file) {
    files[i] = file;
    if (files.length === 3) // still no!
    use(files);
    });
    });

    View Slide

  31. Download three files
    var files = [], count = 0;
    ["foo", "bar", "baz"].forEach(function(url, i) {
    load(url, function(file) {
    files[i] = file;
    if (++count === 3)
    use(files);
    });
    });

    View Slide

  32. JavaScript is concurrent
    Cooperative concurrency: easier, but not easy!
    Handlers run sequentially but start concurrently.
    Shared state 㱺 race conditions 㱺 pain and suffering

    View Slide

  33. task.js: Beautiful concurrency
    spawn(function*() {
    var files = yield join(load("foo"), load("bar"), load("baz"));
    use(files);
    });
    http://taskjs.org

    View Slide

  34. task.js: Beautiful concurrency
    spawn(function*() {
    var files = yield join(load("foo"), load("bar"), load("baz"));
    use(files);
    });
    create a task that
    can be paused
    pause!
    http://taskjs.org

    View Slide

  35. Generator functions
    function* evenNumbers() {
    for (var next = 0; true; next += 2) {
    yield next;
    }
    }

    View Slide

  36. Generator functions
    function* evenNumbers() {
    for (var next = 0; true; next += 2) {
    yield next;
    }
    }

    View Slide

  37. Generator functions
    function* evenNumbers() {
    for (var next = 0; true; next += 2) {
    yield next;
    }
    }
    evenNumbers();

    View Slide

  38. Generator functions
    function* evenNumbers() {
    for (var next = 0; true; next += 2) {
    yield next;
    }
    }
    evenNumbers();

    View Slide

  39. Generators
    function* f() {
    }

    View Slide

  40. Generators
    function* f() {
    }
    .next:
    var g = f();

    View Slide

  41. Generators
    function* evenNumbers() { /* ... */ }
    var g = evenNumbers();
    g.next(); // 0
    g.next(); // 2
    g.next(); // 4
    starts out paused

    View Slide

  42. Lazy iteration
    Dict.prototype.keys = function*() {
    for (var key in this._entries)
    yield key;
    };

    View Slide

  43. Iterators work with for-of
    var dict = new Dict();
    // ...
    for (var key of dict.keys()) {
    console.log(key + ": " + dict.get(key));
    }

    View Slide

  44. Pausing is powerful
    load("config.json", function(config) {
    db.lookup(JSON.parse(config).table, username, function(user) {
    load(user.id + ".png", function(avatar) {
    // ...
    });
    });
    });

    View Slide

  45. Pausing is powerful
    load("config.json", function(config) {
    db.lookup(JSON.parse(config).table, username, function(user) {
    load(user.id + ".png", function(avatar) {
    // ...
    });
    });
    });
    later
    later
    later

    View Slide

  46. Pausing is powerful
    load("config.json", function(config) {
    db.lookup(JSON.parse(config).table, username, function(user) {
    load(user.id + ".png", function(avatar) {
    // ...
    });
    });
    });
    later
    later
    later

    View Slide

  47. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });

    View Slide

  48. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });

    View Slide

  49. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });

    View Slide

  50. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });

    View Slide

  51. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });

    View Slide

  52. Pausing with promises
    load("config.json")
    .then(function(config) {
    return db.lookup(JSON.parse(config).table);
    })
    .then(function(user) { return load(user.id + ".png"); })
    .then(function(avatar) { /* ... */ });

    View Slide

  53. Tasks yield promises
    spawn(function*() {
    var config = JSON.parse(yield load("config.json"));
    var user = yield db.lookup(config.table, username);
    var avatar = yield load(user.id + ".png");
    // ...
    });

    View Slide

  54. Tasks yield promises
    spawn(function*() {
    var config = JSON.parse(yield load("config.json"));
    var user = yield db.lookup(config.table, username);
    var avatar = yield load(user.id + ".png");
    // ...
    });

    View Slide

  55. Tasks yield promises
    spawn(function*() {
    var config = JSON.parse(yield load("config.json"));
    var user = yield db.lookup(config.table, username);
    var avatar = yield load(user.id + ".png");
    // ...
    });
    looks like a
    synchronous API!

    View Slide

  56. What about errors?
    load("foo", function(foo) {
    load("bar", function(bar) {
    load("baz", function(baz) {
    use([foo, bar, baz]);
    }, function(err) { /* ... */ });
    }, function(err) { /* ... */ });
    }, function(err) { /* ... */ });

    View Slide

  57. What about errors?
    load("foo", function(err, foo) {
    if (err) return onError(err);
    load("bar", function(err, bar) {
    if (err) return onError(err);
    load("baz", function(err, baz) {
    if (err) return onError(err);
    use([foo, bar, baz]);
    });
    });
    });

    View Slide

  58. Error handling with promises
    var p = load("config.json")
    .then(function(config) { /* ... */ }
    .then(function(user) { /* ... */ })
    .then(function(avatar) { /* ... */ });
    when(p, function(result) { /* ... */ },
    function(err) { /* ... */ });

    View Slide

  59. Error handling with tasks
    spawn(function*() {
    try {
    var config = JSON.parse(yield load("config.json"));
    var user = yield db.lookup(config.table, username);
    var avatar = yield load(user.id + ".png");
    // ...
    } catch (e) { /* ... */ }
    });

    View Slide

  60. Wait for multiple events
    spawn(function*() {
    var [foo, bar, baz] = yield join(load("foo"),
    load("bar"),
    load("baz"));
    // ...
    });

    View Slide

  61. Purposefully race events
    spawn(function*() {
    try {
    var foo = yield select(load("foo"), timeout(3000));
    // ...
    } catch (e) { /* timed out */ }
    });

    View Slide

  62. Generators
    • Interruptible computations 㱺 custom iterators
    • Pausing with yield 㱺 concurrency minus the callbacks

    View Slide

  63. Something completely
    different

    View Slide

  64. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]

    View Slide

  65. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]

    View Slide

  66. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "[object Object]"

    View Slide

  67. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "[object Object]"

    View Slide

  68. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "[object Object]"
    true true
    true

    View Slide

  69. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "[object Object]"
    3

    View Slide

  70. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "j"

    View Slide

  71. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "false"
    "j"

    View Slide

  72. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "false"
    3
    "j"

    View Slide

  73. ({}+[])[!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]
    "j" "s"

    View Slide

  74. !
    +
    {
    }
    [
    ]
    (
    )
    \n
    === JavaScript

    View Slide

  75. Um. So… why?

    View Slide

  76. • No reason.
    Um. So… why?

    View Slide

  77. • Yosuke Hasegawa: JSF*ck
    • Patricio Palladino: Hieroglyphy
    • Me: pure JS, no browser API’s
    Not the first deranged weirdo

    View Slide

  78. > String+[]
    "function String() { [native code] }"
    "S"

    View Slide

  79. > "".constructor+[]
    "function String() { [native code] }"
    "S"

    View Slide

  80. > ""["constructor"]+[]
    "function String() { [native code] }"
    "S"

    View Slide

  81. > [].slice.call(""["constructor"]+[])
    ["f","u","n","c","t","i","o","n"," ","S","t","r", /* ... */]
    "S"

    View Slide

  82. > [].slice.call(""["constructor"]+[])
    [" ","f","u","n","c","t","i","o","n"," ","S","t","r", /* ... */]
    "S"

    View Slide

  83. > function nonWhitespace(s) { return !/^\s*$/.test(s) }
    > [].slice.call(""["constructor"]+[]).filter(nonWhitespace)
    ["f","u","n","c","t","i","o","n","S","t","r", /* ... */]
    "S"

    View Slide

  84. > Number("f")
    NaN
    > Number(" ")
    0
    > isNaN("f")
    true
    > isNaN(" ")
    false
    "S"

    View Slide

  85. > [].slice.call(""["constructor"]+[]).filter(isNaN)
    ["f","u","n","c","t","i","o","n","S","t","r", /* ... */]
    "S"

    View Slide

  86. > [].slice.call(""["constructor"]+[])
    .filter(Function("return isNaN")())
    ["f","u","n","c","t","i","o","n","S","t","r", /* ... */]
    "S"

    View Slide

  87. > [].slice.call(""["constructor"]+[])
    .filter(Array.constructor("return isNaN")())
    ["f","u","n","c","t","i","o","n","S","t","r", /* ... */]
    "S"

    View Slide

  88. > [].slice.call(""["constructor"]+[])
    .filter([].constructor.constructor("return isNaN")())
    ["f","u","n","c","t","i","o","n","S","t","r", /* ... */]
    "S"

    View Slide

  89. > [].slice.call(""["constructor"]+[])
    .filter([].constructor.constructor("return isNaN")())[8]
    "S"
    "S"

    View Slide

  90. > (9).toString()
    "9"
    > (15).toString(16)
    "f"
    > (16).toString(17)
    "g"
    "p"

    View Slide

  91. > (25).toString(26)
    "p"
    "p"

    View Slide

  92. > (25)["toString"](26)
    "p"
    "p"

    View Slide

  93. > escape(" ")
    "%20"
    "%"

    View Slide

  94. > Function("return escape")()(" ")
    "%20"
    "%"

    View Slide

  95. > Function("return escape")()(" ")[0]
    "%"
    "%"

    View Slide

  96. > Function("return unescape")()("%3b")
    ";"
    Any ASCII character

    View Slide

  97. > (({}+[])[!![]+!![]+!![]]+[]+(![]+[])[+!![]]+(+(!![]+!![]+!![]+[]+
    (+!![])))[(!![]+[])[+![]]+[]+({}+[])[+!![]]+[][(![]+[])[!![]+!![]
    +!![]]+[]+(![]+[])[!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!!
    []]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]]
    [({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+(![]+[])[+!![]]+(![]+[])[!![]
    +!![]]+(![]+[])[!![]+!![]]](+[![]]+[]+(!![]+[])[({}+[])[!![]+!![]
    +!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!!
    []+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+
    ({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+
    (!![]+[])[+!![]]])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!!
    []+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!!
    []]+(!![]+[])[+!![]]]([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+
    [])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])
    [+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]
    +!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+
    [])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]
    +(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]
    +[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+
    [])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!!
    []+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][!

    View Slide

  98. []]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]
    +[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))
    ())[+(+!![]+[]+(+!![]))]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+
    [])[!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[+!![]]+[][(![]+[])[!![]
    +!![]+!![]]+[]+(![]+[])[!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]
    +!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]]
    [({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+(![]+[])[+!![]]+(![]+[])[!![]
    +!![]]+(![]+[])[!![]+!![]]]((!![]+[])[({}+[])[!![]+!![]+!![]+!![]
    +!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!!
    []]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!!
    []+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])
    [+!![]]]+[])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!![]+!!
    []]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!![]]+
    (!![]+[])[+!![]]]([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])
    [+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+!
    []]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]
    +!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+[])[!!
    []+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+
    [])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])
    [+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])
    [+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!![

    View Slide

  99. ]+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][!
    []]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]
    +[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))
    ())[+(+!![]+[]+(!![]+!![]+!![]))]](+(!![]+!![]+!![]+[]+(!![]+!!
    [])))+(![]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+({}+[])[!![]+!![]+!!
    []+!![]+!![]]+(!![]+[])[+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!!
    []]+(+(!![]+!![]+[]+(!![]+!![]+!![]+!![]+!![])))[(!![]+[])[+![]]+[]
    +({}+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+[])[!![]+!![]]+
    ([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]
    +!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]
    +[]+(![]+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]](+[![]]
    +[]+(!![]+[])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+
    ([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+
    [])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!!
    []+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]])[(![]+[])[+![]]+[]+
    ([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+
    [])[+![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+!![]]]([][({}+[])[!!
    []+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+
    [])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])
    [+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])
    [+!![]]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+

    View Slide

  100. [])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])
    [+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]
    +!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+
    [])[+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+
    [])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+!![]]+({}+[])[!![]+!![]+!!
    []+!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]
    +[])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+(+!![]))]+(!![]+[])[+!
    []]+(!![]+[])[+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+([][!
    []]+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+[])[!![]+!![]]+
    ([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]
    +!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]
    +[]+(![]+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]]((!![]+
    [])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+
    [])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!!
    []]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])
    [+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]]+[])[(![]+[])[+![]]+[]+([][!
    []]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+!
    []]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+!![]]]([][({}+[])[!![]+!!
    []+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])
    [!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+!
    []]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!!

    View Slide

  101. []]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])
    [+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+!
    []]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]
    +!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])
    [+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+[])
    [+![]]+(!![]+[])[+!![]]+([][![]]+[])[+!![]]+({}+[])[!![]+!![]+!![]
    +!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+
    [])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+(!![]+!![]+!![]))]](+
    (!![]+!![]+!![]+[]+(+![])))+(!![]+[])[+![]])
    "javascript"

    View Slide

  102. (({}+[])[!![]+!![]+!![]]+[]+(![]+[])[+!![]]+(+(!![]+!![]+!![]+[]+(+!![])))[(!![]+[])[+![]]+[]+({}+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+
    [])[!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!!
    []]+[]+(![]+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]](+[![]]+[]+(!![]+[])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+
    [])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])
    [+!![]]+(!![]+[])[+!![]]])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!![]]+
    (!![]+[])[+!![]]]([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!!
    []]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+
    [])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]
    +[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][!
    []]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+
    (+!![]))]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+[])[!![]
    +!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+(!
    []+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]]((!![]+[])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])
    [!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!!
    []]]+[])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+!![]]]
    ([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])
    [+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][!
    []]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+
    [])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+!![]]+
    ({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+(!![]+!![]+!!
    []))]](+(!![]+!![]+!![]+[]+(!![]+!![])))+(![]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+!![]]+([][![]]+[])
    [!![]+!![]+!![]+!![]+!![]]+(+(!![]+!![]+[]+(!![]+!![]+!![]+!![]+!![])))[(!![]+[])[+![]]+[]+({}+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+[])
    [!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+
    []+(![]+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]](+[![]]+[]+(!![]+[])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])
    [+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!!
    []]+(!![]+[])[+!![]]])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!![]]+(!![]
    +[])[+!![]]]([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+
    ([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])
    [+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+
    [])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][!
    []]+[])[+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+
    (+!![]))]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[+!![]]+[][(![]+[])[!![]+!![]+!![]]+[]+(![]+[])[!![]
    +!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[!![]+!![]+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+(!
    []+[])[+!![]]+(![]+[])[!![]+!![]]+(![]+[])[!![]+!![]]]((!![]+[])[({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])
    [!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!!
    []]]+[])[(![]+[])[+![]]+[]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+!![]]]
    ([][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][![]]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])
    [+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+[])[+!![]]+(!![]+[])[+!![]]][({}+[])[!![]+!![]+!![]+!![]+!![]]+[]+({}+[])[+!![]]+([][!
    []]+[])[+!![]]+(![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+![]]+({}+[])[!![]+!![]+!![]+!![]+!![]]+(!![]+[])[+![]]+({}+
    [])[+!![]]+(!![]+[])[+!![]]]((!![]+[])[+!![]]+[]+(!![]+[])[!![]+!![]+!![]]+(!![]+[])[+![]]+([][![]]+[])[+![]]+(!![]+[])[+!![]]+([][![]]+[])[+!![]]+
    ({}+[])[!![]+!![]+!![]+!![]+!![]+!![]+!![]]+([][![]]+[])[!![]+!![]+!![]+!![]+!![]]+(![]+[])[!![]+!![]+!![]]+(+[![]]))())[+(+!![]+[]+(!![]+!![]+!!
    []))]](+(!![]+!![]+!![]+[]+(+![])))+(!![]+[])[+![]])

    View Slide

  103. View Slide