From Coffeescript to ES2015

Posted by Kevin Soltysiak on May 19, 2015 Topics: javascript, ES2015, and CoffeeScript

Not unlike many Rails developers, these past few years I have done most of (if not all) my javascript development in CoffeeScript. When I started working with deliver.ee back in last September, the team had already settled on using pure javascript, and it was a source of frustration at the beginnings: I was so used to CoffeeScript that the syntax of vanilla javascript kept getting in my way.

Lint all the way

While the concepts of both languages are mostly the same (as could be expected), javascript has a more verbose syntax, particularly when it comes to brackets, commas and semicolons. That's where all the pain was: not forgetting them everywhere.

It comes back with practice, of course, but there is one thing you can do to ease the transition: use a linter! Most editors/IDEs have a way to interface with one so you don't even have to leave your editor. In my case, Sublime Text 3 + SublimeLinter + SublimeLinter-JsHint (+ ES Next for syntax coloring) was all I needed: I knew right away when and where I forgot something. No more checking the terminal output to see what was missing!

ES2015 for CoffeeScripters

If you forget about the commas, semi colons, brackets and indentations, most of CoffeeScript ideas made their way into ES2015. Here's a few:

Fat arrows

ES2015 has the same fat arrow as CoffeeScript, with the same semantics: it does not change this like regular functions can sometimes do.

Better object literals

There is a shorthand syntax for objects where the name of the key is the same as the name of the variable in CoffeeScript. ES2015 also does that, and goes a bit further:

String templates

This is how ES2015 calls interpolations in strings, and how it finally allows multilines strings:

There is also tagged template strings in ES2015, but I will not cover them in this article. If you're interested, you can read about them here: http://updates.html5rocks.com/2015/01/ES6-Template-Strings

Classes

Both languages allows you to use an OO-friendly way of declaring classes, and in both cases it's nothing but sugar for the prototype-based inheritance, assuring backwards compatibility.

De-structuring

Both languages allow you to use pattern matching for variables assignments and arguments passing in functions declarations or calls in pretty similar ways. Be careful about the splat operator though: it comes BEFORE in ES2015 and AFTER in CS.

What else ?

Not every idea in CoffeeScript made its way into ES2015, sadly: I miss the comprehensions and the ability to use Ruby-style conditions, mostly.

But ES2015 brings lots of stuff that is not in CoffeeScript, too: iterators, new APIs, let + const... In the case of iterators, it actually clashes with CoffeeScript: the semantics of for ... of ... are different in both languages.

This kind of "conflict" should make you weight whether going with CoffeeScript is really the most viable option for your project: if it's long term, you should consider moving to ES2015 and with projects such as Babel, you can start today, even when browsers and runtime are not up to date.

If you want to know more about ES2015, there is more and more resources out there for you. I gave a talk about it not so long ago, and there's a pretty good overview on Babel's website. And if you're sticking with CoffeeScript, maybe there's some parts of the language you don't know about yet, so check out the reference.