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.
Compile the entire
src directory and output it to the one
concatenated file. Do this by running in the project's main subdir
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
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.
I enjoyed reading Luke Hoban's summary on ES2015 features.
Many refer to the Kangex table tracking browser compatibility.
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.
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.