Is it time to remove the babel ‘fish’ from your node project?

At 22seven, we’ve made the decision in the past to transpile some of our Node projects with Babel, which allowed us to use modern JavaScript syntax.

With the latest Node currently supporting the majority of the ECMAScript 2015 (ES6) specification, we realised that we didn’t need transpile to ES5 anymore.

Transpilation isn’t great. It’s a necessary evil in some scenarios, but avoid it if you can. It adds quite a lot of overhead in terms of compilation, source-maps, and other debugging headaches. And it’s nice to run the same code in production that you actually wrote!

So… over the festive break, which is a quieter time for our company, we decided to give it a bash.

Good news everyone!

Within a couple of hours the app was up and running with no transpilation, Woohoo!

So what did we have to change? Not much:

• import syntax to require, fyi destructing does work with require

// with transpilation
import { createStore } from 'redux';
// without transpilation
const { createStore } = require('redux');

• export syntax to module.exports

// with transpilation
export default function sayHello() {}
// without transpilation 
module.exports = function sayHello() {}

• trailing commas (comma dangling) on function parameters have to be removed

// with transpilation
function sayHello(
  name, 
  surname,
) {}
// without transpilation 
function sayHello(
  name, 
  surname
) {}

And that was it. If you know your way around macros or regex it may be even quicker. Visual Studio Code and Atom both support multi-location editing, which also works like a charm.

Will it be that easy for you? It depends how much non ECMAScript 2015 (ES6) syntax you are using, I have seen some developers using async syntax already. If you do, I suggest using co which simulates async code (reading top down) and removes nesting callbacks, it also uses promises, which puts your code in a good place for async when it does become available.

While we are going to miss import as we do use it on our React Native projects, it does seem like we were a bit early to adopt the syntax.
It looks like it will only be confirmed in ECMAScript 2017.

For a more detailed breakdown on the exact support of the ECMAScript specifications, check out node.green which is a Node focused version of the famous kangax’s compat-table

If you are feeling adventurous, you can enable ‘Staged’ and ‘In progress’ flags for node to get some the ECMAScript 2016+ features, see nodejs for more details.

Apologies for the weak Futurama and Hitchhiker’s guide references :)