ECMAScript 6 – Playing around in Harmony

Tweet about this on TwitterShare on LinkedIn1Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

ECMAScript 6 – Playing around in Harmony

ECMAScript 6 is the next version of our favorite scripting language ECMAScript 5. The code name is “Harmony” or “ES.next”. The current version of Javascript is 1.8.5, which was upgraded around July 2010 to be compliant with ECMAScript 5 features.

You can learn more ECMAScript 5 and below versions here.

ECMAScript 6 draft specification can be found here.

ECMAScript 6 compatibility can be found here.

The tentative release date is December 2014. So, if you want to train yourself for the next major change in the world of Javascript, you need a training arena & that is what we are going to build today!

To hone your ES6 skills, lets create a playground, where you can write code in ES6 and transpile the same to ES5 to run in today’s browsers.

There are 2 ways you can get started

Clone the code

Navigate to a folder where you want to setup this code. Open terminal/prompt here and run

git clone https://github.com/arvindr21/ES6Playground.git

then

cd ES6Playground && npm install

If you don’t have Grunt already installed, run

Windows Mac/*nix
npm install -g grunt grunt-cli     sudo npm install -g grunt grunt-cli 

Then finally run

grunt

to being the watch task. Author ES6 code in src/app.js & save the code and the transpiled code will be saved to build/app.js. You can find a list of ES6 features here.

Screen Shot 2014-04-02 at 3.14.37 pm

Build the code

Create a new folder named ES6Playground. Open terminal/prompt here. Run

npm init

to create a new node project and fill up the fields as

Screen Shot 2014-04-02 at 2.51.11 pm

You can provide your details as you wish. We will be using Grunt to manage the transcompiling part. Install grunt, grunt-cli. You can read more about Grunt here.

Windows Mac/*nix
npm install -g grunt grunt-cli    sudo npm install -g grunt grunt-cli

Then we will add 2 Grunt plugins, one for watching live changes and one for transcompiling. Run

npm install grunt-contrib-watch --save-dev

then

npm install grunt-traceur --save-dev

Note : You can read more about Grunt Traceur here.

Next, create a new file at the root of ES6Playground folder and name it Gruntfile.js. And the copy the below config.

Here, we have defined a default task to watch for file changes in our src folder (which we will create now) & transpile the files live and dump it into a build folder (which will be created automatically) with the name app.js. 

Next, create a new folder named src at the root. Create a file named app.js inside the src folder.

We write our ES6 code in src/app.js and this will get transpiled to ES5 code and will be dumped into build/app.js. 

Lets create a new file index.html at the root, that will refer the build/app.js. In case you need to console log something, you can do so easily. Copy paste the below code to index.html.

Thats it! Our setup is completed. Now, lets write some ES6 Code.

You can find a list of ES6 features here. You can copy paste the examples from there to src/app.js.

Back to prompt run

grunt

This will trigger the watch task. Now, copy the below piece of code to src/app.js

and save the file. If you look back at terminal/prompt, you should see

Screen Shot 2014-04-02 at 3.11.28 pm Yup, when ever you save the app.js in the src folder, Grunt will run the Traceur task and transpile the code for you. Now, you will see a new folder named build created and it has a file named app.js. This is the transpiled code.

Screen Shot 2014-04-02 at 3.14.37 pmSweet right!

Have fun playing around with ES6.


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn1Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page