This document discusses exploring ES6 features including classes, modules, arrow functions, template literals, destructuring, iterators, generators, and proxies. It provides code examples of implementing classes, modules, and other features in ES5 syntax compared to the cleaner ES6 syntax. It also discusses setting up a development environment with Node.js, npm, and Babel to use ES6 features and introduces more advanced topics like proxies and generators.

1. Exploring ES6

2. Playground
4 npm install babel-node
4 http://babeljs.io/repl
4 chrome://flags/#enable-javascript-harmony
4 Scratchpad in Firefox

3. Favourite ES6 features
https://docs.google.com/forms/d/
1bhmqePIstN9NNxK4QX1-F8XJcJ8C0HdPao01gAAoh3I/
viewanalytics
-- Axel Rauschmayer

5. Begin from some sugar syntax

6. 4 Classes
4 Modules
4 Arrow functions
4 Template literal
4 Destructuring

7. Classes
// ES3
var inherit = (function() {
var F = function() {}
return function(C, P) {
F.prototype = P.prototype
C.prototype = new F
C.prototype.constructor = C
}
})()
function Overlay(options) {}
function Dialog(options) {
Overlay.call(this, options)
}
inherit(Dialog, Overlay)

8. Classes
// ES5
function Dialog(options) {
Overlay.call(this, options)
}
Dialog.prototype = Object.create(Overlay.prototype)
Dialog.prototype.constructor = Overlay

9. Classes
// ES6
class Overlay {
constructor(options) {}
}
class Dialog extends Overlay {
constructor(options) {
super(options)
}
open() {}
}

10. Classes
mixin
import mixin from 'mixin'
class Overlay {
constructor(options) {}
}
class Dialog extends mixin(Overlay, EventEmitter) {
constructor(options) {
super(options)
}
open() {}
}

11. Classes
// getter/setter
class Polygon {
constructor(height, width) {
this.height = height
this.width = width
}
get area() {
return this.calcArea()
}
calcArea() {
return this.height * this.width
}
}

12. Classes
// static methods
class Point {
constructor(x, y) {
this.x = x
this.y = y
}
static distance(a, b) {
const dx = a.x - b.x
const dy = a.y - b.y
return Math.sqrt(dx * dx + dy * dy)
}
}

13. Modules
// CommonJS
// export
// animationFrame.js
module.exports = {
requestAnimationFrame: window.requestAnimationFrame,
cancelAnimationFrame: window.cancelAnimationFrame
}
// import
var raf = require('./animationFrame').requestAnimationFrame

14. Modules
// es6
// export
export requestAnimationFrame
export cancelAnimationFrame
// import
import { requestAnimationFrame as raf, cancelAnimationFrame as caf } from './animationFrame'
// export
export default React
// import
import React, { Component } from 'react'

15. Arrow functions
()=>{}
Identifier => Expression
// ES5
var total = values.reduce(function (a, b) {
return a + b;
}, 0);
// ES6
var total = values.reduce((a, b) => a + b, 0);

16. Template
4 multiple lines
4 expression inside
`Error Code: ${exception.code},
Error Message: ${exception.message}`

17. Destructuring
// array
var [a, , b] = [1,2,3]
[a, b] = [b, a]
// object
let options = {closeOnPressingESC: false, closeOnClicking: true}
let { closeOnPressingESC: esc, closeOnClicking: click } = options

18. Setup
4 npm init
4 npm install webpack babel-loader
4 touch webpack.config.js

19. var webpack = require('webpack'),
path = require('path')
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
loaders: [{
loaders: ['babel'],
include: path.join(__dirname, 'src')
}]
}
}

20. More

21. 4 Iterator
4 Generator
4 Proxy

22. Iterator
// for in (not recommended)
for (var index in values) {
console.log(values[index])
}
// for of
for (var value of values) {
console.log(value)
}

23. Iterator
Array, String, Map, Set, Array-like objects(NodeLists...)

24. Iterator
class RangeIterator {
constructor(start, stop) {
this.value = start
this.stop = stop
}
[Symbol.iterator]() { return this; }
next() {
var value = this.value
if (value < this.stop) {
this.value++
return {done: false, value: value}
} else {
return {done: true, value: undefined}
}
}
}
function range(start, stop) {
return new RangeIterator(start, stop)
}

25. Generator
function* range(start, stop) {
for (var i = start; i < stop; i++)
yield i
}
Generators are iterators.
All generators have a built-in implementation of .next()
and Symbol.iterator.

26. Generator
request('/api/user/~me', function(res) {
request('/api/statuses/' + res.id, function(res) {
// ...
})
})

27. Generator
function fetch(url) {
request(url, function(response){
it.next(response)
})
}
function *main() {
var result1 = yield fetch('/api/user/~me')
var result2 = yield request('/api/statuses/' + result1.id )
}
var it = main()
it.next()

28. Generator
function runGenerator(g) {
var it = g(), ret
(function iterate(val){
ret = it.next( val )
if (!ret.done) {
if ('then' in ret.value) {
ret.value.then( iterate )
}
else {
setTimeout( function(){
iterate( ret.value )
}, 0 )
}
}
})()
}

29. Generator
runGenerator(function *main(){
var result1 = yield fetch('/api/user/~me')
var result2 = yield fetch('/api/statuses/' + result1.id )
})
https://github.com/tj/co

30. Proxy
setter/getter in ES5
// ES5
var person = {}
Object.defineProperty(person, 'age', {
set: function(value) {
if (value > 200) {
throw new RangeError('seems invalid')
}
}
})

31. Proxy
setter/getter, the different way
let validator = {
set(obj, prop, value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
throw new TypeError('The age is not an integer')
}
if (value > 200) {
throw new RangeError('The age seems invalid')
}
}
// The default behavior to store the value
obj[prop] = value
}
}
let person = new Proxy({}, validator)

32. Proxy
new Proxy(target, handler)
4 handler.getPrototypeOf()
4 handler.setPrototypeOf()
4 handler.isExtensible()
4 handler.preventExtensions()
4 handler.getOwnPropertyDescriptor()

33. Proxy
4 handler.defineProperty()
4 handler.has()
4 handler.get()
4 handler.set()
4 handler.deleteProperty()
4 handler.enumerate()
4 handler.ownKeys()

34. Proxy
4 handler.apply()
4 handler.construct()

35. References
4 ES6 in depth
4 Learn ECMAScript 6 inside and out
4 Meta programming with ECMAScript 6 proxies