ES6: The Next JavaScript I – Setup

This is the first post of my recurring series on ES6: The next JavaScript. I will be just doing some simple programming tasks in ES6 Javascript.

What’s ES6?

Its the new Standard for Javascript. Its still in draft mode, as of writing this article. Its very important for new as well as experienced Javascript programmers to learn ES6 syntax and other concepts introduced by it, So that Javascript can be moved forward. (Yuck Legacy Code!)

Cool Features of ES6:-

  1. Its Backward Compatible: Even though its a really big change to Javascript syntax, But still your old Javascript code will continue to Work. (Huh!)
  2. New syntactic sugars: Javascript until now, didn’t have anything like classes and inheritance stuff, but we had prototypes. New ES6 classes syntax provides an excellent syntactic sugar for prototypal classes.
  3. Module System: ES6 introduces a new module system for Javascript with ‘import’ and ‘export’ keywords. (So you won’t have to use something like browserify to import one file from another, Cool!)
  4. Block Scoping: Javascript had only function scoping, but with ES6 it also gets block scoping, with the new ‘let’ keyword. It will help you to write more clean code without polluting the environment with use and throw variables that you only needed inside one for-loop etc.
  5. Promises: The thing that I am most excited about ES6 is the new Promises Support. Promises provide a mechanism to handle the results and errors from asynchronous operations. Until now, you need some external library like rsvp.js or q.js if you want to use promises.

There are many more cool features and I’ll try to get into each one of them during the course of this blog series.

The Setup

First things first, lets get that ES6 kind of Javascript running on your local machine to experiment. I will use some of the useful stuff like browserify, gulp and node.

  1. You’ll need to get a Transpiler set for ES6. I’ll be using babel. So install these things using npm like below.
  2. Once these things have completed, you need to set up a Gulpfile, to let gulp run tasks like transpiling your es6 files to usual Javascript files that browser or node can run. We need browserify to let us use modular javascript even in Browser. This is my gulp file to do all this.
  3. I have setup by directory structure like this.

Good, We are all set up. Just run gulp command, and Whatever you’ll write in ‘src’ folder will get transpiled.

Advertisements

3 thoughts on “ES6: The Next JavaScript I – Setup

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s