New ES6 features via BabelJS

javascript

(Robin Ward) #1

As of a65e you can now use more ES6 features rather than just modules, via the excellent 6to5 transpiler.

I’ve whitelisted the following features for Discourse because I feel they are a huge improvement over regular JS and the transpiled output is very similar to what you’d write anyway. These are all features that are approved for ES6 and will be natively supported in browsers (some features already are).

Better Object Literals

You don’t need the function word anymore!

ES5: { render: function() { ... }
ES6: { render() { ... } }

If you are just setting an object key to be a local variable, you don’t need to repeat yourself:

ES5: { topic: topic, post: post }
ES6: { topic, post }

Arrow functions

If you’re doing a simple anonymous function, Javascript can be quite verbose:

ES5: [1,2,3].map(function(x) { return x * 2; })
ES6: [1,2,3].map(x => x * 2)

Note that using the arrow automatically binds to the outer block too, so you don’t have to use self = this or bind.

const

If you know a variable never changes, prenpend it with const

ES5: var x = 123;
ES6: const x = 123;

If you do this, JSHint will enforce that the variable never changes (it’s transpiled to a var for browsers).

let

Using let you can properly scope variables to blocks. Otherwise they are scoped to the entire function.

function something() {
  if (true) {
    var x = 123; // this is scoped to the function!
    let y = 123; // this is scoped to the if block!
  }
}

Why coffescript?
(Sam Saffron) #2

This is nice, we should add this transpiler after next stable.


(Robin Ward) #3

It’s already in master. It should be very safe as it is only whitelisting those features. I confirmed that it wasn’t changing anything it shouldn’t, was compatible with our modules, etc.


(Robin Ward) #4

For all Discourse developers, I highly recommend const by default. Most of the time it’s what you want, and if you have to reuse a variable let works pretty well!

Going forward try and do this and jsHint will help you catch lots of errors!


(Kasper Peulen) #5

I was wondering if you guys have thought about using typescript. Typescript is also in some sense just a 6 to 5 transpiler, but besides this it adds optional types which makes much better tooling and debugging support possible. I understand that using a microsoft language isn’t that sexy, but even google is embracing it now for angular 2.0.


(Robin Ward) #6

I actually really like TypeScript and Flow. Lately I’ve really started to hate all the undefined errors you get while coding in Javascript and have become a huge fan of static analysis.

Having said that, I haven’t even considered bringing it up for Discourse because unlike ES6 which will eventually just be Javascript, it is quite different and the benefits have to be proven. It’s so easy to show why ES6 changes are awesome and help productivity today but it’s a harder sell to adding optional typing.

Still, you never know. I am more focused on porting all our ES5 code to ES6 right now. Once that is done I might give it another look.


Revisiting moving to TypeScript
(Jeff Atwood) #7

Note the name of this changed to https://babeljs.io/


(Erick Guan) #8

Performance impact:

http://www.incaseofstairs.com/2015/06/es6-feature-performance/