Exploring ECMAScript 6

by Bruno Buccolo

Agenda

Introduction to ES6

ECMAScript vs JavaScript

• JavaScript was developed in 1995 by Netscape.
• Microsoft released VBScript and JScript in 1996.
• In 1996, Netscape submitted JavaScript to Ecma International for consideration as an industry standard.
• In 1997, Ecma International published ECMAScript.

Evolution of ECMAScript

How do you use it?

Browser Support (ECMAScript 6)

Transpile(ECMAScript 6) => JavaScript
          

• Solves entry-barrier
• AWS Lambda old Node (Nov. 2015) http://www.rricard.me/es6/aws/lambda/nodejs/2015/11/29/es6-on-aws-lambda.html
• Mostly front-end
• Dependency for generating JS. Old IEs won't ever update.

Babel: ECMAScript 6 or Newer

ECMAScript 6 Features

• http://es6-features.org/
• https://github.com/lukehoban/es6features
• https://github.com/airbnb/javascript (style guide)

Let vs Const

let count = 1
count += 1

const number = 1
number += 1 // BOOM!

Block Scope

// Bad: `var` (Function scope)
if (something) {
  var count = 1
}

console.log(count) // 1

// Good: `let` (Block scope)
if (something) {
  let value = 123

  console.log(value)
}

console.log(value) // Uncaught ReferenceError: value is not defined

Set

let set = new Set()
set.add("hello").add("goodbye").add("hello")
set.size === 2
set.has("hello") === true

Map

let map = new Map()
map.set("hello", 42)
map.set("goodbye", 34)
map.get("goodbye") === 34
map.size === 2

for (let [key, val] of map.entries()) {
  // hack, hack, hack
}

Destructuring: Objects

// handleClick({ target: { x: 1, y: 2 } })

function handleClick(event) {
  let x = event.target.x
  let y = event.target.y

  console.log(x, y)
}


function handleClick2(event) {
  let {x, y} = event.target

  console.log(x, y)
}

function handleClick3({ target: { x, y } }) {
  console.log(x, y)
}

Destructuring: Arrays

let numbers = [1, 5, 10]
let one = numbers[0]
let ten = numbers[2]

let [one, , ten] = numbers
console.log(one, ten) // 1, 10

let [one, five] = numbers
console.log(one, five) // 1, 5

let [one, ...rest] = numbers
console.log(one, rest) // 1, [5, 10]

Generators*

function* generateId(){
  let index = 0

  while(index < 3) {
    yield index++
 }
}

let generator = generateId()

console.log(generator.next().value); // 0
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // undefined

Iterator

let fibonacci = {
    [Symbol.iterator]() {
        let pre = 0, cur = 1

        return {
           next () {
               [ pre, cur ] = [ cur, pre + cur ]

               return { done: false, value: cur }
           }
        }
    }
}

for (let n of fibonacci) {
    if (n > 10) {
      console.log(n) // 13
      break
    }
}

Arrow Functions

let evens = [0, 2, 4, 6, 8]

let odds = evens.map(even => even + 1) // [1, 3, 5, 7, 9]
let numbers = evens.map((even, index) => index) // [0, 1, 2, 3, 4]

let fives = numbers.map((number) => {
  return number * 5
}) // [0, 5, 10, 15, 20]

Promises

function after(duration = 0) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, duration)
  })
}

// serial
after(1000).then(() => {
  console.log("I'm done!")

  after(2000).then(() => {
    console.log("I'm done too!")
  })
})

// parallel
Promise.all([after(1000), after(2000)]).then(() => {
  console.log("We're done!")
})

String Interpolation

function greeter(name) {
  return `How are you, ${ name }?`
}

Class

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }

    move (x, y) {
        this.x = x
        this.y = y
    }
}

const square = new Shape(1, 4, 5)
square.move(0, 0)

Class

class Counter extends React.Component {
  constructor(props) {
    super(props)

    this.state = { count: props.initialCount }
  }

  tick() {
    this.setState({ count: this.state.count + 1 })
  }

  render() {
    return (
      <div onclick="{this.tick.bind(this)}">
        Clicks: {this.state.count }
      </div>
    )
  }
}

Counter.propTypes = {
  initialCount: React.PropTypes.number
}

Counter.defaultProps = {
  initialCount: 0
}
          

Modules *

import {sum, pi} from "lib/math"
alert("2π = " + sum(pi, pi))

ECMAScript 6vsCoffeeScript

Language by Environment

• Microsoft → TypeScript
• Clojure → ClojureScript
• Ruby → CoffeeScript

Industry

Back to CoffeeScript

Potential interop problems with ES6

Conclusion

Migrate away from CoffeeScript.

• No big supporter.
• Lack of development and roadmap.
• Language is stuck.
• Risk of problems with ES6 code.
• Not an industry standard.