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.

UPDATE: The GA has now approved ECMA-262, which is the language specification of ECMAScript 6 (ES6) [infohq].

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.

UPDATE: As of Meteor 1.2, you should use the official ecmascript package instead of the now deprecated grigio:babel. I updated the article accordingly.

grigo:babel (deprecated)

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.

ecmascript

This package by the Meteor Development Group replaces the now deprecated grigo:babel package. It enables you to use ES6 directly in all of your .js files. Just like grigo:babel, ecmascript uses Babel behind the scenes to compile ES6 to ES5 code.

meteor add ecmascript

You should also add es5-shim, which fixes subtle bugs in all major JS engines [source]. This is sort of the equivalent of the core-js polyfill that is used with grigio:babel.

meteor add es5-shim

You should really check out the section “Official ECMAScript 2015 Support” in the upgrade guide for more information.

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.

Demonstration of Source Maps: Error from places.jsx in line 5, at char 9

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 (.js when using ecmascript package)
• 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.
• Meteor 1.2 has been released. It comes with native ES6 support through ecmascript. The previously recommended grigio:babel is now deprecated in favor of the official ecmascript package.

You can follow me on twitter: @dferber90
I tweet about Javascript, Meteor and new web technologies.