R&D exploring the future awesome of JavaScript ES2015 now with Babel transpiler.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
code
.babelrc
.gitignore
ES2015_RubyMine.png
README.md
index.html
main.js
main.js.map
todo.txt

README.md

ES2015 (JavaScript.Next) R&D

Introducing

JavaScript is changing. Significant new syntax improvements will make it a very different looking language. Browser makers are slowly implementing the updates as you read this.

I don't want to wait. To keep current I want to learn what's coming, now. That sounds difficult, but we can use BabelJS to transpile code written in new ES2015 syntax to plain old JS that runs in any browser. You can have the future now!

Learning Specific ES2015 Features

  • const variables - global in app.js
  • default values - TimeSucker() in app.js
  • let for scoped variables - TimeSucker() in app.js
  • arrow anonymous functions - ReportTheSuck() in app.js
  • string interpolation - ReportTheSuck() in app.js
  • spread operator - setupColors() in app.js
  • class, subclass, super, static, getters, setters - user.js
  • more exist for you to discover!

Installing BabelJS for ES2015 Now

Install BabelJS in OSX Terminal with this command:

npm install -g babel-cli
npm install babel-preset-es2015

BabelJS recently refactored itself and now it's plugin based with configurations including and activating them. That's the point of the second install above. Read more about what that package set supports.

Running

Compile the entire src directory and output it to the one concatenated file. Do this by running in the project's main subdir Terminal:

babel ./code --out-file main.js --watch --source-maps

Open the Chrome Developer Tools and look at the Console seeing program results. Read the code and confirm why the run-time output is interesting.

Discover the source code that BabelJS compiles to main.js. It's fascinating how the tool's authors are leveraging JavaScript as it exists today.

Debugging

Debugging code in written in ES2015 and transpiled into plain old J/S must be horrible! Browsers are machines and don't care what the mangled output of BabelJS looks like. Programmers are human beings, and we want to read rational things. How can we possibly make any sense of original authored code and what's written after?

Don't have to, and it's wonderful.

Chrome has source-maps and BabelJS writes them. Because of that, when you open up the dev tools, you'll see your original code as you wrote it in ES2015. Set break points, single step, inspect variables. It's exactly as you want it.

Additional Reading

I enjoyed reading Luke Hoban's summary on ES2015 features.

JavaScript is based on ECMAScript-262 and if you read the formal 6th edition specification you'll learn a lot, and you might go completely mental.

Many refer to the Kangex table tracking browser compatibility.

Acknowledging

I had the great fortune of giving a talk called Measuring the Mobile Experience: The Analytics of Handheld UX at HTML5DevConf in San Fransisco in Oct 2015.

Also an attendee, I dropped in on a session by David Greenspan. His call to action was learn ES2015 now - and so I am! All of this work is a result of his influence.

Bonus

Some of this work takes advantage of the browser's User Timing API for high-resolution timers. APIs include:

performance.mark(), .measure(), .getEntriesByType()

These are applicable for a performance-monitoring system.