ES6 syntax is consistent

App.messageController = Ember.Object.create
  message: "Hello, world!"

# Compiles to:
# App.messageController = Ember.Object.create({
#   message: "Hello, world!"
# });

# Okay, let's refactor it and delete the message property:

App.messageController = Ember.Object.create

# Compiles to:
# App.messageController = Ember.Object.create

# Oops, your controller is now the Ember.Object#create function

# you do

set User, -> name: "John", silent: yes

# you want

set(User, function() { return {name: "John"}; }, {silent: true});

# you get

set(User, function() { return {name: "John",silent: true}; });

# how about

set User, -> 
	name: "John",
silent: yes

# nope

set(User, function() { return {name: "John"}; });
({silent: true});

# ?? (still nope)

set User, -> 
	name: "John",
	silent: yes

# maybe 

set User,
	-> name: "John"
	silent: yes

# oh, finally!

# non of the above behavior is documented in the CoffeeScript official website
# which makes it a try and error process

# In ES6, you always get what you write

# you want to update all the records:

$('#li').each ->
  update @

# but it gets translated to

$('#li').each(function() {
	return update(this);
});

# which means if update returns false, the loop breaks
# you have to be aware of that, otherwise you are fucked

Want some more?

• http://walkercoderanger.com/blog/2014/03/coffeescript-isnt-the-answer/
• http://ruoyusun.com/2013/03/17/my-take-on-coffeescript.html
• http://ceronman.com/2012/09/17/coffeescript-less-typing-bad-readability/

Syntax features

• decorators (very useful in Redux)
• await / async, no moar promises
• const
• import / export syntax (no .default for ES6 libs)
• object spread operator

Decorators

class MyApp extends React.Component {
  // ...define your main app here
}

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

// or just

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  // ...define your main app here
}

Await / async

function getRandomPonyFooArticle () {
  return new Promise((resolve, reject) => {
    request('https://ponyfoo.com/articles/random', (err, res, body) => {
      if (err) {
        reject(err); return;
      }
      resolve(body);
    });
  });
}

function printRandomArticle () {
  getRandomPonyFooArticle()
    .then(html => hget(html, {
      markdown: true,
      root: 'main'
    }))
    .then(md => marked(md, {
      renderer: new Term()
    }))
    .then(txt => console.log(txt))
}

async function read () {
  var html = await getRandomPonyFooArticle();
  var md = hget(html, {
    markdown: true,
    root: 'main'
  });
  var txt = marked(md, {
    renderer: new Term()
  });
  console.log(txt);
}

Spread operator

a = { a: 1 }
b = { b: 1, ...a }

// compiles to

b = Object.assign({ b: 1 }, a)

// No CoffeeScript equivalent, have to use Object.assign directly!