ES6 in Meteor

for the server and the client

JavaScript as we use it today is based on the ECMAScript 5 standard. All commonly used browsers and node.js support it. The next version of ECMAScript (ES) is going to be ES6. The final draft of the new specification has been submitted for review and consideration to the Ecma General Assembly Members (GA). The GA will vote on approving it as an Ecma standard at their meeting this month [ecmascript.org, mozilla.org]. Meteor Founder Geoff Schmidt is also part of the GA, representing the Meteor Development Group [ecma-international.org]. In this article you’ll learn how to set up Meteor to use ES6 today.

Enabling ES6

Eric Elliott wrote this article about using ES6 for isomorphic JavaScript apps. He suggests using the babel.js transpiler.

Babel.js is a great tool that lets you transpile your ES6 code into ES5 code that runs in today’s JavaScript environments, including Node.js and browsers, but it isn’t obvious how to get it set up.
— Eric Elliott

With Meteor, you are in luck because it is quite simple to get it set up. There is already a package called grigio:babel on Atmosphere which includes babel. It also comes with core-js, which is a polyfill library. Simply install it with

meteor add grigio:babel

Files in your Meteor app with the extensions es6.js, es6 or jsx will be picked up by the package and transpiled to ES5 automatically. This enables you to use ES6 today, without worrying about backwards compatibility. So, let’s see how Meteor code looks in ES6.

Example

You can use Enhanced Object Literals to define your helpers more concise. This example also uses Arrow Functions. You may have noticed the lack of var statements as well. Using const and let instead.

This is just a small demo to give you an idea of ES6 in Meteor. The best resources to look up ES6 features are this repository by lukehoban and the Babel docs.

Source Maps

Babel also supports Source Maps. This means that errors can be traced back from transpiled ES5 code to their origin in the ES6 code as shown in the example below.

As you can see, the error is traced back to the actual places.jsx file, with the original line number and character position.

Linting

To lint your code, you should install ESLint. The babel-eslint parser extends ESLint to support ES6 and parts of ES7 today.

$ npm install -g eslint babel-eslint

This is a basic configuration file for ESLint that should be placed at the root of your Meteor apps directory. It must be named “.eslintrc”. It is crucial to set the parser to babel-eslint as you can see in line 7. This will enable ES6 features.

You can find more information on linting in Eric Elliott’s article.

Editor Integration

I use Sublime Text 3 for development. To get syntax highlighting, you have to install syntax definitions for ES6 using Package Control. I use babel-sublime for this.

My code is linted directly in Sublime Text using SublimeLinter and SublimeLinter-contrib-eslint. Having immediate feedback really speeds up the development process.

Drawbacks

Some ES6 ES7 features aren’t available yet. These drawbacks are related to Meteor using ES5 itself. In my experience, these were not an issue in day-to-day development. For the sake of completeness, I’ll mention them anyways:

import / export #9

This is not really a problem with Meteor, as variables are available to you through its own dependency system. No need to import / export anything. Although I would really love seeing MDG switch to this style.

Number #5

Currently, you can not use the Number constructor in your Meteor code because it would malfunction in Meteors internal checks. That’s why this package ships with a modified version of core-js that lacks the number constructor [commit, issue].

TL;DR

• add grigio:babel to transpile ES6 to ES5
• write ES6 code in .jsx files
• Use ESLint instead of JSLint / JSHint
• Number constructor and import / export statements are not available yet

Updates

• I released an article showing examples of ES6 in Meteor, you can read it here.
• ES6 has now been released.